2017-03-09 6 views
2

방금 ​​졸업 했으므로 프로그래밍에 대한 경험이 많지 않습니다. jQuery 함수 slideToggle()을 사용하여 두 div 요소 중 하나를 표시하는 것을 전환합니다. 두 div 표시 데이터 행 및 각 div 50 개 이상의 레코드가 있기 때문에 페이지 매김을 사용하려고합니다. 모든 것이 지금까지는 괜찮은 것 같습니다. 페이지를 새로 고침하고 첫 번째 div가 표시되고 페이지 매김이 정상적으로 작동합니다.한 번에 하나만 표시 할 수있는 두 div 요소에서 페이지 매김을 사용하는 방법

다른 div로 전환하기 위해 jQuery 함수를 실행하는 버튼을 클릭하면 문제가 시작됩니다. 두 번째 div가 표시됩니다 (첫 번째는 사라짐, 괜찮음). 페이지 번호를 클릭하면 브라우저가 나를 첫 번째 div로 리디렉션하고 첫 번째 div에서 결과를 표시하기 시작합니다. 페이지를 새로 고치면 브라우저가 기본값을 실행하기 때문에 이것이 정상이라고 생각하지만이 상황을 해결하는 방법을 모르겠습니다. 나는 어떤 도움을 주셔서 감사합니다. 이것이 ColdFusion이라는 것을 잊어 버렸습니다. 지금까지 무슨 짓을

은 다음과 같습니다

<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() { 
 
\t \t $('#switchDealers').click(function() 
 
\t \t { 
 
\t \t \t \t var dealerOnScreen = $('#switchDealers').text(); 
 
\t \t \t \t 
 
\t \t \t \t if(dealerOnScreen === "Switch to Showcase Honda") 
 
\t \t \t \t 
 
\t \t \t \t $('#texasHonda').slideToggle("slow", texasToyota); 
 
\t \t \t \t else 
 
\t \t \t \t 
 
\t \t \t \t \t $('#showcaseHonda').slideToggle("slow", showcaseHonda); 
 
\t \t \t \t 
 
\t \t \t }); 
 
\t \t \t 
 
\t \t function texasToyota() { 
 
\t \t \t \t \t $('#showcaseHonda').slideToggle("slow"); 
 
\t \t \t \t \t $('#switchDealers').text("Switch to Texas Toyota"); 
 
\t \t \t \t } 
 
\t \t \t \t 
 
\t \t \t \t 
 
\t \t function showcaseHonda() { 
 
\t \t \t \t \t \t $('#texasHonda').slideToggle("slow"); 
 
\t \t \t \t \t \t $('#switchDealers').text("Switch to Showcase Honda"); 
 
\t \t \t \t \t } 
 
\t \t 
 
\t \t }); 
 
\t \t

+0

JS 코드를 게시하면 어떻게 slideToggle()을 사용하고 있는지 보여줄 수 있습니까? – Leigh

+0

나는 눈에 보이는 코드를 훑어 보았다. 왜 기본 페이지 번호가 1이 아닌 빈 문자열이됩니까? –

+0

그럴만 한 이유는 없습니다, 운 좋게도 운이 좋았습니다. 페이지가 처음으로 로딩 될 때 실패했습니다. 왜냐하면, 나는 빈 문자열을 추가했기 때문에, undifined 이었기 때문에 실패했습니다. 그러나 그것은 "1"이 아닌 ""더 의미가 있습니다. – DoArNa

답변

1

OK 사람이, 내가 문제를 해결할 수 있었다. 나는 누군가가이 질문을 나중에 우연히 만난다면 여기에 대답을 게시하고있다.

두 번째 div의 페이지 매김 링크를 만들 때 "섹션"이라는 또 다른 변수를 추가했습니다 (문제가있는 변수를 확인했습니다. 변수 섹션이 정의되어 있는지 확인합니다. 두 번째 div의 페이지 매김 링크를 의미합니다). 이 브라우저가 새로 고침을 얻을 수 있지만, 내가 처음 사업부를 숨기고 두 번째 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#&section=2">#intPage#</a> 

    </cfloop> 
</cfoutput> 



<cfif isDefined("section") and section EQ 2> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       $('#showcaseHonda').show(); 
       texasToyotaHide(); 
      }); 
     </script> 
</cfif> 
+0

좋은 직장. div의 순차적 ID (예 : "dealership1"및 "dealership2")를 제공하는 것도 고려해 볼 수 있습니다. 그러면 다음과 같이 조금 더 동적 인 작업을 할 수 있습니다. https://jsfiddle.net/8tegj7da/8/ – Leigh

1

을 (너무 긴 의견을 ...) 여담으로

, 당신이 언급 한 이후 CF에 대한 새로운 정보, 코드에 대한 몇 가지 제안 및 팁

  1. 은 데이터베이스에 sql injection을 노출하기 때문에 원시 클라이언트 변수를 sql에서 사용합니다. 대신 cfqueryparam을 사용하십시오. 다른 장점들 중 원시 매개 변수가 SQL 명령으로 실행되는 것을 방지합니다. 따라서 리터럴이 예상되는 곳이면 어디에서나 사용할 수 있습니다. (객체 이름에는 사용할 수 없습니다). OFFSET/FETCH은 간단한 숫자를 요구하기 때문에 이어야합니다. 그렇지 않은 경우 숫자 값을 보장하기 위해 val()을 사용하는 등 URL 매개 변수를 먼저 수정해야합니다.

  2. CF UI 태그 (cftable, cfcol, cfform, etcetera)를 사용하지 마십시오. 대부분은 구식이며 버그가 있습니다. 어려운 사용자 정의는 말할 것도 없습니다. 문서에서 cftable을 찾아 봐야만 그 내용을 알 수 있었지만 일반 html <table>과 쿼리 루프로 바꿀 수있는 것처럼 보였습니다.

  3. 데이터베이스와 HTML을 분리하면 어느 쪽에서도 작동하지만 깨끗하고 읽기 쉬운 코드가됩니다. 일반적인 규칙은 쿼리와 매개 변수 선언을 먼저 배치 한 다음 표시 코드를 배치하는 것입니다. (데이터베이스 로직을 cfcomponent으로 옮길 수도 있습니다.이미 존재하지 않는 경우)

    <!--- initialize variables ---> 
    <cfparam name="url.pageNumber" default=""/> 
    
    <!--- retrieve data ---> 
    <cfquery ...>.. sql statement here</cfquery> 
    <cfquery ...>.. sql statement here</cfquery> 
    
    <!--- presentation code ---> 
    <html> 
    <head> 
    ... rest of display code ... 
    </body> 
    </html> 
    
  4. CFParam 변수를 작성합니다. 동일한 변수에 대해 여러 개의 cfparam 선언이 필요하지 않습니다. 첫 번째 작업은 완료되고 다른 작업은 무시됩니다.

  5. 파운드 기호는 생각만큼 자주 필요하지 않습니다. 보통 변수는 <cfoutput> 안에 변수를 사용할 때 또는 변수가 따옴표 안에 들어있을 때만 필요합니다. 그래서 사용하는 대신

    <cfset pageNumber= url.pageNumber/> 
    

    :

    <cfset pageNumber= #url.pageNumber#/> 
    

    비록을이 특정한 경우에 또 다른 변수로 url.pageNumber를 복사 할 필요가 없습니다. 코드에서 직접 url.pageNumber을 사용하십시오.