CODEWITHSUNDEEP
javascriptjqueryajax
absentx
absentx

Reputation: 1417

jquery slider effect on ajax generated divs

I have the following script in between the head tags on my page:

$.ajax({
  type: "POST",
  url: "my script that gets what I need",
  context: document.body,
  success: function(data){
    //data is now the value that PHP echoed
       phpsaid = data.split('|');
       var size_ind = phpsaid.length/6;
       var size_per = 6;
       for (var i_one =0; i_one<size_ind; i_one++){
          for(var i_two =0; i_two<1; i_two++){
              if(i_one == 0 ){
                  var i_get = 0
              }
              else{
                  var i_get = i_one * 6;
              }
            $("#big_container").append("<div class ='neato'><div class ='c1'>"+phpsaid[i_get]+"</div><div class ='c2'>"+phpsaid[i_get+1]+"</div><div class ='c3'>"+phpsaid[i_get+2]+"</div><div class ='c4'>"+phpsaid[i_get+3]+"</div><div class ='c5'>"+phpsaid[i_get+4]+"</div></div>")           

          }
       }       
  }
});

Then in the main body I have:

<div id ="big_container">

</div>

The ajax script above is generating the divs to go inside big_container. The client has specified that it be done strictly in that way (meaning generate all divs with ajax on the fly), so conceptual arguments of different ways to tackle it unfortunately won't help much here.

Here is my problem:

I also want to apply the following plugin to all elements of big_container. This of course works perfectly when I hard code the div elements into the page, but I cannot get it to work on the ajax generated divs within #big_container.

$(function(){
  $('#big_container').bxSlider({
    mode: 'vertical',
    ticker: true,
    tickerSpeed: 4500,
    displaySlideQty: 5
  });
});

How do I get the plugin function to apply to the ajax generated div's once they have in fact been generated?

Upvotes: 1

Views: 570

Answers (2)

Cheery
Cheery

Reputation: 16214

Insert your initialization code after $("#big_container").append("...");

It will look like

$("#big_container").append("<div class ='neato'>..and so on..");
           }
   } // the end of the 'for' loops
$("#big_container").bxSlider({
                     mode: 'vertical',
                     ticker: true,
                     tickerSpeed: 4500,
                     displaySlideQty: 5
                   });

If you call ajax again on the page and add a new content to the existing one then it is better to write the call of the bxSlider as

$("#big_container .neato:last").bxSlider({
                     mode: 'vertical',
                     ticker: true,
                     tickerSpeed: 4500,
                     displaySlideQty: 5
                   });

just after .append part

Upvotes: 1

The Alpha
The Alpha

Reputation: 146201

This is a common problem people face that elements generated by ajax (dynamically inserted in to dom) doesn't take action or notified by any of the listener or any plugin inside ready because they are not registered in the ready event. To solve this kind of problem I use a different approach like the following

$(document).ready(function(){
   myReadyFunction();
});

function myReadyFunction()
{
   $("#big_container .neato:last").bxSlider({...});
   // All other codes that normally reside inside ready event.
}

After each ajax call, upon success (if required) simply call myReadyFunction(); and in your case you can place your $("#big_container").bxSlider({...}) inside the myReadyFunction(); and call the myReadyFunction(); after successful ajax call and initially call myReadyFunction(); inside ready event too.

Upvotes: 1

Related Questions