• Home
• ajax
• CSS
• Freebies
• How-To
• jQuery
• Php
• Web Design
• Web Hosting
• Wordpress

Ajax is a combination of javascript and xml technologies. There can be many things we can perform with ajax from simpler form validation to complex user interface design. For all these, we need to have javascript, xml and some of back end programming language knowledge. Ajax is mostly used to perform actions without loading a page. But if you are doing a very complex series of actions using ajax then you might be considering to do that in easy way and to reduce the overall page size. Everybody knows, complex ajax commands needs a lot of javascript code to update the controls on a page. More javascript lines = more page size.

Yesterday i was developing a wordpress plugin with ajax then i found an easy way to perform all ajax and javascript commands directly from my php source file. Here is how easily it can be done.

1. Use jQuery for ajax Events

I have used jQuery because of its powerful ajax core function and it is very easy to implement. You never need to define any xmlhttp object. jQuery does that all for you. Here is a tutorial that explains how to perform ajax actions with jQuery.

2. download jQuery Taconite Plugin

Teconite Plugin is very easily to use. You don’t have to write any code for this plugin. Just include it in header file after jQuery and it will perform its internal events automatically whenever you will make any ajax action. (get , post etc). Teconite plugin will be used to perform DOM update events directly from our backend php source script. Download Plugin and include it in your header file.

3.  Create a DOM element to be updated via PHP

Now you have to define some html element so we can update it via php. You can also create this element dynamically from backend script but lets just create it.

<p id="update_me"></p>

<input type="button" id="call_ajax" value="Update" />

4. Define an event for the button

Put this in your header script

$(document).ready(function(){
   $("#call_ajax").click(function(){
    $.ajax({ type : 'post', url : 'script.php' , data { newValue : 'This value will be added to P Tag'} });
            });
   });
});

5. The Back end handler script.php

<?php
 header("Content-type : text/xml"); ?>
?>

6. Write Taconite Code to Update DOM element

<?php
header("Content-type : text/xml"); ?>
<taconite>
  <append select="update_me">
      <?php echo $_POST['newValue'];  ?>
  </append>
</taconite>

A little Explanation

PHP must be set to return xml headers. So whatever we put in taconite it will be executed in client side. we can also perform javascript events using <eval> and </eval> tags. You can update any DOM element with javascript or other taconite commands. More information here.

Related posts

• Implementing Ajax with jQuery (1)
• Best ajax frameworks & Tools (2)
• 10 great jQuery Form plugins (14)
• Wordpress Featured Content Slideshow Gallery Plugin (8)
• Quick and Easy way to Parse and Process your html web forms (1)

Comments

Leave a comment