Accessing dynamically generated dialog using JQuery

Accessing dynamically generated dialog using JQuery

Hello Everyone thanks in advance.

I am initiazializing a dialog on the fly using the following code:

  1. $("<div id='timeOffDiv'><div id='timeOffDivInner'>loading....</div></div>").dialog({...options  go here....});

I use this often in my app and it works well..usually on open, I populate the content of the dialog dynamically using ajax.

later, based on user controls, I need to change the dialog buttons, and I use the following code:

  1. $('div#timeOffDiv').dialog('option','buttons', [
  2.     {
  3.         text: 'SUBMIT REQUEST',
  4.         click: function () {
  5. $("form#addTimeOffForm").submit();
  6. }
  7.     },
  8.     {
  9.         text: 'CANCEL',
  10.         click: function() {  
  11. $(this).dialog("close");
  12. $( this ).dialog("destroy").remove();
  14. }
  15.     }
  16. ]
  17. );
This techinically works, but I am getting an error, although not fatal, that says the following:

jquery.js:2 Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'option'

Any thoughts on getting this error to go away?? I am pretty sure this has to do with the first dialog not being recognized as the same one being referenced later, athough the code still works.