How to load and then replace that content after specific time via ajax?

debugcn Published at Dev

Anand Pilania

I have a problem with ajax :

Scenario is : onclick "triggre", load content from first div of "noti.html" via ajax into "#topNoti" and after that change/replace this loaded content after specific time with second div of "noti.html" and so on until the last div content is not loaded.

noti.html:
  `  ....
     <div id="inq">
     <div id="div1">This is first div</div>
     <div id="div2">This is second div</div>
     <div id="div3">This is third div</div>
     <div id="div4">This is fourth div</div>
    ...
     <div id="div24">This is last div</div>

     </div>
    ...

#topNoti:
    <div id="topNoti"></div>

Thanks and regards

Currently i used :

$(".trigger").click(function(){
var index=1;
$m=$("#inq").find("div"+index);
setInterval(function(){
$("#topNoti").load("noti.html",$m);
index=index+1;
If(index==25){ index=1; }
},10000);
});

But this code load all div. can anyone give me solution to load "div" one by one

I just modify my script n with this i can do what i want. Code is:

 Var index=0;
 SetInterval(function(){
 $("#topNoti").load("noti.html #div"+index);
 index=index+1;
 If(index==25){index=0;}
 },2000);

So, can anyone improve this code...

Thanks n regards

Rajesh Kumar

Use following code:

http://jsfiddle.net/GbQzh/

var index = 0;
var count=$("#topNoti div").length;
$("#topNoti div").hide().eq(index).show();
setInterval(function() {
     $("#topNoti div").hide().eq(index).show();
     index = index + 1;           
     if (index == count) {
         index = 0;
      }
}, 1000);

Collected from the Internet

Please contact [email protected] to delete if infringement.