0

To be precise:

for(var i=0;i<10;i++){
    $('.mov_c').append('<div class="move_1" id="vid_c_'+i+'"></div>');
    $('#vid_c_'+i).append('<div class="move_2"></div>');
    $(".move_2").load("cntent.html", function (){
        $('#theelement').attr("id", "id_"+i);
    });
}

cntent.html:

<div class="theelement" id="theelement"></div>

New Udate:

for(var i=1;i<10;i++){
  $(".move_2").load("cntent.html", (function (x){
     $('.#theelement').attr("id", "id_"+x);
            console.log("Index: "+x); // output values are from 1 to 10
     })(i));
  }
}

Didn't worked

Basically I want each time cntent.html is called my theelement just created id to change to i value. The problem with the way i'm doing it is that it changes the whole elements id to just id_10, But I want theelements ID to change based on for loop value, saying: element one with id of id_1, element two with id of id_2 and so on.

Regards

user3596474
  • 59
  • 8
  • 1
    can you show us your HTML. and let us know what you are exactly trying to achive? You are making 10 AJAX calls => loading content in certain DIV and trying to change id of one element. Does your "#threeelement" is in your main view or it is part of your response? – K D Jan 23 '17 at 09:00
  • from above code I don' think you will ever have 10 different `theelement` at the same time on page. Because whenever `.load` method's success callback will get called; your previously added `theelement` will get wiped out and new html element will come and sit inside `.move_2`. Please think on it – vijayP Jan 23 '17 at 09:13
  • how many element you have on your container page having class `move_2`? – vijayP Jan 23 '17 at 09:46

3 Answers3

0

It problem with async loaded data and closure. Wrap your code with IIFE to use closure in proper way

for(var i=0;i<10;i++){
    $(".move_2").load("cntent.html", (function (index){
        return function() {
            $('#theelement').attr("id", "id_"+ index);
        }
    })(i));
}
VadimB
  • 5,533
  • 2
  • 34
  • 48
  • don't know why but this doesn't even changes element ids – user3596474 Jan 23 '17 at 09:38
  • try `concole.log` before setting attrbite to ensure you have correct id here. What log shows? – VadimB Jan 23 '17 at 09:39
  • Already have it `console.log("index:"+index)` the values are from 1 to 10, – user3596474 Jan 23 '17 at 09:41
  • And what is the problem? What are you trying to achieve, could you clarify? – VadimB Jan 23 '17 at 10:11
  • Just index values are showing proper but the element id doesn't get changed at all – user3596474 Jan 23 '17 at 10:15
  • Please check this fiddle. After loading content id is changed for entire component. Seems it works as expected. Maybe you have several components with the same id? Try to find on your page. http://jsfiddle.net/vxdHs/476/ – VadimB Jan 23 '17 at 10:24
  • You forgot to add `for loop` in jsfiddle – user3596474 Jan 23 '17 at 10:30
  • Seems I gor where is the problem. Check this one http://jsfiddle.net/vxdHs/478/. I've updated description. Please check – VadimB Jan 23 '17 at 10:44
  • thousand apologies for my late reply, In your jsfiddle there is just one table `TableItemDetail` but what if you load the same table `for (i)` times and change each table id with value of `i`? I would really appreciate if you do that. – user3596474 Jan 23 '17 at 11:38
  • Currently it loads 10 times, but each new load uodates previous. Do you mean append all 10, not replace? – VadimB Jan 23 '17 at 11:53
  • Check this updated fiddle - it uses append to generate 10 tables with 10 unique Id's – VadimB Jan 23 '17 at 12:07
  • yes that is what i mean not to replace and append 10 tables, and I think you forgot to put the fiddle link? – user3596474 Jan 23 '17 at 14:00
0

Give similar class name for all elements you want to iterate. And iterate through all the elements. Use this keyword to change the id.

<div class="CONTAINER_NAME">
    <div class="COMMAN" id="a"></div>
    <div class="COMMAN" id="b"></div>
    <div class="COMMAN" id="c"></div>
</div>

$('.CONTAINER_NAME .COMMAN_CLASS_NAME').each(function(index){

 $(this).attr("id", "id_"+index);
});
vijayP
  • 11,432
  • 5
  • 25
  • 40
Skanda Mallappa
  • 111
  • 3
  • 4
-1

Can you try following way:

for(var i=0;i<10;i++){
    $('.mov_c').append('<div class="move_1" id="vid_c_'+i+'"></div>');

    var move2Div = $('<div class="move_2" data-index="'+i+'"></div>'); //defining move_2 separately with data-index holding the index value

    $('#vid_c_'+i).append(move2Div);
    $(move2Div).load("cntent.html", function (){
        var currentIndex = $(this).data("index"); //grabbing the data-index value
        $('#theelement').attr("id", "id_"+currentIndex); //updating the id with required one
    });
 }
vijayP
  • 11,432
  • 5
  • 25
  • 40
  • This can result in random behavior based on the order of execution of the callback methods. Not a good idea ... – Anton Jan 23 '17 at 09:05
  • i don't think so. counter will increment only if we get the response back. – vijayP Jan 23 '17 at 09:07
  • True, but in which order are the responses obtained? This depends on the server and on the connection to the server. There is absolutely no guarantee that the responses will be processed in the same order as the requests were made. Sure, if the order does not matter then this is a way to go. However we do not know (from the question) if the order matters or not so better assume it does. – Anton Jan 23 '17 at 09:09
  • so i guess it equally applicable to your proposed answer... ;)! – vijayP Jan 23 '17 at 09:11
  • prove it @Anton with real ajax call. – vijayP Jan 23 '17 at 09:15
  • I already given a reason. I think you haven't able to catch it...! – vijayP Jan 23 '17 at 09:21
  • @vijayP still all elements ids are id_10 no changes – user3596474 Jan 23 '17 at 09:28
  • @user3596474 - can you please responds to my comment which i written against your question? I guess it will be good if you can share complete relevant code. – vijayP Jan 23 '17 at 09:29
  • @user3596474 - have you got a chance to see this updated answer. I guess it will be helpful to you. – vijayP Jan 23 '17 at 12:03