Blog of Shaun McCran - Architecting robust, elegant technical and business solutions - Json

JQuery AJAX Http polling example

Sun, 26 Sep 2010 19:05:00 -0000

I've been using the JQuery post() and get() functions for a while now, and thanks to decent Blog entries from other community members I've got my head around the principles of seamless AJAX http requests and response handling.

This article examines a way of creating a polling AJAX http request. This is a request that will run every N seconds based on a value. It will hit a remote service and return a result, and display that result on screen.

View a full demo of an AJAX polling request here.

[More]

Cross site AJAX HttpRequest problems and how to create a Proxy handler

Mon, 19 Jul 2010 15:36:00 -0000

Most of us are familiar with the AJAX post() and getJSON() methods of remotely calling and passing around data, I use them with abundance when building applications. One thing I had not considered until recently is that all my AJAX Http requests are usually internal to that application, which also means they are on the same server and domain. I recently jumped into a project where the application spanned 24 domains, and had been developed to use a core component library to help code re use. The problem with this arose when you are on one domain (www.domain1.com) and you want to make a request to a different domain (www.domain2.com). You encounter something called the 'same-Origin' policy. This article deals with how to create a proxy to handle cross site AJAX http Requests. [More]

JQuery Datatables plugin example using a server side data request (coldfusion)

Thu, 29 Apr 2010 18:04:00 -0000

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 [More]

What does "Invalid Label" mean in a JSON response, and how can I fix it?

Tue, 23 Mar 2010 14:36:00 -0000

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:



function(data){
	jsonResponse = eval(data);
	var src = jsonResponse.DATA;
	});

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:


jsonResponse = eval("(" + data + ")");

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

Mon, 22 Mar 2010 14:56:00 -0000

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. [More]

Using other plug-ins with the JQuery Carousel Plug-in and event issues

Mon, 15 Mar 2010 15:24:00 -0000

This entry examines how the JQuery Carousel object interacts with other Plug-ins, and how to combine those plug-ins with the Carousel functionality. I also cover an issue where the jCarousel plug-in does not apply functionality to non visible elements when the page loads. [More]

Using the JQuery dataTables plugin to display dynamic data in tables: part 1

Thu, 25 Feb 2010 12:26:00 -0000

Rather than writing out long winded table code to display your data in a tabulated fashion why not use the dataTables JQuery plugin to do it for you? In this blog entry I'll be generating tables using a JQuery plugin, but I will also be generating the JQuery code from an XML document. The theory behind the dataTables JQuery plugin is that when the template loads it makes an AJAX request to a remotely specified template. That template returns a JSON object of data which is formatted and used in a tabular display. This means that you can perfom filtering and sort functions inline, and the JQuery simply re submits the AJAX request, receiving new JSON each time. So no refreshing. I'll be dealing with the auto generation of the JSON back end in the second part of this article. Here is how I setup the tabular display. Build a standard html template, including the CSS and JQuery plugins.

Next we build our JQuery function. I wont go into massive detail about all the parameters and values being passed in here, but it is well documented on http://www.datatables.net/. $(document).ready(function() { $('#example').dataTable( { "bProcessing": true, "bServerSide": true, "sAjaxSource": "content.cfm", "aoColumns": [ { "sName": "Edit", "sTitle": "Edit", "sWidth":"10%"} , { "sName": "Band", "sTitle": "Band"} , { "sName": "Genre","sTitle": "Genre"} , { "sTitle": "Fake Column"} ], "sPaginationType": "full_numbers", "aaSorting": [[1,'asc']], "oLanguage": { "sLengthMenu": "Page length: _MENU_", "sSearch": "Filter:" } } ); } ); The really important column here is the "aoColumns" JSON data block. This specifies what fields are returned from your AJAX call, and parameters they must adhere to. In this example we are anticipating that we will receive four columns of data back (Edit,Band,Genre and Fake Column). Lastly we create a table with an ID of "example", as this is what the JQuery is looking for. This table must be formatted in a certain way, as the JQuery plugin will re write the specified elements. Edit Band Genre Fake Column Loading data from server The code also contains the header elements that will match the returned column values from the AJAX request. The last part of the table is displayed when the data is loading. This all works well, but to extend it further I have altered the code to read from an XML document. The XML document Is loaded when the template starts, and the data fields and attributes are read, and looped over to create the JQuery code and table headers. In this way it is a generic table display template, driven from an XML document. The XML doc: Edit Band Genre Fake column Read the XML file and parse it out into an Array: Use something like this to dynamically generate the JQuery and table values: { "sName": "#variables.fields[variables.index].XmlAttributes.sName#", "sTitle": "#variables.fields[variables.index].XmlAttributes.sTitle#" ,"sWidth":"#variables.fields[variables.index].XmlAttributes.sWidth#" } , #variables.fields[variables.index].XmlText# The JSON response is hard coded in this example, so the result will not filter or search. I'll handle that in article two. There is a full example of this here.

Edit	Band	Genre	Fake Column
Loading data from server

Connecting Select form fields based on data selections Pt 3

Thu, 20 Aug 2009 10:10:00 -0000
I've been exploring various methods of using JQuery to populate Select form fields. In the previous article I used an intermediary file to act as a handler for the JSON returned object. In this last article I have removed the extra handler template, interfacing directly with the CFC. Firstly there are some small changes to the JQuery url call. jQuery.noConflict(); jQuery(function () { var type = jQuery('#series'); var sp = jQuery('#issueno'); var selectedSeries = jQuery('#series').val(); type.selectChain({ target: sp, url: 'jquerySeries.cfc?method=getIssueNos', type: 'post', data: { ajax: true, returnformat: 'plain', series: selectedSeries } }).trigger('change'); }); Now we are directly referencing the CFC. Simply append the function name as a url parameter. In the "DATA" element we place the data we are passing in the form of key value pairs. This will build all the values into the JQuery url, so the final URL would be: jquerySeries.cfc?method=getIssueNos&ajax=true&returnformat=plain&series=selectedSeries At this point I was getting an parse error, until I found the 'returnFormat' value. Coldfusion will return WDDX encoded packets by default, problem was my handler was looking for Json. Adding this value will stop this. Next we have the same form as before, there are no changes at all: (here for completeness really) Lastly there are one or two small changes to our CFC function. SELECT [intIssueNo] FROM [dbo].[tbl_cn_series_issueNos] where intSeriesId = The access method has changed, so we add an "access=remote" value to expose the function as a service. Then we serialize the query result into JSON, and return it. This seems like a much more succinct way of doing this.

Connecting Select form fields based on data selections Pt 2

Tue, 18 Aug 2009 10:15:00 -0000
I want to be able to dynamically change a second select field based on the value of the first select field. Following on from the cfajaxproxy example I wrote last week, where I discovered I could not use ColdFusion 8 functionality on my live server, I have arrived at a variant solution. In this example I am using a similar JQuery url request to process the output from a CFC. The first template is the form itself. This includes references to the JQuery libraries and the binding of the response to the form elements. It also builds the url request to the 'request_processor.cfm' file, which handles the CFC. jQuery.noConflict(); jQuery(function () { var type = jQuery('#series'); var sp = jQuery('#issueno'); type.selectChain({ target: sp, url: 'request_processor.cfm', type: 'post', data: { ajax: true } }).trigger('change'); }); Next build a simple form, and populate the first select field with data from a method. Next is the intermediately file that handles the data manipulation, this is triggered when the user chooses an option from the first select field. It passes through the selected value, and returns the query object. This is then serialised using the cfJson object, to return the data in Json. If you do anything like this remember to watch your debug output, it was destroying my Json response for a good ten minutes before I remembered to turn it off. Doh! #theresults# Finally a CFC that performs the database functions. This is a pretty straight forward CFC that performs two database queries, the second based on an id passed in from the first. SELECT [intId],[varName] FROM [dbo].[table] Where intActive = '1' Order by varName SELECT [intIssueNo] FROM [dbo].[table] where intSeriesId = Once you have these elements hooked up you'll see that the response from the first select field changes the values in the second field. You can download a rar'd version of the code base here. This works well, but I'm not massively happy about the 'remote_processor' file. I think I'll see if there is a way of directly calling the CFC, and moving the JSON serialisation into the functions.

Connecting Select form fields based on data selections Pt 1

Mon, 10 Aug 2009 14:10:00 -0000
Whilst building a new form I discovered that I needed two select fields, one that contained a series of publication titles, and the second that contained the Issue numbers of whatever title was selected in the first field. IE two selects, with the first controlling the seconds data. I had a search around and it seems like there are many ways to do this, this by far seems to be the best, but it has a fatal flaw (detailed at the end). Start off by creating a function call to setup your initial state. This will set the default value of the first select field, and populate the second field with its options. var done = false; function SelectDefault(x,val) { if(!done) { var dd = document.getElementById('intId'); for(var i = 0; i < dd.length; i++){ if(dd.options[i].value == val){ dd.selectedIndex = i; } } done = true; } } Next create the form, and use the cfajaxproxy to bind the default values set above. The form itself is a pair of cfselects, with the values bound to the response from a CFC (Series). I really like the way the notation works with this, the cfc:Name . function is really intuitive. Notice how the binding on the second cfselect is passing through the value from the first 'intId' in this example. This is the argument passed to the CFC. So that is our form. The next code block is the CFC. It is a relatively straight forward CFC with two functions, each returning a list of data. The second requires an argument passed in from the cfselect above. SELECT [intId],[varName], FROM [dbo].table Order by varName SELECT [intIssueNo] FROM [dbo].table where intSeriesId = This just returns two different query objects. When this is all hooked up it works fantastically. Changing the first select changes the issue numbers in the second select. My problem lies in the fact that this is all ColdFusion 8 functionality. Both cfajaxproxy and cfselect are coldfusion server version 8 tags. My hosting company is still using version 7! Which I discovered when I rolled this code out. (doh!) So I have to find another solution, which follows shortly. N.B. Thanks to several of Ben Forta and Ben Nadel's blog posts around similar subjects for guidance on this, they got me over a few stumbling blocks.