Replacing contents of a div using for loop in jquery

Question

I have a page containing few div tags as follows

<div id="dynamic_widget_466" class="dynamic_widget_466"></div>
<div id="dynamic_widget_468" class="dynamic_widget_468"></div>
<div id="dynamic_widget_464" class="dynamic_widget_464"></div>
<div id="dynamic_widget_462" class="dynamic_widget_462"></div>

I am trying to get all the values of these div tags into an array variable using jquery and add content to these div tags. The script is as follows

$(document).ready(function (){
    var dynaWidgets = [];
    dynaWidgets = document.querySelectorAll('div[id^="dynamic_widget_"]');
    for(var i=0; i<dynaWidgets.length; i++)
    {
        var dynaWidgetId = dynaWidgets[i].id;
        var widgetId = dynaWidgetId.substring(3).split('_')[2];
        console.log('The selected contentId  : ' + dynaWidgetId );
        $.ajax({  
            url: "${CONTEXTPATH}/widgets/dynamic-widget",
            type: "GET",
            data: {    
                contentId: widgetId
            },
            // the type of data we expect back
            dataType : "html",

            success: function( htmlData ) 
            {
                $('#' + dynaWidgetId).html(htmlData);
                console.log('The selected dynaWidgetId ' +i+ ' : ' + dynaWidgetId );
            },

            error: function( xhr, status, errorThrown ) {
                console.log( "Error: " + errorThrown );
                console.log( "Status: " + status );
                console.dir( xhr );
            },

            complete: function( xhr, status ) {
            },
        });
     }
});

Even though I am able to get the values in these divs, the content gets added only to the last div. Please help me out. Thanks in advance

use a closure. check this link http://stackoverflow.com/questions/17981631/jquery-ajax-inside-a-loop — shu, Feb 09 '16 at 07:05
Btw. why you not use classes as universal handler like "dynamic_widget", and than just $('.dynamic_widget') to select all dynamic_widget containers — Sojtin, Feb 09 '16 at 07:07

score 0 · Answer 1 · 2016-02-09T08:37:22.307

0

In jQuery:

$("#myid")[0].innerHTML = "test";

In simple JavaScript:

document.getElementById("myid").innerHTML = "test";

You can also get content of the div by calling:

var content = $("#myid")[0].innerHTML;

Or:

var content = document.getElementById("myid").innerHTML;

edited Feb 09 '16 at 08:37

answered Feb 09 '16 at 07:05

You can use HTML DOM instead of jQuery – Feb 09 '16 at 07:09
This may help you: http://stackoverflow.com/q/4069982/5287318 – Feb 09 '16 at 07:11
Umh... OP is using a valid method to get a DOM element. The problem is, that `dynaWidgetId` and `i` are not what they expect. – Teemu Feb 09 '16 at 07:15

score 0 · Answer 2 · answered Feb 09 '16 at 07:15

Problem is $.ajax is default asynchronous and the for-loop won't wait for it to complete. Since after loop the value for dynaWidgetId is always the last div id, hence only the last div gets the updates.

Try using closures:

for(var i=0; i<dynaWidgets.length; i++) {
  (function(dynaWidgetId){
   ... your rest of the code for $.ajax
  })(dynaWidgets[i].id);
}

score 0 · Answer 3 · answered Feb 09 '16 at 07:26

You can use JQuery's eq function to iterate through each div's id, please take a look at jsfiddle.net.
To use eq function, first use the JQuery selector, the result is JQuery object :

dynaWidgets = $(document).find('div[id^="dynamic_widget_"]');

Then use the eq function like this :

var dynaWidgetId = dynaWidgets.eq(i)[0].id;

Replacing contents of a div using for loop in jquery

3 Answers3