jquery | Vesica Blog

Simplifying JQuery Dialogs

Filed under: Tech Talk — Tags: art collection software, dialogs, jquery, jquery ui, museum software, vesica, web apps — Asif N @ 12:08 am

Working on a web application that uses multiple JQuery dialogs?

You’re probably sick of rendering dialog boxes with JQuery’s .dialog() function and all of its parameters.

So here’s a tiny little function that you can include in your AJAX application at the top level via a tag, and then simply call each time you need to render a dialog. So you can effectively accomplish what you need to do in one line instead of 10.

The function below requires multiple parameters:

target_class – This is the name of the class you want the dialog rendered in. It doesn’t have to exist in the DOM, the function will create it.
title – The title of your dialog
width – The width of the dialog
height – the height of the dialog
load_file – An external file or view that you want to load inside your dialog
buttons – A JavaScript array containing all the buttons your dialog needs. This array should contain a button id and button text, and can be formatted as:
buttons[0]['id'] = ‘save’ ;
buttons[0]['id'] = ‘Save this Content’ ;
buttons[1]['id'] = ‘default_cancel’ ;
buttons[2]['id'] = ‘button3′ ;
buttons[2]['text'] = ‘A 3rd Button’ ;

As shown above, you can add as many buttons as you want using an array. The function also created a default cancel button that will close and destroy the dialog if you pass the id ‘default_cancel’ to it.

Note that once you have the dialog rendered, you can use more JavaScript driven by the ID of each button to decide what happens when that ID gets clicked. This should ideally go in a JS file tied to the view or page you load into the load_file parameter of the function.

There are several ways to to tweak and improve the function depending on what you are rendering your dialogs for, so please feel free to make any changes and / or share your thoughts. If you have any questions, please don’t hesitate to ask.

/**
* Function to shorten the amount of JavaScript required to create multiple JQuery UI Dialogs
* Courtesy of Vesica
* This code is provided free of any and all warranties. Please use it at your own risk.
*/

function loadDialog(target_class,title,width,height,load_file,buttons) {
        var loading = $('');

        // Prepare the buttons parameter

    var theButtons = {};
        $.each(buttons, function(key, value) {
                if (buttons[key]['id'] == 'default_cancel') {
                        var btname = 'Cancel';
                        theButtons[btname] = {};
                        theButtons[btname]['text'] = 'Cancel';
                        theButtons[btname]['click'] = function(){ $(this).dialog("close") };
                } else {
                        var btname = buttons[key]['text'];
                        theButtons[btname] = {};
                        theButtons[btname]['id'] = buttons[key]['id'];
                        theButtons[btname]['text'] = buttons[key]['text'];
                }
        });
        $('.' + target_class).dialog('option', 'title', title);
    $('.' + target_class).load(load_file);
    $('<div title="' + title + '" class="' + target_class + '" id="' + Math.random()*1000001 + '"></div>').dialog({
                modal: true,
                open: function ()
                {
                        $(this).append(loading.clone());
                        $(this).load(load_file);
                },
                width: width,
                height: height,
                buttons: theButtons,
                close: function() {
                        $('.' + target_class).empty();
                $('.' + target_class).remove();
        }
    });

}

/**

* Function to shorten the amount of JavaScript required to create multiple JQuery UI Dialogs

* Courtesy of Vesica

* This code is provided free of any and all warranties. Please use it at your own risk.

function loadDialog(target_class,title,width,height,load_file,buttons) {

var loading = $('+ siteurl + 'images/ajax-loader.gif" alt="loading" class="loading">');

// Prepare the buttons parameter

var theButtons = {};

$.each(buttons, function(key, value) {

if (buttons[key]['id'] == 'default_cancel') {

var btname = 'Cancel';

theButtons[btname] = {};

theButtons[btname]['text'] = 'Cancel';

theButtons[btname]['click'] = function(){ $(this).dialog("close") };

} else {

var btname = buttons[key]['text'];

theButtons[btname] = {};

theButtons[btname]['id'] = buttons[key]['id'];

theButtons[btname]['text'] = buttons[key]['text'];

}

});

$('.' + target_class).dialog('option', 'title', title);

$('.' + target_class).load(load_file);

$('

+ title + '" class="' + target_class + '" id="' + Math.random()*1000001 + '">

').dialog({

modal: true,

open: function ()

{

$(this).append(loading.clone());

$(this).load(load_file);

width: width,

height: height,

buttons: theButtons,

close: function() {

$('.' + target_class).empty();

$('.' + target_class).remove();

}

});

}

Comments (0)

Tech Talk: URL Hashing and JQuery UI Tabs

Filed under: Tech Talk — Tags: art collection software, hashes, jquery, jquery ui tabs, museum software, technology, web applications, web development — Asif N @ 10:44 pm

Whilst Vesica uses JQuery, what’s discussed in this article is not used in Vesica, but in a similar application we helped build at the NHS (National Health Service) which borrows from the Vesica interface.

The application in question is a single page application, so virtually everything is done via AJAX. The URL receives different parameters via a URL hash, which updates different sections of the page DOM or accesses different parts of the interface, including JQuery UI tabs. These single page, multiple hash URLs can be called via a bookmark URL, or will trigger on a url change in the browser. What’s important to note here is that in an application like this, when you submit data, all you really need to do is change the URL – your hashing managing JavaScript should do the rest for you (in terms of routing your data to the server side, not actual processing). I’ll also show you some JavaScript to deal with JQuery UI tabs after your page loads as working with hashing will disable the default URL behaviour that allows you to call tabs via the URL.

Requirements

If it’s not self-explanatory, you need the following to accomplish this:

JQuery - http://jquery.com/download/
JQuery UI - http://jqueryui.com/
JQuery Hashchange plugin from Ben Alman - http://github.com/cowboy/jquery-hashchange/raw/v1.3/jquery.ba-hashchange.js and http://benalman.com/projects/jquery-hashchange-plugin/

Please load the JavaScript libraries in your page (preferably in the header) in the order listed.

How it works

Here is what we need to cover:

Someone either loads a URL in their browser which is part of your single page application (this could be via a bookmarked URL or by simply typing or pasting in the address bar), in which case you simply need to pick up the URL, process, and update the page.
Someone performs an action that will change the URL of your application – which should either update a database or update the page, or whatever it is supposed to do in your application.

The JQuery Haschange plugin will only help you accomplish number 2. Number 1 is simple JavaScript / JQuery.

So how does your application know that the URL in the browser has changed after the #? With the following code.

// The following line will monitor hash changes on the page this JS gets loaded into
$(window).hashchange( function(){
// If the URL has changed, any code here gets executed. For instance, you could alert something:
alert('The URL has has changed.');
});

// The following line will monitor hash changes on the page this JS gets loaded into

$(window).hashchange( function(){

// If the URL has changed, any code here gets executed. For instance, you could alert something:

alert('The URL has has changed.');

});

So if your existing URL looked like http://example.com/#Page1 and you changed it to http://example.com/#Page2 with an or a

This is the easy bit – now for how you would pick up different parts of your URL, splice them up and send them to your scripts as needed to process, and then perhaps load a JQuery UI tab on your page.

Assumptions

Let’s clarify what we have in our example.

We are trying to load a different type of product based on a type parameter, followed by an ID, followed by a bunch of parameters that style the image and options that get displayed for the product.

So, if you were using PHP and building your URL query string, it might look a bit like:

http://example.com/product.php?type=bottle&id=3426&colour=green

If you wanted to load a particular JQuery tab on this page that had the id ‘dimensions’, your URL would become:

http://example.com/product.php?type=bottle&id=3426&colour=green/#dimensions

When the page loaded, JQuery UI would know you want to load the dimensions tab and it would simply make it active.

But using the $(window).hashchange() function above will break this default JQuery UI functionality.

So, our goal, given our single page application, is to be able to reload a certain part of our page based on a URL that looks like the following:

http://example.com/index.php#product/type=bottle&id=3426&colour=green/dimensions

The way to read the above your URL is: Give me the product page with bottle No. 3426 in the colour green and display the dimensions tab on the product page. You could change any of the values above to process different data – so you could have product, category or generic types of pages, hundreds of different products and hundreds of different colours.

Sounds simple enough. This would be accomplished with the following code, and please note, as mentioned above, that to trigger this change for bookmarked URLs or those pasted in the browser you can enter this code outside the $(window).hashchange() function in a tag directly in index.php (where index.php is the file that runs your single page application) or create a another JavaScript file and include it in your index.php file via the

// The following line will monitor hash changes on the page this JS gets loaded into
$(window).hashchange( function(){

    // If the URL has changed, get the value of the URL and split up the different parts
    var postHashUrl = location.hash.substr(1); // this will return product/type=bottle&id=3426&colour=green/dimensions
    var urlParams = urlIdentifier.split('/'); // this will return an array having split up the postHashUrl at the '/', much like the php explode() function would
    var paramType = urlParams[0]; // this will return 'product'
    var paramDetails = urlParams[1]; // this will return 'type=bottle&id=3426&colour=green'
    var tabToDisplay = urlParams[2]; // this will return 'dimensions'

});

// The following line will monitor hash changes on the page this JS gets loaded into

$(window).hashchange( function(){

// If the URL has changed, get the value of the URL and split up the different parts

var postHashUrl = location.hash.substr(1); // this will return product/type=bottle&id=3426&colour=green/dimensions

var urlParams = urlIdentifier.split('/'); // this will return an array having split up the postHashUrl at the '/', much like the php explode() function would

var paramType = urlParams[0]; // this will return 'product'

var paramDetails = urlParams[1]; // this will return 'type=bottle&id=3426&colour=green'

var tabToDisplay = urlParams[2]; // this will return 'dimensions'

});

The above code now gives you access to to all the different parts of the URL hash, and will do so every time it changes. All you need to do now is use the $.ajax() function in JQuery to process this data, get the results back, and set the active tab as shown below:

// The following line will monitor hash changes on the page this JS gets loaded into
$(window).hashchange( function(){
    // If the URL has changed, get the value of the URL and split up the different parts
    var postHashUrl = location.hash.substr(1); // this will return product/type=bottle&id=3426&colour=green/dimensions
    var urlParams = urlIdentifier.split('/'); // this will return an array having split up the postHashUrl at the '/', much like the php explode() function would
    var paramType = urlParams[0]; // this will return 'product'
    var paramDetails = urlParams[1]; // this will return 'type=bottle&id=3426&colour=green'
    var tabToDisplay = urlParams[2]; // this will return 'dimensions'

    // Post the data to your server side processing script
    $.ajax({
        type : 'POST',
        url : 'my/processing/file.php', // or.aspx or whatever language you are using
        data : "type=" + paramType + "&details=" + paramDetails,
        cache : false,
        success : function(results) {
            // perhaps you want to load these results into a div with id 'myResults'
            $('#myResults').html(results);

            // Finally, if the div that contains your tabs has the id 'tabs'
            $('#tabs').tabs('select', tabToDisplay ); // this will set the active tab to dimensions
            }
    });
});

// The following line will monitor hash changes on the page this JS gets loaded into

$(window).hashchange( function(){

// If the URL has changed, get the value of the URL and split up the different parts

var postHashUrl = location.hash.substr(1); // this will return product/type=bottle&id=3426&colour=green/dimensions

var urlParams = urlIdentifier.split('/'); // this will return an array having split up the postHashUrl at the '/', much like the php explode() function would

var paramType = urlParams[0]; // this will return 'product'

var paramDetails = urlParams[1]; // this will return 'type=bottle&id=3426&colour=green'

var tabToDisplay = urlParams[2]; // this will return 'dimensions'

// Post the data to your server side processing script

$.ajax({

type : 'POST',

url : 'my/processing/file.php', // or.aspx or whatever language you are using

data : "type=" + paramType + "&details=" + paramDetails,

cache : false,

success : function(results) {

// perhaps you want to load these results into a div with id 'myResults'

$('#myResults').html(results);

// Finally, if the div that contains your tabs has the id 'tabs'

$('#tabs').tabs('select', tabToDisplay ); // this will set the active tab to dimensions

}

});

That’s it, that code should pick up any changes to the URL and process them according to the code above.

As this is JQuery, remember to wrap all of the above code in $(function(){ {); as shown below. I’ve also added the code above outside the hashchange function so you can see how to setup the default page handler as well as trigger it off when the page URL changes.

$(function() {

    // Default processing to process any data when the page loads with a hashed URL
    var postHashUrl = location.hash.substr(1); // this will return product/type=bottle&id=3426&colour=green/dimensions
    var urlParams = urlIdentifier.split('/'); // this will return an array having split up the postHashUrl at the '/', much like the php explode() function would
    var paramType = urlParams[0]; // this will return 'product'
    var paramDetails = urlParams[1]; // this will return 'type=bottle&id=3426&colour=green'
    var tabToDisplay = urlParams[2]; // this will return 'dimensions'

    // Post the data to your server side processing script
    $.ajax({
        type : 'POST',
        url : 'my/processing/file.php', // or.aspx or whatever language you are using
        data : "type=" + paramType + "&details=" + paramDetails,
        cache : false,
        success : function(results) {
            // perhaps you want to load these results into a div with id 'myResults'
            $('#myResults').html(results);

            // Finally, if the div that contains your tabs has the id 'tabs'
            $('#tabs').tabs('select', tabToDisplay ); // this will set the active tab to dimensions
            }
    });

        // The following line will monitor hash changes on the page this JS gets loaded into
        $(window).hashchange( function(){
        // If the URL has changed, get the value of the URL and split up the different parts
        var postHashUrl = location.hash.substr(1); // this will return product/type=bottle&id=3426&colour=green/dimensions
        var urlParams = urlIdentifier.split('/'); // this will return an array having split up the postHashUrl at the '/', much like the php explode() function would
        var paramType = urlParams[0]; // this will return 'product'
        var paramDetails = urlParams[1]; // this will return 'type=bottle&id=3426&colour=green'
        var tabToDisplay = urlParams[2]; // this will return 'dimensions'

        // Post the data to your server side processing script
        $.ajax({
            type : 'POST',
            url : 'my/processing/file.php', // or.aspx or whatever language you are using
            data : "type=" + paramType + "&details=" + paramDetails,
            cache : false,
            success : function(results) {
                // perhaps you want to load these results into a div with id 'myResults'
                $('#myResults').html(results);

                // Finally, if the div that contains your tabs has the id 'tabs'
                $('#tabs').tabs('select', tabToDisplay ); // this will set the active tab to dimensions
                }
        });
});
});

$(function() {

// Default processing to process any data when the page loads with a hashed URL

var postHashUrl = location.hash.substr(1); // this will return product/type=bottle&id=3426&colour=green/dimensions

var urlParams = urlIdentifier.split('/'); // this will return an array having split up the postHashUrl at the '/', much like the php explode() function would

var paramType = urlParams[0]; // this will return 'product'

var paramDetails = urlParams[1]; // this will return 'type=bottle&id=3426&colour=green'

var tabToDisplay = urlParams[2]; // this will return 'dimensions'

// Post the data to your server side processing script

$.ajax({

type : 'POST',

url : 'my/processing/file.php', // or.aspx or whatever language you are using

data : "type=" + paramType + "&details=" + paramDetails,

cache : false,

success : function(results) {

// perhaps you want to load these results into a div with id 'myResults'

$('#myResults').html(results);

// Finally, if the div that contains your tabs has the id 'tabs'

$('#tabs').tabs('select', tabToDisplay ); // this will set the active tab to dimensions

}

});

// The following line will monitor hash changes on the page this JS gets loaded into

$(window).hashchange( function(){

// If the URL has changed, get the value of the URL and split up the different parts

var postHashUrl = location.hash.substr(1); // this will return product/type=bottle&id=3426&colour=green/dimensions

var urlParams = urlIdentifier.split('/'); // this will return an array having split up the postHashUrl at the '/', much like the php explode() function would

var paramType = urlParams[0]; // this will return 'product'

var paramDetails = urlParams[1]; // this will return 'type=bottle&id=3426&colour=green'

var tabToDisplay = urlParams[2]; // this will return 'dimensions'

// Post the data to your server side processing script

$.ajax({

type : 'POST',

url : 'my/processing/file.php', // or.aspx or whatever language you are using

data : "type=" + paramType + "&details=" + paramDetails,

cache : false,

success : function(results) {

// perhaps you want to load these results into a div with id 'myResults'

$('#myResults').html(results);

// Finally, if the div that contains your tabs has the id 'tabs'

$('#tabs').tabs('select', tabToDisplay ); // this will set the active tab to dimensions

}

});

I’ve stated before that you can (and probably should) write a function to do the above so you don’t have to reproduce your code twice – but this should give you an idea of how to handle hash changes and process them.

Comments (0)

Vesica Blog - Taking museum and art collections to the cloud

March 23, 2013

Simplifying JQuery Dialogs

January 21, 2013

Tech Talk: URL Hashing and JQuery UI Tabs

January 18, 2013

Introducing Vesica Tech Talk