First for those who don’t know what the Proxy Pattern is, well a proxy(at function level) is a function that provides a interface to another function.

Let’s say we want to create a proxy for the console.log method. And have it do something else without altering it’s initial purpose.

Then by adding this code:

We will change the console.log function to also make an alert with the parameter it receives.
How do we do this?…Well we first wrap everything in a closure so we can have access to the ‘proxied’ variable. Then we save the console.log function in the closure and then we overwrite it. The proxy then alerts all data received when calling console.log and then delegates the call to the original function. Using apply(this, arguments) guarantees that the caller won’t be able to notice the difference between the original and the proxied method.

THe jQuery 1.7 will bring some new events API: on/off, some form behaviour changes to deal with IE 6/7/8, and some improvements to the animation function and the removeData function.

Check out more on the jQuery page.

So after a little digging I found “Namespaced events” support in jQuery. What does this mean?…Well one can add a event within a specific namespace and then remove that events from that namespace.

Here is a example, in which I will add a scoll event then remove my scoll event:

Then event namespacing is very usefull in any plugin development and is a good to know functionality for day to day development.

The jQuery mobile framework helps create web apps using the simple “write less, do more” on which the jQuery framework was build. Using the framework creating smart and touch-optimized web apps is very easy.

The framework allows for creating apps that work across mobile platforms like iOS, Android or any other.

This is the blueprint for a mobile page:

Using the jQuery mobile framework, we can easily create dialogs, toolbars, buttons, forms, lists and offers support for events like tap, taphold, swipe, orientationchange and many other functionalities.

More information can be found on http://jquerymobile.com/.

jQuery mobile framework

Ok, so let’ start creating our simple file upload functionality, first we will add the drag events:

So what the events will do is that on ‘dragover’, so when we move the file over our ‘dragzone’, we set the color red, and when we drop the file we change the color back to white and send the files that have been dragged to our upload funtion. The upload function will use the new xhr2 object for uploading files using ajax requests.

In the FileUpload function we do the following: first we go thrue all the files (multiple file upload is supported), then we add the ‘onreadystatechange’ event (this will be called when the file finishes uploading), after this we add the ‘onprogress’ event (to show the upload progress of the file) and then we upload the file using a POST request and the ‘send’ function from xhr2. We also send some extra parameters like the name of the file (file.fileName) and a path that we defined as an attribut for the dropzone(this is not mandatory, just an example of sending extra data).

To create a Drupal AJAX callback we need to add a hook_menu in our module, and there declare a callback, like this:

And now in our test_function we can return whatever data we need, for example:

So now we can point to ‘/settings/test’ in our AJAX request.
If we are using a language module then we should call the AJAX callback after passing it through the Drupal url function:

to have the correct language set in the callback. So if german is selected, we would have ‘/de/settings/test’.

Ok..so let’s say we would like to make a cross-domain using jQuery. Here is how the jQuery $.ajax call should look like:

So we use the simple $.ajax method from jQuery, but we add the jsonp attribute with the value “jsonp_callback”. What this will do is add to the request that we do a parameter that is the function that the script should return the JSON data wrapped in… so the http://www.differentdomain.com/get_data.php would get at the end &jsonp_callback=xxx where xxx will be a dynamicaly generated function by jQuery(something like jsonpcallback123456)

Now on the server side (in the get_data.php file) we have to get the callback name and send the data in JSON format wrapped in the callback function.
Something like this:

The solution: using window.location.hash to keep information regarding AJAX action.
For example let’s say an AJAX request is done when a button is pressed in the page, and when that button is pressed the AJAX request load’s data for that buttons id, we will add required data to the window.location.hash, like this:

Now on page load we need to grab the hash (if it exists and make the appropriate request), like this:

And now you can navigate to your AJAX request.

Also I suggest using a special character at the beginning of the hash (like ‘!’), because when location.hash is changed the browser tries to move (lower) the position of the document to any DOM element with the id defined in the hash, so if hash is #book1, the browser will move (lower) the page to the DOM element, so if you use ‘!’ and have #!book1 the !book1 id doesn’t exist and you can avoid any problems.

Another idea is to integrate ‘Back’ actions for navigation, so when a user presses the ‘Back’ button of the browser, you will show the requested AJAX content. There are a couple of jQuery plugins out there had handle the hashchange event, and that you can use.

A closure takes place when a created function binds local variables to it in such a way that they are kept alive after the function has returned. A closure is a special kind of object that combines two things: a function, and any local variables that were in-scope at the time that the closure was created.

Here is an simple example:

In JavaScript, when we declare a function within another function, then the local variables can remain accessable after returning from the called function. Above, when we call the function say(); we get returned a anonymous function, that we call – (‘Hello’)() – and in that function we have access to variables in the first functions scope.

I know that it may not make a lot of sense but let me give you a real life example, where I had to use closures.

So the issue was this, I had to call a function encryptData to which I had to give a string and a callback, that would respond with an encryption of the string that I gave, something like this:

Only issue was that I wanted to also show the original string, keep in mind that i called this function multiple times for different strings, and the encrypted string didn’t necessarily come in the same order I’ve sent them.

So what I wanted to do is something like this(the example will not work):

Problem that in the anonymous function the original_string was not accesible anymore, so the fix was using closure, like this:

Now in the anonymous function that I send as a callback I have access to the original string.And this is javascript closure.

For those who aren’t familiar with MVC, well MVC is a application architecture that consists in separating any application by 3 major components: Model(manages the behavior and data of the application), View(creates/defines the visual interface), Controller (is the middle men between the input and the models, receives input and initiates a response by making calls on model objects).

Zend framework integrated the use of jQuery in the View, so jQuery can be used very easy in the View templates.
First jQuery is added to the view helper path like this:

Now we can crete simple Ajax links :

In view the javascript library must be loaded.