Solved

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

Posted on 2016-10-12
8
70 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
  • 3
  • 3
  • 2
8 Comments
 
LVL 21

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 51

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
 

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
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
LVL 51

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 51

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 21

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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

706 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now