Question

In response to an event this is executed:

$.getScript('nav.php?node=' + node);

nav.php returns the following with correct headers ('Content-type: application/javascript')

$('#uis').append('<div id="app-personal-games-ui"></div>',function() {
    $('#app-personal-games-ui').load('loadhtml.php', {from: 'app.personal.games.ui'})
);
app.personal.games = function() {
    activate('app-personal-games-ui');
};
app.personal.games();

What I am trying to acheive with the above code is:

1. append a wrapper <div> for the new content to div id="uis">
2. we set an id for the div just added, now use that id as a selector and load the actual html with .load()
3. add a function to our app object. this function would make the new div visible
4. execute the function added in step 3

The results show all steps complete successfully except for #2. i.e. <div id="app-personal-games-ui"></div> is added to the correct place, and app.personal.games.toString(); in firebug shows the function is added to the object and has the correct code. But the load line does not get executed and the new div remains blank.

Why is this happening, and how can I make it work?

Answer 1

According to the documentation the .append() function doesn’t take a callback. So you may try the following:

var query = { from: 'app.personal.games.ui' };
$('<div id="app-personal-games-ui"></div>').load('loadhtml.php', query, function() {
    $('#uid').append(this);
});