Question

Here is one for you jQuery Ajax wizards. Using jQuery 1.7.2 but also tried 1.5.1…

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

The main page loads an external (same domain) JS file. In the call back from the click event I do an AJAX call to login by posting the login form. Based on the parameters passed back (JSON) from the authentication call I do a .load of a some content and a navigation bar into the main document.

    $("#loginForm_submit").click(function() {
    var action = $("#loginForm").attr('action');
    var form_data = {
        sbgusername: $("#sbgusername").val(),
        sbpassword: $("#sbpassword").val()
    };              

    $.ajax({
        type: "POST",
        url: action,
        data: form_data,
        success: function(loginData){
            if(loginData.success == true){ 
                // this will be moved into a loop to laod multiple apps into one page. For testing
                // all arrays only have value
                var webapps = loginData.webapps; //array
                var webappservers = loginData.webappservers; //array 
                var webappscripts = loginData.webappscripts; //array
                var webAppContent = webappservers[0] + '  #' + webapps[0] + 'Content'; 
                // webAppContent = 'api/wpapp.cfm #wpContent';
                var webAppNav = webappservers[0] + '  #' + webapps[0] + 'Nav';
                // webAppNav = 'api/wpapp.cfm #wpNav';
                var scriptURL = webappscripts[0];
                // scriptURL = 'api/wpBase.js';
                var scriptLoad = webapps[0] + 'Load'; 
                // scriptLoad = 'wpLoad';
                $("#sbcore").load(webAppContent); //sbcore is div in main document
                $("#nav").load(webAppNav); //nav is div in main document
                $.ajaxSetup({ cache: false },{async:false});
                $.getScript(scriptURL, function(data, textStatus, jqxhr) {
                   window[scriptLoad](); //because getScript loads methods into global context from what I can tell
                });
                $.ajaxSetup({ cache: false },{async:true});
            }
            else
            {   alert(loginData.message);
                }
        },
        error: function(errorData){
            alert("Server couldn't be reached. Please Try again.");
        }

    });
    return false;               

});

The navbar loaded looks like this:

<div id="menu">
<ul>
    <li id="nw-menu-dashboard" class="first"><a href="#" accesskey="1" title="">Home</a></li>
    <li ><a id="nw-menu-privatearticles" href="#" accesskey="2" title="">Articles</a></li>
</ul>

The JS loaded by scriptLoad as scriptURL is this (note it is loaded from the same domain):

    function nwLoad() {
    //alert("nwBase.js ran");
    nwLoadMenu();
}
function nwLoadMenu() {
      //alert("here");
      $("#nw-menu-dashboard").on("click",function() { 
          //e.preventDefault();
          alert("doDashboard");
      });   
      $("#nw-menu-privatearticles").on("click",function() { 
          //e.preventDefault();
          alert("doPrivateArticles");
      });
}

So this is the weird thing, if I uncomment the //alert("nwBase.js ran"); or the //alert("here"); in the immediately above then the menus are bound to the divs and the menu click alerts work as desired. But as above with out the alerts before the bindings it doesn’t work. I’ve tried binding using .click, .live, .

I’ve tried loading synchronous, waiting etc. and can’t get it to work. Any ideas?

Answer 1

I suggest you re-try the waiting bit via a callback (instead of via setTimeout).