Category

jQuery

Comet: A jQuery and PHP Implementation

By | Comet, Javascript, John Wenzler, jQuery, PHP, Web Design | No Comments

If you’ve ever needed real-time data on the front-end of your website and you were using PHP as your back-end, you are most likely familiar with using a polling technique to fetch data.  What you may not know, however, is that another method exists for pulling data that does not require a large number of unnecessary requests.  Enter Comet…


 

  • Sounds great right? Just wait for the data to come to you!
  • The problem? Currently, no built in Comet functionality exists for PHP and Javascript.  I’ll share with you my code for implementing a Comet controller.

In this article I’ll provide the functions you need to get this working today on your project.  You will have to make some modifications to fit the framework and structure of your site, but if you need help, just leave a comment and I’ll do my best to get back to you!

The PHP

How to make a long held http request

Before we delve into code, I’ll give you a short summary of how we are going to accomplish our goals.  We will utilize a file on our system to keep track of if there are any changes we need to “push” to the front-end.  We will then provide a listener to that file so that if there is any change we will exit a loop and return the long held request.

First things first let’s make a “Push” function that modifies a simple text file.  This way any listeners looking at that file will trigger their callbacks.

We built a class so that we can use this code in a nice clean way.   Calling this is as simple as using:

Now let’s create our listener function.

Obviously $filename here will match the filename in the first function and the $timestamp parameter helps us keep track of changes.

The very first part of this function checks if the file exists, if not, it creates the file.

We pull the current time and store into $currentmodif using a special function that pulls a very precise time in PHP.  I will provide this function below.

Next we check if timestamp was sent in, if not, sets it to 0.

The while loop is where the magic of the long held requests happens.  We check if the last modification happened after the current time.  If not, we just do a micro-sleep for 10 ms and try again.   If we do have a new modification we exit the loop and return our new timestamp for modification and a message.

GetPreciseTime Function

That’s it for the back-end, moving onto the front.

jQuery

Simple Functions for Interaction with Comet Backend

Most of this code is self-explanatory so I’ll just point out the workings of the timestamp.  Notice we set timestamp to the value returned from PHP.  The ‘callback’ parameter in the connect function here contains whatever function you want to trigger when something changes.

What’s Missing?

You may have noticed that within this code there is actually nothing to change anything on a database or such.  That’s because that part of the logic is separated out here.  Our goal is to allow many connections or listeners to a single file that will all trigger at the same time on a change.  So the changes can happen in any way you want and you have to hook them up using the PHP push function we made first.  So whenever you want to trigger an update to all listeners, just call that push function in PHP.

 

Questions, comments? Please leave them below.

Top 5: jQuery Functions You May Not Have Known

By | Coding, Javascript, John Wenzler, jQuery, Web Design | No Comments

Welcome to my first of a series of website coding language related top five lists. I’m going to start us off with some functions from jQuery that you may or may not know. There is no particular order to this list, just a set of what I consider interesting and potentially useful functions in jQuery.  Let’s get started!


trim()

What it does

Trim is a super simple function that removes any leading or trailing whitespace from a string

How to use it

» Read More: jQuery docs

In Action

fadeToggle()

What it does

Toggles the visibility of an element with a fading effect. The function also accepts parameters for duration of the fading effect, the easing function to be used furing fading, as well as a callback function for when the effect is complete. You may want to use this function because it takes care of issues with trying to fade in or out while the opposite effect is still not complete.

How to use it

» Read More: jQuery docs

In Action

I toggle

delay()

What it does

Delay simply halts the execution of an animation until x milliseconds has passed, where x is the one and only parameter. NOTE: This function does NOT halt the execution of anything other than jQuery effects and animations, if you need to half execution of other code, use the old setTimeout function

How to use it

» Read More: jQuery docs

In Action

is

What it does

The “is” functions as a incredibly convenient way to check an element against a criteria.  That criteria is some other selector.

How to use it

$(<<selector>>).is(<<selector>>);

That’s it! And remember, selector can be any jQuery selector, regardless of the browser compatibility for CSS selectors.

» Read More: jQuery docs

In Action

Let’s say you have the following elements…

You can then use the following code to provide meaningful feedback about the DOM.
$(“.insideDiv”).is(“.active”)
Returns true in this case because the ‘active’ class is present in the element selected by ‘insideDiv’ class selector.
$(“#cb_01”).is(“:checked”)
Returns true or false depending on whether that checkbox element has been clicked. This is preferred over checking for the checked attribute on the input.

on()

What it does

I hear you out there, asking why in the world the ‘on’ function would be included in a list of functions you may not know. The truth is, however, even though almost any novice jQuery programmer has used the ‘on’ function, they have probably not used it in the way I will describe, and it’s a pretty darn useful way.

How to use it

$(<<container>>).on(<<event>>,<<element>>,<<function>>);

The big difference here is that the first selector is a container and the element within the parameters is the element to receive the click event.  So what’s the big deal? This is the way to replace the deprecated “live” function from previous versions of jQuery.  If you choose an ever present container element, the children will always have the function called on the event handler, even if they are added or removed asynchronously.  The simplest way to replace the live function is to migrate from…

… to …

» Read More: jQuery docs

In Action

Here we just placed some container divs to fill with items.
Let’s add them with some jQuery.

The next step is adding in our functions to see what happens with two different versions of the on function.

And we end up with the following…

Using regular on

Click Me!

Using body selector

Click Me!