views:

13

answers:

0

Hey All,

I've stumbled upon an interesting bug, and I'm sure something is wrong with my code. I have a semi-dynamic page of jQuery tabs. Each tab has a number of buttons, which generate certain content by onClick event.

<div id="tabs">
    <ul>
       <li><a href="/load/entity/1">Entity-1</a></li>
       <li><a href="/load/entity/2">Entity-2</a></li>
    </ul>
</div>

Inside the content of "/load/entity/2" and "1" i have an element with buttons:

<a href="javascript:void(0);" onClick="showInfo(entity_id)">Info</a>
<a href="javascript:void(0);" onClick="showHistory(entity_id)">History</a>

showHistory() function loads HTML form with two input boxes used by jQuery DatePicker:

function showHistory(entity_id) {
  var $container = $('.tabs_content');

  $.get('/entities/get_history_form/'+entity_id, function(data) {
      if(!data) {
        alert('empty return');
      }

      $container.append(data); //the form gets attached to the DOM

      //setting up datePicker elements appended to the form
      $('.end_date_'+entity_id).datepicker({showOn:'button', buttonImage: '/img/calend.gif'});
      $('.start_date_'+entity_id).datepicker({showOn:'button', buttonImage: '/img/calend.gif'});
  });
}

After choosing correct arguments in the form, I fire up submit function with jQuery with submitHistory():

$('.submitHistory').livequery('submit',function(){
   var entity_id = $('.entity_id').val();
   var end_date = $('.end_date_'+entity_id).val();
   var start_date = $('.start_date_'+entity_id).val();

   $.ajax({
      url: '/entities/show_history_data',
      data: ({entity_id: entity_id, start: start_date, end: end_date}),
      success: function(data) {
         //return history table appended below the search form of datepicker
         $('.history_container').empty();
         $('.history_container').append(data);
      }
   });
   return false;
});

Everything work fine in case I'm in the first tab - DatePicker does what it has to, but once I get to the second tab, and try to insert time arguments for the second Entity, the input fields for '.end_date_2' and '.start_date_2' (as for second entity's id) remain blank.

Visually nothing is added to the 'input text' element, but once I fire a submit button - the chosen values are sent to .submitHistory (I can see the post values from FireBug) and the table returned shows correct date soring of data.

Can anyone show me my mistake?