jQuery datepicker inside tab via ajax

jQuery datepicker inside tab via ajax

So I have a 5 tab page and all 5 tabs are loaded using ajax.  Here is my tab call:


  2.       $(function() {
  3. $("#reportTabs").tabs({
  4. load: function(event, ui) {
  5. $(ui.panel).delegate('a.thisPane', 'click', function(event) {
  6. $(ui.panel).load(this.href);
  7. event.preventDefault();
  8.   });
  9. },
  10. spinner: 'Loading...',
  11. ajaxOptions: {
  12. cache: false
  13. ,error: function(xhr, status,index,anchor) {
  14. $(anchor.hash).html("Tab could not be loaded.  Please refresh the page and try again.");
  15. }
  16. }
  17. });
  18. });
In my remote pages I have:

  1. $('.datepicker').datepicker();
  2. $('#edVoteSubmit').live('click', function(event) {
  3. var queryString ='datefield='+$('#edVoteDateField').val()+'&sDate='+$('#edVoteSdate').val()+'&eDate='+$('#edVoteEdate').val();
  4. var url = 'edvote.cfm?'+queryString;
  5. $('a.thisPane').attr('href',url);
  6. $('a.thisPane').trigger('click');
  7. });
HTML on remote page:
  1.             <tr>
  2. <input name="datefield" id="edVoteDateField" type="hidden" value="edvote" />
  3. <td>Start Date:<input name="sdate" class="datepicker" /></td>
  4. <td>End Date:<input name="edate" class="datepicker" /></td>
  5. <td>
  6. <input name="datefield" id="edVoteDateField" type="hidden" value="edvote" />
  7. <input name="submit" id="edVoteSubmit" type="button" value="Submit" />
  8. </td>
  9. </tr>
So on the 1st tab this works flawlessly, I can pick a date, hit submit and the tab reloads the data as many times as I would like.

When I move on to the 2nd-5th tabs it works great the first time I submit but then something weird begins to happen.  After the first submit if I go to focus on the "sdate" field, the datepicker pops out but when I select a date, the field doesn't populate, it just shows blank.  However when I submit the form again, the value gets sent appropriately even though the field didn't look like it updated the field. 

This happens in both FF and ie.

Any suggestions on why the date field isn't updating the displayed value on the input the second time around?  I have tried adding an id to the inputs and referencing the datepicker that way instead of by class, but that doesn't work either.

Thanks for your time!


Update: Corrected a typo in the code.