Rails escape_javascript breaks javascript used in partial

Question

I'm using escape_javascript in a js.erb file in order to load a partial with AJAX :

$("#datas-user").html("<%= escape_javascript(render :partial => '/pro/users/show_partial', :locals => { :id => @user.id }) %>");

My issue is that the javascript used in my partial seems to be broken?

In my view, I have a button id="relation-contact-button" using jQuery Hide function to show a div loaded in display: none

my partial :

<div class="row">
<div class="col-xs-7">
    <div class="user_name"><%= @user.firstname %> <%= @user.lastname.chr %>.</div>
</div>
<div class="col-xs-5">
    <div id="relation-contact-button" class="btn btn-blue">Contact</div>
</div>
</div>

<div id="relation-contact" class="rows">
<div class="col-xs-12 col-lg-12">
<%= form_for :message, url: pro_messages_path do |f| %>
<%= f.label :message, :class => "search-title" %>
<div class="form-group">
<%= f.text_area :message, :rows => 2, :class => "form-control", :placeholder => "Expliquez ce que vous pouvez apporter à cette personne" %>
</div>
<%= f.hidden_field :user_id, :value => @user.id %> 
<%= f.submit "Envoyer", :class => "btn btn-blue" %>
<% end %>
</div>
</div>

my css :

#relation-contact {
display: none;

}

my js :

$("#relation-contact-button").click(function(){
    $('#relation-contact').show();
});

When I use the same code without the partial it works, with it nothing happens.

Is there a way to render my partial and keep my js working?

Thanks a lot.

F

Can you please put up the partial code? :)

Manoj Monga
– Manoj Monga

2014-01-24 15:16:05 +00:00
Commented Jan 24, 2014 at 15:16 — Manoj Monga
– Manoj Monga, Commented Jan 24, 2014 at 15:16
@ManojMonga I ve added some content, thx !

Fabien
– Fabien

2014-01-24 15:27:49 +00:00
Commented Jan 24, 2014 at 15:27 — Fabien
– Fabien, Commented Jan 24, 2014 at 15:27

Ninigi · Accepted Answer · 2014-01-24 15:58:13Z

4

This is what happens:

After your site was loaded, your js kicks in and binds the click event handler to #relation-contact-button. Then you do whatever and call your ajax handler

$("#datas-user").html("<%= escape_javascript(render :partial => '/pro/users/show_partial', :locals => { :id => @user.id }) %>");

everything inside #datas-user is removed and replaced with your partial and no event listener is bound to anything, since the element which your handler was bound to is gone. You have to either bind your handler to the newly rendered #relation-contact-button again in your ajax success handler, or use:

$("#datas-user").on("click", "#relation-contact-button", function(){
 $('#relation-contact').show();
});

instead of

$("#relation-contact-button").click(function(){
 $('#relation-contact').show();

See the .on() doc for more information.

edited Jan 24, 2014 at 15:58

answered Jan 24, 2014 at 15:44

Ninigi

1,31112 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Rails escape_javascript breaks javascript used in partial

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related