wordpress ajax not updating database

Question

hope you can guide me, I am trying to run this tutorial: http://www.inkthemes.com/how-to-use-ajax-in-wordpress-for-data-insertion/#

This is my Wordpress Plugin Javascript:

jQuery(document).ready(function(){
    jQuery("#submit").click(function(){
        console.log("click caught");//this bit works
        var name = jQuery("#dname").val();
        jQuery.ajax({
            type: 'POST',   
            data: {"action": "post_word_count", "dname":name},
            success: function(data){ 
                alert(data);//this alert appears full of html
            }
        });
    });
});

this is the plugin php:

function show_form(){

echo "<form>";
echo "<label>Name</label>";
echo "<input type='text' id='dname' name='dname' value=''/><br/>";
echo "<input type='button' id='submit' name='submit' value='Submit'/>";
echo "</form>";
}
add_action('the_content', 'show_form');



function post_word_count(){

$name = $_POST['dname'];
global $wpdb;
$wpdb->insert(
    'bio',
    array(
        'bio_surname' => $name
    ),
    array(
        '%s'
    )
);

die();
return true;
}
//
add_action('wp_ajax_post_word_count', 'post_word_count'); // Call when user logged in
add_action('wp_ajax_nopriv_post_word_count', 'post_word_count'); // Call when user in not logged in
?>

so, what i am finding in my debugger is that the console POST data is the 'dname' submitted in the form input. however, the database table "bio" is not being updated. all that happens is the alert pops up full of all the html of the website im working on. ie. the RESPONSE in the console debugger is a massive html text.

So, I dont understand why data=my website html AND why the table "bio" is not updating.

Answer 1

in plugin php file first add your java script file like this

wp_enqueue_script('ajax-script-xyz','***javascript file path***', array('jquery')); 
wp_localize_script('ajax-script-xyz', 'ajax_object',
                        array(
                            'ajax_url' => admin_url('admin-ajax.php'),
                            )
                        );

Plugin Javascript: add admin-ajax.php file url

jQuery(document).ready(function(){
    jQuery("#submit").click(function(){
        console.log("click caught");//this bit works
        var name = jQuery("#dname").val();
        jQuery.ajax(ajax_object.ajax_url, {//**add admin-ajax.php fill url **
            type: 'POST',   
            data: {"action": "post_word_count", "dname":name},
            success: function(data){ 
                alert(data);//this alert appears full of html
            }
        });
    });
});

for batter under standing check this link http://codex.wordpress.org/AJAX_in_Plugins

Answer 2

You have not defined the URL in ajax:

jQuery(document).ready(function(){
    jQuery("#submit").click(function(){
        var name = jQuery("#dname").val();
        jQuery.ajax({
            type: 'POST',   // Adding Post method
             url: ajaxurl, // Including ajax file
             data: {"action": "post_word_count", "dname":name}, // Sending data dname to post_word_count function.
             success: function(data){ // Show returned data using the function.
                 alert(data);
        });
    });
});