Flowdock

Notes posted by gwshaw

RSS feed
January 23, 2013 - (>= v3.0.0)
0 thanks

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);
  });
January 4, 2013 - (>= v3.0.0)
1 thank

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);
  });