jQuery-UI Dialog - Input Fields are Disabled on 2nd Use

[plippard]

I am using the jQuery-UI Modal Dialog....I am using three dialogs....although not at same time. jQuery-UI Tabs is also used within the modal dialog.

When I attempt to key into an input field when displaying the modal dialog for a 2nd time, the input field is disabled.

I have tried using a create dialog, followed by open, and then followed by close when I am finished with the dialog....and then issuing an open to reopen the dilaog. Nothing seems to solve the disabled input field condition.

[plippard]

I have read of similar problems and read that timing of certain events can contribute to this....can you suggest a workaround ?

[Scott González]

Please provide a reduced test case showing the problem.

[plippard]

I have identified the root of my problem. I am closing my jQuery UI dialog when an appropriate button is depressed ....and then destroying the dialog during the close event. I was also issuing a removeControl command for a tinyMCE editor during the beforeClose event....and this is the root of the problem....if I comment out the tinyMCE removeControl command (as I have done below).....then I do not encounter the disabled input fields in the dialog.

Can you suggest a workaround ?

$("#AddEventDialog").dialog({

autoOpen: true, resizable: false, minHeight: 300, minWidth: 500, modal: true, buttons: {

"Add Event": function () {

if (addEventValidator.form() == true) {

var selectedStartDate = new Date($('#addEventStartDateTime').datetimepicker('getDate')); var selectedEndDate = new Date($('#addEventEndDateTime').datetimepicker('getDate'));

$('#addEventStartDateTime').datetimepicker('destroy'); $('#addEventEndDateTime').datetimepicker('destroy'); $("#AddEventDialog").dialog("close"); AddEventToDB(selectedStartDate, selectedEndDate);

} else {

$("#addEventTabs").tabs("select", 0);

}

}, Cancel: function () {

$('#addEventStartDateTime').datetimepicker('destroy'); $('#addEventEndDateTime').datetimepicker('destroy'); $("#AddEventDialog").dialog("close");

}

}, close: function () {

$('#addEventStartDateTime').datetimepicker('destroy'); $('#addEventEndDateTime').datetimepicker('destroy'); $("#AddEventDialog").dialog("destroy");

}, open: function () {

$('#addEventTabDescription textarea.tinymce').each(function () {

Global.EventDescription = ""; $(this).tinymce({

theme: "advanced", oninit: function () {

tinymce.activeEditor.setContent(Global.EventDescription);

}

});

});

}, beforeclose: function () {

$('#addEventTabDescription textarea.tinymce').each(function () {

Global.EventDescription = tinymce.activeEditor.getContent();

causing subsequent dialog input field usage to be disabled tinymce.EditorManager.execCommand('mceRemoveControl', true, $(this).attr('id'));

});

}

});

[Scott González]

Please use the ​forums for help.

[plippard]

I still consider this a problem.....I simply found a workaround. Can you tell me why you feel this problem should be closed ? Please leave this problem open and advise why commenting out the removeControl for tinyMCE seems to work as a workaround.

Thanks

[Scott González]

Debugging tinyMCE is outside the scope of this bug tracker.

[plippard]

I do not consider it debugging tinyMCE.

Are you saying that anytime a 3rd party plug-in is used you refuse to accept any problems on jQuery UI Dialog ?

Is this not in direct conflict with the basic concept of jQuery UI and open source ?

After all....it is not tinyMCE that is not longer working....it is the jQuery UI Dialog that is no longer working....the dialog input fields are disabled for input !!! If tinyMCE was no longer working then I would open a problem with tinyMCE.....however the problem symptoms are with jQuery UI EDialog.

[Scott González]

If the bug is caused by calling a method on tinyMCE, how would we track down the problem without debugging tinyMCE? If you can reduce the problem, then we'll look into it.