Category Archives: Ajax

AJAX tips and scripts

jGrowl – jQuery plugin for displaying messages

April 28, 2011 1:38 pm /

I recently found a useful jQuery plugin for adding unobtrusive web browser messages for webapps called jGrowl.

It displays a floating div with your custom message for 5-10 seconds on the top of the screen and fades out. There are options to change the duration of the message, set the message as a sticky until it is closed by the user, position options, and animation options. It is useful for showing quick informational messages such as “Saving changes”, “Update”, and “Delete”. Two unique features with this plugin are the “sticky feature” and the ability to stack consecutive messages together.

I’ve created a quick tutorial on adding this jQuery plugin to your app.

How to use the jGrowl plugin

Download the plugin at http://stanlemon.net/projects/jgrowl.html.

Inside the zip file, copy the two files “jquery.jgrowl.js” and “jquery.jgrowl.css” to your server. If you don’t have “jquery-1.4.2.js” on your server, copy that file as well.

Next, add the following lines to your webpage


<script src="jquery.js" type="text/javascript">
<link type="text/css" href="jquery.jgrowl.css" rel="stylesheet">
<script src="jquery.jgrowl.js" type="text/javascript">

To make the message appear on the page, add this to the BODY of your HTML.

<div id="jGrowl" class="top-right jGrowl"><div class="jGrowl-notification"></div></div>
<script type="text/javascript">$.jGrowl('Test!');</script>

The page should now show the “Test” message appear and fade out after a few seconds.

Posted in: AJAX, jQuery, Script Reviews / Tagged: , ,

PHP Script to fix AJAX Access-Control-Origin Errors

February 23, 2011 8:26 pm /

If you have an AJAX application that uses a PHP back-end app on a different server as your web front-end server (e.g. load balancing, cdn’s, etc), your PHP script will need to send header variables with the allowed content server name(s).

Web browsers are now following a standard for HTTP Access control to prevent client-side Cross Site scripting attacks.

I tested this with Firefox and it simply blocks the request without any error messages. Google Chrome browser will error out with the following message if the access control origin is not set correctly on your PHP script. (woot!)

“XMLHttpRequest cannot load [PHP URL].. Origin [JAVASCRIPT URL] is not allowed by Access-Control-Allow-Origin.”

For example, if the Javascript is hosted on example.com and your PHP app is on example.org.

Read More →

Posted in: AJAX, PHP / Tagged: , ,

Using jQuery for setting focus on an input box

June 9, 2010 12:26 pm /

Setting a focus on an input box is a hassle with so many different browsers out there. Each browser has their own unique tag to set the focus. Rather than using the browser-specific tags for the focus, one can utilize Javascript to provide the functionality for multiple browsers.

jQuery is a great alternative to adding the focus since its simply a matter of adding a few lines of code to your page. It will work on multiple browsers, whether it be Internet Explorer, Firefox, Chrome, or Safari.

If you want the first visible element of the page to be focused:

<script type="text/javascript" >
$(function() {
$("input:text:visible:first").focus();
});
</script>

If you want a specific element to be focused, such as a search box:

For instance,<script type="text/javascript" >
$(function() {
$("input[name=\'MY_INPUT_NAME\']").focus();
});
</script>

will set the focus for your input element with the name “MY_INPUT_NAME”.

Posted in: AJAX / Tagged: , ,

Developing pages within a Cisco WebVPN environment

September 22, 2009 12:42 pm /

When coding your pages with Javascript/AJAX/CSS, one thing to look out for is the compatibility with your organization’s remote access device. One of the devices I have to consider is the Cisco WebVPN product. It has compatibility issues with things such as the @charset “UTF-8”; and @import command in CSS files.

Compatibility Issues:

  • jQuery does NOT work in WebVPN by default. This is a HUGE problem. I have tried rolling back the jQuery version to no avail. I’m guessing the Cisco ASA WebVPN appliance doesn’t work with rewriting included files (such as a js points to another internally)
    UPDATE 9/29/2009    :
    However, thanks to a helpful tip from kenjin there is a fix!

    Go to your jQuery file (jquery.js, jquery-1.3.2.min.js, etc.) and do a search and replace with the following tag.
    Locate:
    <param />
    Replace it with:
     <param name=""/>    This should resolve the WebVPN compatibility issues with jQuery.  
  • CSS Files: any @ command in CSS files such as @import and @charset. To workaround it, remove the charset and move all linking of css files to the webpage instead.
Posted in: AJAX / Tagged: , , ,

Internet Explorer cache and AJAX

February 10, 2009 8:38 pm /

The cache in Internet Explorer is not very AJAX friendly for GET/POST commands. You must put in a constantly changing variable in the URL such as date with seconds in Internet Explorer. I noticed this when the refresh of my GET command would only work once in my window.setInterval(.. , .. ) function.  However, in Mozilla and Safari, my function was working perfect.

The solution to this is to append the current date and time into the URL of your GET/POST request. Special thanks to this post.

...

var requeststring = "http://........."+"&requesttime=" + new Date().getTime();
myHttpObject.open("GET",requeststring,true);

...

 

I previously tried setting the cache to expire on the PHP header files, but it has no effect. However, this date/time trick works.

Posted in: AJAX / Tagged: , ,