|
JQuery Datatables plugin example using a server side data request (coldfusion) |
Im my previous article on how to use the JQuery datatables plug I concentrated mainly on the JQuery script, and how to build the AJAX request to receive a JSON response.
In this article I will demonstrate the full application which will include the front end JQuery, building the back end server response and a few tips that I've picked up since implementing the plugin. I am using an MS SQL table filled with UK location data that I also used for a weather webservice, to fill the table.
A full example of this working can be seen here: Data table server side example
|
Using JQuery to alter CSS properties of page elements using a checkbox form field |
I was recently writing a form where I needed to control the visibility of a div element based on a user selection. If a user checked the checkbox, then a div was to appear with related options in it. This article deals with using JQuery to alter CSS properties on the fly.
|
What does "Invalid Label" mean in a JSON response, and how can I fix it? |
I recently build an application that returned a JSON object of data based on a select field value. Whilst I was building this I encountered an error using the JavaScript eval() function on my JSON response. I am using the eval() function to parse a string from my JSON response, but firebug is showing a JavaScript error of "Invalid Label".
This is the code:
2 jsonResponse = eval(data);
3 var src = jsonResponse.DATA;
4 });
After having a Google around it appears that the eval function is interpreting the first item in the JSON response as a label, rather than data. By changing the code like this:
We are forcing eval to recognise the data as variable data. Now the JSON to string translation works.
|
Creating an image preview using JQuery and a select form field |
This article will deal with a user choosing a value from a Select field, and that selection being passed to a JQuery handler. The JQuery handler will perform an AJAX request to a CFC, which will return a JSON value (URL String) that we will use to populate an img html tag.
In this way when you select different options from the select field drop down, the image changes inline, without any page reloads.