How to replace the div in Rails 3 using AJAX?

Question

I was trying to replace my div in DOM using RJS. Here is the code i tried, The controller has this method:

def change
  render :update do |page|
    page.replace(:test_id, :partial => "input",:locals =>{ :type => 'text', :name => 'user[user][contactinfo][city]', :val => "", :size => '244', :placeholder_text => 'Yes it is working...'})
  end
end

The view contains:

<div id = "test_id"></div>
<%= link_to "AJAX", "/poc/change", :remote => true %>

Now I want to replace the div id="test_id" with the partial mentioned.

The output i get is:

try {
Element.replace("test_id", "<input type=\"text\" id=\"user[user][contactinfo][city]\" name=\"user[user][contactinfo][city]\" value=\"\" placeholder=\"Yes it is working...\" style=\"width:244px; height:33px; border:0; color:#646464; background:url(/images/form_textfield_244.png) 0 5px no-repeat; padding:12px 5px 0 5px; margin:0 0 10px 0;\" />\n");
} catch (e) { alert('RJS error:\n\n' + e.toString()); alert('Element.replace(\"test_id\", \"<input type=\\\"text\\\" id=\\\"user[user][contactinfo][city]\\\" name=\\\"user[user][contactinfo][city]\\\" value=\\\"\\\" placeholder=\\\"Yes it is working...\\\" style=\\\"width:244px; height:33px; border:0; color:#646464; background:url(/images/form_textfield_244.png) 0 5px no-repeat; padding:12px 5px 0 5px; margin:0 0 10px 0;\\\" />\\n\");'); throw e }

This is seen in browser. Can anybody explain where I am going wrong? The expected output is the div should get replaced with whatever given for replacement.

TKH · Accepted Answer · 2011-12-21 04:59:06Z

6

I advise you do not use RJS anymore. The better is generate a JS view with you want your javascript do.

By example if you use jQuery you can add a file :

changes.js.erb

Inside you add you Javascript :

$('#test_id').html("<%= escape_javascript(render :partial => "input",:locals =>{ :type => 'text', :name => 'user[user][contactinfo][city]', :val => "", :size => '244', :placeholder_text => 'Yes it is working...'}) %>")

Now if you call the /proc/change.js you can see the JS generated like if you do some JS in you page.

edited Dec 21, 2011 at 4:59

TKH

8386 silver badges11 bronze badges

answered Mar 22, 2011 at 13:32

shingara

47k12 gold badges102 silver badges106 bronze badges

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

3 Comments

Aashish P Over a year ago

What is the problem with RJS ?

tubbo Over a year ago

@AashishP RJS is deprecated and buggy, as it generates JS for you. with unobtrusive JS patterns, you write your own JS therefore you have control over your event bindings. RJS also forces you to send JS over the wire, which is a bad idea because it relies on the browser to properly execute the JS, which it never does. It's more reliable to send JSON or HTML data over the wire, then do any extra processing on the ajax:success callback. you should never send HTML and accompanying inline JS in the same response, unless you like solving $ is not defined errors...

wachichornia Over a year ago

is there anyway to also replace the id of the div??

Collectives™ on Stack Overflow

How to replace the div in Rails 3 using AJAX?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related