troubleshooting Question
JS function not being called and loading next page into correct DIV
Ralph
asked on
asked on
This is an attempt to simply a different problem, and I've apparently made another problem for myself.
In the one document below I've included bare bones CSS and JS to (try to) reproduce my DataTable() error.
The JS includes a jQuery command to intercept the link click, and two tiny functions.
No PHP.
If you copy and paste the code below you can refer to these line #s, otherwise see the easy to find JS code and the first link below the dropdown.
Basic structure is a header, left, right, and center DIVs.
Action is taking place in the center DIV, and I want to load the 2nd HTML page into this DIV.
The 2nd HTML page list_plan_levels.html is attached. Without the commenting you'll see it's quite simple.
In my application I can get the page list_plan_levels.html to load into the center DIV okay, but DataTable() errors on initiation.
Line 86 is supposed to catch the link click (line 163) and kick off function prelistPlanLevelsClick().
function prelistPlanLevelsClick() is not being invoked.
Thanks!
In the one document below I've included bare bones CSS and JS to (try to) reproduce my DataTable() error.
The JS includes a jQuery command to intercept the link click, and two tiny functions.
No PHP.
If you copy and paste the code below you can refer to these line #s, otherwise see the easy to find JS code and the first link below the dropdown.
Basic structure is a header, left, right, and center DIVs.
Action is taking place in the center DIV, and I want to load the 2nd HTML page into this DIV.
The 2nd HTML page list_plan_levels.html is attached. Without the commenting you'll see it's quite simple.
In my application I can get the page list_plan_levels.html to load into the center DIV okay, but DataTable() errors on initiation.
Line 86 is supposed to catch the link click (line 163) and kick off function prelistPlanLevelsClick().
function prelistPlanLevelsClick() is not being invoked.
Thanks!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Some styling from the site's style page -->
<style>
.header { top: 0px;
position: fixed;
height: 90px;
width: 1611px;
clear: both;
background: #7777BB;
border: 1px solid black;
margin: 0px auto;
}
.content { clear: both;
margin-top: 66px;
display:inline-block;
text-align:left;
height:auto;
width: auto;
}
div.left {position: fixed ;
float: left;
margin-top: 0px;
width: 230px;
height: 700px;
text-align: left;
background-color: #ccffcc; }
div.center {position: static ;
float:left;
margin-left: 230px;
margin-top: 0px;
width: 1160px;
border: 1px solid black;
background-color: lightgray;
text-align: center;
font: 12px/12px sans-serif; }
div.right {position: fixed;
float: left;
margin-left: 1394px;
margin-top: 0px ;
width: 215px;
border: 3px solid darkcyan;
background-color: lightcyan;
height: 800px;
text-align: left;
overflow: hidden; }
</style>
<!-- Styling specifically for this page -->
<style>
#center_body.center #prelist_plan_levels {text-align: left; background-color: white; border: 3px solid white; padding-left: 15%; padding-top: 10px; padding-bottom: 15px;}
#reference_period {margin-bottom: 30px; border: 2px solid red ; padding: 3px; width: 245px; }
#posting_period {padding-left: 5px; }
#title1 {padding-left: 115px; text-align: center; font-family: sans-serif; font-size: 20px;}
#title2 {padding-left: 100px; text-align: center; font-family: sans-serif; font-size: 20px;}
#title3 { text-align: center; font-family: sans-serif; font-size: 20px;}
table {border: 4px double green}
th {height: 30px}
th {border-bottom: 1px solid black; width: 75px; text-align: center;}
#head1_1 {border-right: 1px solid black; text-align: left; width: 170px;}
#head2_1 {border-right: 1px solid black; text-align: left; width: 170px;}
#head3_1 {border-right: 1px solid black; text-align: left; width: 200px;}
td {border-bottom: 1px solid black; width: 75px; text-align: right; padding-right: 60px;}
.betw_tables {margin-top: 15px;}
.body_left {text-align: left; padding-right: 0px; border-right: 1px solid black ;}
.body_col2 {border-left: 1px solid black; }
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script>
<script type="text/javascript">
$('body').one("click", 'a.UpDowngrade', prelistPlanLevelsClick);
// ===============================================================================================================
function prelistPlanLevelsClick()
{
alert("Made it here.");
$('#center_body').load("list_plan_levels.html");
return false;
}
// ===============================================================================================================
// .ready() function for page: list_plan_levels.html
function list_plan_levels()
{
$('#UpDownGrade').DataTable();
}
</script>
</head>
<body>
<div class="header" ID="Header">header</div>
<div class="content" ID="Content">
<div class="left" ID="Left">Left</div>
<div class="center" id="center_body">
<div id="prelist_plan_levels">
<p id="reference_period" style="width: 245px;">
Reviewing Posting Period:
<span id="posting_period">
<select name="select_posting_period" id="select_posting_period" style="padding-top: 4px" data-tablename="Invoice">
<option value="Feb 2015">Feb 2015</option>
<option value="Mar 2015">Mar 2015</option>
<option value="Apr 2015">Apr 2015</option>
<option value="May 2015">May 2015</option>
<option value="Jun 2015">Jun 2015</option>
<option value="Jul 2015">Jul 2015</option>
<option value="Aug 2015">Aug 2015</option>
<option value="Sep 2015">Sep 2015</option>
<option value="Oct 2015">Oct 2015</option>
<option value="Nov 2015">Nov 2015</option>
<option value="Dec 2015">Dec 2015</option>
</select>
</span>
<span id="PleaseWait1" style="position: relative; margin-left: 20px; padding-top: 5px; display: none;">Please wait while metrics are being generated.</span>
</p>
<p class="betw_tables">
<span id="title1">Modems whose International Plans are candidates for Upgrade</span>
</p>
<table style="width: 800px;">
<thead>
<tr>
<th id="head1_0_1" colspan="1"> </th>
<th id="head1_0_2" colspan="4" style="text-align: center;">Counts of Modems in each category</th>
</tr>
<tr>
<th id="head1_1" style="">Invoice Posting Period</th>
<th id="head1_2" style="border-left: 1px solid black;">Upon Import</th>
<th id="head1_3">Reviewed</th>
<th id="head1_4">Resolved</th>
<th id="head1_5">Remaining</th>
</tr>
</thead>
<tbody>
<tr>
<td class="body_left" id="body1_1_1">Nov 2015</td>
<td class="body_col2" id="body1_1_2"><a href="should_be_caught_and_not_matter.html" class="UpDowngrade" data-pp="Nov 2015" data-scope="PP" data-updown="UP">25</a></td>
<td id="body1_1_3">0</td>
<td id="body1_1_4">0</td>
<td id="body1_1_5">25</td>
</tr>
<tr>
<td class="body_left" id="body1_2_1">Upgradeable for 2 months</td>
<td class="body_col2" id="body1_2_2">0</td>
<td id="body1_2_3">0</td>
<td id="body1_2_4">0</td>
<td id="body1_2_5"></td>
</tr>
<tr>
<td class="body_left" id="body1_3_1">Upgradeable for 3 months</td>
<td class="body_col2" id="body1_3_2">0</td>
<td id="body1_3_3">0</td>
<td id="body1_3_4">0</td>
<td id="body1_3_5"></td>
</tr>
</tbody>
</table>
<p> </p>
<p class="betw_tables">
<span id="title2">Modems whose International Plans are candidates for Downgrade</span>
</p>
<table style="width: 800px;">
<thead>
<tr>
<th id="head2_0_1" colspan="1"> </th>
<th id="head2_0_2" colspan="4" style="text-align: center;">Counts of Modems in each category</th>
</tr>
<tr>
<th id="head2_1" style="">Invoice Posting Period</th>
<th id="head2_2" style="border-left: 1px solid black;">Upon Import</th>
<th id="head2_3">Reviewed</th>
<th id="head2_4">Resolved</th>
<th id="head2_5">Remaining</th>
</tr>
</thead>
<tbody>
<tr>
<td class="body_left" id="body2_1_1">Nov 2015</td>
<td class="body_col2" id="body2_1_2"><a href="should_be_caught_and_not_matter.html" class="UpDowngrade" data-pp="Nov 2015" data-scope="PP" data-updown="DOWN">775</a></td>
<td id="body2_1_3">12</td>
<td id="body2_1_4">0</td>
<td id="body2_1_5">775</td>
</tr>
<tr>
<td class="body_left" id="body2_2_1">Downgradeable for 2 months</td>
<td class="body_col2" id="body2_2_2"><a href="should_be_caught_and_not_matter.html" class="UpDowngrade" data-pp="Nov 2015" data-scope="PP-1" data-updown="DOWN">449</a></td>
<td id="body2_2_3">0</td>
<td id="body2_2_4">0</td>
<td id="body2_2_5"></td>
</tr>
<tr>
<td class="body_left" id="body2_3_1">Downgradeable for 3 months</td>
<td class="body_col2" id="body2_3_2"><a href="should_be_caught_and_not_matter.html" class="UpDowngrade" data-pp="Nov 2015" data-scope="PP-2" data-updown="DOWN">207</a></td>
<td id="body2_3_3">0</td>
<td id="body2_3_4">0</td>
<td id="body2_3_5"></td>
</tr>
</tbody>
</table>
<p> </p>
<p class="betw_tables">
<span id="title3">International Plans whose configuration was changed on Invoice</span>
</p>
<table>
<thead>
<tr><th id="head3_1">Import changed data for:</th>
<th id="head3_2" style="border-left: 1px solid black;"># of Modems</th>
</tr></thead>
<tbody>
<tr>
<td class="body_left" id="body3_1_1">Billing Plans</td>
<td class="body_col2" id="body3_1_2"><a href="#" id="ImportChangedPlans">546</a></td>
</tr>
<tr>
<td class="body_left" id="body3_2_1">Billing Status</td>
<td class="body_col2" id="body3_2_2"><a href="#" id="ImportChangedStatus">374</a></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="right" ID="Right">Right</div>
</div>
</body>
</html>
Learn from the best
Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.
Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 6 Comments.
Try for 7 days”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.
Our community of experts have been thoroughly vetted for their expertise and industry experience.