Problem with val in dialog

Problem with val in dialog

Hi,

I am having a problem with a VAL() call. I have a page with a button that brings up a dialog to edit values. When the user presses save, I save the values and then call them up again if they edit again. So, here's what happens when the user presses "Edit".

1) Read the values that should go into the Text boxes on the dialog
2) Rebuild the HTML that goes into the dialog div
3) Assign the HTML to the DIV and call the dialog() method to set it up
4) Assign the values to the text boxes using .val()
5) Show the dialog

The dialog shows all the values the first and second times it is called but in the THIRD time the text boxes are all blank.

I have traced through the code and I can see the val being called and I can see that the element being sent through on the val() call has a value. It just isn't showing.

Here's the basics of the code:

  1. function editLevels(){
  2.     //Step one - Get the levels from its storing place
  3.     var strLevels = $("#hidLevels").val();
  4.     var aLevels = $.parseJSON(strLevels);
  5.     var htmlCode = '<div id="divEditLevels">' +
  6.     '<table name="tblEditLevels" id="tblEditLevels" class="display compact" width="99%">' +
  7.     '<thead><tr><th>Temperature</th><th>Pre</th><th>Post</th><th>&nbsp;</th></tr></thead><tbody id="tblLevelsBody">';
  8.    
  9.     var aTextObjects = new Array();
  10.     var iNumObjects = 0;
  11.     //aVals has one row for each value I have to show. The level is a level identifier.
  12.     //There must be at least one level but there can be any number of them.
  13.     //Users can add or delete levels.
  14.    
  15.     $.each(aVals, function(avIndex, data){
  16.         var idLowName = "txtLow" + data['iLevel'];
  17.         var idHighName = "txtHigh" + data['iLevel'];
  18.         var idRemoveName = "cmdRemove" + data['iLevel'];
  19.         var idRow = "tr" +  + data['iLevel'];
  20.        
  21.         aTextObjects[iNumObjects] =  data['iLevel'] + "|" + data['decMeasureLow'] + "|" +  data['decMeasureHigh'];
  22.         iNumObjects++;
  23.        
  24.         htmlCode = htmlCode + '<tr id="' + idRow + '"><td>' + data['iLevel'] + "</td>" +
  25.         "<td>" + 
  26.             '<input type="text" id="' + idLowName + '" ' +
  27.                 'name="' + idLowName + '" style="width:50px;text-align:right;" /></td>' +
  28.         '<td>' +
  29.             '<input type="text" id="' + idHighName + '" ' +
  30.                 'name="' + idHighName + '" style="width:50px;text-align:right;" /><td>' +
  31.             '<input type="button" value="Remove" class="RemoveButton" id="' + idRemoveName + '" /></td></tr>';
  32.     });
  33.    
  34.     htmlCode = htmlCode + '</tbody></table>';
  35.     htmlCode = htmlCode + '<p style="text-align:right">';
  36.     htmlCode = htmlCode + '<input type="button" value = "Add Level" id="cmdEditLevelAdd" />';
  37.     htmlCode = htmlCode + '<input type="hidden" id="hidEditLevelResults" value = "" /> </p>';
  38.     htmlCode = htmlCode + '</div>';
  39.    
  40.     $("#divEditLevels").html("");
  41.    
  42.     var divEditLevels = $(htmlCode).dialog({
  43.         height: "auto",
  44.         width: "auto",
  45.         modal: true,
  46.         title: "Edit Levels",
  47.         position: {my: "center", at: "top+200", of: window},
  48.         buttons:[
  49.                      {    text: "Save",
  50.                          click: function(){
  51.                              $("#hidEditLevelResults").val("Save");
  52.                              $(this).dialog("close");
  53.                              saveLevels();
  54.                          }
  55.                      },
  56.                      {text: "Cancel",
  57.                          click: function(){
  58.                              $("#hidEditLevelResults").val("Cancel");
  59.                              $(this).dialog("close");
  60.                          }
  61.                      }
  62.                 ]
  63.     });
  64.    
  65.     $.each(aTextObjects, function(idxObject, cTxtContents){
  66.         var aValues = cTxtContents.split("|");
  67.         var cObjName;
  68.        
  69.         // First column is the Level
  70.         // Second is the Low Measurement
  71.         // Third is the High Measurement
  72.        
  73.         cObjName = "txtLow" + aValues[0];
  74.         $("#"+cObjName).val(aValues[1]);
  75.         //$("#"+cObjName).attr("value", aValues[1]);
  76.        
  77.         cObjName = "txtHigh" + aValues[0];
  78.         $("#"+cObjName).val(aValues[2]);
  79.         //$("#"+cObjName).attr("value", aValues[2]);
  80.     });
  81.    
  82.     // Some additional code to handle click events on the dialog snipped out
  83. }
Again, the .val() code works the first two times it is called. The third does not seem to do work. I am at a loss. Any ideas would be greatly appreciated.

Thanks