Jquery 对话框打开整个页面而不是特定的 div 标签

Question

我有一个在整个代码中使用的通用对话框：

<div id="dialog" style="display:none"> <img src="../images/ajax-loader.gif" align="middle" height="16px" width="16px" style="display:block;margin:auto;"/> </div>

    $().ready(function(){     
    $( "#dialog" ).dialog({ 
        autoOpen: false ,
        modal : true,
        dialogClass: 'fixed-dialog',  

        open: function(event, ui)
        {   // sets width on open, then recenters on screen
            //$(event.target).dialog('option', 'width', ($(event.target)[0].scrollWidth) + 'px');
            //alert($(event.target)[0].scrollWidth + 50);
            $(event.target).dialog('option', 'max-height', '85vh');
            $('#dialog').css('overflow-x', 'hidden');
            $(event.target).dialog('option', 'width', 'auto');
            $(event.target).dialog('option', 'position', {my: "center", at: "center", of: window}); 
        } ,
        close: function(event, ui) {
            $('#dialog').html("<div style='height:57px;width:80px;display:table-cell;vertical-align:bottom'><img src='../images/ajax-loader.gif' align='middle' height='16px' width='16px' style='display:block;margin:auto;vertical-align:middle;'/></div>");
        }, 

    });
    $(document).on("ajaxStop", function (e) {
        $("#dialog").dialog("option", "position", {my: "center", at: "center", of: window});
    });
    $(window).resize(function() {
        $("#dialog").dialog("option", "position", {my: "center", at: "center", of: window});
    });
});

它只是一个保持相同格式的通用容器，因此我们可以在整个站点中调用它。通常我们调用它并将 URL 加载到其中。这工作正常。这最后一次我试图将特定的 div 标签加载到对话框中，并且 div 标签在同一页面上。当我加载它而不是加载整个页面的特定 div 标签时，我有一个与该对话框相同的页面的对话框。我确定这是语法，这就是我调用上述对话框的方式。

    function AutoCloseOrder() { 
    //alert("hello");        
    $('#dialog').dialog({title:'Close Order'});
    $('#dialog').dialog('open', {width:'auto'});
    $('#dialog').load('#close_container_wrapper').html;      

}

（AutoCloseOrder函数被页面点击事件调用）

如何编写 dialog.load 行来挑选出特定的 div 标签。 div标签如下：

 <div id="close_container_wrapper" style="left:-9000px; position:absolute;" title="Close Big Order">
  <table id="close_container" cellspacing="0">
    <tr>
        <td  colspan="2">
            <label for="Errmsg" id="Errmsg" style="color: red"></label></td><td>&nbsp;</td>       
    </tr>
    <tr height="1">
        <td colspan="3" style="line-height:1em">&nbsp;</td>
    </tr>
    <tr>
        <td><b class="header">Auto Close Order #<%=GetOrderNumberByOrderId(request("order_id"))%></b></td><td>&nbsp;</td>
    </tr>
    <tr height="20" bgcolor="<%=AlternateColors()%>">
        <td><b>Balance Due:</b></td><td id="balance_due"><%=FormatCurrencyToLocale(balance_due, 2)%></td><td>&nbsp;</td>
    </tr>
    <tr height="20" bgcolor="<%=AlternateColors()%>">
        <td><b>Expected Guest Count</b></td><td><%=e_guest_1%></td><td>&nbsp;</td>
    </tr>
    <% If b_guest_fees Then %>
        <tr height="20" bgcolor="<%=AlternateColors()%>">
            <td><b>Expected Guest Count 2</b></td><td><%=e_guest_2%></td><td>&nbsp;</td>
        </tr>
    <% End If %>
    <tr height="20" bgcolor="<%=AlternateColors()%>">
        <td><b>Actual Guest Count</b></td><td><input type="text" name="guest_1" id="guest_1" onblur="JavaScript:isGuestCountNotZero(this, document.getElementById('guest_1'), document.getElementById('hidGuest_1'), document.getElementById('hidChecklistDone'))" value="<%=guest_1%>"><input type="hidden" name="hidguest_1" id="hidGuest_1" value="<%=guest_1%>"></td><td><input type="button" value="Update"  onclick="UpdateGuestCount('<%=b_guest_fees%>')" /></td>
    </tr>
     <% If b_guest_fees Then %>
        <tr height="20" bgcolor="<%=AlternateColors()%>">
            <td><b>Actual Guest Count 2</b></td><td><input type="text" name="guest_2" id="guest_2" onblur="JavaScript:isGuestCountNotZero(this, document.getElementById('guest_2'), document.getElementById('hidGuest_1'), document.getElementById('hidChecklistDone'))" value="<%=guest_2%>"></td><td><input type="button" value="Update" onclick="UpdateGuestCount('<%=b_guest_fees%>')" /></td>
        </tr>
    <% End If %>
    <tr height="20" bgcolor="<%=AlternateColors()%>">
        <td><b>Checklist Status</b></td><td><% If checklist_done Then Response.Write("Complete") Else Response.Write("Incomplete") End If%><input type="hidden" name="hidChecklistDone" id="hidChecklistDone" value="<%=checklist_done%>"></td><td>&nbsp;</td>
    </tr> 
    <tr height="20">
        <td colspan="3" style="line-height:1em">&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td colspan="2" nowrap>
            <% If Round(CCur(balance_due), 2) = 0 Then %>
                <input class="pcs_button" id="close" type="button" onmouseover="JavaScript:isGuestCountNotZero(this, document.getElementById('guest_1'), document.getElementById('hidGuest_1'), document.getElementById('hidChecklistDone'))" onClick="Pcs.CoreSupport.Browser.navigateWithReferrer('order_info.asp?order_id=<%=Request("order_id")%>&action=close_order')" value="Close Order"/>
            <% End If %>                
        </td>
    </tr>

</div>

还加载了所有正确的 jQuery 库等...它适用于外部 URL，而不是同一页面上的 div 标记，在这里我认为这会更简单。

Answer 1

最终将整个事情从它自己的函数中移出并在响应时触发它：Ajax 调用的成功部分。这是最终工作的代码吗？

    function CheckAutoClose(order_id) {
    //alert(order_id);
    var ajaxUrl = new Ajax.Request("order_info.asp", {
        parameters: {
            'ajax_call': 'check_order_close_status',
            'order_id': order_id,
        },
        onSuccess: function(response){                 
            //Ajax call is always a success because the sp always returns a result.  If no response text sp returned false for closed requirements met
            if (response.responseText.length >0) {
                $j('#dialog').dialog({title:'Close Order'});    
                $j('#dialog').html(response.responseText);
                $j('#dialog').dialog('open', {width:'auto'});                           
            }               
            },
        onFailure: Pcs.App.ajaxErrorDisplay
    });
}