title: Jquery UI AutoComplete Sending extra dynamic parameters to ashx
body: <p>I am trying to pass extra parameters through to my ashx when using Jquery UI auto complete. 
  I have seen lots of examples and have spent ages fiddling but I can't get mine to work.</p>
  
  <p>I have two auto complete textboxes, what ever is entered in the first one needs to narrow down the search for the second one.</p>
  
  <p>On my first autocomplete textbox all works fine and the ID that is returned is set to a hidden field.</p>
  
  <pre><code> $("#&lt;%=txtSearch1.ClientID%&gt;").autocomplete('/Search1.ashx');
      $('#&lt;%=txtSearch1.ClientID%&gt;').result(function (event, data, formatted)
      {
          if (data) {
              var id = data[1];
              $("#&lt;%=hdnSearched1.ClientID%&gt;").val(id);
          }
      });
  </code></pre>
  
  <p>I want to use the value of the hidden field along with the value the user enters into the second textbox to do the search for the second auto complete</p>
  
  <p>I first tried this:</p>
  
  <pre><code>    $("#&lt;%=txtSearch2.ClientID%&gt;").autocomplete('/Search2.ashx',{
     extraParams: { "Id": $("#&lt;%=hdnSearched1.ClientID%&gt;").val() }});
  </code></pre>
  
  <p>This fired my ashx but the Id in the extraparams was blank. A bit of googling told me this was because it was set when the page loaded so the value for the extra param was set before I set the value of the hidden field.</p>
  
  <p>I did a bit more fiddling and searching and came up with something like this which a lot of people seem to be using.</p>
  
  <pre><code>    $('#&lt;%=this.txtSearch2.ClientID %&gt;').autocomplete({
          source: function (request, response)
          {
              $.ajax({
                  url: '/Search2.ashx',
                  dataType: "json",
                  type: "POST",
                  contentType: "application/json; charset=utf-8",
                  data: {
                      term: request.term,
                      sId: $("#&lt;%=hdnSearched1.ClientID%&gt;").val()
                  },
                  success: function (data)
                  {
                      response(data);
                  },
                  error: function (XMLHttpRequest, textStatus, errorThrown)
                  {
                      alert(textStatus);
                  }                 
              });
          }
      });
  </code></pre>
  
  <p>The problem is this doesn't even fire the ashx! I have been fiddling about with this for ages, following example after example but I can't seem to work what I am doing wrong!
  I'm sure it must be obvious!</p>
  
  <p>Can anyone help?</p>