Question

I have an html site that doesn’t have page changes. It just loads different elements into each position on the page using ajax calls. I need my login function to run after the page is loaded the first time (because it requires elements on index to exist), but when I use $(document).ready(login), it fires every time an element is loaded (since it loads elements onto the page, it gets stuck in an infinite loop). Other than placing it at the bottom of my index page (which seems pretty fragile) is there a way to make it load after the index page is finished loading, but not have it run everytime an ajax request adds something to the page?

My login function looks like this:

function login ()
{
    if($.cookie('employee'))
        employee = $.cookie('employee');

    if(employee && !employee.login)
        $("div.middle").load('login.html');
    else
            $("div.middle").load('main.html');

}

function logout ()
{
    //FIXME send a logout request to server to end session also
    employee = null;
    $.cookie('employee', null);
    $("div.middle").load('login.html'); 
}

and my initial ready function looks like:
//Global variables
var employee = new Object;

$(document).ready(function(){
        $("div.leftColumn").html(buildLeftNav());
        //set height of middle if height of leftColumn is less than height of middle
        if($("div.leftColumn").css('height') < $("div.middle").css('height'))
            $("div.center").css('height' , $('div.middle').css('height'));




        //handle login and logout
        $.cookie.json = true;
        login();


    });

I have set up a fiddle to illustrate: http://jsfiddle.net/uZVP4/

Answer 1

Your problem likely lies not in document.ready but that you are likely loading the same script over and over in the AJAX calls. Since script automatically loads new content, it is creating an infinite loop of load new content which causes new content to load again..over and over.

If you must keep the scripts in remote pages you could use $.get which will not execute scripts within ajax content