CODEWITHSUNDEEP
ruby-on-railsrubyajaxjquery
Nielsen Rechia
Nielsen Rechia

Reputation: 649

Rails render ajax error

I've a index.html.erb like that

<div id="carte_items">
  <ul id="nav">
    <li id="category_14" class="category-group">
      <p class="category">Pizzas tradicionais</p>

      <ul class="tags">
        <li>
          <div class="links" style="display: none;">
            <a href="#" data-method="delete" data-remote="true" rel="nofollow">
              <i class="icon-trash icon-white"></i>
            </a>

            <a href="#" data-remote="true">
              <i class="icon-pencil icon-white"></i>
            </a>
          </div>
          Pizza X
        </li>

        <li>
          <div class="links" style="display: none;">
            <a href="#" data-method="delete" data-remote="true" rel="nofollow">
              <i class="icon-trash icon-white"></i>
            </a>

            <a href="#" data-remote="true">
              <i class="icon-pencil icon-white"></i>
            </a>
          </div>
          Pizza X
        </li>
      </ul>
    </li>
  </ul>
</div>

So, I've that in my products.js.coffee

$("ul.tags li").on('mouseover', () ->
 $(this).find('.links').show()
).on('mouseout', () ->
 $(this).find('.links').hide()
)

When I access for the first time my index.html.erb everything works fine. But for the links still working like in my first access, I have to copy the source in products.js.coffee to the index.js.erb bellow. Like when I use my search, that use ajax for to do the search, if I not copy the source like bellow, the ".links" does not show anymore.

Them I've the index.js.erb like that

$("#carte_items").html("<%= j(render 'carte_items') %>");
$("ul.tags li").on('mouseover', function() {
  return $(this).find('.links').show();
}).on('mouseout', function() {
  return $(this).find('.links').hide();
});

Why a have to copy the source? It does not have to work fine just with the source in the file products.js.coffee without copy to index.js.erb??

Thanks for help.

Upvotes: 1

Views: 287

Answers (2)

cortex
cortex

Reputation: 5206

From jQuery API docs:

.on()

Description: Attach an event handler function for one or more events to the selected elements.

.delegate()

Description: Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.

Delegate: "... now or in the future". So try delegate() instead of on().

Hope it works!

Upvotes: 2

sites
sites

Reputation: 21795

Try this:

$("ul.tags").delegate('li', 'mouseover', () ->
 $(this).find('.links').show()
).delegate('li', 'mouseout', () ->
 $(this).find('.links').hide()
)

or:

$("ul.tags").on('mouseover', 'li', () ->
 $(this).find('.links').show()
).on('mouseout', 'li', () ->
 $(this).find('.links').hide()
)

Upvotes: 2

Related Questions