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

Using URL hashes to control AJAX requests

Thu, 20 Oct 2011 13:53:00 -0000

Following on from my previous article here (http://www.mccran.co.uk/index.cfm/2011/10/17/Adding-hash-values-into-URLs--The-basics) this article deals with injecting Hash values into URL's and using them to power AJAX requests. Starting with the code of the previous article I'll expand it to include an AJAX request based on the Hash inserted into the URL. [More]

Adding hash values into URLs - The basics

Mon, 17 Oct 2011 15:26:00 -0000

Building a site that uses AJAX to Asynchronously import content into it? You can take advantage of the URL hash value and some of the functionality it gives you. By inserting a hash character into the URL you can pick up the string following it and use it as a value in AJAX requests. Also you can create a listener event to check for a hash being added to a URL and use that to activate your custom JavaScript. This blog entry is an intro to this process, where we deal with adding the hash value into a URL. [More]

Architectural issues with AJAX requests and user journeys

Thu, 13 Oct 2011 14:58:00 -0000

The more I use non standard ways of loading data and online content the more issues I uncover with how users can interact with a platform. Adopting new technologies to build applications is all well and good but what implications does this bring to bear on your users? How do they apply their normal usage habits to your new and differently architected application? [More]

Combining JQuery Datatable with drag and drop functions

Sun, 15 May 2011 01:10:00 -0000

The datatables JQuery plugin ( http://www.datatables.net/ ) is an incredibly powerful way of displaying tabular data and allowing the user to manipulate it without leaving the current view.

The plugin already features paging and sorting, but what if you want to extend the plugin with some other non default behaviours like drag and drop? Using a previous example ( http://www.mccran.co.uk/index.cfm/2010/4/29/JQuery-Datatables-plugin-example-using-a-server-side-data-request-coldfusion ) as a starting point I thought I'd try and integrate drag and drop with the datatable object. [More]

Dynamically adding markers to Google maps

Sat, 15 Jan 2011 19:24:00 -0000

Following on from a previous article I wrote about (Google maps panning the next step in my Google mapping project is to be able to add markers to a Google map dynamically.

This article deals with how to translate a location into a latitude and longitude using Google, and how to send and add markers from a database into a Google maps via a remote service, using AJAX and JSON.

There is a full example of the finished application here: Demo of dynamically adding markers to Google maps

[More]

Filtering a SELECT field using AJAX and JQuery

Wed, 22 Dec 2010 09:51:00 -0000

I've got a select form field, and I want it to change based on a search string that someone enters. Luckily for me the select field is dynamically driven from a database, so the most obvious way for me to do this is to make an AJAX post request using the string entered to amend the SQL query building the field.

This article shows you how to do this, there is a demo of the select field using AJAX here: http://www.mccran.co.uk/examples/jquery_textfilter_selectfield/

[More]

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]

How to reload a JQuery Datatables table data, using the API

Fri, 02 Jul 2010 18:38:00 -0000

Since I found the JQuery dataTables plugin, I use it quite a lot. I think it's a great way to display tabulated data, and it provides simple easy to use pagination and filtering options. I've been building an interface to manage data, and arrived at the need to reload a datatable powered table, through a JavaScript request, rather than a page reload, or external variable (Url or form). The problem with this is that if you try and re initialise a datatable into an existing datatable you get an error:


DataTables warning: Unable to re-initialise DataTable. Please use the API to make any configuration changes required.

So you cannot re initialise an existing dataTable object. Looking through the API methods there is a relatively straight forward fix.


if (typeof dTable == 'undefined') {

	dTable = $('#example').dataTable( {
	// data tables code
	"bProcessing": true,
	"bStateSave": true,
	"bServerSide": true,
etc...
	aoData.push({ "name": "pageFilter", "value": filterText });
	});
else
		{
			dTable.fnDraw();
		}

This code is basically checking if the object 'dTable' already exists, and if it is we are re drawing it, rather than using the existing object. The fnDraw() method re-draws the table, so the data is refreshed. It uses the fnClearTable() method to first clear an existing data set, and the re draws it. As an aside the 'filterText' value is a JavaScript value set elsewhere (a select field) that I am sending through to my server side request. It is used in a simple where clause in a query.

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.

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]

Combining persistent server side (ColdFusion) variables with client side (JQuery) values

Fri, 26 Feb 2010 17:27:00 -0000

I stumbled upon an interested dilemma recently whilst building a search engine. The results of a search are returned, and can be viewed in a list or thumbnail view. The view toggle is a uses a JQuery function, so no persistent data is stored concerning a users current viewing option. The dilemma is how do you maintain the viewing mode across page reloads, such as for pagination, or filtering of the search results? [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

Dynamically editing web content inline, using JavaScript and AJAX

Wed, 10 Feb 2010 15:30:00 -0000
Most of us are familiar with the standard method of displaying data in a tabulated fashion, selecting a record, and populating the form that follows. What about editing the content directly into a template that mirrors the actual live version of a page? This article examines how to edit web content directly inline, and commit it back to a server using an AJAX post request. The main catalyst for this is that clients that use a content management system do not often have a clear image of how their content will look online. The traditional form layout for entering text does not lend itself well to representing the actual content in the format it is display in. The aim here is to build a flexible system that allows for inline content editing, and saves it gracefully to a server based database. I will start by saying thank you to Peter-Paul Koch. His article here (http://www.quirksmode.org/dom/cms.html) on making content editable was invaluable, and a lot of this is based on his theory. We start by setting a value "editing" to false. This is the default for the page, as the user isn't editing anything when the page loads. var editing = false; if (document.getElementById && document.createElement) { var butt = document.createElement('BUTTON'); var buttext = document.createTextNode('Save'); butt.appendChild(buttext); butt.onclick = saveEdit; } function catchIt(e) { if (editing) return; if (!document.getElementById || !document.createElement) return; if (!e) var obj = window.event.srcElement; else var obj = e.target; while (obj.nodeType != 1) { obj = obj.parentNode; } if (obj.tagName == 'TEXTAREA' || obj.tagName == 'A') return; while (obj.nodeName != 'P' && obj.nodeName != 'HTML') { obj = obj.parentNode; } if (obj.nodeName == 'HTML') return; var x = obj.innerHTML; var y = document.createElement('TEXTAREA'); var z = obj.parentNode; z.insertBefore(y,obj); z.insertBefore(butt,obj); z.removeChild(obj); y.value = x; y.focus(); editing = true; getId(e) } function getId(e) { var targ; if (!e) var e = window.event; if (e.target) targ = e.target; else if (e.srcElement) targ = e.srcElement; if (targ.nodeType == 3) // defeat Safari bug targ = targ.parentNode; thisTarget = e.target.id; } function saveEdit() { var area = document.getElementsByTagName('TEXTAREA')[0]; var y = document.createElement('P'); // set the id back to the original value as the real one is destroyed y.setAttribute('id', thisTarget); var z = area.parentNode; y.innerHTML = area.value; z.insertBefore(y,area); z.removeChild(area); z.removeChild(document.getElementsByTagName('button')[0]); editing = false; // action the server request, first var is the value, second var is the id saveToServer(y.innerHTML,thisTarget); } function saveToServer(valToCommit,fieldname) { //alert(valToCommit); $.post("view/appeals/act_commitChange.cfm", { newValue: valToCommit, field: fieldname, appeal: intId }, function(data){ alert(data); }); document.onclick = catchIt; I wont go into massive depth on a line by line basis but Peter's article does break this down a lot. The premise is that there is a function catchit(), which will intercept any click events. It will then check that the event was triggered from a 'P' tag, which is our defining element for editable content. IE any P elements hold editable content. It will then remove the P html container, replacing it with a textarea, and re insert the P tags previous html content using the innerHTML JavaScript function. In this way we can create editable inline textareas within the framework of our page. The next step is to create a save function. The function 'saveToServer{)' take several arguments. It needs the value to commit, IE what the amended text string is, and the fieldname. Each 'P' tag has an id that I am matching to a data field. In this way if there are multiple p tags in a display they can each be attributed to a specific storage field in a database. Because we are destroying the 'P' tag when we create the textarea we need to re assign the id to it when we save. We can do this by using the JavaScript function 'setAttribute'. The setAttribute function is used to set the value of an attribute on an object. It is typically used along with objects returned by document.getElementById to assign a new value to the object's attribute. // set the id back to the original value as the real one is destroyed y.setAttribute('id', thisTarget); If we don't do this then the recreated 'P' tag no longer has an id attribute, so will error on any subsequent updates. Next we use a JQuery Post function to post the values through an AJAX request. $.post("commitChange.cfc", { newValue: valToCommit, field: fieldname, appeal: intId }, This will post the values to the cfml CFC "commitChange.cfc", which handles them in a function. This will allow you to perform seamless inline edits to the display layer, and commit them back to a server, so they are stored in real time. There is an example of this here. (Minus the storing). You can track the AJAX post using a tool like charles http proxy, or firefox's firebug. Now, to write a nice JQuery response handler to fade the returned massage in and out.