CODEWITHSUNDEEP
ruby-on-railsruby-on-rails-3jquery
ChrisOnRails
ChrisOnRails

Reputation: 126

Rails RJS with jQuery - Why is my page not updating?

I have an html select element with a bound javascript change event using jQuery. When a change occurs, one of a few different events could happen depending on the selected option. The initial call is made via ajax to the rails controller where the logic is handled.

One of three things are possible here:

  1. some page elements are disabled
  2. some page elements are enabled
  3. additional page elements are added

For some reason, I cannot get #3 to work! Firebug shows me the correct request and response headers and the server is telling me that the templates are being rendered successfully, yet nothing will show up on the screen. I've gone so far as to hard-code the element ID have tried simple renderings, but still no luck.

Here's my RJS file:

# IF A BUTTON DOES NOT ALREADY EXIST  
page << "if($('<%= @button_id.to_s %>').length < 1){"  

    # GENERATE THE ID OF THE DIV ELEMENT THAT I NEED TO ADD ELEMENTS AFTER  
    field_type_selector = '#q_'+@q_id.to_s+'_field_type_div';  

    # AFTER THE DIV HOLDING THE SELECT ELEMENT, RENDER THE PARTIAL THAT ADDS SOME OPTIONS AND A BUTTON  
    page[field_type_selector].after(render(:partial=>'question_builder/add_option_button_during_edit'))

# IF THE BUTTON IS ALREADY THERE  
page << "}else{"  

    # ENABLE THE ELEMENTS THAT WERE PREVIOUSLY DISABLED  
    page[@choices_div + " :input"].removeAttr('disabled')  
    page[@choices_div].removeClass('disabled')  
page << "}"`

I've tried hard-coding the element ID, rendering simple "hello world" partials, etc. and can't figure out where the problem is stemming from. Meanwhile, using the console I can very easily add elements to this same section: $('#element_id').after("
Hello, world.
)

Where else might errors be reported besides the firebug console and server terminal window? I'm stumped.

Upvotes: 1

Views: 523

Answers (2)

ChrisOnRails
ChrisOnRails

Reputation: 126

The solution to this problem wasn't obvious, but here it is:

$("#field_id").after("<%= escape_javascript(render :partial=>'folder/myPartial') %>");

Note that I had to place the entire ERB block inside quotes!

Upvotes: 2

m4risU
m4risU

Reputation: 1241

From experience it is good to use escape_javascript around render() method

so it could look:

page[field_type_selector].after(escape_javascript(render(:partial=>'question_builder/add_option_button_during_edit')))

Upvotes: 0

Related Questions