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

We add some JavaScript to pages with the comment form
* to support sites with threaded comments (when in use).

if ( is_singular() && get_option( ‘thread_comments’ ) )
wp_enqueue_script( ‘comment-reply’ );
/* Always have wp_head() just before the closing
* tag of your theme, or you will break many plugins, which
* generally use this hook to add elements to such
* as styles, scripts, and meta tags.
*/

wp_head();

Once you find this section introduce this statement

wp_enqueue_script(“jquery”); right  before  the wp_head()

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

wp_enqueue_script(“jquery”);
wp_enqueue_script(“ejemplo”,”path to your file/your file.js”,array(‘jquery’));

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

lt;link rel=”alternate” type=”application/rss+xml” title=”JNBCLICK.ORG &raquo; Feed” href=”http://www.jnbclick.org/jn/feed/” />
<link rel=”alternate” type=”application/rss+xml” title=”JNBCLICK.ORG &raquo; Comments Feed” href=”http://www.jnbclick.org/jn/comments/feed/” />
<script type=’text/javascript’ src=’http://www.jnbclick.org/jn/wp-includes/js/jquery/jquery.js?ver=1.4.2‘></script> <script type=’text/javascript’ src=’http://www.jnbclick.org/jn/wp-includes/js/jq.js?ver=3.0.1‘></script>

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

This entry was posted in Wordpress and tagged , , , , , , . Bookmark the permalink.

17 Responses to WordPress and Jquery Ajax

  1. Gripping, I passed this on to a comrade of mine, and he actually bought me lunch because I found this for him, so let me rephrase: Thanks for lunch.

    – Ashleigh WENTWORTH

  2. Now and then I’ll stumble across a post like this and I’ll recall that there really are still interesting pages on the web. ^_^. Thanks.

    – Elaine CRIDER

  3. bet365 says:

    how are you I was fortunate to seek your theme in baidu
    your subject is wonderful
    I learn much in your website really thank your very much
    btw the theme of you blog is really outstanding
    where can find it

  4. Hats off for this article. You are my one and only hero.

  5. emo sex says:

    now this is the kinda of stuff i like to read about thanks for brightening my day

  6. cialis says:

    Aw, this was a really nice post. In idea I want to put in writing like this additionally – taking time and actual effort to make a very good article… but what can I say… I procrastinate alot and in no way appear to get one thing done.

  7. i find to ones mind it WordPress and Jquery Ajax now im your rss reader

  8. This type of blog post will surely hit to many viewers. An excellent content and valuable for its content. Many thanks for posting it up!

  9. I have to say I am impressed with your blog and I will save its RSS to be alerted whenever you make a new post. Keep up the good work.

  10. I found so many interesting stuff in your blog especially its discussion. From the tons of comments on your articles, I guess I am not the only one having all the enjoyment here! keep up the good work.

  11. You’re soooo talented in writing. God is truly using you in miraculous ways. You’re up to an excellent job! This is an awesome site

  12. Thanks so much for this great blog; this is the kind of thing that keeps me though out the day. Ive been searching around for your blog after I heard about them from a friend and was pleased when I was able to find it after searching for some time. Being a avid blogger, Im happy to see others taking initiative and contributing to the community. I just wanted to comment to show my appreciation for your work as its very encouraging, and many writers do not get the credit they deserve. I am sure Ill be back and will send some of my friends.

  13. You completed certain fine points there. I did a search on the issue and found the majority of persons will have the same opinion with your blog.

  14. ip check says:

    You have very nice looking site, congrats!

  15. trace ip says:

    Keep working ,remarkable job!

  16. This does make sense actually, I was just talking with my friend the other day about this exact same thing. You’ve given me some more ideas now. Can’t wait to tell her about it tomorrow. Thanks!

  17. Pingback: "Bondage

Leave a Reply