JQuery

I have been working with JQuery for a while and it is by far one of the easiest and strongest Javascript Frameworks that I have worked with.

The process is simple:

  • include the JQuery js files (all that you might need)
  • Work with Javascript as it was never so easy

Let’s take an example (a very simple one, but pratical – almost everyone that I know have to work with AJAX).

Consider that we need a function to request (AJAX) an information from a helper file (a PHP script that will perform whatever you need it to do) and print it’s results on a div box.

The function would be something like this:

<script>

function getHelloWorld(input1,input2){

/* Changing the current content with something new */
$(“#theDiv”).html(“Wait while loading the requested information”);
/* How about changing the css a bit */
$(“#theDiv”).css(“height”,”300px”);

/* Performing the AJAX request that will get the helper result and place it inside the “theDiv”  innerHTML */
$.post(“helpers/loadNewInfo.php”,{action:’new’,input1:input1,input2:input2},function(result){$(“#theDiv”).html(result); alert(‘cool it worked’); $(“#theDiv”).css(“height”,”500px”); } );

}

</script>

Now let me give a little bit of a “zoom” at the AJAX request.

$.post(
“helpers/loadNewInfo.php”,
{action:’new’,input1:input1,input2:input2}, /* the post variables and it’s values that will be sent to the loadNewInfo.php file */
function(result){
$(“#theDiv”).html(result); /* callback function body */
alert(‘cool it worked’);
$(“#theDiv”).css(“height”,”500px”); /* playing a bit with the css, maybe we could place it yellow background */
}
); /* Here the $.post is ending */

As you can see working with JQuery is very simple. You will access the elements by $(“#elementID”) (or name I really don’t remember right now) and every property from it as an object modifier preceeded by a dot.

With inputs you can work the attributes from it using the attr clause.

Anyway, I’m far from being an expert from this, but It’s a simple example for those who are starting with JQuery. Right now I’m using JQuery to work with a Shopping Cart. It’s a nice way to paginate and display products without having the user post back every time and the best of all I can control CSS elements with it.

For more reference, go to: JQuery Code

P.S. If you are used to perform hard core Javascript DOM manipulation, JQuery will be a piece of cake for you.

Advertisements

About mcloide

Making things simpler, just check: http://www.mcloide.com View all posts by mcloide

2 responses to “JQuery

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: