Wednesday 15 September 2010

jquery - Rails: Javascript does not work on paginated objects -


I followed Ryan Bates, and added endless scrolling on my page. Javascript works on the first ten objects (the first ten objects to load on site loading), but the problem is that javascript does not work on the rest of those objects that I scroll (paged object).

Do anyone know how I can solve this problem?

.js (This is just an example of a Dummy JS example: the first ten items will have limitations, but not the rest)

  $ - & gt; $ ("Thumbnail"). CSS "border-width": "2px"   

. CSS

 . Thumbnail (border style: solid; border color: #EE2A7C; border width: 0 pixels;}   

main_view.html .rb

Div class = "row">
<% = will_paginate @ posts%>

_singlePost.html .rb

  & lt;% @ posts.each do | p | & gt;; & Lt; div class = "row"> 
gt class = "thumbnail"> gt; p.title% & gt; / * Some other code goes here * / & lt; / div & gt; & lt; / div & gt; & lt; / div & g T

main_view.js.erb $ ('# sp') Attachments ("& lt;% = j render 'page / singlepost'%> '); $ (' endorsing '). Replacewith (' & Lt;% = j will_paginate (@posts)%>;); & Lt;% else% & gt; Deleting $ ('. Endorsement'). & Lt;% end% & gt;

Post. Here ("DATETIME (created_at) & lt; = DATETIME (?)", Time.No.) ("DASC made"). Page (param [: pg]). (10) End of page (10)

The reason for this is that JavaScript executes on page loads If elements are not present, Javascript is executed, obviously it will not be subjected to it.

I believe that your example is fabricated, because you definitely do not need it, and in this way, Javascript should not be used to implement CSS.

If you want to attach events to those elements that are present in the future, try using the event delegation. For example:

  $ ('body'). ('Click', '#some_element', function () {// ...});   

If you want to do some other stuff, keep it in a function and make sure that whenever you load new data, you execute the function. For example:

  var doSomeStuffWhenDataLoads = function (// {// whatever you want to do, apply your CSS or whatever} // do it on page load. DoSomeStuffWhenDataLoads (); // ... $ Ajax ({// ... success: function () {// page in its new data, dostomstaffed dataloadload ();}});    

No comments:

Post a Comment