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.
Line 86 is supposed to catch the link click (line 163) and kick off function prelistPlanLevelsClick().
function prelistPlanLevelsClick() is not being invoked.
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.
Regarding loading the list_plan_levels.html page into the center div, the jQuery load function is for loading page fragments into an existing element. Not for loading an entire page with doctype, html, and head elements. If you want to load an entire page into another page, you should use an <iframe> in the parent page. In this case you should reduce your list_plan_levels.html page to the contents of its current body element.
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.
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.
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()???
Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!
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.
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.
Going to close this now as too many other factors have changed.
Not the solution you were looking for?
IT issues often require a personalized solution. With Ask the Experts™, submit your questions to our certified professionals and receive unlimited, customized solutions that work for you.
Premium Content
You need an Expert Office subscription to comment.Start Free Trial