Chorn Sokun's Weblog

Conquer inner fear, push it to the limit!

MonoRail & jQuery

leave a comment »

Last year I blog about using jQuery.ajaxForm() to send http post request to MonoRail action and finally it depend on JSGenerator to produce javascript and send it back to client.

But overtime I find it pretty scary using that approach:

  • It give too much control to the server – the server can generate a bunch of javascript and send off to the client sort of invade client responsibility.
  • In some scenario I even specify from the server which div element I want to render my data table in
  page.ReplaceHtml('#divId', "content_to_be_replace_from_server")
  • using approach in previous post I was not be able to ensure 100% that if I send piece of jquery script that it combine into the main DOM properly for instance I did have a form & a jQuery to confirm the form into ajaxForm but that behavior is not always reliable.

So what the deal now? well, I happen to change the strategy a while ago just haven’t got time to blog about it the solution is pretty simple “Don’t make JSGenerator your new hammer.”, Let see my simplify approach:

<div id='dlist'>
  <!-- I am going to render list of data in this div --></div>
<input type="button" value="Show data" onclick="showData();" />
<input type="button" value="Add more" onclick="addData();" />
<div id='dform' style='display: none;'>
  <!-- I am going to load form into this div --></div>

That pretty normal HTML markup right? 2 div one for display list of data second one for display form for adding more data and I also have 2 buttons to invoke client script (jQuery).

<script>
function showData(){
   $('#dlist').load( '/task/list.rails', {'status': 'incomplete'} );
}

function addData(){
   $('#dform').load( '/task/add.rails', {}, function(){
      $('#dform').show();
    });
}
</script>

Now that instead of using $.ajax I use $(‘#elementId’).load() instead because load() will inject html render by MonoRail action in the DOM and it just as native element.

Note : line 07 dform had style apply so that without having form inside it don’t occupy space in the page however one content loaded we need to set visibility for it.

For your reference the final piece of the puzzle is purely view code like this (View\task\add.brail)

<form method='post' id='taskForm' action='/task/create.rail'>
  Name: <input type='text' name='t.Name' />
  <input type='submit' value='Create' />
</form>

<!-- not inject some jQuery script along make the form submit via ajax -->
<script>
   $(function(){
       $('#taskForm').ajaxForm ({
          success: function(response){
            $('#dlist').html(response);
          },
          error: function (xhr, status, error) {} // handle error if you wish
        });
   });
</script>

Notice on line #09 : need the form to submit using ajax and line #11 the client take control where it want to place the result (list of task).

It seem like we have to write a bit more code (jQuery) but after all that the fun part of being a programmer write code that :) Hope this would help.

Advertisements

Written by Chorn Sokun

March 26, 2009 at 9:13 pm

Posted in Castle, MonoRail, Tips & Tricks

Tagged with ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: