Another quick one. Reading around it seems to be an issue. You make an AJAX call within a function and you want the call to be synchronous so that you can use the data from the call in the function scope.

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.

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.

Quick one. A small snippet for performing custom SQL queries using symfony 1.2.3. The method to do this has varied slightly with the different symfony releases. The method found on the symfony site almost has a good example, this is just adding a bit to it (looping);

    $conn = Propel::getConnection();
    $query = 'SELECT * FROM `my_table`;';

    $statement = $conn->prepare($query);
    $statement->execute();

    while ($rowObj = $statement->fetch(PDO::FETCH_OBJ))
    {
        echo var_dump($rowObj);
    }

Stephen.

Hello all,

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.

Hello,

It’s definitely been too long since I posted here! I will try and post more regularly over the coming months…

Firstly, we came across this issue after writing a number of plugins for a symfony project. Each of these plugins had their own schema.yml files and therefore we didn’t need our own custom schema.yml file at that time.

Because of this, our config/schema.yml file looked like this:

    propel:

Pretty, right? When we ran symfony propel:build-sql (after the other usual build tasks) we got the error:

    Database "" does not exist.

In symfony’s glorious vibrant red error container. It seems when your schema file looks like ours did above, symfony generates the sqldb.map file for that file without a database name, our data/sql/sqldb.map file looked similar to this:


    # Sqlfile -> Database map
    ...
    lib.model.schema.sql=propel
    plugins.pluginName.lib.model.schema.sql=propel
    plugins.pluginName2.lib.model.schema.sql=propel
    generated-schema.sql=propel
    generated-pluginName-schema.sql=propel
    generated-pluginName2-schema.sql=propel
    ...


The quick fix, especially if you don’t want to have to add a custom table in your schema just to get round this, is to simple add ‘propel’ onto the end of the line that is missing it.

Hopefully there’s a proper fix that I so far haven’t been bothered to find…

I’ve just made a change to a symfony project’s schema.yml file and tried to rebuild the model and came across this error message:

Unable to parse default value as date/time value: ‘0000-00-00 00:00:00′

Which was stopping the build. After looking at various places, it seems this is a problem with Creole, (propel’s DBAL).

Before PHP v5.2.4, you could do a strtotime on a value of 000-00-00 00:00:00 and you would get a weird date, something in 1999. Not sure why :S Since the 5.2.4 update however this bug has been fixed and you will now get boolean false returned.

The symfony plugin sfGuard, which is widely used, uses 0000-00-00 00:00:00 as a default value in it’s schema for some fields and this will now cause problems. To fix this, edit sfGuard’s schema and change those default values to something like 1970-01-01 and that should do the trick.

Unfortunately Creole isn’t actively maintained anymore so it’s not likely to be updated soon to fix this.

I’ve been working over the weekend on a site and I got to the part of writing the client side MVC using jQuery (because I love the idea now!).

I found out that jQuery has a nice little method for loading external scripts into the page at run time called getScript(). It basically gets the contents of the external file using an AJAX request and then eval()s the code at runtime, which seems like a perfect way of doing it. I reckon it’s much better than appending new <script> tags to the <head> tag as well.

The only issue is that it can take some time to load an external file so you can’t always run functions from within that file straight away. Thankfully there is a workaround for this using another jQuery method. You basically set all AJAX request to be synchronous before you run getScript() and then set AJAX requests to be asynchronous again after the script is loaded. If you end up loading like 20 files at the beginning of a page load this could take a while but hopefully you won’t be doing that

$.ajaxSetup({async: false});
$.getScript(MVCRoot+fileName+'.js');
$.ajaxSetup({async: true});

And here’s some more info on this lovely little function

I wrote a while ago about creating a client side MVC system in javascript.

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!

I had the fortune yesterday to attend the Google Developer Day 2008 in Wembley Stadium with a colleague from work.

We were told there were around 800 people there but with everyone sat down at the morning keynote meeting it didn’t seem like so many. Also, pretty much everyone there had an iPhone! Everywhere you looked someone had an iPhone out. I guess it’s not surprising with so many geeks in one room

The whole experience was good, the talks were in depth and on the most part interesting (we went to the wrong room at one point due to a late room switch and I couldn’t help but get a bit sleepy – the room was hot!).

There was an interesting talk by Dion Almaer on AJAX, Dion is the co-owner of Ajaxian. The session was called ‘The State of AJAX’ and he talked about how AJAX has come along in recent times and about the current popular javascript frameworks and libraries. He made a good summary of the current status of these frameworks and talked about how with each framework’s most recent user interface plug ins they are all very similar in functionality.

So which framework is best to use is now down to personal preference, where as before it was down to which framework was best for what you wanted to do. It certainly made me think about how JavaScript has become a mainstream language and it’s made me think about concentrating on JavaScript as my primary language. It’s strange, as up until recently a lot of people only saw JavaScript as an ‘add-on’ language, if that’s the right way to describe it. But now with the way the web is going, with rich user interfaces and applications, JavaScript is definitely the way forward.

There were also talks on the Google App Engine and Google Web Toolkit. Both of these are very interesting offerings but I’m not sure whether I personally, or the company I work for will have use for either of them. At least for the near future.

The Google App Engine is – in it’s most basic form – another cloud service. Much like Amazon’s EC2 service. Google are now offering the ability to host your web site or application on their existing infrastructure/system architecture. There are the same obvious advantages to using this system as there are with Amazon; large scalability, strong infrastructure, fast up link speeds etc etc. You initially get 500mb of free space, 2GB of bandwidth per day and up to 5 million page views per month for free. After which you need to start forking out the cash. From what I gathered after using your free allowances, the service won’t be charged on a pay as you go service as with Amazon, but you will have to buy ‘blocks’ of extra dish space, bandwidth etc etc. Personally I think I prefer the pay as you go method, but I haven’t done any calculations to see which would be cheaper so I could easily be wrong.

Unfortunately, the only language currently supported on the Google App Engine is Python. They mentioned yesterday that they are committed to adding more language runtimes to the system, but seeing as Python is one of Google’s 3 main languages, it was their obvious first choice. Sites and apps can only be pure Python as well, so no using plug ins/extensions which depend on C++ etc.

Google App engine is obviously still very mature so it wouldn’t be fair to compare it to the other cloud services currently on offer but so far, I think Amazon’s EC2 service is still on top. I won’t go into why here

I was very impressed by the Google Web Toolkit (GWT). The general idea is that you write your Java application in your normal IDE, run the GWT compiler against your Java code and it compiles your normal Java code into JavaScript and HTML files that can be run in any browser. Obviously this is pretty powerful. The example that we got shown was a full GUI application written in Java for viewing or creating complex diagrams. It seemed to run perfectly in the browser, looking just like it would on the desktop. All current popular browsers are automatically supported and the compiler also optimises and obfuscates the generated JavaScript and HTML code. What more could you ask for? The only problem is I don’t currently know Java and I don’t believe my company has any intentions of using Java for anything soon But an impressive product none the less.

Throughout the day there were free refreshments and snacks and we were provided with a free (mostly) healthy lunch. At the end of the day they showed a video summarising the day’s events and then there were drinks and food after which I wasn’t able to stay for My colleague stayed on for a while and told me they had a Wii being played on the huge presentation screens with Guitar Hero, among other things such as retro Atari arcade consoles. It’s a shame I didn’t stay, I’d have been able to say I beat some Google guys at Guitar Hero! Woop

The day was a good experience and I’d go again, although some sessions did seem quite long and the seats weren’t exactly comfortable, but a small price to pay for an event like this

Oh yeah, I didn’t take any photos except for a few of the Wembley pitch (by going through a door I don’t think we were allowed to go through) because I was told I wasn’t allowed. Then we saw lots of other people taking pictures :S Ah well…

I just remembered that I had trouble finding out what I could access with this event handler function. Sure it was easy to find out when the event is dispatched, but how can I access the new field value edited by the user? How do I access the previous value?

So this is just a simple example showing you that. This also applies to the normal DataGrid and standard list controls.

The itemEditEnd event is dispatched (it’s in the name) when a user finishes editing a cell so this is pretty much the best time to save the user’s changes to that field/row.

Here’s our function:

protected function saveChange(event:AdvancedDataGridEvent):void
{
    /**
     * use event.dataField to get the edited field name
     */
    var field:String = event.dataField;

    /**
     * i'm using the following line to get the 'id' of the row being edited
     * because i passed an 'id' field through from my dataProvider.
     */
    var selectedID:String = event.currentTarget.selectedItem.id.toString();

    /**
     * use the itemEditorInstance to get the newly edited value but retrieve
     * the previous value from the existing grid data. i'm using the default
     * textinput itemRenderer so I can retrieve the new value using the
     * itemEditInstance's 'text' property.
     */
    var newValue:String = event.currentTarget.itemEditorInstance.text;
    var prevValue:String = ProductPersonalisationList.selectedItem[event.dataField];

    // run a http service call or something to save the change or validate the data
}

A while ago a colleague suggested to me the idea of having a client-side MVC (Model View Controller) framework. At first I didn’t like the idea. I have always thought that all client-side code should be seen as one layer, one collection of files that all act as one set of functionality. Whether that be AJAX calls or general functions etc etc.

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
/**
* 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
/**
* 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?