linein designs

I’m just finishing up a little project to improve the search ability on a website and I want to display an image and message say “loading…” until the script finished running. Below is an easy way to do that.

First just make sure you have the latest version of jQuery.

 loading...

Now let’s see what all is going on.

First we’re calling jQuery’s ready() event which “binds a function to be executed whenever the DOM is ready to be traversed and manipulated.” (basically allows us to run any thing within the function after the page has completely loaded)

Next we’re using the get Ajax function to call the “script.php” page along with a variable to access in the “script.php”.

Once that script has finished running, we replace what was inside the “text_box” DIV with the response from the “script.php” file.

You can do any kind of script within the ready() function. The basic idea is have a DIV preloaded with the text or image and have jQuery replace what’s inside the DIV when it’s finished running.

BTW: If you’re looking for a sweet AJAX loading GIF, check out www.ajaxload.info.

Similar Posts:

• jQuery Image Gallery with Transitions and Navigation
• Fade In and Out Images from a Single Directory Using jQuery (with plugin)
• Display Last.fm’s Recent Tracks on Web Site with PHP Function
• MySQL Return Single Data or Single Array with PHP
• Run Javascript Code After an AJAX Request

1. Run Javascript Code After an AJAX Request
2. Alternate Background Colors Using PHP