We have a report where when users click on a particular row's dialog link, a modal dialog with additional details about that particular row appears. Currently, we do not load this data dynamically, and we had a reason for it before since we wanted the data in the dialogs to match the aggregated rows.
Turns out this data I'm pulling from a stored procedure I don't own takes many seconds to load (since it is calculated and not aggregated), and since it doesn't dynamically load dialog contents, it slowed down this report significantly since the data on the page is aggregated, but the data in the dialogs is not. IMO the data calls are the root cause and need fixed, but for the time being I'll have to move the loading time to when the dialogs are loaded with data.
I am hoping to dynamically load this content from here on, similar to here
However, since the dialog links I have also bring up a unique dialog to that clicked element, with contents retrieved from a DB for that particular link, I'm not sure I can simply do a .load() of a particular page without passing it what link was clicked, etc..
Current functionality:
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 for links and dialogs:
$( "[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" );
}
});
Does anyone have any advice in approaching this change I have to do? When loading, how can I load data unique to that particular report row?
Edit 1-
I was reading through the API for .load a bit more, and apparently we can pass some parameters which might help with uniquely identifying the row whose data is being requested, but I'm not sure how those parameters might be used/retrieved by the page itself that I'd have to create containing the dialog contents.
At this point though, there may be some better solution I'm just not thinking of.
