jquery - Search query with Ajax

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' );

• jquery
• ajax
• wpdb

Share Improve this question edited Feb 21, 2015 at 18:21 Gabriel 2,2481010 gold badges2222 silver badges2424 bronze badges asked Feb 21, 2015 at 17:15 ZeeshanZeeshan 17122 gold badges55 silver badges1919 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

This 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
});