Chorn Sokun's Weblog

Conquer inner fear, push it to the limit!

jQuery ajaxform generate on the fly

with 2 comments

What scripting language would come to your mind first when you begin to talk about client-side scripting (web)? Don’t tell me it is VBScript or I’ll LOL, and so your answer would be? “JavaScript” alright +1 from me :). I believe most of the programmer who is reading this post knowing/aware of jQuery.

I can extend the talk about jQuery into a series of posts but I am not gonna do that because google would give you millions of result about jQuery and it usage.

Today what I am interested to talk about is using jQuery ajax functionality in conjunction with Castle.MonoRail to generate HTML Form on the fly and the form will also has ajax functionality. What does it mean? well let us all get into application context of adding new customer. In general we are going to have a customer page /customers which list all existing customers in a table format. Additional customer can be added by clicking on Add New Customer link wired up with a javascript function.


<a href='#' onclick='addNewCustomer()'>Add New Customer</a>

and the addNewCustomer() function looks like this:

<script language="javascript"> 

function addNewCustomer(){

   $.ajax({
      dataType: 'script',
      url: '/customers/addNewCustomer'
   });

}

</script>

From the above script the web browser going to send off a request to /customers/addNewCustomer which is going to handle by an action of CustomersController. If you care to see the action code it look like this:


[Layout("default"), Rescue("generalerror")]
public class CustomerController: SmartDispatcherController
{
    .... code removed for clarity 

    public void AddNewCustomer(){

        PropertyBag["c"] = new Customer();

    }

    .... code removed for clarity

}

and the rest of the work will be left over to the view engine to find the view template file and process it. Since I am a big fan of Brail View Engine the template file would be call AddNewCustomer.brail and the code look like this:


<form id='form1' method='post' action='/customer/create'>

   Name: ${Form.TextField("c.Name")}
   Phone: ${Form.TextField("c.Phone")}
   <input type='Submit' value='Create New' />

</form>

<script type='text/javascript'>

   $(document).ready(function(){

      $('#form1').ajaxForm( { dataType: 'script' } );

   });

</script>

Again it just simple HTML markup mixed with a few Brail’s tagging macro but take a closer look at the javascript code at bottom, what does it do? Well the idea is once the template is processed it going to generate a pure HTML form and send it back to the client side, however the javascript that send along will ensure that the new generated HTML form will perform a post back via jQuery ajax functionality. Hmm, sound cool. But didn’t I just waste a bytes of data with this approach? I tell you what, this application is going to run on a LAN so bandwidth is not a problem.

Up to this point everything works perfect, except for one final click on the Submit button to save new customer and oop! look there is a post without ajax It just work as normal as any other HTML form submission. Hmm, what I had discovered was by generating form id=’something’ or whatever as long as it is not id=’form1′. The submission of the form will route through ajax weir isn’t it? I haven’t investigate into jQuery code just yet jQuery might use form1 for something else internally, do you know what it is?

UPDATE 2008-11-25:

I believe my first assumption about form id attribute which cause ajax not to fire was wrong. What I recently found was if I am not calling $(document).ready(…); in the original page the generated dom pass in even if it contain $(document).ready(…) script block that block just do nothing.

Advertisements

Written by Chorn Sokun

September 21, 2008 at 9:27 pm

Posted in OSS, Programming, Tips & Tricks

Tagged with , ,

2 Responses

Subscribe to comments with RSS.

  1. […] a comment » Last year I blog about using jQuery.ajaxForm() to send http post request to MonoRail action and finally it depend on […]

  2. Hello, i try to use ajaxForm plugin in IE, but a have problems to send data in POST. I see the problem debuging the HTTP protocol, when use ajax, this is the content-type
    Content-Type: application/xhtml+xml

    and when i use normal method, i see

    Content-Type: application/x-www-form-urlencoded

    Solution, configure explicit content type, when configure the plugin

    $('#FormProduct').ajaxSubmit({target:'#main',contentType:'application/x-www-form-urlencoded'});
    

    ulises

    May 12, 2009 at 2:19 am


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: