唯一填充对话框的多个jQuery动态加载
唯一填充对话框的多个jQuery动态加载
提问于 2013-06-05 22:01:32
我们有一个报告，当用户单击特定行的对话框链接时，会出现一个模式对话框，其中包含有关该特定行的其他详细信息。目前，我们不会动态加载此数据，而且我们之前有这样做的原因，因为我们希望对话框中的数据与聚合的行匹配。
事实证明，我从一个不属于我的存储过程中提取的数据需要几秒钟才能加载(因为它是经过计算的，而不是聚合的)，而且由于它不会动态加载对话框内容，因此它显著降低了此报告的速度，因为页面上的数据是聚合的，而对话框中的数据不是。在我看来，数据调用是根本原因，需要修复，但目前我必须将加载时间移到对话框加载数据时。
我希望从这里开始动态加载这个内容，类似于here
但是，由于对话框链接我还为所单击的元素带来了一个唯一的对话框，其中的内容是从DB中检索的特定链接，我不确定是否可以简单地对特定页面执行.load()，而不向它传递所单击的链接，等等。
当前功能：
HTML：
<c:if test="${seg.user.sbaEnabled && seg.sbaParamEnabled}">
<c:set var="dialogcount" value="0" scope="page" />
<c:forEach var="segment" items="${seg.dataList}">
<c:set var="dialogcount" value="${dialogcount + 1}" scope="page"/>
<div id="dialog<c:out value="${dialogcount}"/>" class="hidden" title="<spring:message code="perfseg.sbasegtitle"/> (<c:out value="${segment.segment}"/>)">
<div class="theaddiv">
<table class="reportingheader" style="width:100%;">
<thead>
<tr>
<th style="width:32%;">
<spring:message code="perfseg.sbasalesassociate"/>
</th>
<th style="width:10%;">
<spring:message code="perfseg.sbasales"/>
</th>
<th style="width:15%;">
<spring:message code="perfseg.sbapersales"/>
</th>
<th style="width:10%;">
<spring:message code="perfseg.sbatrans"/>
</th>
<th style="width:10%;">
<spring:message code="perfseg.sbaads"/>
</th>
<th style="width:10%;">
<spring:message code="perfseg.sbaupt"/>
</th>
<th style="width:10%;">
<spring:message code="perfseg.sbaspah"/>
</th>
<!--Spacing for scrollbar alignment-->
<th style="width:3%;">
</th>
</tr>
</thead>
</table>
</div>
<div class="tbodydiv" style="width: 100%;">
<table class="reportingbody" style="width:100%;">
<tbody>
<c:forEach var="sba" items="${segment.sbaList}">
<tr>
<td style="width:32%">
<c:if test="${sba.name ne 'Unassigned'}"><c:out value='${sba.name}'/></c:if>
<c:if test="${sba.name eq 'Unassigned'}"><spring:message code="perfseg.sbaunassigned"/></c:if>
</td>
<td class="center" style="width:10%;">
<fmt:formatNumber value='${sba.sales}' type="number"/>
</td>
<td class="center" style="width:15%;">
<fmt:formatNumber value='${sba.percentSales}' type="number" minFractionDigits="1" maxFractionDigits="1"/>%
</td>
<td class="center" style="width:10%;">
<fmt:formatNumber value='${sba.trans}' type="number"/>
</td>
<td class="center" style="width:10%;">
<fmt:formatNumber value='${sba.ads}' type="number" minFractionDigits="2" maxFractionDigits="2"/>
</td>
<td class="center" style="width:10%;">
<fmt:formatNumber value='${sba.upt}' type="number" minFractionDigits="2" maxFractionDigits="2"/>
</td>
<td class="center" style="width:10%;">
<fmt:formatNumber value='${sba.spah}' type="number" minFractionDigits="2" maxFractionDigits="2"/>
</td>
<td style="width:3%;">
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
<hr style="height:1px; border:none; color: #AAAAAA; background-color: #AAAAAA;"/>
</div>
</c:forEach>
<div id="dialogbtnttl" class="hidden" title="<spring:message code="perfseg.sbadaytitle"/>">
<div class="theaddiv">
<div class="hidden center">
<b class="infoTextBig"><spring:message code="perfseg.sbadaytitle"/></b>
<br>
<div class="infoText">
<c:out value="${seg.brandName}"/> - <%=SystemConfig.getTranslatedTextByKey(LBIBOConstants.LANG_KEY_COMMON_TXTSTORE, userLocale)%> <c:out value="${seg.legacyStoreId}"/>
</div>
<br>
<%@ include file="../include/print_header.jsp" %>
<br>
<fmt:formatDate pattern="${seg.rptDateFormat}" value="${seg.transDate}" />
<br>
<br>
</div>
<table class="reportingheader" style="width:100%;">
<thead>
<tr>
<th style="width:32%;">
<spring:message code="perfseg.sbasalesassociate"/>
</th>
<th style="width:10%;">
<spring:message code="perfseg.sbasales"/>
</th>
<th style="width:15%;">
<spring:message code="perfseg.sbapersales"/>
</th>
<th style="width:10%;">
<spring:message code="perfseg.sbatrans"/>
</th>
<th style="width:10%;">
<spring:message code="perfseg.sbaads"/>
</th>
<th style="width:10%;">
<spring:message code="perfseg.sbaupt"/>
</th>
<th style="width:10%;">
<spring:message code="perfseg.sbaspah"/>
</th>
<!--Spacing for scrollbar alignment-->
<th style="width:3%;">
</th>
</tr>
</thead>
</table>
</div>
<div class="tbodybtndiv" style="width: 100%;">
<table class="reportingbody" style="width:100%;">
<tbody>
<c:forEach var="sbaTotal" items="${seg.sbaList}">
<tr>
<td style="width:32%">
<c:if test="${sbaTotal.name ne 'Unassigned'}"><c:out value='${sbaTotal.name}'/></c:if>
<c:if test="${sbaTotal.name eq 'Unassigned'}"><spring:message code="perfseg.sbaunassigned"/></c:if>
</td>
<td class="center" style="width:10%;">
<fmt:formatNumber value='${sbaTotal.sales}' type="number"/>
</td>
<td class="center" style="width:15%;">
<fmt:formatNumber value='${sbaTotal.percentSales}' type="number" minFractionDigits="1" maxFractionDigits="1"/>%
</td>
<td class="center" style="width:10%;">
<fmt:formatNumber value='${sbaTotal.trans}' type="number"/>
</td>
<td class="center" style="width:10%;">
<fmt:formatNumber value='${sbaTotal.ads}' type="number" minFractionDigits="2" maxFractionDigits="2"/>
</td>
<td class="center" style="width:10%;">
<fmt:formatNumber value='${sbaTotal.upt}' type="number" minFractionDigits="2" maxFractionDigits="2"/>
</td>
<td class="center" style="width:10%;">
<fmt:formatNumber value='${sbaTotal.spah}' type="number" minFractionDigits="2" maxFractionDigits="2"/>
</td>
<td style="width:3%;">
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</c:if>用于链接和对话框的JS：
$( "[id^=dialog]").dialog({
width: 555,
height: 315,
autoOpen: false,
resizable: false,
modal: true,
closeOnEscape: true
});
$( "#dialogbtnttl").dialog({
width: 555,
height: 315,
autoOpen: false,
resizable: false,
modal: true,
buttons: dialogButtons,
closeOnEscape: true
});
// Link to open the dialog
$( ".dialog-link" ).click(function() {
//event.preventDefault();
var btnflag = $( this ).attr("data-btnflag");
var seg = $( this ).attr( "data-seg" );
if (btnflag == "false"){
$( "#dialog"+seg ).removeClass("hidden");
$( "#dialog"+seg ).dialog( "open" );
}
else {
$( "#dialogbtnttl" ).removeClass( "hidden" );
$( "#dialogbtnttl" ).dialog( "open" );
}
});对于我必须做的这个改变，有人有什么建议吗？加载时，如何加载特定报告行的唯一数据？
编辑1-
我仔细阅读了.load的应用程序接口，显然我们可以传递一些参数，这些参数可能有助于唯一地识别正在请求其数据的行，但我不确定我必须创建的包含对话框内容的页面本身如何使用/检索这些参数。
http://api.jquery.com/load/
然而，在这一点上，可能有一些更好的解决方案，我只是没有考虑。
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-06-05 22:30:17
我从未使用过JQuery的load方法。但我也做过类似的动态内容加载(主要是在下拉列表中)，使用带有JQuery Ajax方法的Web服务调用来获取所需的数据。
您可以使用带有所需数量的参数的web服务调用来获取数据，然后对结果使用load来动态填充所需的内容。
就像我说的，我从来没有使用过load方法，所以我可能完全不知道它是如何工作的，但这只是我的两个观点。
编辑:另一方面，Ajax方法是异步运行的，因此您可以通过web服务调用同时加载多组动态内容。
编辑2:根据讨论，这里是标准JQuery Ajax函数的包装器函数。要使用它，只需将您的方法名作为字符串传递，将参数作为对象传递(例如: var parameters = param1：'hello'，确保param1与web方法参数名称完全匹配)，以及希望在成功时调用的函数(必须接受作为返回数据的单个参数)。此函数可能需要根据您的web服务设置进行更改。
function makeWsCall(methodNameVar, paramatersVar, successFunc) {
jQuery.support.cors = true; // force cross-site scripting (as of jQuery 1.5)
$.ajax({
url: '<%=postUrlCodeBehind%>' + "/" + methodNameVar, // url + method name
type: 'GET', // http request type
data: paramatersVar, // paramaters to be passed to the ws
ContentType: "application/json; charset=utf-8",
dataType: 'json', // expected return type
//traditional: true,
// dataType: 'jsonp',
timeout: 200000, // timeout, may not be needed
success: function (data) {
var returnObject = eval(data);
successFunc(returnObject); // call the function passed to the method
}, //successFunc(data),
error: function (data) { // on error method
// do nothing on error
}
});
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16942013
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号