UPDATE: For the people of the f u t u r e, it wasn't a syntax problem. As I originally suspected, there was a problem loading the html template properly and the checkbox update was running before it had finished. So if it seems as though the element you're looking for isn't there, well that just might be the case. AsyncJS
ORIGINAL: Okay, I thought I was better than this, but I've done everything I can. I've got a simple task manager webapp. I want to set the 'checked' attribute of a checkbox input field to 'true' when the status property of my task object is 'true' after a successful get request.
Before I do this however, I inject my dynamic html using the Mustache.js template engine by calling a helper function. I created a callback function that will execute once the html is injected to avoid searching for nothing when I go to mark 'checked' to 'true'. That all looks like this:
DOM:
// AJAX call for getting current tasks
$.ajax({
url: '/tasks',
type: 'GET'
}).done(function(response, textStatus, jqXHR){
$.each($.parseJSON(response), function(i, task){
insertTask(task, function(){
if (task.status == true){
console.log("Task with status of 'true': ");
console.log(task);
console.log("Below should be the checkbox");
console.log($('body').find($('#' + task.id)));
$('#tasks').find($('#' + task.id)).prop('checked', true);
}
});
});
Template handler:
// Uses the mustache template engine to dynamically insert tasks into DOM
function insertTask(data, callback){
$.Mustache.load('templates/tasks.html', function() {
$('#tasks').mustache('main_form', data);
});
if (callback && typeof(callback) == 'function'){
callback();
}
}
Output:
When I do console.log($('#tasks').find('#' + task.id)); all I get back is the #tasks object. Even if I just search for an 'li' it returns the #task object. So obviously this sounds like the html just hasn't been injected yet. But I don't see how that's possible given that I have the callback function.
