Question

I have the following code:

$(".zalen").change(function(){
        var number = $(this).val(); 
        $('.Zaal').load('zaal'+ number +'.html');

        var storageName = "zaal" + $(".zalen").val() + '_chairs';
        var chairs = localStorage.getItem(storageName);
        if(chairs == null)
        {
            chairs = "";
        }
        var chairArray = chairs.split(" "); 
        alert(chairArray);
        $("td.chair").each(function(index){
            for(var i=0; i < chairArray.length; i++)
            {
                if(index == chairArray[i])
                {
                    $(this).addClass('reserved');   
                }
            }
        })
    });

Note the alert after the split of chairs.

It works perfectly with the alert. but hen i was done with testing and removed the alert. the code stoped working and i have no clue why it does that.

Can anybody help me with this problem.

SOLUTION :

$(".zalen").change(function(){
        var number = $(this).val(); 
        $('.Zaal').load('zaal'+ number +'.html', function() {
            var storageName = "zaal" + $(".zalen").val() + '_chairs';
            var chairs = localStorage.getItem(storageName);
            if(chairs == null)
            {
                chairs = "";
            }
            var chairArray = chairs.split(" ");  
            $("td.chair").each(function(index){
                for(var i=0; i < chairArray.length; i++)
                {
                    if(index == chairArray[i])
                    {
                        $(this).addClass('reserved');   
                    }
                }
            })
        });
    });

Thank you @jbabey for your solution. Iam very gratefull

Answer 1

jquery’s load() function performs an asynchronous request for content. you need to wait until that content is ready before acting on it. when you had your alert, the code was paused for long enough for the load to finish. any code you have that relies on the content being loaded into .Zaal should be in the load’s success handler:

$(".zalen").change(function(){
    var number = $(this).val(); 
    $('.Zaal').load('zaal'+ number +'.html', function () {
        // put all of this in the complete callback
        var storageName = "zaal" + $(".zalen").val() + '_chairs';
        var chairs = localStorage.getItem(storageName);
        if(chairs == null) {
            chairs = "";
        }
        var chairArray = chairs.split(" "); 
        alert(chairArray);
        $("td.chair").each(function(index){
            for(var i=0; i < chairArray.length; i++) {
                if(index == chairArray[i]) {
                    $(this).addClass('reserved');   
                }
            }
        })
    });
});