I just graduated so I don't have much experience on programming.
I am using a jQuery function slideToggle() to switch between displaying one of two div elements. Both div's display rows of data and I am trying to use pagination since there are over 50 records on each div.
Everything seems fine so far. Refresh the page and first div is visible, pagination is working just as it should.
The problem starts when I click on the button that runs a jQuery function to switch to the other div. The second div is displayed (first one disappeared, which is fine). When I click on a page number the browser redirects me to the first div and starts showing the results from first div. I think this is normal because on page refreshing the browser runs the default values but I do not know how to solve this situation. I would appreciate any help. Forgot to mention this is ColdFusion.
What I done so far is:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="logic.js"></script>
</head>
<body style="background-color:#E8ECED">
<div id="header">
<h1>BHA Toyota</h1>
</div>
<div class="container">
<cfset pageSize=15/>
<cfset recordCount=100/>
<cfset intStart=1/>
<div style="min-height:40px">
<div id="title">Top 30 Live Outbound Calls</div>
<div id="switchDealershipsButton">
<span id="switchDealers" role="button" tabindex="0">Switch to Showcase Honda</span>
</div>
</div>
<div id="texasHonda" class="row">
<cfparam name="url.pageNumber" type="string" default=""/>
<cfset pageNumber=#url.pageNumber#/>
<cfquery name="texasHondaLiveOutbandCalls" datasource="callmeasurement">
SELECT refname, callid, cf_frn_dnisid, tz_datetime
FROM [dbo].[lskin] AS ls
INNER JOIN [dbo].[dnis] as dn
ON ls.lskinid=dn.add_lskinid
INNER JOIN [dbo].[xcall_long] AS xl
ON dn.dnisdbid=xl.cf_frn_dnisid
WHERE isoutbound=1 AND frn_xcall_dispositionid=1 AND refname='BHA - Texas Toyota'
ORDER BY tz_datetime DESC
OFFSET #pageSize# *(#pageNumber#-1) ROWS
FETCH NEXT #pageSize# ROWS only;
</cfquery>
<cftable query="texasHondaLiveOutbandCalls" htmlTable="true" colHeaders="true">
<cfcol width="30" header="Account Name" text="<em>#texasHondaLiveOutbandCalls.refname#</em>">
<cfcol width="23" header="Call ID" text="<em>#texasHondaLiveOutbandCalls.callid#</em>">
<cfcol width="20" header="Line ID" text="<em>#texasHondaLiveOutbandCalls.cf_frn_dnisid#</em>">
<cfcol width="30" header="Date/Time of Call" text="<em>#texasHondaLiveOutbandCalls.tz_datetime#</em>">
</cftable>
<cfoutput>
<cfloop index="intPage" from="1" to="#Ceiling(recordCount / 10 )#">
<!---
Calculate the start value based on the
current page.
--->
<cfset intStart=(1 + ((intPage - 1) * 10))/>
<!--- Output paginating link. --->
<a href="#CGI.script_name#?pageNumber=#intPage#">
#intPage#</a>
</cfloop>
</cfoutput>
</div>
<div id="showcaseHonda" class="row" style="display:none">
<cfparam name="url.pageNumber" type="string" default=""/>
<cfset pageNumber=#url.pageNumber#/>
<cfquery name="showcaseHondaLiveOutbandCalls" datasource="callmeasurement">
SELECT refname, callid, cf_frn_dnisid, tz_datetime
FROM [dbo].[lskin] AS ls
INNER JOIN [dbo].[dnis] as dn
ON ls.lskinid=dn.add_lskinid
INNER JOIN [dbo].[xcall_long] AS xl
ON dn.dnisdbid=xl.cf_frn_dnisid
WHERE isoutbound=1 AND frn_xcall_dispositionid=1 AND refname='BHA - Showcase Honda'
ORDER BY tz_datetime DESC
OFFSET #pageSize# *(#pageNumber#-1) ROWS
FETCH NEXT #pageSize# ROWS only;
</cfquery>
<div class="table">
<cfoutput query="showcaseHondaLiveOutbandCalls">
<div class="tableRow">
<div class="tableCell">
#showcaseHondaLiveOutbandCalls.refname#</div>
<div class="tableCell">
#showcaseHondaLiveOutbandCalls.callid#</div>
<div class="tableCell">
#showcaseHondaLiveOutbandCalls.cf_frn_dnisid#</div>
<div class="tableCell">
#showcaseHondaLiveOutbandCalls.tz_datetime#</div>
</div>
</cfoutput>
<cfoutput>
<cfloop index="intPage" from="1" to="#Ceiling(recordCount / 10 )#">
<!---
Calculate the start value based on the
current page.
--->
<cfset intStart=(1 + ((intPage - 1) * 10))/>
<!--- Output paginating link. --->
<a href="#CGI.script_name#?pageNumber=#intPage#">
#intPage#</a>
</cfloop>
</cfoutput>
</div>
</div>
</div>
</body>
</html>
$(document).ready(function() {
$('#switchDealers').click(function()
{
var dealerOnScreen = $('#switchDealers').text();
if(dealerOnScreen === "Switch to Showcase Honda")
$('#texasHonda').slideToggle("slow", texasToyota);
else
$('#showcaseHonda').slideToggle("slow", showcaseHonda);
});
function texasToyota() {
$('#showcaseHonda').slideToggle("slow");
$('#switchDealers').text("Switch to Texas Toyota");
}
function showcaseHonda() {
$('#texasHonda').slideToggle("slow");
$('#switchDealers').text("Switch to Showcase Honda");
}
});
OK guys, I was able to solve the problem. I am posting the answer in here if someone comes across this question later on.
I added another variable called "section" where I create the pagination link for the second div(the one that was having the problem. The I check if the variable section is defined (which means the pagination link for the second div is clicked). If it is defined browser get refresh but I hide the first div and show the second div.
<cfoutput>
<cfloop index="intPage" from="1" to="#Ceiling(recordCount / 10)#">
<cfset intStart = (1 + ((intPage - 1) * 10))/>
<!--- Output paginating link. --->
<a href="#CGI.script_name#?pageNumber=#intPage#§ion=2">#intPage#</a>
</cfloop>
</cfoutput>
<cfif isDefined("section") and section EQ 2>
<script type="text/javascript">
$(document).ready(function () {
$('#showcaseHonda').show();
texasToyotaHide();
});
</script>
</cfif>