Jquery UI Dialog issue - phantom close button or hyperlink before dialog renders

Question

I'm using Jquery UI Dialog to open an edit form in the following manner:

    $('.btnEdit').click(function(e){
       var myID = e.target.id;
       var arrMyID = myID.split('_');
       var myRecID = arrMyID[1];
       var myUrl = "editSubmissionModal.cfm?recID=" + myRecID;

       $( "#divEdit" ).dialog({
          width: '1200',
          position: { my: "center", at: "top", of: window },
          autoOpen: false,
          modal: true,
          close: function(e, ui) {
             $('#divEdit').html('');
             $('#divEdit').hide();
             $('#divMain').show();
          }         
       });                                                          

       $('#divEdit').load(myUrl);
       $('#divMain').hide();
       $('#divEdit').dialog('open');
       $('#divEdit').show();
    });

There are a couple of things I've been struggling with. I'm initializing the dialog every time an element with the btnEdit class is clicked. If I initialize it outside of this event handler, the dialog only fires the first time it is clicked. I've seen a number of posts regarding this problem, but they all point to setting autoOpen to false (which it is) as the resolution. What I've done is inconsistent with other examples I've seen but its the only way I could get it to work.

The second issue (and really the problem I need to solve) is that the first time the event is fired, before the dialog fully loads, there is what looks like a close button that shows on the screen. This is before the dialog form renders; just what looks like a close button. After that first time, instead of a button it's the word Close as a hyperlink. As soon as the dialog finishes loading, the button (or hyperlink) disappears.

I've tried this: $(".ui-dialog-titlebar-close").hide() which does get rid of the phantom close, but it hides the 'X' in the upper right corner of the dialog box as well. This I need. Any ideas?

score 0 · Answer 1 · edited May 23 '17 at 12:33

Thanks to this post: load external URL into modal jquery ui dialog

I have it working like this:

    $('.btnEdit').click(function(e){
            var myID = e.target.id;
            var arrMyID = myID.split('_');
            var myRecID = arrMyID[1];
            var myUrl = "editSubmissionModal.cfm?recID=" + myRecID;
            openDialog(myUrl, myRecID);
    });

    function openDialog(myUrl, myRecID) {
            var $dialog = $('#divEdit')
                .html('<iframe id="myIframe" style="border: 0px; background-color:white;" src="' + myUrl + '" width="100%" height="100%"></iframe>')
                .dialog({
                    title: "Request ID: " + myRecID,
                    autoOpen: false,
                    modal: true,
                    width: '1400',
                    height: '1400',
                    position: { my: "center", at: "top", of: window },
                    draggable:true,
                    open: function(){
                        $('#divMain').hide();
                     },
                     close: function(e, ui) {
                        $('#divEdit').html('');
                        $('#divEdit').hide();
                        $('#divMain').show();
                     }                             
                 });
            $dialog.dialog('open');
    }

Jquery UI Dialog issue - phantom close button or hyperlink before dialog renders

1 Answers1