colo colo - 1 month ago 9
Ajax Question

How to make an ajax call with parameters into Wordpress site

I have a simple web with an ajax call with parameters that works fine alone:
http://www.colome.org/utils/

This is the sample code:

index.html:

<!DOCTYPE html>
<html lang=en>
<head>
...
<script src="codi.js"></script>
...
</head>
<body>
<section id="main">
<table id="tng" class="datagrid">
<tbody>
</tr><tr>
<td width="50%" align="right"><b>Host or IP:</b></td>
<td><input id="ip" size="20" value="" ></td>
<td><button type="button" onclick="Ping()">Ping</button></td>
</tr>
</tbody>
</table>
...
</section>
<h3 id="notification"></h3>
</body>
</html>


I created a function "Ping" inside codi.js that makes the ajax call

codi.js:

function Ping()
{
$("#image").show();
var ip=document.getElementById('ip');
$.ajax({
type: "POST",
url: "http://...../ping.php",
cache: false,
//contentType: "application/json; charset=utf-8",
//dataType: "json",
data: {"ip" : ip.value},
success: onSuccesPing,
error: onErrorPing,
crossDomain:true
});

}
function onSuccesPing(data,status)
{
document.getElementById("notification").innerHTML=data;
}
function onErrorPing(data,status)
{
document.getElementById("notification").innerHTML=data.responseText);
}


And finally the ping.php code, very simple:

<?php
$ip = $_POST["ip"];
exec("ping -c 3 ".$ip." 2>&1", $output, $status);
foreach ($output as $key => $value) {
echo ($value.'<br>');
}

?>


I was trying to integrate this code to my wordpress website, like the example below:
For example this way
but I don't know how to pass parameters to the ajax call, please can you help me? thanks.

Answer

after several days, finally I found the solution, I hope that it will help those who have had this problem:

first, I was created a post inside a wordpress whit this html code:

<section id="main">
<table id="tng" class="datagrid">
    <thead><tr><th colspan="3"> 
        Sample ping App
        </th>
    </thead>
    <tbody>
    </tr><tr>
        <td width="50%" align="right"><b>Host or IP:</b></td>
        <td><input  id="ip" size="20" value="" ></td>
        <td><button type="button" onclick="PING()">Ping</button></td>
        <td> <img id="image" src="spinner.gif" alt="wait..." style="display: none;"></td>
    </tr>
    </tbody>
</table>

As you can see the only important thing is the onclick event for the button that calls de function PING()

Then upload the js (ping.js) inside my theme js folder in my case: public_html/wp-content/themes/metone_wp/js:

function PING(){
    $imatge=document.getElementById('image');
    $imatge.show();
    $ip=document.getElementById('ip');
    $val=ip.value;
    $params={action:'ping_php',ip: $val}

    jQuery.ajax({
       type: "POST",
       url: ajax_object.ajaxurl,
       cache: false,
       //contentType: "application/json; charset=utf-8",
       //dataType: "json",
       data: $params, 
       success: onSuccesPing,
       error: onErrorPing
       //error: onErrorPing,
       //crossDomain:true
     });
   //another way to make the same
   // jQuery.post(ajax_object.ajaxurl, $params,function (response){
   //   document.getElementById("notification").innerHTML=response;
   //   document.getElementById("image").style.display = "none";
   //  });
}
function onSuccesPing(data,status)
{
   jQuery("#notification").fadeIn(0); 
   document.getElementById("notification").innerHTML=data;
   document.getElementById("image").style.display = "none";
   jQuery("#notification").delay(5200).fadeOut(300);

}
function onErrorPing(data,status)
{
   jQuery("#notification").fadeIn(0);  
   document.getElementById("notification").innerHTML=data.responseText;
   document.getElementById("image").style.display = "none";
   jQuery("#notification").delay(5200).fadeOut(300);
}

The trick to pass paramters to the ajax call is the line:

 $params={action:'ping_php',ip: $val}

$params is an array of parameters, is necesary to have a mandatory parameter "action" that refers the php function defined below normaly at the functions.php of wordpress theme.

The parameters can be accessed at the php function as $_POST variables in my case $_POST['ip'].

to define the functions in wordpress I was used the theme functions.php, and and this piece of code:

//----------------------------- test utils ini-----------------------------------------
function ping_php ()
{
     $ip=$_POST['ip'];
    exec("ping -c 3 ".$ip." 2>&1", $output, $status);
    foreach ($output as $key => $value) {
        echo ($value.'<br>');
    }
   die();
}
add_action( 'wp_ajax_ping_php', 'ping_php' );
add_action( 'wp_ajax_nopriv_ping_php', 'ping_php' );
function enqueue_scripts() {
        wp_register_script('ajax-script',  get_template_directory_uri() .'/js/ping.js', array('jquery'), 1.0 ); 
        wp_localize_script( 'ajax-script', 'ajax_object', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) ); // setting ajaxurl
    wp_enqueue_script( 'ajax-script'); // jQuery will be included automatically
}
add_action('wp_enqueue_scripts', 'enqueue_scripts');
//---------------------------test utils end ----------------------------------------------

is important to folow the correct order to enqueue the script

  1. First the wp_register_script: include the directory of the js file and jquery enabled
  2. then wp_localize_script: usefull to pass variables from wordpress to my script in my case the url of ajax processing: ajaxurl
  3. finally wp_enqueue_script

It is also importate add wp_die() or die() at the end of the php function, if not the function returns "0"

Comments