Checkbox Menu

Many of e-commerce websites use checkbox menu with bulk processing feature. Checked options show their corresponding data along with the event. When the trigger is pulled then the event is called.

Here is the reference for this task, AJAX from the jQuery docs. Now the syntax will look a bit strange, jQuery uses a lot of anonymous functions. Just play around and understand the samples and how to use them in a test project to hit your server code. Just remember if you want to write a test AJAX call that calls a web service for example use empty {} in the last line.

Before doing anything, download the jQuery file(s) from a CDN. I use Google. You can specify a version, in this case 1.7.1 or if you always want the latest and greatest, just use 1 and the latest version will be downloaded. Here’s the sample tag.

<script type=”text/javascript” src=”https://AJAX.googleapis.com/AJAX/libs/jQuery/1.7.1/jQuery.min.js“></script>

To start, get into the habit of using jQuery.noConflict(). In your .js file, once you’ve downloaded jQuery from Google, declare the noConflict…This will allow you to use other JS frameworks that like to use the dollar sign $.SomeMethod(). By default, if you just use jQuery.noConflict the $ is replaced by jQuery. For me, I use this, but you can easily use anything you like for example, in taking a look at the docs. Here’s the link

http://api.jQuery.com/jQuery.noConflict/

var SomeNameForJQuery = jQuery.noConflict();
Then in using jQuery you would use SomeNameForJQuery(“#fElementName”); for example to find some element it might seem confusing, but again, you’ll have to play around with it.

Ok, Onto the AJAX sample.

To start, insert this code in your test.js file at the top. This will determine AJAX timeouts. I’ve set it for an hour so you can play with the code without having to worry about the call timing out.

http://api.jquery.com/jQuery.ajax/
//Note the use of jQuery instead of $.AjaxSetup

jQuery.AjaxSetupetup({
timeout: 3600000 //Timeout set to one hour
});

// Sample AJAX Call

jQuery.Ajax({
type: “POST”,
url: “srvcs/Webservicename/MethodCall”, /* Take a look in the jQuery doc reference, this can be a call to a web page or a web service */
data: {}, //Empty if you’re not passing any parameters..Otherwise pass required parameters. Here is how you’d pass an array and in asp.net have the web service receive a list<String> JSON.stringify({ Parameters: ["SomeString", "SomeString", "etc", "etc"] })
contentType: “application/json; charset=utf-8″,
dataType: “json”,
async: false,
success: function(response) /* This method will be triggered if the call was successful…any data sent back comes in the parameter response. This can be called anything you like to do */
{
if (response.d && response.d.length)
{
/* Do something with the response. A good practice is to send back some data formatted in JSON. Use jQuery to parse it for you */
var ReturnedParsedJSON = jQuery.parseJSON(response.d);

/* If you can, step through the JS and take a look at ReturnedParsedJSON and what it contains…it will match the structure of your JSON response */

response.d = null; // Set up for Garbage collection
}
},
error: function(response) // If there is an error, this method will be triggered.
{
if (response.length != 0)
{
alert(“There was an error Retreiving items from the Database. Please contact your System Administrator. Error: ” + response.status + ‘ ‘ + response.statusText);
// Do whatever cleanup, rollback, test
}
response.d = null; // Set up for Garbage collection
}
});

Ok, so that might look confusing, but take a look at the hole doc. Write and test your valuable code, run when you think it’s perfect. Happy scripting.

Related posts:

1. jQuery Plug-in Development