1

I'm using this example as a guide link to ajax example i'm using to my plugin example. I get Uncaught ReferenceError: the_ajax_script is not defined in the JS console .

I've put my JS in the main php file. The PHP that processes a response in a separate php file, as eventually I'm going to replace this simple example with calculations.

I don't understand what I've done wrong. As far as i'm aware I've defined ajax

My code:

activate2.php (main file)

  function add_my_css_and_my_js_files(){
    wp_enqueue_script('jquery-validate-min', plugins_url('jquery_validate_min.js', __FILE__ ) ); 
    wp_enqueue_script( "the-calcs", plugins_url('the_calcs.php', __FILE__ )) ; 
}
add_action('wp_enqueue_scripts', "add_my_css_and_my_js_files"); 

function include_jQuery() {
    if (!is_admin()) {
        wp_enqueue_script('jquery');
    }
}
add_action('init', 'include_jQuery');

add_action( 'init', 'register_shortcodes' );
function register_shortcodes() {
    add_shortcode( 'displaycalcs', 'mp_calcs_display' );
}

function mp_calcs_display() {
    echo '<a class="ajax-link" href="#">click me</a>';

    $output = <<<HTML
<form action="" method="post" name="formsubmit" id="formsubmit"   >
<h1> Process </h1>
<p> operation type always robot </p>
  Number of welds: <input type="number" name="numberofwelds" id="numberofwelds"  >
  Number of construction welds: <input type="number" name="numberofconwelds" id="numberofconwelds"  >
  Total one: <input type="text" name="totalone" id="totalone" disabled>
<div id="totalfail1"></div>
   Total two: <input type="text" name="totaltwo" id="totaltwo" disabled>
<div id="totalfail2"></div>
   Total three: <input type="text" name="totalthree" id="totalthree" disabled>
<div id="totalfail3"></div>
   <input type="submit"  value="Calculate" id="submit" name="submit">
<div id="result"> </div>
</form> 
<script type="text/javascript">
    jQuery(document).ready(function($) {
       $('#formsubmit').validate({
        rules:  {

        numberofwelds: "required",
        numberofconwelds: "required"
                },
        messages: {
        numberofwelds: "Please enter the number of welds",
        numberofconwelds: "Please enter number of con"
        },

        submitHandler: function(form) {
        form.submit();
        }       
        });
        $(".ajax-link").click( function() {
        var data = {
            action: 'test_response',
                        post_var: 'this will be echoed back'
        };
        $.post(the_ajax_script.ajaxurl, data, function(response) {
        alert(response);
        });
        return false;
    });
    });
        </script>
HTML;
    return $output; }  

the_calcs.php (processes the ajax response)

function test_ajax_load_scripts() {
wp_localize_script( 'activate2', 'the_ajax_script', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );  
}
add_action('wp_enqueue_scripts', 'test_ajax_load_scripts'); 
        function text_ajax_process_request() {
        if ( isset( $_POST["post_var"] ) ) {
        $response = $_POST["post_var"];
        echo $response;
        die();
    }
}
add_action('wp_ajax_test_response', 'text_ajax_process_request');
  • 1
    wp_enqueue_script is for enqueueing javascript files, your attempt to load a php file with api code makes no sense here – Milo Mar 4 '14 at 16:36
2

Until ajaxurl is always defined as of WP 2.8 you can simply remove the_ajax_script from here $.post(the_ajax_script.ajaxurl.

You create the object the_ajax_script for the activate2 script but don't but the code that uses this object in that file.

  • I don't quite understand your answer. Please can you elaborate? – mattnewbie Mar 4 '14 at 16:29
  • you try to do a request using $.post to the url the_ajax_script.ajaxurl. But there is no object defined until then which holds the url you want. You use add_action('wp_ajax_your_ajax_functions_name', 'your_function') to add the function you want to call, not to include the file which defines the object that use actually use before. Are you actually aware of the way the ajax functions work in WP? Otherwise you should read this: codex.wordpress.org/AJAX_in_Plugins – Jonathan Mar 4 '14 at 16:36
-2

Dear you just need to implement this code, afterwords add any form or functionality what you like. This code is 100% working.

First create a ajax.js file in the plugin directory, paste this following jQuery code and save.

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

The following code goes in the main plugin file.

// enqueue and localise scripts
wp_enqueue_script( 'my-ajax-handle', plugin_dir_url( __FILE__ ) . 'ajax.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
function hello_world_ajax_frontend(){
$the_form = '
<form id="theForm">
<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>';
return $the_form;
}
add_shortcode("hw_ajax_frontend", "hello_world_ajax_frontend");
//paste this shortcode [hw_ajax_frontend] in page or post for testing.
?>
  • 1
    This doesn't answer the question. The user was asking why they received a specific error. Just dumping code on them doesn't help, and it doesn't help anyone else looking for an answer. Besides, the question was 5 years ago. I doubt they need code from you. – Jacob Peattie Mar 18 at 15:06
  • Jacob Peattie, Don't you know people are still coming here and find nothing worthy to work with. I know the question was asked 5 year ago, but still people are searching for this to find a solution or to find something which works that can save their time. The person who asked this question 5 years ago may have solved his problem, if one could have a working code then there is no need to waste time on experimenting with garbage. This code saved a lot of my time today and i am certain it will help and would have helped all those who came here and left empty handed. – Farooq Mar 18 at 15:44
  • I know people are coming here. That's why I downvoted it and criticised the quality of the answer! At least put the effort into explaining what exactly the cause of the problem was. This code is useless unless the visitor is trying to code exactly the same thing. They'd be left to figure out what the difference is themselves, and not learn anything. Even if they could just copy your code their site would crash, because it's riddled with incorrect quote marks. – Jacob Peattie Mar 18 at 15:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.