CODEWITHSUNDEEP
jqueryajaxwordpress
Saint Dave
Saint Dave

Reputation: 567

jQuery.ajax response is 0 in wordpress regardless of what I return

I am trying to do a simple ajax call to send the url of an image to a php function which would get the attachment id and image alternative text and return it to my javascript which would then add the alternative text of the attachment to the html.

My code does not seem to work. The ajax call success response is always 0.

Here is my code:

overlay-image.js

jQuery(document).ready(function(){
        jQuery('.block a  img').click(function(e){
          e.preventDefault();
          imgUrl = jQuery(this).parent().attr('href');

          altText = '';

            jQuery.ajax({
              type: 'POST',
              url: my_ajax_stuff.ajaxurl,
              data: ({action : 'ajax_get_image_id_from_url', imgurl: imgUrl}),
              success: function(response) {
                altText = response;
                alert(response);
              }
            });

          jQuery('#overlay').html('<div id="popup"><div id="popup2"><img src="' + imgUrl + '"><div id="image-caption">' + altText + '</div></div></div>');
          jQuery('#overlay').fadeIn();
        });
});

functions.php (only a section)

function enable_ajax_in_wordpress() 
{
    wp_enqueue_script( 'function', get_template_directory_uri().'/js/overlay-image.js', array('jquery'), true);
    wp_localize_script( 'function', 'my_ajax_stuff', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}

add_action('template_redirect', 'enable_ajax_in_wordpress');
add_action('wp_enqueue_scripts', 'enable_ajax_in_wordpress');

//this function takes a image or any attachment url as the only argument and returns the attachement id
function get_image_id_from_url()
{   
    $image_url = $_POST['imgurl'];
    global $wpdb;
    $attachment = $wpdb->get_col($wpdb->prepare("SELECT ID FROM $wpdb->posts WHERE guid='%s';", $image_url ));
    $altText = get_post_meta($attachment[0], '_wp_attachment_image_alt', true);
    echo 'test text that - this should be the response of my ajax';
    die();
}

add_action("wp_ajax_nopriv_get_image_id_from_url", "get_image_id_from_url");
add_action("wp_ajax_get_image_id_from_url", "get_image_id_from_url");

So I read through my code quite a few times but I still cant figure out why my javascript ajax success response is still 0.

Any suggestions or help would be appreciated.

Upvotes: 1

Views: 1182

Answers (1)

brasofilo
brasofilo

Reputation: 26065

You are calling the wrong action, it's get_image_id_from_url.

I've always seen and used jQuery.post instead of jQuery.ajax. The following works:

jQuery.post(
  my_ajax_stuff.ajaxurl,
  {action : 'get_image_id_from_url', imgurl: imgUrl},
  function(response) {
    console.dir(response);
  }
);

The following is not correct and can be removed:

add_action('template_redirect', 'enable_ajax_in_wordpress');

And also:

  • you're missing security checks with wp_create_nonce,
  • the PHP response is better handled with wp_send_json_error and wp_send_json_success.

Check the following Q&A for a full/comprehensive approach: How to Use AJAX in a WordPress Shortcode?

Upvotes: 2

Related Questions