Javascript Wait Until jQuery Loads

Ok, if you are like me, you’ve probably had the need to put a small snippet of Javascript between some <script> tags in a view. But, if the rest of your javascript is loaded somewhere in the footer of your layout, then at the point you run that embedded snippet, none of your other libraries will have been loaded.

Allow me to introduce you to a little technique that can be an interesting workaround. I can’t claim to have found this trick as I ran across it on an awesome StackOverflow answer.

Allow me to explain what is going on here.  You will notice the function is wrapped with parenthesis followed by another set of parenthesis. This is called an immediately invoked function expression (IIFE), which is a fancy way of saying that it will run automatically when the code is loaded. When it runs, it checks to see if the window.jQuery object exists and if not, it sets a timeout for 50ms and tries again. This will continuously loop until it detects that the jQuery object exists in the global namespace and will then run your code.

This doesn’t only apply to jQuery. For my use case, I had a javascript object that I needed to set a counter based on values loaded in from a form with dynamic sections. This is  how I made that work:

You will notice the {{ … }} syntax in there. That is the blade templating language in Laravel. For my use case, I needed to generate 0 to N instances of a template and keep track in javascript how many I had so that the next instance generated client side had the appropriate numbers applied to input field names. Probably not the best way to do things, but definitely functional.


PHP and AJAX Just Got A Little Easier.

I started work on a little open source project the other day which aims to simplify using AJAX in your PHP applications. I call it php2ajax and it’s hosted over at GitHub.

I frequently see issues on StackOverflow stemming from the nuances of processing GET/POST variables in PHP and the overall complexity the interface brings to the plate of a beginner. I thought to myself, why not encapsulate these common problems and make life easier for everyone? With that, php2ajax was born.

So let’s look at a simple example on using it. Here is our HTML/jQuery page called index.html:

We have two elements on our page, a link and a div box. A jQuery function is setup to submit an AJAX request to test.php when the link is clicked. When it receives a return from the PHP script, it places it in the DIV. Easy day right?

Now normally in PHP, we would have to check for $_GET or $_POST vars, filter the input, maybe store it in some variables, pass it around and do things with it, etc. This process can be cumbersome and start to make your code look more like a dish straight out of an Italian restaurant (spaghetti anyone?). Let’s see how simple it is with php2ajax in our test.php file:

Cool huh? In addition to the hasRequest flag, there are also hasPost and hasGet flags for more specific handling which are available after making the getRequest() call.

The filter() method takes an array of function names (as strings) which accept single values to process and return the modified version. You also have the option of writing your own custom filter method and passing in the name of that as well:

Another cool feature is the save() method. This method is used to pass filtered GET/POST data to an object of your choosing for saving. For example, lets say we have a custom class called myDatabase that has a method called insert(). We call it like this:

The third parameter is data you wish to pass to the function. You could just as easily pass the entire php2ajax object to your data handling class to be processed there.

And finally, I am currently implementing a doLongPoll() method which does exactly as the name implies. If you haven’t heard of long polling, it is a form of push technology often referred to as Comet. Wikipedia describes it as:

Long polling is a variation of the traditional polling technique and allows emulation of an information push from a server to a client. With long polling, the client requests information from the server in a similar way to a normal poll. However, if the server does not have any information available for the client, instead of sending an empty response, the server holds the request and waits for some information to be available. Once the information becomes available (or after a suitable timeout), a complete response is sent to the client. The client will normally then immediately re-request information from the server, so that the server will almost always have an available waiting request that it can use to deliver data in response to an event. In a web/AJAX context, long polling is also known as Comet programming.

So that will be implemented soon. What other tedious tasks do you encounter frequently using PHP and AJAX which could be simplified using this object oriented class? Leave me a comment below and I will see about implementing it.

How to Create a Cross Domain Javascript Widget With jQuery

Have you ever wondered how sites can give you a snippet of code, you paste it into yours, and like magic a widget loads into your page? For example, you put a small piece of code from Google Adsense into your site and Google will serve up dynamic advertising content.

With all the concerns for cross-site scripting (XSS), I began thinking about how this works and how to create one for my own projects. I of course started my journey into learning this useful technique with a Google Search.

I came across an article written by Alex Marandon that walks through exactly how it works with code examples.

Check it out: