After several days, finally I found how to make ajax call from my wordpress site, 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>
    	</tr>
        </tbody>
    </table>
    <img id="image" src="spinner.gif" alt="wait..." style="display: none;">
    <br>
    
</section>	
<section id=food>
	<h3 id="notification"></h3>
</section>

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

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

function PING(){
	//var my_object = {"origen": origen, "destino":destino};
	$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');

// Same handler function...

//---------------------------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 important to add wp_die() or die() at the end of the php function, if not the function returns “0”

It is also very inportant that the function names match exactly:

  • add_action( ‘wp_ajax_ping_php‘, ‘ping_php’ );
  • add_action( ‘wp_ajax_nopriv_ping_php‘, ‘ping_php’ );

with the parameter “action” of the ajax call

Facebooktwitterredditpinterestlinkedinmail