WordPress and Jquery Ajax

In this article I am going to describe how to install Jquery in order to use ajax and whole power of Jquery

STEPS

1. INSTALL JQUERY AND THE JAVASCRIPT FILE
2. WRITE YOUR POST
3. ENJOY THE RESULT

1.INSTALL JQUERY AND THE JAVAQSCRIPT FILE

Like any app or piece of code which will use Jquery. It is necessary to set the Jquery library available. In the case of WordPress. This action will take place at the head.php file. (some themes like thesis use the functions called   custom functions or theme functions file). I am going to describe the use of the header.php file

Sing up at your WordPress Administration section go to Appearance Section, click on editor and open the file call HEADER.PHP. Then look for the PHP section before the </head> tag. This part looks like

Once you find this section introduce this statement

This statement sets Wordpress Jquery version available . I recommend to use this version. This will avoid any kind of trouble with some plugins or your Administration Area. For more information about wp_enqueue_script function go to Codex Functions

After include Jquery script you should include your JAVASCRIPT file with the code you want to work on your theme.
Right after include Jquery and before wp_head() statement insert your file code

In this case we have 3 parameters at the wp_enqueue_script.

The first on this statement. It is the name of your script. Use any name you want to but take care of do not use name that is already set at wordpress code!.

The second parameter it is the path to your JAVASCRIPT file.

Third parameter means the dependency of your code with jquery ( in this case). Save your file.

After finish this step go to your WordPress site. Open the source file in your browser and you can see something like

the yellow color highlight the outcome of our job. This statemen allow to use Jquery library and our code.

For those newbies. Jquery Code always is related to any HTML object. This means that the code always is receiving or transmitting information to the HTML objects.

2.Writing our post

Open a new post. Remember in our post we are not going to have any piece of code. The only thing we are going to have is HTML OBJECTS. Those objects will be transformed by our code.

This code is going to show a web page inside of a Iframe (Iframe is deprecated but in order to made a clear example I am going to used it ). The web page changes each time user point the mouse over any of the 3 section above the iframe.

Description of the Code.

The code is simple. A Function is call when a mouse go over one of the 3 Division above the iframe. This function receive a parameter. This parameter is the address of the web page we want to see on the iframe.

Jquery have it’s own format in order to call Ajax. I will explain only those realted to our example. If you want more information about this subject codex explanation jquery ajax

JQUERY.AJAX object is the way Jquery call ajax. The parameters used are :

URL : in this case is a php file at the server, at the time AJAX objects is invoke . A call to this url is made. This file will return the answer of the call ( in this case I take the HTML code inside of this file). You can receive XML code , JSON objects,HTML code, or JAVASCRIPT code .

GLOBAL : This parameter set the way how Events are handled. This mean if you set TRUE (default value) Inside your code you must specify what to do when the AJAX’s CALL triggers events like AJAXSTART OR AJAXSTOP. I set this parameter false in order to not deal with any of this situations.

TYPE : Define if the call to URL parameter is going to add parameters in GET mode or POST mode.

DATA : the parameters sends in POST or GET MODE , for POST mode the format is

({ name of the parameter : value}) in the GET mode is ({name of the parameter= value}).

ASYNC : Ajax is asynchronous application. This means that there is no defined time to receive a answer from the Ajax request, I set it false. This means that the browser will wait for the answer.

SUCCESS : Final result is set here. In this case the function created to manipulate the result recives a parameter. This is the html result. Inside of this function I load the HTML code inside the division with id = division

IMPORTANT COMMENT: IF YOU JUST LOAD THE THE HTML INSIDE THE DIVISION

$j(“#division”).replaceWith(html);

YOUR RESULT WILL BE

<DIV>HTML CODE</DIV>.

BUT I NEED TO KEEP THE ID FOR DIVISION THEN I NEED TO LOAD

$j(“#division”).replaceWith(“<div id=’division’>”+html+”</div>”);

for the newbies this piece of code replace any html label with id=”division” ‘s content with new content. In this case with html code received from Ajax’s call. Again in order to no lose the id=division I add        <div=’division’>html</div> string.

How work of all this.

Once this function is call. A Ajax ‘s call is make it. This call go to the server execute a procedure ( in this case a   call  to trae.php) and it bring an answer. In this case the answer is the HTML code inside of the trae.php file.

Code inside of the trae.php

<iframe src=”<?php echo $_POST['website']; ?>” width=”600″ height=”600″></iframe>

3. ENJOY THE CODE

Example of Ajax