how to replace html in application.html.erb using ajax in rails?

Question

i try ajax inside yield, all work properly but when i implements ajax replace html in application.html.erb (layout) ajax not working and not replace html.

my application.html.erb :

<li id="header_notification_bar" class="dropdown">
  <a id="click_notif" data-toggle="dropdown" class="dropdown-toggle" data-remote="true" href="#">
    <i class="fa fa-bell-o"></i>
    <span id="notif_count" class="badge bg-warning"></span>
   </a>
   <ul id="notif_content" class="dropdown-menu extended notification">

   </ul>
</li>

<script>
  $(document).ready( function() {
    $('#notif_content').html("<%=j render 'layouts/load_notif' %>");
    $("#click_notif").click(function(){
      $('#notif_count').html("<%=j render 'layouts/notif_count' %>");
    }); 
  });           
 </script>

if ajax implements inside yield, the action in controller should add format.js and i create file with action_name.js.erb , but if in application.html.erb what should i do???

please help me, thanks before

Answer 1

Have you tried this:

 $(document).ready( function() {

    $('#notif_content').html("<%=j render 'layouts/load_notif' %>");

    $(document).on("click", "#click_notif", function(){
      $('#notif_count').html("<%=j render 'layouts/notif_count' %>");
    }); 

  });

---

Delegate

Although your question is quite obscure, the typical problem you have with ajax is that because you're loading new elements into the DOM, the JS event binders aren't able to attach the respective events

I don't imagine the code I have written will work out of the box, but it basically relies on the .delegate principle -- you select the "container" element, and delegate the events from that

Because the container is present when the DOM loads, it means you'll be able to get it to work with the new elements. You really need to provide your AJAX code to help us create a better answer