Notes posted by gwshaw
RSS feedAlso useful without respond_with
Using the class method #respond_to allows controller-level specification of the allowed mime-types. Without #respond_with , it enables a
Completed 406 Not Acceptable
response rather than
ActionView::MissingTemplate
error when an unsupported type is requested.
See: http://www.justinweiss.com/blog/2014/11/03/respond-to-without-all-the-pain/
Ajax calls no longer whitelisted
As of Rails 3.0.4 and 2.3.11, Ajax calls are no longer whitelisted.
See: http://weblog.rubyonrails.org/2011/2/8/csrf-protection-bypass-in-ruby-on-rails/
Using an unobtrusive Ajax (UJS) :onchange call to the controller#action
An :onchange call can be made using the Rails 3 jquery-ujs helper in the form:
check_box_tag( name, value, checked, html_and_other_options)
For example:
select_tag( "my_tag_id", entity.id, class: "progress bar update_msg", disabled: disabled? data: { remote: true, url: url_for( action: :my_controller_action, id: my_id) // application symbols progress_bar: "progress_bar_div_id", update: "message_div_id" } )
The jquery_ujs looks for data-remote and data-url. These can be spelled-out or placed in the data hash. The url must be formed as select_tag does not call url_for, unlike some of the other related tags. Values for application symbols can also be passed through. jQuery triggers will work on the Ajax events that occur. This generates the following:
<input class="progress_bar update_msg" data-progress-bar="progress_bar_div_id" data-remote="true" data-update="message_div_id" data-url="/my_controller/my_controller_action/my_id" id="my_tag_id" name="my_tag_id" type="checkbox" value="4"/>
In this example, by tying into the events the program makes visible an existing hidden progress bar while awaiting a server response, and then displays a div containing a message returned by the server and hides the progress bar. If the div contains a class= for notice or error, then they will fade out.
$(".layout") .on('ajax:beforeSend', ".progress_bar", function(){ // get id of element to make visible var progress_bar_id = '#' + this.getAttribute('data-progress-bar'); $(progress_bar_id).show(); }) .on('ajax:complete', ".progress_bar", function(){ // get id of element to hide var progress_bar_id = '#' + this.getAttribute('data-progress-bar'); $(progress_bar_id).hide(); }) .on('ajax:complete', ".update_msg", function(evt, xhr, options){ // get id of element to contain message var update = this.getAttribute('data-update'); $("#" + update).replaceWith($(xhr.responseText).attr("id", update)); // cause responses with these classes to fade away... $('.notice').fadeOut(2500); $('.error').fadeOut(8000); });
Using an unobtrusive Ajax (UJS) :onchange call to the controller#action
An :onchange call can be made using the Rails 3 jquery-ujs helper in the form:
select_tag( name, option_tags, misc_html_options, html_5_data-stuff)
For example:
select_tag( "my_tag_id", get_ids(@entity), class: "progress_and_message", data: { remote: true, url: url_for( action: :my_controller_action, id: my_id) // application symbols progress_bar: "progress_bar_div_id", update: "message_div_id" } )
The jquery_ujs looks for data-remote and data-url. These can be spelled out or placed in the data hash. The url must be formed as select_tag does not call url_for, unlike some of the other related tags. Values for application symbols can also be passed through. jQuery triggers will work on the Ajax events that occur. This generates the following:
<select class="progress_and_message" data-progress-bar="progress_bar_div_id" data-remote="true" data-update="message_div_id" data-url="/my_controller/my_controller_action/my_id" id="my_tag_id" name="my_tag_id"><option value=etc...></option>
For example, tying into the events in this case the program makes visible an existing hidden progress bar while awaiting a server response, and then displays a div containing a message returned by the server and hides the progress bar. If the div contains a class= for notice or error, then they will fade out.
$(".layout") .on('ajax:beforeSend', ".progress_and_message", function(){ // get id of element to make visible var progress_bar_id = '#' + this.getAttribute('data-progress-bar'); $(progress_bar_id).show(); }) .on('ajax:complete', ".progress_and_message", function(evt, xhr, options){ // get id of element to contain message and to hide var update = this.getAttribute('data-update'); var progress_bar_id = '#' + this.getAttribute('data-progress-bar'); $("#" + update).replaceWith($(xhr.responseText).attr("id", update)); $(progress_bar_id).hide(); // cause responses with these classes to fade away... $('.notice').fadeOut(2500); $('.error').fadeOut(8000); });