Refresh a div without reloading the page

Rails
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 D. 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
});
});
});

Note: This is wrapped inside $(function() {}); which watches for the DOM
ready event before binding to the control widget change event. We use
Unobtrusive JavaScript these days rather than the old-style DOM event
attributes.

<select … onchange=“myFunction();”> # This is obtrusive
(i.e. inline) and doesn’t belong in HTML. Separate your page structure
from behavior.

4

Walter D. wrote in post #1112372:

On Jun 13, 2013, at 6:03 PM, Robert W. wrote:

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

$(’#widget_id_picker_dom_id’).val();
or
$(this).val();

5

On Jun 13, 2013, at 6:03 PM, Robert W. wrote:

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