jQuery ajax not working in wordpress

Question

Could someone explain my why this jQuery code could not work? I'm always getting console.log(). WebsiteData.ajax_url alert prints correct url.

$('.variations_form').submit(function () {
    var html = $('#website-textarea').html();
    //alert(WebsiteData.ajax_url);
    jQuery.ajax({
        url : WebsiteData.ajax_url,
        type : 'post',
        data : {
            action : 'post_love_add_love',
            html : html
        },
        success : function( response ) {
            alert(response);
        },
        error: function(response) {  
            console.log(response);
        }
    });
});

php code:

class WebsiteIconInsertion {

    public function __construct() {
        add_action( 'wp_enqueue_scripts', array( $this, 'AddStyles' ) );
        add_action( 'wp_ajax_post_love_add_love', array($this, 'post_love_add_love') );
        add_action( 'wp_ajax_nopriv_post_love_add_love', array($this, 'post_love_add_love') );
    }

    public function AddStyles() {          
        wp_register_script( 'website-icons-js', plugin_dir_url( __FILE__ ) . 'public/js/website-icons.js');
        wp_localize_script( 'website-icons-js', 'WebsiteData', array('ajax_url' => admin_url( 'admin-ajax.php' ), 'file_path' => plugin_dir_url( __FILE__ )));
        wp_enqueue_script( 'website-icons-js' );
    }

    function post_love_add_love() {
            echo "nx";
            die();
    }
}

What response status you get? What does other error: function (jqXHR, textStatus, errorThrown) parameters say? — Justinas
– Justinas, Commented Nov 21, 2016 at 7:07

Mohsin khan · Accepted Answer · 2016-11-21 08:21:00Z

1

   jQuery('.variations_form').submit(function () {
        var html = jQuery('#website-textarea').html();
        var ajaxurl = 'https://example.com/wp-admin/admin-ajax.php';
        jQuery.ajax({
            url : ajaxurl ,
            type : 'post',
            data : {
                action : 'post_love_add_love',
                html : html
            },
            success : function( response ) {
                alert(response);
            },
            error: function(response) {  
                console.log(response);
            }
        });
    });

answered Nov 21, 2016 at 8:21

Mohsin khan

1367 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dipen Desai · Accepted Answer · 2016-11-23 09:31:06Z

try this

<script>
  jQuery( document ).ready(function() {
  jQuery( ".remove_compare" ).click(function() {
        var current_att=jQuery(this);
        jQuery.ajax({
              url: "<?php echo admin_url('admin-ajax.php'); ?>",
              type: 'POST',
              data: {
                     action: 'remove_to_compare',
                     user_id:jQuery(this).attr("user_id"),       
                    },
              success: function(response) {
                   //code
              }

       });
     });
 });
</script>

 add_action( 'wp_ajax_remove_to_compare', 'remove_to_compare' );     
 add_action( 'wp_ajax_nopriv_remove_to_compare', 'remove_to_compare' );
 function add_to_compare(){
            //coading….
 }

abhirathore2006 · Accepted Answer · 2016-11-21 07:08:18Z

0

to make ajax work for both logged in and logged out user, you need two separate actions

//Actual ACTION NAME IS my_action
//for logged in user
add_action( 'wp_ajax_my_action', 'my_action_callback' );

//for non logged in user
add_action( 'wp_ajax_nopriv_my_action', 'my_action_callback' );

Also the ajax url should corresponds to admin ajax url, which you can get using

wp_localize_script( 'ajax-script', 'ajax_object',
            array( 'ajax_url' => admin_url( 'admin-ajax.php' ), 'we_value' => 1234 ) );

answered Nov 21, 2016 at 7:08

abhirathore2006

3,8551 gold badge28 silver badges29 bronze badges

6 Comments

Giedidius Over a year ago

Included php code in first post. In my opinion everything looks fine, but still doesn't work.

abhirathore2006 Over a year ago

@Giedidius what value you are getting in WebsiteData.ajax_url,

abhirathore2006 Over a year ago

@Giedidius replace die with exit and test it

abhirathore2006 Over a year ago

open the network tab in developer tools and check the actual output you are getting from server

Giedidius Over a year ago

can't see any post data that is sent from js file

|

Nikola Kirincic · Accepted Answer · 2016-11-21 07:11:58Z

Double check that admin ajax url is correct ( value of BeewoodData.ajax_url ) and created from php function admin_url( 'admin-ajax.php' ); Make sure you added actions in the backend, according to action you defined in data object ( post_love_add_love ):

add_action( 'wp_ajax_post_love_add_love', 'your_custom_ajax_callback' ); //for logged users

add_action( 'wp_ajax_nopriv_post_love_add_love', 'your_custom_ajax_callback' ); //for anon users, note that I| added same callback, but you can change it if differs for logged in and anonymous users

Also, make sure that within function your_custom_ajax_callback your last line should be ending with die(), otherwise, json_output or any other response would be invalid and have other outputs from WordPress attached.

function your_custom_ajax_callback() {

//do your custom code
echo json_encode($output); 
die(); 

}

don't forget to set the headers to be JSON also if you are going to reply with json
Included php code in first post. In my opinion everything looks fine, but still doesn't work.

Collectives™ on Stack Overflow

jQuery ajax not working in wordpress

4 Answers 4

Comments

Comments

6 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

6 Comments

2 Comments

Related