0

I'm trying to take user input from a search form, build a query based on user input, and then return relevant posts using AJAX.

Right now, the form builds the select dropdowns properly. The form content disappears on submission, the loading animation appears, and then the results appear. The problem I'm having is the actual result that is returned - no matter what I do (even a simple echo: 'Success'; isn't working), I get a 0 as my return.

Form code:

<form class="form-horizontal" id="product_search_form" name="product_search_form" method="post">
  <div id="product_search_form_content">
    <div class="form-group">
        <label for="inputCarrierSelect" class="col-sm-2 control-label">Carrier</label>
        <div class="col-sm-10">
            <?php sms_populate_carrier_dropdown(); ?>
        </div>
    </div>
    <div class="form-group">
        <label for="inputStateSelect" class="col-sm-2 control-label">State</label>
        <div class="col-sm-10">
            <?php sms_populate_state_dropdown(); ?>
        </div>
        <input type="hidden" name="prdlnSelect" value="<?php echo $pl_slug; ?>" />
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <input class="btn btn-primary" id="submit_button" onclick="product_search();" type="button" value="Search" />
        </div>
    </div>
  </div>
</form>

jQuery:

function product_search(){
  jQuery.ajax({
    data: jQuery('#product_search_form').serialize(),
    type: jQuery('#product_search_form').attr('method'),
    url:  the_ajax_productSearch.ajaxurl_productSearch,
    beforeSend: function(){
      jQuery('#product_search_form_content').remove();
      jQuery('#product_search_form').append('<div class="alert alert-success" role="alert" align="center"><span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span> Loading...</div>');
    },

    success: function(response) { // on success..
      jQuery('#product_search_form').html(response);
    },
  });
  return false; // cancel original event to prevent form submitting
}

And from my theme's functions.php file:

wp_register_script( 'ajax-productSearch', get_template_directory_uri() .'/js/ajax-product-search.js', array( 'jquery') );
wp_enqueue_script( 'ajax-productSearch' );
wp_localize_script( 'ajax-productSearch','the_ajax_productSearch', array('ajaxurl_productSearch' => admin_url('admin-ajax.php')));

add_action( 'wp_ajax_productSearch', 'ajax_action_productSearch' );
add_action( 'wp_ajax_nopriv_productSearch', 'ajax_action_productSearch' );

function ajax_action_productSearch(){
  echo 'Success';
  die();
}

Is there anything glaringly obvious that I'm doing wrong here?

  • 0 usually means the add_actions are not firing at the correct time -probably too late. What hook do you use to load the 'site-specific plugin' code? – shanebp May 29 '15 at 20:49
  • I'm using the wp_ajax_[action] hook (I'm actually executing this code in my theme's functions.php file, as the theme will never be changed on this site. Updated initial post to reflect this). – andrewdcato May 29 '15 at 20:56
  • I am not sure this is the same issue you're having, but for me I always need to add this action to get ajax to work properly: add_action('template_redirect', 'register_scripts'); register_scripts for me is the function that has all wp_enqueue_script in it. – gdaniel May 29 '15 at 22:05
2

There are two issues in your code

You need to add script in wp_enqueue_scripts hooks like this -

add_action('wp_enqueue_scripts', 'my_custom_js_script');

function my_custom_js_script() {
    wp_register_script( 'ajax-productSearch', get_template_directory_uri() .'/js/ajax-product-search.js', array( 'jquery') );
    wp_enqueue_script( 'ajax-productSearch' );
    wp_localize_script( 'ajax-productSearch','the_ajax_productSearch', array('ajaxurl_productSearch' => admin_url('admin-ajax.php')));
}

The second issue is that, you need to add action argument in your jQuery.ajax data. If your hook is wp_ajax_my_ajax_hook, the value of this argument will be my_ajax_hook. In your case, it will be productSearch. Change your product_search function to this -

function product_search(){
  jQuery.ajax({
    data: { action: 'productSearch', formData: jQuery('#product_search_form').serialize() },
    type: jQuery('#product_search_form').attr('method'),
    url:  the_ajax_productSearch.ajaxurl_productSearch,
    beforeSend: function(){
      jQuery('#product_search_form_content').remove();
      jQuery('#product_search_form').append('<div class="alert alert-success" role="alert" align="center"><span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span> Loading...</div>');
    },

    success: function(response) { // on success..
      jQuery('#product_search_form').html(response);
    },
  });
  return false; // cancel original event to prevent form submitting
}
  • That did it (can't believe I didn't enqueue that properly, ha) - thanks for helping this AJAX newb out :) – andrewdcato May 29 '15 at 22:57
  • @andrewdcato Glad I could help. – sakibmoon May 30 '15 at 0:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.