CODEWITHSUNDEEP
javascripthtmlajax
hahaha
hahaha

Reputation: 1037

Why does the second loop execute before the first loop?

so this might be a repost, but I don't really know how to explain my second problem. I have this code:

var paragraphsArray = new Array();
function setParagraphs(offSet) 
{
    offSet = offSet * 12;
    for (var i = 1; i < 13; i++) 
    {
        var parX = i + offSet;
        var testASd = $.get('php/entryParagraphs.php', {idd: parX}).done(function(paragraph) 
        {
            //clear paragraph1 div 
            document.getElementById("paragraph1").innerHTML = "";
            //create p elements
            var pElem = document.createElement("p");
            pElem.setAttribute("id", "pEntry"+i);
            document.getElementById("paragraph1").appendChild(pElem);
            $("pEntry"+i).text(paragraph);
        });
    }
}

edited: I removed the second loop because it was unnecessary, for some reason the p element creation starts on i==13, which is the extra one that shouldn't even do.

for some reason the second loop executes first, so the paragraphArray is printed out as undefined. I managed to "fix" the order with the setTimeout() function, BUT I still get the undefined message, instead of the value. In the first loop the value is printed out fine, but if I try and put it in a $("p").text(paragraph); I also get undefined. So although I was right about the execution order, the problem is still there!

Upvotes: 0

Views: 235

Answers (3)

Manoj Yadav
Manoj Yadav

Reputation: 6612

Because first is in ajax call, declare paragraphsArray in global space and use a callback function, try this:

*Updated

var paragraphsArray = [];
function setParagraphs(offSet) {
    offSet = offSet * 12;
    var request = 0;
    for (var i = 1; i < 13; i++) {
        var parX = i + offSet;
        var testASd = $.get('php/entryParagraphs.php', {idd: parX}).done(function(paragraph) {
            request++;
            paragraphsArray[request] = paragraph;
            console.log(paragraphsArray[request]);
            if (request === 12) {
                alert('first');
                callback();
            }
        });
    }
}
function callback() {
    for (var i = 1; i < 13; i++) {
        console.log(paragraphsArray[i]);
    }
    alert('second');
}

Upvotes: 1

Sharikov Vladislav
Sharikov Vladislav

Reputation: 7279

$.get is async function. 1st cycle will just send requests and wouldn't wait for response, so 2nd cycle will start right after first, without getting response of $.get function. Thats why console.log(paragraphsArray[i]); in 2nd cycle shows undefined.

You only can handle response in first cylce.

You can use $("p").text(paragraph); only like in this example: 

var testASd = $.get('php/entryParagraphs.php',  { idd: parX }).done(function(paragraph) {
    paragraphsArray[i] = paragraph;

    console.log(paragraphsArray[i]);
    alert('first');

    $("p").text(paragraph);
});

You can't use variables, which are assigned in function 

function(paragraph) {
    paragraphsArray[i] = paragraph;

    console.log(paragraphsArray[i]);
    alert('first');

    $("p").text(paragraph);
}

outside of this function.

To achieve what you want you have to use another approach.

HTML will be: 

<div id='paragraphs'>
</div>

JS code:

var testASd = $.get('php/entryParagraphs.php',  { idd: parX }).done(function(paragraph) {
    $("#results").append("<p>"+paragraph+"</p>")
});

You should use ~ this code. I just show you approach.

Upvotes: 0

Misbah Khan
Misbah Khan

Reputation: 372

Run the second loop inside of the first loop.

function setParagraphs (offSet) {
    //paragraphs
    var testing = 0;
    var paragraphsArray = new Array();
    offSet = offSet * 12;
    for (var i=1;i<13;i++) {
        var parX = i + offSet;
        var testASd = $.get('php/entryParagraphs.php',  { idd: parX }).done(function(paragraph) {
            paragraphsArray[i] = paragraph;
            console.log(paragraphsArray[i]);
            alert('first');
            for (var i=1;i<13;i++) {
                 console.log(paragraphsArray[i]);
                 alert('second');
             }
        });
    }
}

Upvotes: 0

Related Questions