jQuery AJAX call based on keydown and change?

Question

Below is the markup. What I am trying to achieve is the AJAX calls are returned whether the user types in the search box or if they change the radio buttons; so if I type in 'pro' and then change to 'printer,' the AJAX should fire. Right now, it isn't but I'm also not getting any errors at all in the console log.

Does anyone have any ideas on how to achieve this?

Code updated with suggested changes; still not achieving the radio button change functionality.

<div id="products_page_wrapper">
<div id="products_page_inner_wrapper">
<script>
  $(document).ready(function(){

    function searchCheck(evt) {

      var val = $("input[name=search_method]:checked").val();
      var search_type = $("input[name=search_method]:checked").val();

      // if printer is selected
      if (val == 'Printer') {

        $( '#product_search' ).autocomplete({source:'controllers/product_Autocomplete_Search.php?search_type='+search_type, minLength:2})
        .data( "autocomplete" )._renderItem = function( ul, item ) {
          return $( "<li></li>" )
          .data( "item.autocomplete", item )
          .append("<a>" + item.label+ "</a>")
          .appendTo( ul );
        };

    }else{

      $('#product_search').autocomplete({
          minLength:2,
          source: function (request, response) {
            $.ajax({
              url: 'controllers/product_Autocomplete_Search.php',
              dataType: 'json',
              data: {
                searchtype: search_type,
                term: request.term
              },
              success: function (data) {
                response($.map(data, function (item) {
                  return {
                    label: item.label,
                    cartridge_id: item.cartridge_id,
                    description: item.description,
                    json: item,
                  }
                }))
              }
            });
          },
          select: function( event, ui ) {
            window.location.href = '?view=view_product_detail&id='+ui.item.cartridge_id;
          }}).data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append("<a>" + "<TABLE><TR><TD valign='middle'><img height='60px' src='display/img/products/"+item.label+"_tn.jpg' /></TD><TD valign='middle'>   " + item.description+ "</TD></TR</TABLE></a>")
            .appendTo( ul );
          };
        } 
      };

    $('#product_search').keydown(searchCheck);

    // Doesn't work:
    // $('input[name="search_method"]:radio').on('change', searchCheck);

    // Doesn't work:
    // $("#search_method_one, #search_method_two").on('change', searchCheck);

    // Doesn't work:
    //$("input[name=search_method]:radio").change(searchCheck);

    //searchCheck();

  });

</script>
<form action="<?php echo $site_Config_Url; ?>controllers/product_Search_Process.Controllers.php" method="get">
      <div style="padding-bottom:20px;margin-left:auto;margin-right:auto;margin-top:20px;
">
            <h1 style="color:#fff;padding:0;margin:0;text-align:center;font-family: 'Arvo', serif;font-size:64px;padding-bottom:15px;border-bottom:5px solid #111;line-height:64px;"><span style="font-weight:normal;">Buy Local.</span> <span style="color:#9acf78;">Save Money!</span></h1>
            <div class="clear"></div>
            <div id="main_search_wrap">
                  <div style="padding-left:0px;width:400px;height:108px;float:left;">
                        <h2 style="margin-bottom:7px;color:#fff;text-align:right;padding:10px;">Search by Printer Brand</h2>
                        <div style="width:400px;padding-left:20px;float:left;">
                              <div style="float:left;">
                                    <select name="drop_1" id="drop_1" style="width:300px;">
                                          <option value="" selected="selected" disabled="disabled">Select Printer Brand</option>
                                          <?php getTierOne(); ?>
                                    </select>
                              </div>
                              <div style="width:80px;padding-left:5px;padding-top:5px;float:left;">
                                    <span id="wait_1">
                                          <img alt="Please Wait" src="<?php echo $site_Config_Url; ?>display/img/ui/ajax-loader.gif"/>
                                    </span>
                              </div>
                              <div class="clear"></div>
                        </div>
                        <div class="clear"></div>

                        <span id="result_1" style="display: none;"></span>
                        <span id="result_2" style="display: none;"></span>

                  </div>
                  <div style="width:100px;height:115px;float:left;margin-left:50px;margin-right:50px;">
                        <h3 style="font-size:48px;padding-top:30px;color:#555;text-align:center;">OR</h3>          
                  </div>
                  <div style="width:400px;height:115px;float:left;" id="searchByBox">
                        <h2 style="margin-bottom:7px;color:#fff;padding:10px;">Search by Cartridge or Printer</h2>
                        <div class="clear"></div>
                        <div style="padding-left:10px;;">
                              <span style="padding-left:10px;color:#ddd"><input type="radio" id="search_method_one" name="search_method" value="Cartridge" checked="true">Cartridge</span>
                              <span style="padding-left:20px;color:#ddd"><input type="radio" id="search_method_two" name="search_method" value="Printer">Printer</span>
                              <div class="clear"></div>
                              <div style="padding-top:5px;">
                                    <div style="padding-top:5px;float:left;">
                                          <input id="product_search" type="text" name="search_text" style="float:left;width:230px;"/>
                                    </div>
                                              <div id="tester"></div>
                                    <div style="padding-left:18px;float:left;">
                                          <input id="submit_right" class="ui-button ui-widget ui-state-default ui-corner-all" role="button" type="submit" name="submit_right" value="Find + SAVE!" />
                                    </div>
                                    <div class="clear"></div>
                              </div>
                        </div><div class="clear"></div>
                  </div><div class="clear"></div>
            </div>
      </div>
</form>
<div class="clear"></div>

Why did you copy and past the code twice? yikes. Use a function. — epascarello, Jul 07 '14 at 14:02
you can use .on('keypress', ...) for the input and .on('change', ...) for the radio button. — nikolap, Jul 07 '14 at 14:04
@epascarello thank you for the suggestion; the code has been updated. — ihateartists, Jul 07 '14 at 21:05
@nikolap thank you for the suggestion; I have tried similar results reflected in the comments of the code above but to no avail =( — ihateartists, Jul 07 '14 at 21:05

score 1 · Answer 1 · answered Jul 07 '14 at 14:07

Have you tried to step through each line by setting some breakpoints with Firebug? Also, you mentioned that the AJAX calls should be working but, did you check if you can see the requests within your web debugging tool (e.g., Firebug, Fiddler, Wireshark) returning an HTTP Response code 200?

Have you tried to use the 'error' parameter of "$.ajax()" ? e.g.,

        $.ajax({
            url: 'https://somesite.com/someurl',
            dataType: "json",
            data: {
                SearchTerm: request.term
            },
            success: function (data) {
                var parsed = JSON.parse(data);

                parsed.forEach(function (entry) {
                    //do something
                });

                response(something);
            },
            error: function (message) {
                console.log('Error: ' + message);
                response('Error: ' + message);
            }
        });

Yes; I left those details out of the post to help make it shorter. The code is actually on a live site so the AJAX side of things seems to be fine; it's just not detecting the radio button change. — ihateartists, Jul 07 '14 at 14:31
Dude, so try the DTSTTCPW (Do the simplest thing that could possibly work) principle, start with a little POC and take it from there: http://stackoverflow.com/questions/5176803/jquery-radiobutton-change-not-firing-during-de-selection — the_marcelo_r, Jul 07 '14 at 14:41

jQuery AJAX call based on keydown and change?

1 Answers1