jquery how to run function only after updating hidden input value
<p>shortcut, try this fiddle:
<a href="http://jsfiddle.net/purushagovinda/VJfkx/" rel="nofollow">http://jsfiddle.net/purushagovinda/VJfkx/</a></p>

<hr>

<p>I have a block of jquery code that I want to get right so that it will set the value of a hidden input element (changed from <code>value="keywords"</code> to <code>value="furniture"</code>), and <strong>THEN</strong> call a function ("<code>refresh_itemListerWithSearchResultsReturn();</code>") which reloads a main div's content from an ajax call to another file - a file which depends on the hidden input's value.</p>

<p>My code now successfully sets the value of the hidden input, and then fires the function, BUT, upon firing, the function still thinks the hidden input value="keywords".  It makes me think I want to do this:</p>

<pre><code>$("#myHiddenInput").val('furniture');
</code></pre>

<p>...but where that line ^^^ has a callback function, and I stick the <code>refresh_itemListerWithSearchResultsReturn()</code> function call <em>inside</em> the .val() callback.   So, being a relative noob, I look up here:  </p>

<p><a href="http://api.jquery.com/val/" rel="nofollow">http://api.jquery.com/val/</a></p>

<p>... but do not see there how to use <code>.val();</code> with a callback function.  The example on that docs page shows <code>.val()</code> with a function call, but that function is for determining what the <code>val()</code> will use for the value itself, as opposed to firing a callback, like I need.</p>

<p>Any advise for me how to proceed?</p>

<hr>

<p>the code actually looks like this:</p>

<pre><code>$("#products_furniture_furnitureType_options &gt; li").each(function() {
 $(this).click(function(e) {
  [snip]
  $("#dp_searchForWhichItemType_listRefresh").val('products');
  $('#bit_products_productType').val('furniture');

  $("#bit_products_productType").val("furniture").change(function(){
    alert("'#bit_products_productType' is changed now 2");
    $.refresh_itemListerWithSearchResultsReturn('itemList', false, false);
  });

  [snip]
 });
});
</code></pre>

<p>I also tried this:</p>

<pre><code>$("#products_furniture_furnitureType_options &gt; li").each(function() {
 $(this).click(function(e) {
  [snip]
  $("#dp_searchForWhichItemType_listRefresh").val('products');
  $('#bit_products_productType').val('furniture');

  $("#bit_products_productType").change(function(){
    alert("'#bit_products_productType' is changed now 2");
    $.refresh_itemListerWithSearchResultsReturn('itemList', false, false);
  });

  [snip]
 });
});
</code></pre>

<p>...and also tried moving the <code>$("#bit_products_productType").change(function(){</code> to before the <code>$('#bit_products_productType').val('furniture');</code>...</p>

<p>...but in every case the <code>alert("'#bit_products_productType' is changed now 2");</code> does not fire.</p>

<p>this ought to help you guys focus, and be able to help me:
<a href="http://jsfiddle.net/purushagovinda/VJfkx/" rel="nofollow">http://jsfiddle.net/purushagovinda/VJfkx/</a></p>
