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');
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');
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.
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" /> <!– 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.
?>
wp_enqueue_scriptis for enqueueing javascript files, your attempt to load a php file with api code makes no sense here – Milo Commented Mar 4, 2014 at 16:36