Here is the current code I have, this generates a list of 'teams' I have in my database to print to the page. Please note the HTML code is written using .jade's template, but it is easy enough to understand what is happening
Team.jade
div.teamList
form.form-horizontal(action='/team', id="teamForm")
div.control-group
label.control-label(for="teamId") Team Id:
div.controls
input#teamId.input-small(type="text")
div.control-group
label.control-label(for="teamName") Team Name:
div.controls
input#teamName.input-small(type="text")
div.control-group
div.controls
button#teamUpdate.btn.btn-primary.btn-mini(type="submit", value="Update Team") Update
div.control-group
label.control-label(for="newTeamName") Enter new team:
div.controls
input#newTeamName.input-small(type="text")
div.control-group
div.controls
button#teamConfirm.btn.btn-primary.btn-mini(type="submit", value="Save Team") Submit
br
div.teamList(style='border: none; background: #cecece; color: #1a1a1a; padding: 4px; width: 400px; height: 315px; overflow: auto;')
include showTeams
showTeams.jade
div#teamListDiv
- if(allTeams.length > 0){
table
thead
tr
th Name
tbody
tr
td
- each team in allTeams
include teamDisplay
- } else {
h3 No teams till now..
- }
teamDisplay.jade
div.teams(id="team-#{team.key}")
p #{team.name}
At the moment this will generate a list of all the teams in the database when showTeams is ran. The teamDisplay file will generate a new div for each team with the key as the name of the div.
Instead of generating p #{team.name} inside the div, I want to generate a link, which is easy enough to do. But when the link is clicked, I want the teamId and teamName textboxes to be filled with the corresponding data.
I have this in team.js:
Team.initIndexPage = function(){
$('#teamConfirm').click(function(){
submitTeam();
});
submitTeam = function(){
// frontend sends data - backend parses the data
var teamForm = {
name : $('#newTeamName').val()
};
// Basic validation
$.post('/save/team', {'teamForm' : teamForm}, function(response) {
console.log(response);
});
};
};
As you can see I am referring to #teamConfirm to submit a new team, so my question is...how would I refer to a situation where ANY of the team links are clicked...that it fills the textboxes with the correct data?
Any help appreciated.
I'm not sure I 100% followed everything you said - but it doesn't seem like your issue has much to do with node/mongo, and its more of a front-end javascript problem. If you want to keep track of which link is being clicked you can use javascript's 'this' context.
So if you gave all of the links a common class name and changed your code in team.js to work something like this:
$('.teamLink').click(function(){
submitTeam($(this)); // $(this) keeps track of the actual link that was clicked.
});
You could then grab that context in submitTeam() and use it to manipulate the element however you'd like.