CODEWITHSUNDEEP
javascriptphpjqueryhtml
dmunn
dmunn

Reputation: 1

Wait until .load() is complete

I'm currently trying to produce a web page that calls in some data via a .load event, then performs a task. I've got a div called intholder, and a PHP page that generates some output I want to place into that div. The code I've got is below:

var numCol = floor(window.innerWidth / 200);

if(numCol > 5){numCol = 5;}

var colWidth = 100/numCol;

$("#intHolder").load("/scripts/loader.php?n=" + numCol + "&w=" + colWidth);

The PHP file then generates a series of <select> elements (numCol number of them), and fills them with content from a database. Each selection box has a pre-selected value (determined by database queries), and from those, some more content needs loading on the page.

Each selection box has a unique ID (canvasSeln where n is incremented), and a value that is contains a 1 digit type designation and a text value for looking up in a database table. Finally, the initial script also generates a series of divs into which this data will go, named canvasLisn where n correlates with the selection box. Below is the javascript I've got for that:

for (var i=1;i<=$num;i++){ 

        var rawSel = document.getElementById("canvasSel" + i).value;

        var selNow = rawSel.substring(1);
        var selType = parseInt(rawSel.substring(0,1));

        if(selType == 1){
            $("#canvasLis"+ i).load("/scripts/profile.php?x=" + selNow);
        }else if(selType == 2){
            $("#canvasLis"+ i).load("/scripts/product.php?x=" + selNow);
        }else if(selType == 3){
            $("#canvasLis"+ i).load("/scripts/department.php?x=" + selNow);
        }else if(selType == 4){
            $("#canvasLis"+ i).load("/scripts/customer.php?x=" + selNow);
        }

}

I've tried putting that code into a function triggered by the initial .load callback, but it runs before the objects are painted, so it can't find the values to look up. Is there any way of forcing it to run after the .load has not only completed, but the objects have been painted?

This is the version with callback:

var numCol = floor(window.innerWidth / 200);

if(numCol > 5){numCol = 5;}

var colWidth = 100/numCol;

$("#intHolder").load("/scripts/loader.php?n=" + numCol + "&w=" + colWidth, function(){

    for (var i=1;i<=numCol;i++){ 

        var rawSel = document.getElementById("canvasSel" + i).value;

        var selNow = rawSel.substring(1);
        var selType = parseInt(rawSel.substring(0,1));

        if(selType == 1){
            $("#canvasLis"+ i).load("/scripts/profile.php?x=" + selNow);
        }else if(selType == 2){
            $("#canvasLis"+ i).load("/scripts/product.php?x=" + selNow);
        }else if(selType == 3){
            $("#canvasLis"+ i).load("/scripts/department.php?x=" + selNow);
        }else if(selType == 4){
            $("#canvasLis"+ i).load("/scripts/customer.php?x=" + selNow);
        }

    }


});

Thanks in advance.

Upvotes: 0

Views: 919

Answers (1)

Jay Blanchard
Jay Blanchard

Reputation: 34406

You say that you tried the callback but you don't show that. Have you tried this form -

$("#canvasLis"+ i).load("/scripts/profile.php?x=" + selNow, function() {
    // do stuff when load completes
});

Upvotes: 3

Related Questions