1

On a website I am working on, there is a popup that loads a user control. It has three textboxes and a button. The first time I open up the dialog box, it works just fine. But if a user closes and reopens it, it is no longer clickable. The dialog shows up, but nothing inside it is clickable.

This dialog box works just fine on IE, Chrome, and Safari when it is closed and reopened, but Firefox doesn't let you do anything when it is opened after a second time.

Here is my javascript code that opens it. 

    var $dialogRSVPShortForm;

if( ($dialogRSVPShortForm == null)  ||  ($dialogRSVPShortForm == undefined) || ($dialogRSVPShortForm == "undefined") ) {
    $dialogRSVPShortForm = $j("<div id='rsvpShortFormDlgDivId'></div>")
        .load('/controls/RSVPForm/RSVPShortForm.aspx' + strQS + ' #content')
        .dialog({
            autoOpen: false,
            modal: true,
            draggable: false,
            resizable: false,
            width: 430,
            dialogClass: 'popUpContainer',
            title: $link.attr('title'),
            open: function () {
                jQuery('.ui-widget-overlay').bind('click', function () {
                    jQuery($dialogRSVPShortForm).dialog('close');
                })
            }
        });
    }
    else {
        $j("#rsvpShortFormDlgDivId").load('/controls/RSVPForm/RSVPShortForm.aspx' + strQS + ' #content');
 }
    $dialogRSVPShortForm.dialog('open');
     }

Briefly, $dialogRSVPShortForm is assigned the new instance of the dialog box the first time the user opens the dialog. Any time after that, it goes to the else part and just opens it again, reloading the control rather than creating a new instance of the dialog. Creating an instance each time caused many problems in the past and we don't want to go back to doing that.

And here is the control that gets loaded in the dialog box.

    <h2>R.S.V.P. For Event</h2>
<table class="rsvpShortForm">
    <tr>
        <td class="label">
            <div class="required">*</div><label for="<%=txtEmail.clientID%>">Email</label>
        </td>
        <td class="field">
            <asp:TextBox ID="txtEmail" runat="server" TextMode="SingleLine" Width="230px"
            onFocus = "if (this.value == 'Email ex: my@email.com') {this.value = ''; this.style.color = '#000';}"
            onBlur = "if (this.value == '') {this.value = 'Email ex: my@email.com'; this.style.color = '#CCC';}"
            value = "Email ex: my@email.com" CssClass = "ghostText" TabIndex="1"/>
             <span class="errorMsg" id="errEmail" style="display: none">Email is required.</span>
            <span class="errorMsg" id="errLegitEmail" style="display: none">Email needs to be valid.</span>
        </td>
    </tr>
    <tr>
        <td class="label">
            <div class="required">*</div><label for="<%=txtPhone.clientID%>">Phone</label>
        </td>
        <td class="field">
            <asp:TextBox ID="txtPhone" runat="server" TextMode="SingleLine" Width="230px" onFocus="if (this.value == 'Phone Number (XXX)-XXX-XXXX') {this.value = ''; this.style.color = '#000';}"
            onBlur="if (this.value == '') {this.value = 'Phone Number (XXX)-XXX-XXXX'; this.style.color = '#CCC';}"
            value="Phone Number (XXX)-XXX-XXXX" CssClass="ghostText" TabIndex="2"/>
            <span class="errorMsg" id="errPhone" style="display: none">Phone is required.</span>
            <span class="errorMsg" id="errValidPhone" style="display:none">Valid phone number required.
            </span>
        </td>
    </tr>
    <tr>
        <td class="label">
            <label for="<%=txtCompany.clientID%>">Company</label>
        </td>
        <td class="field">
            <asp:TextBox ID="txtCompany" runat="server" TextMode="SingleLine" Width="230px" onFocus="if (this.value == 'Your Company') {this.value = ''; this.style.color = '#000';}"
            onBlur="if (this.value == '') {this.value = 'Your Company'; this.style.color = '#CCC';}"
            value="Your Company" CssClass="ghostText" TabIndex="3"/>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <div class="clearbutton"><input type="button" class="globalBTN" ID="btnSubmit" /></div>
     </td>
    </tr>
</table>

I appreciate any help I can get.

4

0 回答 0