Shaun Mccran

My digital playground

08
S
E
P
2010

Jquery Rounded Corners Plugin Example - cross browser CSS replacement

A while ago I wrote an article on how to implement CSS3 and Cross browser rounded corner CSS. That article (http://www.mccran.co.uk/index.cfm/2010/7/8/CSS-3-Rounded-Corners-Example) mentions that the CSS3 code has not been adopted as a standard by some browsers (IE - I'm looking at you) but that there are some work around's to it, most of which involve re writing DOM elements using JavaScript.

This article deals with a JQuery plugin that can emulate a totally cross browser CSS3 rounded corners solution.

There is an example of the finished code here: JQuery Rounded Corners example

[ More ]

19
J
U
L
2010

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

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 ]

05
J
U
L
2010

Using the JQuery Cookie plugin to emulate server side forms

A project request recently came up where we needed to track some users responses to a series of questions, then build an account 'home' page based on those responses. Pretty straight forward you'll agree. The problem here arose from the clients using a bespoke online solution that blocked any kind of server side interaction.

I've played with JavaScript cookies in the past to remember display states in JQuery functions, so I thought they would be a great solution to this. This article deals with how to use JavaScript cookies to emulate a normal form submission.

There is a demo of using the JQuery Cookie plugin to emulate forms here.

[ More ]

02
J
U
L
2010

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

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:

view plain print about
1DataTables 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.

view plain print about
1if (typeof dTable == 'undefined') {
2
3    dTable = $('#example').dataTable( {
4    // data tables code
5    "bProcessing": true,
6    "bStateSave": true,
7    "bServerSide": true,
8etc...
9    aoData.push({ "name": "pageFilter", "value": filterText });
10    });
11else
12        {
13            dTable.fnDraw();
14        }

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.

_UNKNOWNTRANSLATION_ /