Web 2.0 - or so it is called is the big buzzword these days. Web developers need to learn how to utilize ajax (asynchronous javascript and xml) to further evolve their websites, or face extinction. Thankfully Ruby on Rails embraces Ajax and makes developing truly 'alive' websites within a modest amount of key punching.
So - here we go, 2.0!
I initially decided to try out the function periodically_call_remote just because it sounded pretty cool. However, the API did not have an example of it in use, so I decided it best to start with something that did - thus enter:
observe_field(field_id, options = {})
Options:
- :url - for the action to call when the field has changed
- :function - instead of making a remote call to a URL, you can specify a function to be called
- :frequecny - the frequency (in seconds) at which changes to this field will be detected
- :update - specifies the DOM ID of the element whose innerHTML should be updated
- :with - javaScript expression specifying the parameters for the XMLHttpRequest
- :on - specifies which event handler to observe. default = "changed"
First, before you waste anytime let me forewarn you! I wasted nearly 30 minutes trying to get :function to work. :function is supposed to let you execute local javascript instead of making an AJAX request to some outside page. However, I had absolutely no luck with it so - for those that just skim the article:
I could not get the :function option to work!!!
Essentially all you need is the :url and :update options to get it working. The :url option tells the function where to make the request. The :update option tells the function where to put the results (presumably some <div> tag, or table with an id="sameasinupdateoption").
In my example below I am going to point my ajax request to an action in the same /user controller. And tell the results to go into a div tag. First my form and ajax method:
...start form tag...
<%= text_field 'thought', 'search' %>
..end form tag...
<%= observe_field 'thought_search', { :url => "http://www.forthecode.com/user/ajax", :update => "theupdate" } %>
The only thing I did not include in the above was the DIV tag - just be sure to have one with an id attribute = whatever you set the option :update => "" to.
So - the above sets up an active AJAX observer that watches the form field you supplied (be sure to check that your form field's id attribute is the same as you supplied - in this case my form field id is 'thought_search').
Great we have it setup, now when you call up your page you should notice in the html source something like so -
<script src="/javascripts/prototype.js" type="text/javascript"></script>
<script src="/javascripts/effects.js" type="text/javascript"></script>
<script src="/javascripts/dragdrop.js" type="text/javascript"></script>
<script src="/javascripts/controls.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
new ....your ajax method
//]]>
</script>
Don't fear - it isn't a hostile takeover of your page, instead it is Rails just pulling in a ton of helpful functions.
If you notice that your AJAX call is not doing anything check a couple of things:
Be certain ...
1) that your id values are all correct.
2) that the :url you are calling actually has a corresponding action AND view for the data to be pulled from.
Just remember that the ajax call is not pulling data straight from your controller - instead it must pull data from some other page or - you guessed it! - XML or similar file.
Well, I intended to go over the periodically_call_remote function but it will have to wait until the next post. However, you can witness it currently working on this page. Happy coding! =P