CODEWITHSUNDEEP
jquery-ui
Mikayil Abdullayev
Mikayil Abdullayev

Reputation: 12366

JQuery preserves the old input value after the dialog is destroyed

I have defined a function for displaying some html content inside a jqueryui dilaog:

function ui_window(title, dialogWidth, content,buttons,className)
{
  $('<div id="window">').html(content).
  dialog({
      title: title,
      show: 'drop',
      hide: 'drop',
      width: dialogWidth,
      buttons: buttons,
      close: function (ev, ui) { $(this).remove(); },
      position: { my: 'center', at: 'center', of: window }
}
   ).addClass(className);
  return false;
}

And here's another javascript function that calls the above function:

function checkForValidCommand()
{
var content = getInnerHTML("#checkForValidCommand");
var myFunc = function ()
{
    var pensionerID = $('#txtID').val();
        alert(pensionerID);
        $(this).dialog('destroy');
    }
    else
        $('#txtID').focus();
}
var buttons = [{ text: 'OK', click: myFunc}];
ui_window("Pensioner", 410, content, buttons);

}

When I call the "checkForValidCommand" for the first time and input a value into the only textbox and press OK I get an alert with the value of the textbox. And then when I call the function again and press OK without enetering anything into the textbox I still get the alert with the old value. What is the problem in my code?

EDIT:Here's the html content in case you want to see:

<table>
  <tr>
    <td align="right">
       <label>
           Insert the pensioiner's ID:
       </label>
    </td>
    <td>
     <input id="txtID" type="text" onkeydown="return onlyNumbers(event);" maxlength="8"/>
    </td>
  </tr>
</table>

Upvotes: 0

Views: 2281

Answers (1)

Mikayil Abdullayev
Mikayil Abdullayev

Reputation: 12366

OK.I feel very happy to answer this question myself. So the problem was that each time I opened a new jquery dialog with a textbox in it, the value of the textbox was that of the one in the very first dialog. Somehow jquery was retaining the old value. Even putting $(this).dialog('destroy'); did not solve the problem.(Why this command does not remove the dialog completely is another story). Then I suddenly remembered of the working principle of $('#id'):

It goes and selects the first matching element with the specified id.

This was the needed clue. I was sure that the previous dialogs were not getting removed from the body. When I checked the body I found that I was right. All the dialogs were there, in the body. I tried many ways to remove the div completely and stopped on the only one I found working. What I did is put the following line of code before showing the dialog:

 $('body').find("#window").remove();

So the wrapper function to show a jquery dialog now looks like this:

function ui_window(title, dialogWidth, content,buttons,className)
{
  $('body').find("#window").remove();
$('<div id="window">').html(content).
  dialog({
      title: title,
      show: 'drop',
      hide: 'drop',
      width: dialogWidth,
      buttons: buttons,
      position: { my: 'center', at: 'center', of: window }
}
   ).addClass(className);
  return false;
}

And now there's only one dialog at a time. Happy jQuerying.

Upvotes: 2

Related Questions