Refresh a div without reloading the page

rubyonrails-talk
1

How can I refresh a particular div or a partial using onChange of a dropdown menu without reloading the page?

2

The simple answer is "with JavaScript".

If you are filling that DIV with the result of a normal RESTful route, like /widgets/2 (show) then you can do something like this:

  $('widget_id_picker_dom_id').observe('change', function(evt){     new Ajax.Updater('div_to_update', '/widgets/' + $F(this), { method: 'get });   });

That's Prototype.js code, I am sure there is something similar in jQuery.

If you need a separate route for this job, then you can add that in your controller and routes.rb files, and have a more complex workflow if that is warranted.

Walter

3

Walter Davis wrote in post #1111896:

The simple answer is "with JavaScript".

If you are filling that DIV with the result of a normal RESTful route, like /widgets/2 (show) then you can do something like this:

  $('widget_id_picker_dom_id').observe('change', function(evt){     new Ajax.Updater('div_to_update', '/widgets/' + $F(this), { method: 'get });   });

That's Prototype.js code, I am sure there is something similar in jQuery.

The jQuery

4

Walter Davis wrote in post #1111896:

The simple answer is "with JavaScript".

If you are filling that DIV with the result of a normal RESTful route, like /widgets/2 (show) then you can do something like this:

$('widget_id_picker_dom_id').observe('change', function(evt){    new Ajax.Updater('div_to_update', '/widgets/' + $F(this), { method: 'get }); });

That's Prototype.js code, I am sure there is something similar in jQuery.

The jQuery -----------------

$(function() { $('#widget_id_picker_dom_id').change(function() {    # Non-AJAX update (no server request)    $('#div_to_update').html("html content here...");

   # AJAX update    $('#div_to_update').load("/url/to/retrieve/div/contents", function() {      # Optional completion handler called after loading the div contents    }); }); });

Thanks for pitching in with this. Can you show the proper way in jQuery to get the current value of the picker you're observing, as I did with $F(this) above? That's usually the critical thing with this design pattern -- you change the picker and you get unique content based on whatever value you changed it to.

Walter

5

Walter Davis wrote in post #1112372: