Imagine a typical web application. You searched for something. The search result produced ten thousands results. However only first 50 results are shown. You are also being presented link to delete all the records. I call this act on result pattern. You are presented with a small subset or result and you have the opportunity to act on the result.

Acting on the result could be anything like deleting all the found records, exporting the data or sending email to all the found users. The pattern is same.

One way to handle act on result is to retrieve all the matching ids and store these ids somewhere. And then delete records when user click on delete all records. It could potentially mean retrieving tens of thousands of records and storing the ids somewhere. This is not a very good solution.

Another way to handle this case would be to store sql query instead of storing the result. When user clicks on delete all records then sql query is executed and ,this time, all the matching records are deleted.

In order to store the sql query in a transparent manner, the initial search request should be an AJAX request. In this way the final sql query can be stored in the browser. Next time when user clicks on delete all records then that sql query can be easily retrieved.

With jQuery making an AJAX request is easy. However the question is how to serialize all the input fields and their values and how to store it. This is where jQuery form plugin comes in handy . This plugin makes it real easy to submit a form using AJAX. jQuery form has a helper method called formToArray which captures all the form input fields and their values in an array. This array can be safely stored before the form is actually submitted.

Code

Let’s assume that you have a typical form. First step is submitting the form through AJAX. jQuery Form makes it really easy. Given below is how you can submit a form using AJAX.

$(document).ready(function() {

	function handleSuccess(json, statusText) {
	  $('#spinner').hide();
	  /* do something with json */
	}

	function preSubmit(formData, jqForm, options) {
		$('#spinner').show();
		return true;
	}

	var options = {
		beforeSubmit: preSubmit,
		success: handleSuccess,
		dataType: 'json'
	};

	$('#form').ajaxForm(options);

});

In the beforSubmit callback all the input fields for the form should be stored. This could be done like this.

function preSubmit(formData, jqForm, options) {
  ..
  $('#form').data('form_data', formArray);		
  ..
}

As you can see before the form is submitted, all the input values are stored with key form_data .

Now user is presented with a link to delete all records. If user clicks on that link then form will be submitted to same url but this time there would additional parameter act_on_result_action which will tell that all the matching records should be deleted.

$('#delete_all').live('click', function() {

	var formData = $('#form').data('form_data');
	formData.push({
		'name': 'act_on_result_action',
		'value': 'delete_all'
	});
	var parameterizedData = $.param(formData);
	
	$.ajax({
		url: $('#form').attr('action'),
		type: 'post',
		dataType: 'json',
		data: parameterizedData,
		success: function(json) {
		  $('#results').text(json.success);
		}
	});

	return false;
});

As you can see using jQuery Form and the technique mentioned above makes it really easy to implement act on result requirements.