Ajax means Asynchronous JavaScript and XML ,is the art of exchanging data with a server, and update parts of a web page - without reloading the whole page. If we disable JavaScript in browser Ajax will not work. now here we will see how to use Ajax in WordPress site theme. i am using wordpress 3.0 and creating an event to print PDF at front end. in my application a pdf will be generated on an button click event with request send to server via Ajax.
Now in my Custom theme at page.php i had an image button to generate pdf. Button code is as below
<a href="#" onclick="PrintPdf();"><img src="<?php bloginfo('template_directory');?>/images/contentRight2.png" width="56" height="107" border="0" usemap="#Map" /></a>
Now on same page write the javascript code to call Ajax.
<script>
function PrintPdf(){
function PrintPdf(){
var aa="http://mysite.com/downloadpdf/sample.pdf"; //path of pdf file
jQuery.ajax({
type: "POST",
data: {action:'my_special_ajax_call',id:'a'},
url: "./wp-admin/admin-ajax.php",
success: function(results) {
//alert(results);
window.open(aa,"my_window");
}
});
type: "POST",
data: {action:'my_special_ajax_call',id:'a'},
url: "./wp-admin/admin-ajax.php",
success: function(results) {
//alert(results);
window.open(aa,"my_window");
}
});
}
</script>
How Ajax works at front end theme..1) Add jquery.min .js at Theme folder
2) write the above ajax code...which will executed at a click event
3) above code will send data to admin-ajax.php then to function.php
4) function .php is a file inside the current theme folder.
5) there php function to handel respose is written.
6) action: my_specia_ajax_call is the function inside the function.php
to handel and process request which is then eco by result.
data: {action:'my_special_ajax_call',id:'a'},
here action=my_special_ajax_call is the action name to be called with add_action hook in function.php.
id:'a' here a is a dummy value in my code, but this retrieve at function.php page as if(isset($_POST['id'])) $data=$_POST['id'], we even can send values via Ajax function from this id.
At function.php
write the action, add_action('wp_ajax_nopriv_my_special_ajax_call', 'implement_ajax'); if you are not looged in as user, ie in same browser if you are not open the admin panel. because if you open admin panel and fornt side in same browser WP will consider a user been logged in.add_action('wp_ajax_my_special_ajax_call', 'implement_ajax'); use this if user is logged in
full code we can write as
$userid = get_current_user_id();
if($userid>0)
add_action('wp_ajax_my_special_ajax_call', 'implement_ajax');
else
add_action('wp_ajax_nopriv_my_special_ajax_call', 'implement_ajax');
add_action('wp_ajax_my_special_ajax_call', 'implement_ajax');
else
add_action('wp_ajax_nopriv_my_special_ajax_call', 'implement_ajax');
function implement_ajax() {
global $wpdb;
$today=date("Y-m-d");
if(isset($_POST['id']))
{
$blogID=$wpdb->blogid;
$blog_path=$blog_path."/wp-content/themes/TheHillSTL";
//blog path - http://mysite.com/wp-content/themes/TheHillSTL/
ob_start();
include("example1.php");
$strContent = ob_get_contents();
ob_end_clean();
require('html2pdfv4/html2pdf.class.php');
$name="blog".$blogID.".pdf";
if(file_exists(PDFSAVE.$name))
unlink(PDFSAVE.$name);
try{
$html2pdf = new HTML2PDF('P', 'A4', 'fr');
$html2pdf->writeHTML($strContent, isset($_GET['vuehtml']));
$html2pdf->Output(PDFSAVE.$name,'F');
//echo $strContent;
die();
}
catch(HTML2PDF_exception $e) {
echo $e;
exit;
}
}
}
finally above function we create and save pdf to my download folder.
2) WP Ajax – WordPress Hook To Handle Ajax Request
wp_ajax is not a hook or callback, rather it is just a prefix of ‘action’ query request handler in WordPress. When a browser or web-client Request/Post with an action query string to a WordPress site’s admin-ajax.php file, a WordPress action is fired with the wp_ajax prefix. Example: querying yourdomain.com/wp-admin/admin-ajax.php?action=contact-us will fire a wp_ajax_contact-us action. So, action is fired by appending wp_ajax to requested/posted ‘action’ parameter value. like: wp_ajax_. $_REQUEST['action'] . You can do certain process for that action by hook to the wp_ajax_. 'the_action_parameter_value' action.
Example: add_action( 'wp_ajax_contact-us', 'contact_us_requested' );. Here contact_us_requested is a function you can use to do some process or send some out put to the browser. You can replace contact_us_requested to any function you like.
Why to request/post to admin-ajax.php file ?
Because, admin-ajax.php do the process of an action query request with all of your WordPress functions, variables & class included. admin-ajax.php receive the action request, and make the hook available for your for customization.
What is wp_ajax_nopriv
Well, if you are a WordPress developer, you can say i have said wrong here before. Cause, wp_ajax prefix is not always used to fire an action, therefore wp_ajax_nopriv is used. wp_ajax_nopriv does the same thing as wp_ajax prefix does, unless it only fires when user is not logged in. So, that means, If a not logged in user requested yourdomain.com/wp-admin/admin-ajax.php?action=contact-us, wp_ajax_nopriv_contact-us will be fired, and wp_ajax_contact-us will be fired when the user is logged in on your site.
How to make WordPress Ajax call both for logged in and not logged in User ?
Just Simple. Hook to both wp_ajax and wp_ajax_nopriv prefix together.
Example:
add_action( 'wp_ajax_contact-us', 'contact_us_requested' );
add_action( 'wp_ajax_nopriv_contact-us', 'contact_us_requested' );
Ajax call from WP Admin plugin
jQuery.ajax({
type: "POST",
data:{action:'mycurl_action',id:ipaddr},
url: 'admin-ajax.php',
success: function(results) {
alert(results);
if(myresult!=""){
temp=myresult.split("+");
document.getElementById('username').value=temp[0];
document.getElementById('useremail').value=temp[1];
}
}
});
//At main plugin page write below lines
add_action('wp_ajax_mycurl_action', 'mycurl_action_callback');
function mycurl_action_callback(){
if(!empty($_POST['id']))
echo "dfsdfsfd+dfsdf";
else
echo "my+ddd";
exit();
}
// *** admin-ajax.php do the process of an action query request with all of your WordPress functions, variables & class included. admin-ajax.php receive the action request, and make the hook available for your for customization.
