how to call ajax on frontend of wordpress

2 Views

In my plugin folder I have two file
1. hello-ajax.php
2. myajax.js

and by shortcode I add this form on frontend

Read More
<form id="theForm" method="post">
    <input id="name" name="name" value = "name" type="text" />
    <input name="action" type="hidden" value="the_ajax_hook" />&nbsp; <!-- this puts the action the_ajax_hook into the serialized form -->
    <input id="submit_button" value = "Click This" type="button" onClick="submit_me();" />
</form>
<div id="response_area">
    This is where we'll get the response
</div>

In plugin file I added js file as: 

wp_enqueue_script( 'my-ajax-handle', plugin_dir_url( __FILE__ ) . 'myajax.js', array( 'jquery' ) );
wp_localize_script( 'my-ajax-handle', 'the_ajax_script', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

// THE AJAX ADD ACTIONS
add_action( 'wp_ajax_the_ajax_hook', 'the_action_function' );
add_action( 'wp_ajax_nopriv_the_ajax_hook', 'the_action_function' ); // need this to serve non logged in users

// THE FUNCTION
function the_action_function(){
    /* this area is very simple but being serverside it affords the possibility of retreiving data from the server and passing it back to the javascript function */
    $name = $_POST['name'];
    echo"Hello World, " . $name;// this is passed back to the javascript function
    die();// wordpress may print out a spurious zero without this - can be particularly bad if using json
}
// ADD EG A FORM TO THE PAGE

So form is displaying at front end but in console Uncaught ReferenceError: submit_me is not defined

submit_me() is defined in myajax.js file as: 

function submit_me(){
    //alert(a);
    jQuery.post(the_ajax_script.ajaxurl, jQuery("#theForm").serialize()
    ,
    function(response_from_the_action_function){
        jQuery("#response_area").html(response_from_the_action_function);
    }
    );
}

But this function is not working, and as far i know there is some problem in ajax call, so suggest me what did I wrong and how to make it work….Thanks

Post Views: 2

Related posts

Leave a Reply

2 comments

  1. Thought I should mention this so someone can avoid wasting 2 hours like I did.
    If you are attempting ajax from the front end but you have a plugin that that disables admin (backend) access to logged in users then there is a problem.
    To solve, I got the following code from everthere.
    Add this to your functions.php

    if(isset($_REQUEST['action']) && $_REQUEST['action']=='AJAXfunctionCall'):
    do_action( 'wp_ajax_' . $_REQUEST['action'] );
endif;

    Where AJAXfunctionCall is your function responding to the Ajax call.

  2. Make sure that function submit_me() isn’t included into $(document).ready() handler. The function is not visible from the global scope and thus cannot be called from the onclick property.

    Also, the correct way to include scripts in wordpress is by hooking into wp_enqueue_scripts action:

    add_action('wp_enqueue_scripts', 'enqueue_your_scripts');
function enqueue_your_scripts() {
    wp_enqueue_script( 'my-ajax-handle', plugin_dir_url( __FILE__ ) . 'myajax.js', array( 'jquery' ) );
    wp_localize_script( 'my-ajax-handle', 'the_ajax_script', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

}