Why zero after ajax call

I am learning Ajax first time with WordPress. I am implementing Ajax functionality with widget but I am getting 0 after form is submit.

Can you guide me and explain why this is happening so i can understand better.

Read More

My Code:

wp_enqueue_script('jquery');

/**
 * Add function to widgets_init that'll load our widget.
 * @since 0.1
 */
add_action( 'widgets_init', 'example_load_widgets' );

/**
 * Register our widget.
 * 'Example_Widget' is the widget class used below.
 *
 * @since 0.1
 */
function example_load_widgets() {
    register_widget( 'Example_Widget' );
}

/**
 * Example Widget class.
 * This class handles everything that needs to be handled with the widget:
 * the settings, form, display, and update.  Nice!
 *
 * @since 0.1
 */
class Example_Widget extends WP_Widget {

    /**
     * Widget setup.
     */
    function Example_Widget() {
        /* Widget settings. */
        $widget_ops = array( 'classname' => 'example', 'description' => __('An example widget that displays a person's name and sex.', 'example') );

        /* Widget control settings. */
        $control_ops = array( 'width' => 300, 'height' => 350, 'id_base' => 'example-widget' );

        /* Create the widget. */
        $this->WP_Widget( 'example-widget', __('Example Widget', 'example'), $widget_ops, $control_ops );
    }

    /**
     * How to display the widget on the screen.
     */
    function widget() {
            echo $name = $_POST['name'];
            ?>
            <form type="post" action="" id="newCustomerForm">

                <label for="name">Name:</label>
                <input name="name" type="text" />

                <input type="hidden" name="action" value="example_load_widgets"/>
                <input type="submit" name="submit" value="Submit">
            </form>
            <br/><br/>
            <div id="feedback"></div>
            <br/><br/>

            <script type="text/javascript">
                jQuery('#newCustomerForm').submit(ajaxSubmit);

                function ajaxSubmit(){

                    var newCustomerForm = jQuery(this).serialize();

                    jQuery.ajax({
                        type:"POST",
                        url: "http://localhost/testing/wordpress/wp-admin/admin-ajax.php",
                        data: newCustomerForm,
                        success:function(data){
                            jQuery("#feedback").html(data);
                        },
                        error: function(errorThrown){
                            alert(errorThrown);
                        }  
                    });

                    return false;
                }
            </script>

            <?php
            die();
            add_action('wp_ajax_example_load_widgets', 'example_load_widgets');
            add_action('wp_ajax_nopriv_example_load_widgets', 'example_load_widgets');

        }
    }

Related posts

Leave a Reply

1 comment

  1. I have created ajax example like yours, may be it will help you.

    Try this:

    First create plugin and add this code:

    <?php
        function sampleHelloWorld() {
        ?>
            <form type="post" action="" id="newCustomerForm">
                <label for="name">Name:</label>
                <input name="name" type="text" /><br /><br />
    
                <input type="hidden" name="action" value="addCustomer"/>
                <input type="submit" name="submit" value="Submit">
            </form>
    
            <br/><br/>
            <div id="feedback"></div>
            <br/><br/>
    
            <script type="text/javascript">
                jQuery('#newCustomerForm').submit(ajaxSubmit);
    
                function ajaxSubmit(){
    
                    var newCustomerForm = jQuery(this).serialize();
    
                    jQuery.ajax({
                        type:"POST",
                        url: "http://localhost/testing/wordpress/wp-admin/admin-ajax.php",
                        data: newCustomerForm,
                        success:function(data){
                            jQuery("#feedback").html(data);
                        },
                        error: function(errorThrown){
                            alert(errorThrown);
                        }  
                    });
    
                    return false;
                }
            </script>
            <?php
        }
    
    function widget_myHelloWorld($args) {
      extract($args);
      echo $before_widget;
      echo $before_title;?>Hello World Ajax<?php echo $after_title;
      sampleHelloWorld();
      echo $after_widget;
    }
    
    function myHelloWorld_init(){
      register_sidebar_widget(__('Hello World'), 'widget_myHelloWorld');     
    }
    add_action("plugins_loaded", "myHelloWorld_init");
    
    wp_enqueue_script('jquery');
    
    function addCustomer(){
        echo $name = $_POST['name'];
        die(); 
    }
    
    add_action('wp_ajax_addCustomer', 'addCustomer');
    add_action('wp_ajax_nopriv_addCustomer', 'addCustomer');
    ?>