JQuery Tab using ViewModel data...

Question

using asp.mvc & jquery (with ui.tabs):

i would like to change the view model before clicking the tab (programatically) but it doesn't appear to be working. i click the tab just fine but the view model's data hasn't changed. here is how i'm doing it:

first: i check to see if you are my tab.
if so, i check to see if the controller has returned changed data. if so, i put a link on the top of the page for the user to go to the 3rd tab with this new data. normally the 3rd tab has a set of data it shows without this changed data (i want to change this behaviour of this tab for this case).

at this point: if the user wants to click the link, i want to use the changed data to send to the controller in order to populate the tab with a new set of data.

my first attempt has been to use the ajaxOptions. i set the options when the user does something on tab 1 that would require them to go to tab 3 with a new set of data. i read the ajaxOptions on the selected event of tab 3 and then try to populate tab 3's view model with the new data. however, every time i get to the controller, the data isn't in the view model.

implementation (inside JQuery-land):

if ($('tabs').tabs('option', 'selected') == 0) {
   var newData = $("#Data_FieldValueChanged").val(); // Data is a viewmodel element with the field FieldValueChanged 

   if (newData != null && newData.length > 0) {
      $("#linkToNewTab").show();
   }

var getIt = $('#tabs').find('#newTab').attr('id');
if (getIt == 'newTab') {
   var $tabs = $('#tabs').tabs();
   var coolData = { autoStored: 'somecrazystring' };
   $tabs.tabs('option', 'ajaxOptions', { data: coolData });

   $('#tabs').tabs('select', 2);  // problem here: it calls the 3rd tab twice...
}

return false;
});
}

when the user clicks on the '#linkToNewTab' i have tried multiple things. the first was to capture the event on the selection of the tab, as such:

if ($('#tabs').tabs('option', 'selected') == 2) {
var ajaxOptions = $('#tabs').tabs('option', 'ajaxOptions');
if (ajaxOptions != null) {
    var controlledByMe = ajaxOptions.data.autoSelected;
    if (isAutoSelected != null && isAutoSelected == 'somecrazystring') {
 $('#tabs').tabs('option', 'ajaxOptions', { data: {} }); // first: clear the flag...

 var oldDater = $("#Data_FieldValueChanged").val();
 if (oldDater != null && oldDater.length > 0) {
     if (oldDater.length <= 0)
  oldDater = $("#Filter_LastName").val();

     copyFieldData(oldDater, invalidPayerName);

     $("#Data_FieldValue")[0].value = ""; // clear

     $('input[type=submit]', $('#newTab')).click();
 }
    }
}
}

function copyFieldData() {
    if ($('#tabs').tabs('option', 'selected') == 2) {
 var ajaxOptions = $('#tabs').tabs('option', 'ajaxOptions');
 if (ajaxOptions != null) {
     var newForm = $('#newForm'); // new tab
     var oldForm = $('#oldForm'); // old tab

     var newFieldValue = $('Data_FieldValue', oldForm).val();

     $('input[type=text]', oldForm).each(function(i) {
  if (this.id == "Data_FieldValue") {
      $('#' + this.id, newForm).val(newFieldValue);
  else {
      // yada yada yada
  }
     });
 }
    }
}

---

this was my first attempt. it calls the controller 2 times (not desired) and appears to work (if the user ignores the screen flashing and reloading)...

my second attempt was to use the AjaxOption "OnBegin" to copy the changed data from tab 1 to tab 3 before calling the controller action. however: when i get to the controller, the viewmodel field is empty.

am i missing something? is there another way to fill the viewmodel with data before calling the controller or ???

any help would be appreciated...