AJAX calls are obviously asynchronous. jQuery has a ‘async: false’ option in AJAX calls but it is ignored by most (maybe all?) browsers. Using this method you can force a synchronous request and retrieve that data.

1
2
3
4
5
6
7
8
9

function myFunction()
{
    var myVariable = $.ajax(
    {
        url: 'someScript.php',
        async: false
    }).responseText;
    alert(myVariable);
}

So .responseText retrieves the text value of the response from the AJAX call. And because we’re assigning to a variable we are forcing a synchronous request. You can now use that variable as you see fit.

This causes an issue when you are trying to retrieve a JSON object from an AJAX call into the function scope. The best way I’ve found so far is to retrieve the JSON as a string and use a jquery JSON plugin to convert it into an accessible object. Or you could just use the ‘eval’ method.

Stephen.

On my first post on this blog I posted a small snippet to use a small regex pattern in jQuery selectors.

You can find the post here: http://colourgray.wordpress.com/2008/08/05/jquery-wildcard-selectors/

I was reading through some comments and posts on some incoming links and it seems it wasn’t working for anyone anymore. I just tested it myself and unfortunately it’s true (at least with with jQuery v1.3.1). However! All is not lost, there is another method which I’ve tested from one of the incoming links to that post which you can find here:

http://ropox.net/archives/1081

Cheers ropox!

Stephen.

Yesterday at one of the talks SproutCore was mentioned. I had a look today and it looks very promising. It’s a full framework designed to create full ‘thick client’ javascript applications. The core of it was written in Ruby and I haven’t looked into whether you have to know much Ruby to develop in it or not. It reminds me of symfony because you are given a number of build tools to use on the command line for creating controllers, new projects, models etc etc.

I think I’m falling in love with the general idea and it’s great to see someone has actually implemented it quite well (from the looks of it). I haven’t had the chance to try it out yet but I’m thinking of using it on a number of personal projects so we’ll see how it goes!

Then I began to think about it. We already know that a client-side MVC is possible, but I can now see why it would be useful. But it wouldn’t be the traditional MVC architecture, it would really only be VC, the view and controller layers. And that’s all it can ever really be. Javascript can never directly access the model in a web application environment.

I decided that a VC client-side system would still be useful and I’m probably going to develop one for future use. I haven’t got round to doing this yet but these are my ideas.

Firstly, looking at a few of our sites, I could quickly see that there were many javascript files being loaded per page as they were needed. The number of files could range from 5 to 10 or even more. So we need a way of dynamically loading javascript files onto the page as and when they are needed, on the fly. I initially thought that it wasn’t possible to dynamically load javascript files from within a javascript page but I Googled around a bit and when I found the solution it was painfully obvious: you simply load more tags in the section of the HTML.

So with that in mind, lets create a simple front controller. What does it need to do? It needs to have some basic configuration for the MVC; where the root of the files are etc. It needs to have the aforementioned function to load external javascript files into the current page. It needs to have an initialisation function which kicks the MVC off:

mvc.init.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

/**
 * client MVC initialiser
 */
 
/**
 * wheres are the MVC files?
 *
 * @access public
 * @var    string
 */
var MVCRoot = '/js/';
 
/**
 * initialise the controller
 */
$(document).ready(function()
{
    loadJS('mvc.controller');
    Controller.init();
});
 
/**
 * load an external js file by appending
 * script tag as child to <head> section
 *
 * @var    fileName name of file to load
 * @return bool true on success, false on no fileName given
 */
function loadJS(fileName = null)
{
    if (fileName != null)
    {
        $('<script type="text/javascript" src="'+MVCRoot+fileName+'.js"></script>').appendTo('head');
        return true;
    }
    else
    {
        return false;
    }
}

Ok most of that should make sense. The loadJS() function is fairly straight forward, it simply builds a HTML <script> tag for the new javascript file and appends it to the <head> tag of the HTML. The $(document).ready function then uses this function to ‘include’ the main controller file (which will be /js/mvc.controller.js according to the current config). Now that the init function can call methods of the Controller class it calls the main controller’s initialisation method.

As an initial idea, the main controller could start off looking like this:

mvc.controller.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

/**
 * client main controller
 */
 
var Controller = 
{
    /**
     * holds the current page's type
     * used for loading required js files etc
     *
     * @var    string
     * @access protected
     */
    var _pageType : null,
 
    /**
     * main controller init function
     * gets current page type
     * includes required js files
     */
    var init : function()
    {
        loadJS('mvc.controller.ajax');
        Controller._getPageType();
 
        /**
         * logic to include required files dependent on page
         * type etc etc
         */
        ...
    }
 
    /**
     * returns the page type for current URI
     *
     * @return void
     */
    var _getPageType : function()
    {
        var currentURI = window.location;
        Controller._pageType = ControllerAjax.getPageType(currentURI);
    }
}

Again this is mostly basic stuff and it definitely hasn’t been tested but I think the general idea is in the right direction. I think now that I can visualise how to seperate out javascript objects more clearly I can see how this would benefit a javascript heavy web site/application.

Even though web frameworks have been gaining more and more popularity over recent years I hadn’t thought of applying the same methodical approach to client side coding until my colleague suggested this idea. I think if you think about it and you’re thinking like I was, you can quickly warm to the idea as I have. Almost every day you can read a new article about how in development, we need to be separating out our different types of logic and our layers. Javascript is of course just another language, so why should it not get the same treatment?

This is the first tutorial on my blog. We’re going to start with something simple and it’s only useful if you use jQuery.

When I started using jQuery I found it hard to find information on using wildcards when selecting DOM elements.

After a while you get to understand that jQuery allows the use of regular expressions in a lot of places, I.E. when selecting like this:

$('#myElement').html();

So with this in mind, you can use \\S* to make wildcard selections, I.E.:

$('#myEle\\S*').each();

Stephen.