Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.
JS function not being called and loading next page into correct DIV
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>
Who is Participating?
LVL 22
If I'm understanding the sentence you've bolded in your last comment, yes. Execute the ModemConfig_Table() function as part of the jQuery load's success state routine.
Line 86 is supposed to catch the link click (line 163) and kick off function prelistPlanLevelsClick().The reason prelistPlanLevelsClick() is not being invoked is because, at this point in the page flow, the body element doesn't exist. So no event handlers can be attached to it. In most cases you could move it to the bottom of the body element. But since it references the body element, it should be placed after the closing of the body element. But that would be improper. The <html> element can only have one <head> and one <body> element as direct descendants. No other elements can be direct descendants of the <html> element. You can, however, defer execution of this line by placing it in a document ready function.
function prelistPlanLevelsClick() is not being invoked.
$(function(){$('body').one("click", 'a.UpDowngrade', prelistPlanLevelsClick);});
Any <script> tags you want to include can be included in the page fragment, but it is not necessary to duplicate any scripts that are already loaded in the parent page.
<link> tags, on the other hand, are technically only allowed in the head element. You can include <style> tags within the body element, but they should have scope attributes when they are not in the head element. All browsers, however, are forgiving in this regard and process the <link> tags anyway. Beware, thought, that the styles in the page fragment would be applied to the entire page and could override existing styles elsewhere on the page.
Wow, interesting.
I'm more of a back end developer for most of my recent career and so it was a year ago that I began using HTML, JS, and PHP WAY more than I ever had before.
Several moons ago on this project I was using iframes but migrated away from then when I began using jQuery's $('selector').load(url, function(){});
And FOR SOME REASON that has worked with full pages loading into DIVs w/o any trouble until this frustrating 6-days-of-effort to get this to work. It's worked for DOZENS of pages maybe a thousand times!!!
For this page here, prelist_plan_levels.html is (was) a full page loaded into the center DIV and JS populated, (not in what I posted here because I have had to pare things down quite a bit.... but in MANUALLY assembling this post, I DID run into your stated Header w/in Body problem).
On clicking the # link in this prelist_plan_levels.html page to load the next page, it would load the DataTable() form correctly into the entire window, or when using .load() the page would start to load but DataTable() would die before it started.
How is .load() different then from .html() then? Never mind, I'll look it up myself.
Thank you Kim. I'll give it a go on Monday and let you know how it goes.
Maybe, finally, I can get DataTable() in a page fragment (body) in the center DIV to work!
Maybe I'll get out of this nightmare w/ your help; that would be wondeful.
Ralph
I'm more of a back end developer for most of my recent career and so it was a year ago that I began using HTML, JS, and PHP WAY more than I ever had before.
Several moons ago on this project I was using iframes but migrated away from then when I began using jQuery's $('selector').load(url, function(){});
And FOR SOME REASON that has worked with full pages loading into DIVs w/o any trouble until this frustrating 6-days-of-effort to get this to work. It's worked for DOZENS of pages maybe a thousand times!!!
For this page here, prelist_plan_levels.html is (was) a full page loaded into the center DIV and JS populated, (not in what I posted here because I have had to pare things down quite a bit.... but in MANUALLY assembling this post, I DID run into your stated Header w/in Body problem).
On clicking the # link in this prelist_plan_levels.html page to load the next page, it would load the DataTable() form correctly into the entire window, or when using .load() the page would start to load but DataTable() would die before it started.
How is .load() different then from .html() then? Never mind, I'll look it up myself.
Thank you Kim. I'll give it a go on Monday and let you know how it goes.
Maybe, finally, I can get DataTable() in a page fragment (body) in the center DIV to work!
Maybe I'll get out of this nightmare w/ your help; that would be wondeful.
Ralph
Following up moments later.
Looking at 'elements' in Chrome's Inspector, (doing it my historically wrong way), I see that it removes the included 'entire' page's <head></head> elements, but includes the header contents. AND it includes the included page's .ready() function invocation.
I see the repeated JS links. Should I / does one include all site library links in the initial / index page equivalent when nesting page (fragments) as I'm doing here?
I DO NOT expect you to follow along the long code chuck that follows, just the one line referenced.
I rely heavily on the .ready() function.
So is it standard practice then when including page fragments in DIVs to do as it appears below in line 160? (Also at lines 16, 78, 112.)
Just nestle that <script> ready reference </script> INSIDE the DIV I'll include with .load()???
Thank you.
Looking at 'elements' in Chrome's Inspector, (doing it my historically wrong way), I see that it removes the included 'entire' page's <head></head> elements, but includes the header contents. AND it includes the included page's .ready() function invocation.
I see the repeated JS links. Should I / does one include all site library links in the initial / index page equivalent when nesting page (fragments) as I'm doing here?
I DO NOT expect you to follow along the long code chuck that follows, just the one line referenced.
I rely heavily on the .ready() function.
So is it standard practice then when including page fragments in DIVs to do as it appears below in line 160? (Also at lines 16, 78, 112.)
Just nestle that <script> ready reference </script> INSIDE the DIV I'll include with .load()???
Thank you.
<html><head>
<title>index page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/cmdb/CSS/PopulateTables.css">
<script type="text/javascript" src="/cmdb/javascripts/StartupScripts.js"></script>
<script type="text/javascript" src="/cmdb/javascripts/LeftMarginLinks.js"></script>
<script type="text/javascript" src="/cmdb/javascripts/LibraryScripts.js"></script>
<script type="text/javascript" src="/cmdb/javascripts/TableRowScripts.js"></script>
<script type="text/javascript" src="/cmdb/javascripts/WorkflowScripts.js"></script>
<script type="text/javascript" src="/cmdb/javascripts/FormSearchScripts.js"></script>
<script type="text/javascript" src="/cmdb/javascripts/FormCommitScripts.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script>
<script type="text/javascript">
$(document).ready(Main);
</script>
</head>
<body>
<div class="header" id="header">
<div id="AjaxSearches">
<progress id="progress_bar" style="position: static; width: 230px; height: 100%; opacity: 0.2; z-index: -1; display: none;">Unknown</progress>
<span id="AjaxMessage" style="position: fixed; margin-top: -20px; z-index:1;">0 Active Searches</span>
</div>
<div id="AjaxResults" class="">Content search yielded 1 row</div>
<div id="debug" style="width: 85em; word-wrap: break-word;">job=SearchUsing&task=form_RightMargin&tablename=ModemConfig&rowno=1&uniq_file_id=5487089385&url=/cmdb/public_html/table_forms/modem_config_and_activity_table.html</div>
<div id="DueReminders">Crucial Reminders Due</div>
<div id="FindReminder">Reminders to Review</div>
</div> <!-- EO DIV header -->
<div class="content" id="content">
<div class="left" id="left_margin">
<title>Left Margin</title>
<style>
.leftmargin_header {
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
transform-origin:00% 00%;
position:fixed; /* border:1px solid black; */
width:500px;height:30px; /* background-color: burlywood ; */
margin-top:507px; margin-left:0px;
padding-left:0px; padding-top:5px; padding-bottom: -3px;
}
.leftmargin_list {
margin-left: 0px;
padding-right: 0px;
overflow:hidden; background-color:#ccffcc;
height:800px;width: 180px;
border: 3px solid green;
}
</style>
<script type="text/javascript" src="/cmdb/javascripts/LeftMarginLinks.js"></script>
<script type="text/javascript" src="/cmdb/javascripts/StartupScripts.js"></script>
<script type="text/javascript" src="/cmdb/javascripts/LibraryScripts.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js">
</script>
<!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> -->
<script type="text/javascript">
$(document).ready(LeftMargin);
</script>
<div class="leftmargin_header">
<span class="leftmargin_menu" id="leftmargin_menu_info"> <a id="info" style=" box-shadow: -6px -4px 3px #8d7058;" href="/cmdb/public_html/MarginLeft/left_margin_info.html">INFORMATION</a></span>
<span class="leftmargin_menu" id="leftmargin_menu_import"><a id="import" style=" box-shadow: -4px -4px 3px #8d7058;" href="/cmdb/public_html/MarginLeft/left_margin_import.html">IMPORTS</a></span>
<span class="leftmargin_menu" id="leftmargin_menu_report"><a id="report" style=" box-shadow: +4px -4px 3px #8d7058;" href="/cmdb/public_html/MarginLeft/left_margin_report.html">REPORTS</a></span>
<span class="leftmargin_menu" id="leftmargin_menu_work"> <a id="work" style=" box-shadow: +6px -4px 3px #8d7058;" href="/cmdb/public_html/MarginLeft/left_margin_workflow.html">WORKFLOW</a></span>
</div>
<div class="leftmargin_list" id="leftmargin_list" style="padding-left:40px;">
<title>Import Links</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/cmdb/CSS/PopulateTables.css">
<style>
ul {margin:0; padding: 0; ;}
li {margin:0; padding: 0; list-style-type: none;}
</style>
<script type="text/javascript" src="/cmdb/javascripts/LeftMarginLinks.js"></script>
<script type="text/javascript" src="/cmdb/javascripts/LibraryScripts.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script>
<script>
$(document).ready(LeftMarginList) ;
</script>
<strong>Import Data</strong>
<!-- href="#" onclick="loadFloatingWindow('/cmdb/PHP/import_CellModemPlans_ATnT.php','Import Master Modem List', Width, Height, %Y, %X)" -->
<p>
<a id="ImportModemPlans" title="Click for steps to import the 'SMART Data' report from AT&T" href="#" onclick="loadFloatingWindow('/cmdb/PHP/import_CellModemPlans_ATnT.php','Import Modem Invoice Plans', 900, 900, 50, 5)">Modem Invoice Plans</a></p>
<p>
<a id="ImportModemCharges" title="Click for steps to import the '6 Column' Modem Invoice from AT&T" href="#" onclick="loadFloatingWindow('/cmdb/PHP/import_CellModemCharges_ATnT.php','Import Modem Invoice Charges', 900, 900, 50, 5)">Modem Invoice Charges</a></p>
<p>
<a id="ImportManufLists" title="Click for steps to import Manufacturing Lists" href="#" onclick="loadFloatingWindow('/cmdb/PHP/import_ManufacturingLists.php','Import Manufacturing Lists', 900, 900, 50, 5)">Import Manufacturing Lists</a></p>
<p>
<a id="ImportShipList" title="Click for steps to import Shipping List" href="#" onclick="loadFloatingWindow('/cmdb/PHP/import_ShippingList.php','Import Shipping List', 900, 900, 50, 5)">Import Shipping List</a></p>
</div>
<div id="error"></div>
</div>
<div class="center" id="center_body">
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<title>Modem Configuration and Activity Fields</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/cmdb/CSS/PopulateTables.css">
<script type="text/javascript" src="/cmdb/javascripts/FormSearchScripts.js"></script>
<script type="text/javascript" src="/cmdb/javascripts/LibraryScripts.js"></script>
<script type="text/javascript" src="/cmdb/javascripts/LeftMarginLinks.js"></script>
<script type="text/javascript" src="/cmdb/javascripts/FormCommitScripts.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script>
<script type="text/javascript">
$(document).ready( ModemConfig_Table ) ;
</script>
<div id="DropDown" style="display: none;"></div>
<div id="tblModemConfigAndActivity">
<p style="font-weight: bold; font-size:1.2em; "> Modem Configuration and Activity</p>
<form name="PopulateModemALL" id="PopulateModemALL" action="javascript:void(0);" class="form">
<p>
<!-- HUNDREDS OF LINES LEFT OUT HERE -->
<span class="field_left field_buttons">
<input id="TableRefresh" class="Button_Refresh" type="reset" value="Revert" name="refresh_ModemALLTable" onclick="RevertForm('PopulateModemALL')" disabled="">
<input id="TableClear" class="Button_Clear" type="button" value="Clear" name="clear_ModemALLTable" onclick="ClearFormElements('PopulateModemALL')">
<input id="TableSearch" class="Button_Search" type="submit" value="Search" name="search_ModemALLTable" onclick="search_ModemConfig()">
</span>
<span class="field_center field_buttons">
<!-- <i n p u t ID="TableAddNote" class="Button_AddNote" type="button" value="Edit Note" name="addnote_ModemALLTable" disabled ></i> -->
<input id="TableMakeReminder" class="Button_MakeReminder MCaA_MakeReminder" type="button" value="Make Reminder" name="makereminder_ModemALLTable">
</span>
<span class="field_right field_buttons">
<input id="TableUpdate" class="Button_Update" type="button" value="Update" name="Update" onclick="commitTableRecs('PopulateModemALL', 'ModemConfig', 'Update')">
<input id="TableSubmit" class="Button_Submit" type="button" value="New" name="New" onclick="commitTableRecs('PopulateModemALL', 'ModemConfig', 'Insert')" disabled="">
</span>
<input type="hidden" id="table_row" name="table_row" value="1">
<input type="hidden" id="note_table_row" name="note_table_row" value="15">
</p>
<div id="parentage"></div>
</form>
</div>
</div>
<div class="right" id="right_margin">
<title>Right Margin</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/cmdb/CSS/PopulateTables.css">
<style>
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
</style>
<script type="text/javascript" src="/cmdb/javascripts/StartupScripts.js"></script>
<script type="text/javascript" src="/cmdb/javascripts/LeftMarginLinks.js"></script>
<script type="text/javascript" src="/cmdb/javascripts/LibraryScripts.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script>
<script type="text/javascript">
$(document).ready( RightMargin );
</script>
<div id="RtMgn_top" style="border-bottom: 1px solid blue; padding-left:3px;">
<p><a href="/cmdb/public_html/view_forms/modem_config_and_activity_table.html" class="views" data-target="center_body" data-link="RtMgn_ModemConfig"> Modem Config. (new / search)</a><br>
</p>
</div>
<div id="RtMgn_bottom" style="padding-left:3px;">
<br>
<input type="number" id="RtMgn_ModemConfig" value="1" min="0" max="999999999" style="width: 50px; direction:rtl;font-size:0.7em;background-color:lightcyan;">
<a href="/cmdb/public_html/table_forms/modem_config_and_activity_table.html" class="tables" data-target="center_body" data-link="RtMgn_ModemConfig">Modem Configuration</a><br>
<input type="number" id="RtMgn_ModemActivity" value="1" min="0" max="999999999" style="width: 50px; direction:rtl;font-size:0.7em;background-color:lightcyan;">
<a href="/cmdb/public_html/table_forms/modem_activity_table.html" class="tables" data-target="center_body" data-link="RtMgn_ModemActivity">Modem Activity</a><br>
<br>
<input type="number" id="RtMgn_Customer" value="1" min="0" max="999999999" style="width: 50px; direction:rtl;font-size:0.7em;background-color:lightcyan;">
<a href="/cmdb/public_html/table_forms/customer_table.html" class="tables" data-target="center_body" data-link="RtMgn_Customer">Customer</a><br>
<input type="number" id="RtMgn_Aircraft" value="1" min="0" max="999999999" style="width: 50px; direction:rtl;font-size:0.7em;background-color:lightcyan;">
<a href="/cmdb/public_html/table_forms/aircraft_table.html" class="tables" data-target="center_body" data-link="RtMgn_Aircraft">Aircraft</a><br>
<br>
<input type="number" id="RtMgn_ServiceProvider" value="1" min="0" max="999999999" style="width: 50px; direction:rtl;font-size:0.7em;background-color:lightcyan;">
<a href="/cmdb/public_html/table_forms/service_provider_table.html" class="tables" data-target="center_body" data-link="RtMgn_ServiceProvider">Service Provider</a><br>
<input type="number" id="RtMgn_DomRatePlan" value="1" min="0" max="999999999" style="width: 50px; direction:rtl;font-size:0.7em;background-color:lightcyan;">
<a href="/cmdb/public_html/table_forms/dom_rate_plan_table.html" class="tables" data-target="center_body" data-link="RtMgn_DomRatePlan" id="RtMgn_DomRatePlan">Dom Rate Plan</a><br>
<input type="number" id="RtMgn_IntlRatePlan" value="1" min="0" max="999999999" style="width: 50px; direction:rtl;font-size:0.7em;background-color:lightcyan;">
<a href="/cmdb/public_html/table_forms/intl_rate_plan_table.html" class="tables" data-target="center_body" data-link="RtMgn_IntlRatePlan">Intl Rate Plan</a><br>
<br>
<input type="number" id="RtMgn_Invoice" value="1" min="0" max="999999999" style="width: 50px; direction:rtl;font-size:0.7em;background-color:lightcyan;">
<a href="/cmdb/public_html/table_forms/invoice_table.html" class="tables" data-target="center_body" data-link="RtMgn_Invoice" style="color:darkgreen">Invoice</a><br>
<input type="number" id="RtMgn_InvoicedModem" value="1" min="0" max="999999999" style="width: 50px; direction:rtl;font-size:0.7em;background-color:lightcyan;">
<a href="/cmdb/public_html/table_forms/invoiced_modem_table.html" class="tables" data-target="center_body" data-link="RtMgn_InvoicedModem" style="color:darkgreen">Invoiced Modem</a><br>
<br>
<input type="number" id="RtMgn_CreditRequest" value="1" min="0" max="999999999" style="width: 50px; direction:rtl;font-size:0.7em;background-color:lightcyan;">
<a href="/cmdb/public_html/table_forms/credit_request_table.html" class="tables" data-target="center_body" data-link="RtMgn_CreditRequest">Credit Request</a><br>
<input type="number" id="RtMgn_CreditedModem" value="1" min="0" max="999999999" style="width: 50px; direction:rtl;font-size:0.7em;background-color:lightcyan;">
<a href="/cmdb/public_html/table_forms/credited_modem_table.html" class="tables" data-target="center_body" data-link="RtMgn_CreditedModem">Credited Modem</a><br>
<input type="number" id="RtMgn_Credit" value="1" min="2" max="999999999" style="width: 50px; direction:rtl;font-size:0.7em;background-color:lightcyan;">
<a href="/cmdb/public_html/table_forms/credit_table.html" class="tables" data-target="center_body" data-link="RtMgn_Credit" style="color:darkgreen">Credit</a><br>
<br>
<input type="number" id="RtMgn_Contact" value="1" min="0" max="999999999" style="width: 50px; direction:rtl;font-size:0.7em;background-color:lightcyan;">
<a href="/cmdb/public_html/table_forms/contact_table.html" class="tables" data-target="center_body" data-link="RtMgn_Contact">Contact</a><br>
<input type="number" id="RtMgn_ContactGroup" value="1" min="0" max="999999999" style="width: 50px; direction:rtl;font-size:0.7em;background-color:lightcyan;">
<a href="/cmdb/public_html/table_forms/contact_group_table.html" class="tables" data-target="center_body" data-link="RtMgn_ContactGroup">Contact Group</a><br>
</div>
</div>
<div class="invisible" id="invisible" style="display: none;">
<input type="text" name="update_button_disabled" id="update_button_disabled" class="form_updatenew_status" value="true">
<input type="text" name="new_button_disabled" id="new_button_disabled" class="form_updatenew_status" value="false">
<input type="text" name="modem_config_id" id="modem_config_id" class="other_table_ids" value="1">
<input type="text" name="modem_activity_id" id="modem_activity_id" class="other_table_ids" value="1">
<input type="text" name="customer_id" id="customer_id" class="other_table_ids" value="1">
<input type="text" name="aircraft_id" id="aircraft_id" class="other_table_ids" value="1">
<input type="text" name="dom_rate_plan_id" id="dom_rate_plan_id" class="other_table_ids" value="1">
<input type="text" name="intl_rate_plan_id" id="intl_rate_plan_id" class="other_table_ids" value="1">
<input type="text" name="invoiced_modem_id" id="invoiced_modem_id" class="other_table_ids" value="1">
<input type="text" name="credit_request_id" id="credit_request_id" class="other_table_ids" value="1">
<input type="text" name="credited_modem_id" id="credited_modem_id" class="other_table_ids" value="1">
<input type="text" name="otid_orig_customer_id" id="otid_orig_customer_id" class="otid_orig" value="1">
<input type="text" name="otid_orig_aircraft_id" id="otid_orig_aircraft_id" class="otid_orig" value="1">
<input type="text" name="otid_orig_dom_rate_plan_id" id="otid_orig_dom_rate_plan_id" class="otid_orig" value="1">
<input type="text" name="otid_orig_intl_rate_plan_id" id="otid_orig_intl_rate_plan_id" class="otid_orig" value="1">
<input type="text" name="note_id" id="note_id" class="other_table_ids" value="15">
<input type="text" name="orig_wireless_no" id="orig_wireless_no" class="backup" value="1000000000">
<input type="text" name="orig_serial_number" id="orig_serial_number" class="backup" value="Unassigned">
<input type="text" name="orig_part_number" id="orig_part_number" class="backup" value="Unassigned">
<input type="text" name="orig_user_id" id="orig_user_id" class="backup" value="Unassigned">
<input type="text" name="orig_password" id="orig_password" class="backup" value="Unassigned">
<input type="text" name="orig_simm_identifier" id="orig_simm_identifier" class="backup" value="Unassign ed ">
<input type="text" name="orig_IMEI" id="orig_IMEI" class="backup" value="Unassign ed ">
<input type="text" name="orig_IMSI" id="orig_IMSI" class="backup" value="Unassi gne d ">
<input type="text" name="orig_IP_addr" id="orig_IP_addr" class="backup" value="Unassigned">
<input type="text" name="orig_assembly_id" id="orig_assembly_id" class="backup" value="Unassigned">
<input type="text" name="orig_type" id="orig_type" class="backup" value="Unassigned">
<input type="text" name="orig_date_activation" id="orig_date_activation" class="backup" value="1970-01-01">
<input type="text" name="orig_date_ship_confirm" id="orig_date_ship_confirm" class="backup" value="1970-01-01">
<input type="text" name="orig_date_into_service" id="orig_date_into_service" class="backup" value="1970-01-01">
<input type="text" name="orig_billable_status" id="orig_billable_status" class="backup" value="Select Billable Status">
<input type="text" name="orig_modem_utilization" id="orig_modem_utilization" class="backup" value="Select Utilization">
<input type="text" name="orig_modem_location" id="orig_modem_location" class="backup" value="Unknown">
<input type="text" name="orig_date_suspended" id="orig_date_suspended" class="backup" value="">
<input type="text" name="orig_date_suspend_renew" id="orig_date_suspend_renew" class="backup" value="">
<input type="text" name="orig_confgd_for_roaming" id="orig_confgd_for_roaming" class="backup" value="0">
<input type="text" name="orig_cust_name" id="orig_cust_name" class="backup" value="Unassigned">
<input type="text" name="orig_cust_desig_2char" id="orig_cust_desig_2char" class="backup" value="??">
<input type="text" name="orig_cust_desig_3char" id="orig_cust_desig_3char" class="backup" value="???">
<input type="text" name="orig_region" id="orig_region" class="backup" value="None">
<input type="text" name="orig_aircraft_reg_no" id="orig_aircraft_reg_no" class="backup" value="Unassigned">
<input type="text" name="orig_aircraft_type" id="orig_aircraft_type" class="backup" value="Unassigned">
<input type="text" name="orig_aircraft_status" id="orig_aircraft_status" class="backup" value="Select Aircraft Status">
<input type="text" name="orig_ife_system_type" id="orig_ife_system_type" class="backup" value="Unassigned">
<input type="text" name="orig_program_number" id="orig_program_number" class="backup" value="Unassigned">
<input type="text" name="orig_domplan_code" id="orig_domplan_code" class="backup" value="Unassigned">
<input type="text" name="orig_intlplan_code" id="orig_intlplan_code" class="backup" value="Unassigned">
<input type="text" name="orig_last_invoiced" id="orig_last_invoiced" class="backup" value="Jan 1970 Modem Charges for prior period">
<textarea name="orig_note" id="orig_note" class="backup">[Fri Oct 07 2016 @ 17:22:27] This note applies to the initial pseudo modem config.</textarea>
</div>
</div> <!-- CONTENT -->
</body></html>
Yes, you are using the correct syntax for a jQuery document ready function. However, when the page is being loaded by the jQuery load function, the page has likely already triggered the document ready state.
I'm not sure if it is the browser or the jQuery load function that is stripping out the doctype, html, head, and body tags when a complete page is loaded. The inspector displays the end result and since those elements are invalid inside a <div> element, I expect that the browser is omitting them when inserting the other elements into the DOM.
But a div is not isolated from the remainder of the page the way an iframe is so any javascript executed inside that div impacts the entire page. The document element when referenced inside that div is the same document element referenced elsewhere. And it's ready state has already been triggered when the link is clicked.
I'm not sure if it is the browser or the jQuery load function that is stripping out the doctype, html, head, and body tags when a complete page is loaded. The inspector displays the end result and since those elements are invalid inside a <div> element, I expect that the browser is omitting them when inserting the other elements into the DOM.
But a div is not isolated from the remainder of the page the way an iframe is so any javascript executed inside that div impacts the entire page. The document element when referenced inside that div is the same document element referenced elsewhere. And it's ready state has already been triggered when the link is clicked.
Question has a verified solution.
Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.
Have a better answer? Share it in a comment.
All Courses
From novice to tech pro — start learning today.
