I'm running a $wpdb select query and getting it’s parameter from a textbox. Result shows as soon as I press the search button, but I want to do the same with Ajax without refreshing the page. I have tried everything but the page is still refreshed.
jQuery code:
jQuery(document).ready(function() {
jQuery("#Submityourskill").click(function(){
jQuery.post(yes.ajaxurl,{action : 'doit'},
function( response) {//start of funciton
// alert(response);
//jQuery("#searchtextbox").val(response);
jQuery("#result").append(response);
jQuery("#textarea").html(response);
return false;
} //end of function
);
}); // click button function finishing here
}); //end of main loop
HTML:
<form action="" method="post">
<div><input maxlength="200" name="secretcode" size="200" type="text" value="" placeholder="Type Here !" />
<input id="Submityourskill" name="Submit" type="submit" value="Search Record" /></div>
</form>
<div id="result"></div>
PHP:
function doit() {
if(isset($_POST['secretcode'])!= ''){
if($_POST['Submit']) {
$secretcode=$_POST['secretcode'];
global $wpdb;
$sql = "SELECT * FROM wp_store_locator WHERE sl_description='$secretcode'";
$results = $wpdb->get_results($sql) or die(mysql_error());
foreach( $results as $result ) {
echo $result->sl_description;
}
exit();
}
}
}
add_action( 'wp_ajax_nopriv_doit', 'doit');
add_action( 'wp_ajax_doit', 'doit' );
function add_myjavascript(){
wp_register_script( 'globals', get_stylesheet_directory_uri() . "/js/ajax-implementationn.js", array( 'jquery' ) );
wp_enqueue_script( 'globals' );
// use wp_localize_script to pass PHP variables into javascript
wp_localize_script( 'globals', 'yes', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}
add_action( 'init', 'add_myjavascript' );
I'm running a $wpdb select query and getting it’s parameter from a textbox. Result shows as soon as I press the search button, but I want to do the same with Ajax without refreshing the page. I have tried everything but the page is still refreshed.
jQuery code:
jQuery(document).ready(function() {
jQuery("#Submityourskill").click(function(){
jQuery.post(yes.ajaxurl,{action : 'doit'},
function( response) {//start of funciton
// alert(response);
//jQuery("#searchtextbox").val(response);
jQuery("#result").append(response);
jQuery("#textarea").html(response);
return false;
} //end of function
);
}); // click button function finishing here
}); //end of main loop
HTML:
<form action="" method="post">
<div><input maxlength="200" name="secretcode" size="200" type="text" value="" placeholder="Type Here !" />
<input id="Submityourskill" name="Submit" type="submit" value="Search Record" /></div>
</form>
<div id="result"></div>
PHP:
function doit() {
if(isset($_POST['secretcode'])!= ''){
if($_POST['Submit']) {
$secretcode=$_POST['secretcode'];
global $wpdb;
$sql = "SELECT * FROM wp_store_locator WHERE sl_description='$secretcode'";
$results = $wpdb->get_results($sql) or die(mysql_error());
foreach( $results as $result ) {
echo $result->sl_description;
}
exit();
}
}
}
add_action( 'wp_ajax_nopriv_doit', 'doit');
add_action( 'wp_ajax_doit', 'doit' );
function add_myjavascript(){
wp_register_script( 'globals', get_stylesheet_directory_uri() . "/js/ajax-implementationn.js", array( 'jquery' ) );
wp_enqueue_script( 'globals' );
// use wp_localize_script to pass PHP variables into javascript
wp_localize_script( 'globals', 'yes', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}
add_action( 'init', 'add_myjavascript' );
1 Answer
Reset to default 1This is a javascript issue. You have to prevent form submission to stop the page from reloading. See event.preventDefault() in jQuery docs.
jQuery("#Submityourskill").click(function(event){
event.preventDefault();
// the rest of your code
});