CODEWITHSUNDEEP
ajaxwordpress
Himani
Himani

Reputation: 265

Ajax not working in Wordpress Plugin

I am trying to build a form with Ajax functionality for a Wordpress plugin. A jQuery function is being called but no response is being displayed.

Here is the Ajax code

function ajaxformschool() {
    var id = "Hello World";
    jQuery.ajax({
        type: 'POST',
        url: ajaxschoolajax.ajaxurl,
        action: 'ajaxschool_process',
        data: {"data":id},
        dataType: 'json',
        success: function(data) {
            alert(data);
            jQuery("#comment").html(data);
        }
    });
}

Front end and registering Ajax Code

function ajaxschool_enqueuescripts() {
    wp_enqueue_script('ajaxschool', ASSFURL. '/js/ajaxschool.js', array('jquery'));
    wp_localize_script('ajaxschool', 'ajaxschoolajax', array( 'ajaxurl' => admin_url( 'admin-ajax.php')));
}

add_action('wp_enqueue_scripts', ajaxschool_enqueuescripts);
<form>
    echo '<a onclick="ajaxformschool();" style="cursor: pointer"><b>Search</b></a>';
    echo '<div id="comment"></div>';
</form>

Ajax Function Action

function ajaxschool_process() {
    $response="thanks everythong is ok";
    echo json_encode($response);
    die($response);
}

add_action( 'wp_ajax_nopriv_ajaxschool_process', 'ajaxschool_process' );
add_action( 'wp_ajax_ajaxschool_process', 'ajaxschool_process' );

Upvotes: 1

Views: 1409

Answers (3)

tofirius
tofirius

Reputation: 173

For clarification, there is no need to both echo and exit (or die) at the same time, since both exit and die will echo out the response. I have included important changes to the Ajax process function...

function ajaxschool_process() {
    $response = "Thanks. Everything is ok.";
    exit(json_encode($response));
}

Upvotes: 0

Prakash Rao
Prakash Rao

Reputation: 2398

Here is the HTML for the form

<form type="post" action="" id="newCustomerForm">

<label for="name">Name:</label>
<input name="name" type="text" />

<label for="email">Email:</label>
<input name="email" type="text" />

<label for="phone">Phone:</label>
<input name="phone" type="text" />

<label for="address">Address:</label>
<input name="address" type="text" />

<input type="hidden" name="action" value="addCustomer"/>
<input type="submit">
</form>
<br/><br/>
<div id="feedback"></div>

Next, open up functions.php and add the following line to ensure jQuery is being loaded on your site:

wp_enqueue_script('jquery');
//The basic structure for writing an AJAX call is as follows:

function myFunction(){
//do something
die();
}
add_action('wp_ajax_myFunction', 'myFunction');
add_action('wp_ajax_nopriv_myFunction', 'myFunction');

Finally the javascript code : 

<script type="text/javascript">
jQuery('#newCustomerForm').submit(ajaxSubmit);

function ajaxSubmit(){

var newCustomerForm = jQuery(this).serialize();

jQuery.ajax({
type:"POST",
url: "/wp-admin/admin-ajax.php",
data: newCustomerForm,
success:function(data){
jQuery("#feedback").html(data);
}
});

return false;
}
</script>

Upvotes: 1

vrajesh
vrajesh

Reputation: 2942

you need to add action property in data field of jquery ajax function.

Ajax code

jQuery.ajax({
        type: 'POST',
        url: ajaxschoolajax.ajaxurl,    
        data: {"data":id,'action':'ajaxschool_process'}, //MY CHANGE
        dataType: 'json',
        success: function(data) {
            alert(data);
            jQuery("#comment").html(data);
    }
    });

Upvotes: 3

Related Questions