nicoleheritage
asked on
Javascript sort on table not working on lightbox popup
All,
I have added a the code from http://www.kryogenix.org/code/browser/sorttable/ to sort a table on my php page. A lightbox popup is also used on this page that gives more information based on what you clicked on the parent page. The popup is a table that needs to be sortable; however, I am unable to get the sortable.js to work on my popup.
I do not get any errors on the page or the popup. Please note there are two different pages in the code below. I have spoken with the author of the sorttable.js and he did not see anything wrong with the way I was using the code; thererfore, I believe it has more to do with conflicting scripts between the sorttable.js and the lightbox HoverDivMethods.js.
All files (except the Lightbox js) are located in the same folder on the same drive.
I have added a the code from http://www.kryogenix.org/code/browser/sorttable/ to sort a table on my php page. A lightbox popup is also used on this page that gives more information based on what you clicked on the parent page. The popup is a table that needs to be sortable; however, I am unable to get the sortable.js to work on my popup.
I do not get any errors on the page or the popup. Please note there are two different pages in the code below. I have spoken with the author of the sorttable.js and he did not see anything wrong with the way I was using the code; thererfore, I believe it has more to do with conflicting scripts between the sorttable.js and the lightbox HoverDivMethods.js.
All files (except the Lightbox js) are located in the same folder on the same drive.
********************************Main Page***********************************************
<?php
include 'Standardcode/Connections.php';
//**************************** QUERIES ***********************************
$SQLAll = "SELECT * from table
WITH UR";
$RESULTS= odbc_exec($DB2Q,$SQLAll);
?>
<HTML>
<HEAD>
<STYLE TYPE="text/css">
.black_overlay{
visibility :hidden;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
position: absolute;
-moz-opacity: 0.4;
opacity:.40;
filter: alpha(opacity=40);
}
</STYLE>
<SCRIPT LANGUAGE='JavaScript' SRC='Lightbox/HoverDivMethods.js'></SCRIPT>
<script src="sorttable.js"></script>
<link rel="stylesheet" type="text/css" href="css/ReportsSummary.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/ReportsSummary.css" media="print" />
</HEAD>
<BODY ALIGN = CENTER>
<DIV NAME = 'MAINPAGE' onscroll="sync()">
<div id='summaryDiv' align='center' valign='middle'
style='position:absolute;background-color:#ffffff;visibility:hidden; width: 650px;height: 250px; top: 0px; left: 5px; border:5px solid #0F4CB1; z-index:50;overflow : auto; ' >
</div>
<div id='pageDiv' CLASS="black_overlay" STYLE='z-index:25;' onClick="closeSummary('TRUE');"></div>
<FORM NAME = 'myForm' method="POST">
<TABLE ALIGN = CENTER width = 700 border = 0 cellpadding = 0 cellspacing = 0>
<TR><TD CLASS = 'BLANK'> </TD></TR>
<TABLE ALIGN = CENTER id='t2' width = 700 cellpadding = 1 cellspacing = 1 class = 'sortable'>
<?php
echo "<THEAD>";
echo "<TR>";
echo "<TD CLASS = 'TBLHEAD' WIDTH = 15>Region</TD>";
echo "<TD CLASS = 'TBLHEAD' WIDTH = 85>BDE</TD>";
echo "<TD CLASS = 'TBLHEAD' WIDTH = 50>Master Logs Count</TD>";
echo "<TD CLASS = 'TBLHEAD' WIDTH = 50>Inactive Time</TD>";
echo "<TD CLASS = 'TBLHEAD' WIDTH = 50>Business Opp Count</TD>";
echo "<TD CLASS = 'TBLHEAD' WIDTH = 50>Inactive Time</TD>";
echo "<TD CLASS = 'TBLHEAD' WIDTH = 50>Master Logs Count</TD>";
echo "<TD CLASS = 'TBLHEAD' WIDTH = 50>Inactive Time</TD>";
echo "<TD CLASS = 'TBLHEAD' WIDTH = 50>Business Opp Count</TD>";
echo "<TD CLASS = 'TBLHEAD' WIDTH = 50>Inactive Time</TD>";
echo "</TR>";
echo "</THEAD>";
echo "<TBODY>";
WHILE (odbc_fetch_row($RESULTS)) {
echo "<TR bgcolor='#FFFFFF' onMouseOver=this.bgColor='#FFFFAA'; onMouseOut=this.bgColor='#FFFFFF'>";
echo "<TD CLASS = 'TEXT' style='cursor:hand;'onClick='viewSummary(\"850\",\"450\",\"LOADING...\",\"".$dirURL."/dcsmsa/mrc/ReportInactiveLeads_byLead.php?OPTION=1,".odbc_result($RESULTS, 'BDE')."\",\"TRUE\");' TITLE='CLICK to view leads' >".(odbc_result($RESULTS, 'REGION') == '' ? '--' : odbc_result($RESULTS, 'REGION'))."</TD>";
echo "<TD CLASS = 'TEXT' style='cursor:hand;'onClick='viewSummary(\"850\",\"450\",\"LOADING...\",\"".$dirURL."/dcsmsa/mrc/ReportInactiveLeads_byLead.php?OPTION=1,".odbc_result($RESULTS, 'BDE')."\",\"TRUE\");' TITLE='CLICK to view leads' >".odbc_result($RESULTS, 'BDE')."</TD>";
echo "<TD CLASS = 'TEXT' style='cursor:hand;'onClick='viewSummary(\"850\",\"450\",\"LOADING...\",\"".$dirURL."/dcsmsa/mrc/ReportInactiveLeads_byLead.php?OPTION=2,".odbc_result($RESULTS, 'BDE')."\",\"TRUE\");' TITLE='CLICK to view leads' >".(odbc_result($RESULTS, 'EXPIRED_ML_COUNT')=='0' ? ' ' : odbc_result($RESULTS, 'EXPIRED_ML_COUNT'))."</TD>";
echo "<TD CLASS = 'TEXT' style='cursor:hand;'onClick='viewSummary(\"850\",\"450\",\"LOADING...\",\"".$dirURL."/dcsmsa/mrc/ReportInactiveLeads_byLead.php?OPTION=2,".odbc_result($RESULTS, 'BDE')."\",\"TRUE\");' TITLE='CLICK to view leads' >".(odbc_result($RESULTS, 'EXPIRED_ML_AVG') == '' ? ' ' : odbc_result($RESULTS, 'EXPIRED_ML_AVG'))."</TD>";
echo "<TD CLASS = 'TEXT' style='cursor:hand;'onClick='viewSummary(\"850\",\"450\",\"LOADING...\",\"".$dirURL."/dcsmsa/mrc/ReportInactiveLeads_byLead.php?OPTION=3,".odbc_result($RESULTS, 'BDE')."\",\"TRUE\");' TITLE='CLICK to view leads' >".(odbc_result($RESULTS, 'EXPIRED_OPP_COUNT') == '0' ? ' ' : odbc_result($RESULTS, 'EXPIRED_OPP_COUNT'))."</TD>";
echo "<TD CLASS = 'TEXT' style='cursor:hand;'onClick='viewSummary(\"850\",\"450\",\"LOADING...\",\"".$dirURL."/dcsmsa/mrc/ReportInactiveLeads_byLead.php?OPTION=3,".odbc_result($RESULTS, 'BDE')."\",\"TRUE\");' TITLE='CLICK to view leads' >".(odbc_result($RESULTS, 'EXPIRED_OPP_AVG') == '' ? ' ' : odbc_result($RESULTS, 'EXPIRED_OPP_AVG'))."</TD>";
echo "<TD CLASS = 'TEXT' style='cursor:hand;'onClick='viewSummary(\"900\",\"450\",\"LOADING...\",\"".$dirURL."/dcsmsa/mrc/ReportInactiveLeads_byLead.php?OPTION=4,".odbc_result($RESULTS, 'BDE')."\",\"TRUE\");' TITLE='CLICK to view leads' >".(odbc_result($RESULTS, 'INACTIVE_ML_COUNT') == '0' ? ' ' : odbc_result($RESULTS, 'INACTIVE_ML_COUNT'))."</TD>";
echo "<TD CLASS = 'TEXT' style='cursor:hand;'onClick='viewSummary(\"900\",\"450\",\"LOADING...\",\"".$dirURL."/dcsmsa/mrc/ReportInactiveLeads_byLead.php?OPTION=4,".odbc_result($RESULTS, 'BDE')."\",\"TRUE\");' TITLE='CLICK to view leads' >".(odbc_result($RESULTS, 'INACTIVE_ML_AVG') == '' ? ' ' : odbc_result($RESULTS, 'INACTIVE_ML_AVG'))."</TD>";
echo "<TD CLASS = 'TEXT' style='cursor:hand;'onClick='viewSummary(\"900\",\"450\",\"LOADING...\",\"".$dirURL."/dcsmsa/mrc/ReportInactiveLeads_byLead.php?OPTION=5,".odbc_result($RESULTS, 'BDE')."\",\"TRUE\");' TITLE='CLICK to view leads' >".(odbc_result($RESULTS, 'INACTIVE_OPP_COUNT') === '0' ? ' ' : odbc_result($RESULTS, 'INACTIVE_OPP_COUNT'))."</TD>";
echo "<TD CLASS = 'TEXT' style='cursor:hand;'onClick='viewSummary(\"900\",\"450\",\"LOADING...\",\"".$dirURL."/dcsmsa/mrc/ReportInactiveLeads_byLead.php?OPTION=5,".odbc_result($RESULTS, 'BDE')."\",\"TRUE\");' TITLE='CLICK to view leads' >".(odbc_result($RESULTS, 'INACTIVE_OPP_AVG') == '' ? ' ' : odbc_result($RESULTS, 'INACTIVE_OPP_AVG'))."</TD>";
ECHO "</TR>";
}
echo "</TBODY>";
echo "</TABLE>";
?>
</TD></TR></TABLE>
</FORM>
</DIV>
</BODY>
</HTML>
**********************POPUP PAGE**************************************************
<?php
//**********************CONNECTIONS************************************************************
include 'Standardcode/Connections.php';
//Variables from parent form
$Option= $_GET['OPTION'];
$split = explode(",", $Option);
$byclick = $split[0];
$BDE = $split[1];
if ($byclick ==2) {
$SQLbyClick = " AND EXPIRED_TYPE = 'ML'";
$Table = "DCSTBL.MRC_EXPIRED_T";
} elseif ($byclick ==3) {
$SQLbyClick = " AND EXPIRED_TYPE = 'OPP'";
$Table = "DCSTBL.MRC_EXPIRED_T";
} elseif ($byclick ==4) {
$SQLbyClick = " AND INACTIVE_TYPE = 'ML' AND JFOLLOWUP_DATE IS NULL";
$Table = "DCSTBL.MRC_INACTIVE_T";
} elseif ($byclick ==5) {
$SQLbyClick = " AND INACTIVE_TYPE = 'OPP' AND JFOLLOWUP_DATE IS NULL";
$Table = "DCSTBL.MRC_INACTIVE_T";
}
IF ($byclick == 2 || $byclick == 3) {
$SQLExpired = "SELECT A.J_SALES_REGION
, A.JFULL_NAME
, A.LEAD_COMPANY
, A.APPROVED_DATE
, A.INACTIVE_TIME
, A.FOLLOWUP_DATE
, B.RN_APPT_ID_STR
, A.MRC_LEAD_ID
FROM ".$Table." A
INNER JOIN
DCSTBL.MRC_LEADSINATLAS_T B ON A.MRC_LEAD_ID = B.MRC_LEAD_ID
WHERE A.JFULL_NAME = '".$BDE."'
".$SQLbyClick."
WITH UR";
$RESULTS= odbc_exec($DB2Q,$SQLExpired);
} else {
$SQLInactive = "SELECT A.J_SALES_REGION
, A.JFULL_NAME
, A.LEAD_COMPANY
, A.APPROVED_DATE
, A.INACTIVE_TIME
, CHAR(DATE(A.JFOLLOWUP_DATE), USA) AS FOLLOWUP_DATE
, A.LAST_ACTIVITY_DATE
, A.LAST_ACTIVITY_TYPE
, A.LAST_ACTIVITY_DESC
, B.RN_APPT_ID_STR
, A.MRC_LEAD_ID
FROM ".$Table." A
INNER JOIN
DCSTBL.MRC_LEADSINATLAS_T B ON A.MRC_LEAD_ID = B.MRC_LEAD_ID
WHERE A.JFULL_NAME = '".$BDE."'
".$SQLbyClick."
WITH UR";
$RESULTS= odbc_exec($DB2Q,$SQLInactive);
}
?>
<HTML>
<HEAD>
<script src="sorttable.js"></script>
</HEAD>
<BODY>
<?php
echo "<TABLE ALIGN = CENTER NAME = 'tablebylead' ID = 'tablebylead' width = 800 CLASS = 'sortable'>";
echo "<THEAD>";
echo "<TR>";
echo "<TD CLASS = 'TBLHEAD'>Company</TD>";
echo "<TD CLASS = 'TBLHEAD'>Region</TD>";
echo "<TD CLASS = 'TBLHEAD'>BDE</TD>";
echo "<TD CLASS = 'TBLHEAD'>Inactive Time</TD>";
echo "<TD CLASS = 'TBLHEAD'>Atlas Date</TD>";
echo "<TD CLASS = 'TBLHEAD'>Followup Date</TD>";
echo "</TR>";
echo "</THEAD>";
echo "<TBODY>";
WHILE (odbc_fetch_row($RESULTS)) {
echo "<TR bgcolor='#FFFFFF' onMouseOver=this.bgColor='#FFFFAA'; onMouseOut=this.bgColor='#FFFFFF'>";
echo "<TD CLASS = 'TEXTL'>".(odbc_result($RESULTS, 'LEAD_COMPANY')=='' ? ' ' : odbc_result($RESULTS, 'LEAD_COMPANY'))."</TD>";
echo "<TD CLASS = 'TEXT'>".(odbc_result($RESULTS, 'J_SALES_REGION')=='' ? ' ' : odbc_result($RESULTS, 'J_SALES_REGION'))."</TD>";
echo "<TD CLASS = 'TEXT'>".(odbc_result($RESULTS, 'JFULL_NAME')=='' ? ' ' : odbc_result($RESULTS, 'JFULL_NAME'))."</TD>";
echo "<TD CLASS = 'TEXT'>".(odbc_result($RESULTS, 'INACTIVE_TIME')=='' ? ' ' : odbc_result($RESULTS, 'INACTIVE_TIME'))."</TD>";
echo "<TD CLASS = 'TEXT'>".(odbc_result($RESULTS, 'APPROVED_DATE')=='' ? ' ' : odbc_result($RESULTS, 'APPROVED_DATE'))."</TD>";
echo "<TD CLASS = 'TEXT'>".(odbc_result($RESULTS, 'FOLLOWUP_DATE')=='' ? ' ' : odbc_result($RESULTS, 'FOLLOWUP_DATE'))."</TD>";
ECHO "</TR>";
}
echo "</TBODY>";
echo "</TABLE>";
?>
</BODY>
</HTML>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
This doesn't resolve the issue. I've run across the same issue. For some reason sorttable.js does not work inside a lightbox, and I don't know what it is. Could be a javascript conflict issue, but I don't know.
Hmm, 3 years on - perhaps new versions of both sortable and lightbox are available
If not, jQuery UI should possibly have working versions of both
If not, jQuery UI should possibly have working versions of both
Indeed, this is the solution. Use the latest version of the script. Obviously.
Thanks mplungjan.
In this case the "newest" version is 2007. The key is using the version by Yoast, who took over the script from Stuart Langridge and made some compatibility tweaks to it. Latest version here works inside lightbox. I was using Langridge's latest version.
Thanks mplungjan.
In this case the "newest" version is 2007. The key is using the version by Yoast, who took over the script from Stuart Langridge and made some compatibility tweaks to it. Latest version here works inside lightbox. I was using Langridge's latest version.