# Refresh a div without reloading the page

**URL:** <https://www.ruby-forum.com/t/refresh-a-div-without-reloading-the-page/245517>\
**Category:** Rails\
**Created:** [June 10, 2013, 12:55pm UTC](https://www.ruby-forum.com/t/refresh-a-div-without-reloading-the-page/245517 "2013-06-10T12:55:01Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Rafa\_F](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/r/958977/32.png) [@Rafa\_F](https://www.ruby-forum.com/u/Rafa_F)\
**Post date:** [June 10, 2013, 12:55pm UTC](https://www.ruby-forum.com/t/refresh-a-div-without-reloading-the-page/245517/1 "2013-06-10T12:55:01Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![praveen\_b](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/p/cc9497/32.png) [@praveen\_b](https://www.ruby-forum.com/u/praveen_b)\
**Post date:** [June 10, 2013, 2:56pm UTC](https://www.ruby-forum.com/t/refresh-a-div-without-reloading-the-page/245517/2 "2013-06-10T14:56:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![praveen\_b](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/p/cc9497/32.png) [@praveen\_b](https://www.ruby-forum.com/u/praveen_b)\
**Post date:** [June 14, 2013, 12:03am UTC](https://www.ruby-forum.com/t/refresh-a-div-without-reloading-the-page/245517/3 "2013-06-14T00:03:26Z")

</div>

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.

> **[Unobtrusive JavaScript](https://en.wikipedia.org/wiki/Unobtrusive_JavaScript)**
>
> Unobtrusive JavaScript is a general approach to the use of client-side JavaScript in web pages so that if JavaScript features are partially or fully absent in a user's web browser, then the user notices as little as possible any lack of the web page's JavaScript functionality. The term has been used by different technical writers to emphasize different aspects of front-end web development. For some writers, the term has been understood more generally to refer to separation of functionality (th A ...

---

<div class="post-metadata">

**Author:** ![praveen\_b](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/p/cc9497/32.png) [@praveen\_b](https://www.ruby-forum.com/u/praveen_b)\
**Post date:** [June 14, 2013, 9:22am UTC](https://www.ruby-forum.com/t/refresh-a-div-without-reloading-the-page/245517/4 "2013-06-14T09:22:33Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![praveen\_b](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/p/cc9497/32.png) [@praveen\_b](https://www.ruby-forum.com/u/praveen_b)\
**Post date:** [June 14, 2013, 1:43am UTC](https://www.ruby-forum.com/t/refresh-a-div-without-reloading-the-page/245517/5 "2013-06-14T01:43:42Z")

</div>

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