Solved

jQuery .load("somehtmlpage.html #sometag") not working when nested

Posted on 2016-10-12
8
230 Views
Last Modified: 2016-10-13
I have a header, left, center, and right DIVs.
Into the left DIV I successfully load a full page, extracting just the content I want.
$( "#left_margin ").load("/cmdb/public_html/MarginLeft/left_margin.html #left_margin_page") ; 

Open in new window

This is the index.html page, and the load above works.
<!DOCTYPE html>
<html>
  <head>
    <title>CMMA</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="/cmdb/javascripts/DataTablesScripts.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;" >Unknown</progress>
          <span ID="AjaxMessage" style="position:  fixed; margin-top: -20px; z-index:1;"></span>
        </div>
        <div ID="AjaxResults"> </div> 
            
        
        <div ID="debug" style="width: 85em; word-wrap: break-word;"></div>
        
        <div ID="DueReminders">Crucial Reminders Due</div>
        <div ID="FindReminder">Reminders to Review</div> 
      </div>

    
    <div class="content" id="content">
      
      <div class="left" ID="left_margin"></div>
      
      <div class="center" ID="center_body"></div>
      
      <div class="right" ID="right_margin"></div>
      <div class="invisible" ID="invisible" style="display: none;"></div>
    </div>  <!-- CONTENT -->
    
        
  </body>
</html>

Open in new window


left_margin.html looks like this:
<!DOCTYPE html>

<html>
  <head> 
    <title>Left Margin</title>

    <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> -->

  </head>
  <body>
    <div ID="left_margin_page">
      <style scoped>
        #left_margin_page   { background-color:#ccffcc; height:600px; }
        
        .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">
        $(document).ready(LeftMargin);
      </script>
      
      <!-- ======== NORMAL BODY CONTINUES HERE, BELOW SECTION'S INCLUDED STYLE AND JS.ready() function call ======== -->
      
      <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;"></div>
      <div ID="error"></div>

    </div>
  </body>
</html>

Open in new window

INSIDE the DIV class="leftmargin_list" ID="leftmargin_list" seen just above at the end of the code block, I want the following to do similarly, but this does not work.
$( "#leftmargin_list" ).load("/cmdb/public_html/MarginLeft/left_margin_workflow.html  #left_margin_workflow_page") ;

Open in new window

Here is left_margin_workflow.html, gutted.
<!DOCTYPE html>

<html>
  <head>
    <title>Workflow Links</title>  

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

  </head>

  <body>

    <div ID='left_margin_workflow_page'>
      
      <style scoped>
        #left_margin_workflow_page   { font-size: 1.0em; }
        span[class=leftmargin_list]  { border: none ; }
        ul                           {margin:0; padding: 0; }
        li                           {margin:0; padding: 0; list-style-type: none;}
      </style>

      <script>
        $(document).ready(LeftMarginList);
      </script>


      <!-- ======== NORMAL BODY CONTINUES HERE, BELOW SECTION'S INCLUDED STYLE AND JS.ready() function call ======== -->

      <span style="font-size: 1.2em; text-decoration: underline;"><strong>Workflows</strong></span>
      <p>
        <span style="border:none;"><a href="/cmdb/public_html/Work/prelist_plan_levels.html" class="menu-link" data-target="center_body">Review Plans Levels</a></span><br/>
        <span style="border:none;"><a href="/cmdb/public_html/Work/show_image.html" class="menu-link" data-target="center_body">View Data Completeness</a></span><br/>
        <span style="border:none;"><a href="/cmdb/public_html/Work/show_image.html" class="menu-link" data-target="center_body">See Utilization & Location</a></span>

      </p>

    </div>
  </body>
</html>

Open in new window


Do I have a typo, or something more nefarious?

Thanks!
0
Comment
Question by:Ralph
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 2
8 Comments
 
LVL 22

Expert Comment

by:Kim Walker
ID: 41841234
Are you placing these commands consecutively, as follows?
$("#left_margin").load("/cmdb/public_html/MarginLeft/left_margin.html #left_margin_page") ;
$("#leftmargin_list").load("/cmdb/public_html/MarginLeft/left_margin_workflow.html #left_margin_workflow_page");

Open in new window

If so, the #leftmargin_list element will not exist when the second line is executed as there is some delay before the first line is completed. You would have to place the second line in the complete callback function of the first. As such:
$("#left_margin").load("/cmdb/public_html/MarginLeft/left_margin.html #left_margin_page",function(){
    $("#leftmargin_list").load("/cmdb/public_html/MarginLeft/left_margin_workflow.html #left_margin_workflow_page") ;
}) ;

Open in new window

1
 

Author Comment

by:Ralph
ID: 41842505
Nope, they're called after page loads.
I see/follow what you're saying though, and will try it as necessary; and let you know.

The .ready() for index.html contains the first .load().
That load pulls in left_margin.html, whose .ready() function contains the 2nd .load().

The 2/4 or so lines of code that actually matter can be seen here.
Lines 9 & 47, then lines 49 & 70.
// =================================================================================================
// The loads the left, center, and right margin pages into the index.html page
// It also attempts to get around an annoying and confusing error messagte in netbeans

function Main()  
{
  
  //alert("In Main in StartupScripts.js") ;
  $( "#left_margin ").load("/cmdb/public_html/MarginLeft/left_margin.html #left_margin_page") ; 
  
  $( "#center_body" ).load("/cmdb/public_html/view_forms/modem_config_and_activity_table.html", function( response, status, xhr ) 
  { $("#TableSubmit").prop('disabled', false) ;  // Want the view (that into #center_body) to be able to accept [New] records
  }) ;
  
  $( "#right_margin ").load("/cmdb/public_html/MarginRight/right_margin.html") ;
  
  
  
  $.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
    options.async = true ;
  
  $("#DropDown").slideUp(0);
  $("#progress_bar").hide() ;  
  
  // -----------------------------------------------------------------------------------------------
  // This is a namespace definition
  if (typeof cmdb == "undefined") 
  {
    var cmdb = {};
  };
});

}

// =================================================================================================
// This is the 'ready' function for left_margin.html
// That page's contents are the 4 buttons {Reports, Workflow, Import, and Information}
// 
// This function is hardcoded to load the Workflow list of links page left_margin_workflow.html.
// It also prepares for clicks to the menu items {Reports, Workflow, Import, and Information}
//   On a click to one of those it will call function load_LeftMarginPageOfLinks().

function LeftMargin() // ready() for left_margin.html
{ 
  //alert("In LeftMargin") ;
  
  $( "#leftmargin_list" ).load("/cmdb/public_html/MarginLeft/left_margin_workflow.html  #left_margin_workflow_page") ;
  
  $( ' .leftmargin_menu a' ).on("click",load_LeftMarginPageOfLinks) ;   

}  

// =================================================================================================
// Invoked c/o function LeftMargin() in StartupScripts.js
// 
// This responds to clicks to the left margin's 4 buttons {Reports, Workflow, Import, and Information}
//   and loads the appropriate sub-page into the same left margin

function load_LeftMarginPageOfLinks(event) // responds to LeftMargin f(x) on menu click
{ 
  // alert("In load_LeftMarginPageOfLinks(event)") ;
  
  event.preventDefault() ;
  var this_link=$(this).attr('href') ;
  
  /*var span_id = $(this).attr("id"); 
  $('.leftmargin_menu a:link, .leftmargin_menu a:visited').css("margin", "0px 2px 0px 2px") ;  
  $(span_id).css("margin", "6px 0px 0px 0px") ; */

  $( "#leftmargin_list" ).load(this_link, function( response, status, xhr ) 
  {
    if ( status == "error" ) 
    {
      var msg = "Sorry but there was an error in function load_LeftMarginPageOfLinks(): ";
      $( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
    }
  }) ;
} // EO load page into DIV

Open in new window

I thought .ready() waited until full load but images was complete.  I'll definitely be re-reading that again.

Thanks.
0
 
LVL 58

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41842526
Line 36
// This is the 'ready' function for left_margin.html

Open in new window


How can this be the ready function for a page that hasn't loaded yet?

Either it has to be in the left_margin.html file itself or you need to call it on the completion of the first load as Kim suggested.
0
Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

 

Author Comment

by:Ralph
ID: 41842598
Figured it out.
When using a selector of the content to be loaded into the selected element, it strips out scripts.

I GUESS my only solution is to do away with inserted html's selector, and to make that work, modify every page in the site to become partial pages.

Make them look like:
<div ID="something unique">
<style>
   stuff
</style>
<script type="text/javascript">
  $(MyReadyFunctionName) ;
</script>

Then the contents of the body

</div>

Open in new window

0
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 41842652
When using a selector of the content to be loaded into the selected element, it strips out scripts.
Yes it only loads the bit you need - but why will Kim's original suggestion not work?

Once the load is complete - call load again against the id in the newly loaded content - it should work.
0
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 41842684
I missed this - this is obviously trying to call into the parent page
<script type="text/javascript">
        $(document).ready(LeftMargin);
</script>

Open in new window

A very complicated way of doing it but it should work.
Consider this sample
Master page
<!doctype html>
<html>
<body>
<div class="wrapper">
  <div id="page"></div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script>
$(function() {
  $('#page').load('t1708.2.html#leftmargin');
});

function secondPage()
{
  $('#page2').css({border: '1px solid blue'}).load('t1708.3.html#otherstuff');
}
</script>
<!-- END -->
<script src="js/ga.js"></script>
</body>
</html>

Open in new window

Left Margin Page (t1708.2.html)
<!doctype html>
<html>
<body>
<div class="wrapper">
<div id="#leftmargin">
	<p>This is the left margin page</p>
<script>
  secondPage();
</script>
	<div id="page2"></div>
</div>
</body>
</html>

Open in new window

Third page (t1708.3.html)
<!doctype html>
<html>
<body>
<div id="otherstuff">
	<p>The other stuff</p>
</div>
</body>
</html>

Open in new window

Master loads second page which calls function in master to load the third page into a container in the second page.

Working sample here
0
 

Author Comment

by:Ralph
ID: 41842898
I follow your example.

left DIV loads left margin 'page'.
That page  loads 1 of 4 'pages' into it
Each of those link-laden pages can load a page into the center DIV.

I guess index.html's .ready() function could have every possible load in it, called with parameters so to direct which one to engage.
Certainly I'll keep that as a possibility.

I've gone ahead and modified 30 or so pages using scoped styles and retaining each one's .ready() function, workable because I no longer need to select a portion of the html to load.
It works.
Except for my latest gotcha...   https://www.experts-exchange.com/questions/28976339/Cannot-get-a-DIV-to-slideUp.html

Thanks for the feedback and advice Julian.  It's a toss up which one I'll use on the next project like this.

Ralph
0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 41843046
One thing to remember is that a page that is loaded via the jQuery .load() method does not trigger a ready state. Even if it contains a full html and head element, it is loaded as if it were a page fragment. So even though it may contain a .ready function, it will never be triggered. Instead you can execute the ready function at the bottom of the inserted page.
0

Featured Post

Cloud Training Guides

FREE GUIDES: In-depth and hand-crafted Linux, AWS, OpenStack, DevOps, Azure, and Cloud training guides created by Linux Academy instructors and the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

635 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question