Refresh a div without reloading the page

[Praveen BK]

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

--
Posted via http://www.ruby-forum.com/.

[Walter Lee Davis]

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

> --
> You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to rubyonrails-ta...@googlegroups.com.
> To post to this group, send email to rubyonra...@googlegroups.com.
> To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/b3b5bf9452e5197a44f7861b9e03b50b%40ruby-forum.com?hl=en-US.
> For more options, visit https://groups.google.com/groups/opt_out.
>
>

[Robert Walker]

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

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();"></select> # This is obtrusive
(i.e. inline) and doesn't belong in HTML. Separate your page structure
from behavior.

http://en.wikipedia.org/wiki/Unobtrusive_JavaScript

[Walter Lee Davis]

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

> 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

>
> 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();"></select> # This is obtrusive
> (i.e. inline) and doesn't belong in HTML. Separate your page structure
> from behavior.
>
> http://en.wikipedia.org/wiki/Unobtrusive_JavaScript
>
> --
> Posted via http://www.ruby-forum.com/.
>

> --
> You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to rubyonrails-ta...@googlegroups.com.
> To post to this group, send email to rubyonra...@googlegroups.com.

> To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/abe9683a46aa527f047e3c850e615e50%40ruby-forum.com.

[Robert Walker]

Walter Davis wrote in post #1112372:

> On Jun 13, 2013, at 6:03 PM, Robert Walker 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();