Avatar of Ralph
Flag for United States of America asked on

jQuery.load is ignoring the tag where to load the page into

I made the switch from using <iframe>s to use jQuery.load, and I was optimistic that life with events would be easier...

I'd prefer to keep HTML pages with mostly HTML, and keep PHP with PHP and JS with JS.
I read http://learn.jquery.com/code-organization/beware-anonymous-functions/ and like the non-anonymous idea.

1  With that goal, I have the following 'encapsulation', (see code).  Is it a valid approach?
     I'm putting event triggered scripts in their own functions.
2  In function LeftMargin(), why won't the selector for where to load the page work?
The page loads over/in place of the index.html page.
What's crazy, is the first line in the function works!  But when I click a link it ignores the tag.

See attached image for layout.

<!DOCTYPE html>

    <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="http://localhost/Cell_Modems/CSS/PopulateTables.css">
    <script type="text/javascript" src="http://localhost/Cell_Modems/javascripts/script.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
    <div class="header-container">
      <div class="header"> 
        <div ID="AjaxSearches"></div>
        <div ID="AjaxResults"></div> 
        <a href="../PHP/parse_form.php">Test Me</a><br>
    <div class="content" >
      <div class="left" ID="left_margin"></div>
      <div class="center" ID="center_body"></div>
      <div class="right" ID="right_margin"></div>
    </div>  <!-- CONTENT -->

Open in new window

<!DOCTYPE html>
    <title>Left Margin</title>
      .LeftMarginHeader {
        -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: beige;
        margin-top:507px; margin-left:0px;
        padding-left:5px; padding-top:5px; padding-bottom: -3px;
      .menuheader {float:left; width:24.0%; border:1px solid red;text-align: center;}
      .LeftMarginList {
        margin-left: 0px;
        padding-right: 0px;
        overflow:hidden; background-color:#ccffcc; 
        height:800px;width: 180px;
        border: 3px solid green;
    <script type="text/javascript" src="http://localhost/Cell_Modems/javascripts/script.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script type="text/javascript">
  <body style="background-color:#ccffcc;">
    <div class="LeftMarginHeader">
      <span class="menuheader" ID="LeftMargin_info"><a href="http://localhost/Cell_Modems/public_html/MarginLeft/left_margin_info.html" >Information</a></span>
      <span class="menuheader" ID="LeftMargin_import"><a href="http://localhost/Cell_Modems/public_html/MarginLeft/left_margin_import.html">Import</a></span>
      <span class="menuheader" ID="LeftMargin_report"><a href="http://localhost/Cell_Modems/public_html/MarginLeft/left_margin_report.html">Reports</a></span>
      <span class="menuheader" ID="LeftMargin_work"><a href="http://localhost/Cell_Modems/public_html/MarginLeft/left_margin_workflow.html">Workflow</a></span>
    <div class="LeftMarginList" ID="LeftMarginList" style="padding-left:40px;">
    <div ID="error"></div>

Open in new window

// *************************************************************************************************
// MAIN Document JS / JQuery code followds *********************************************************
// *************************************************************************************************
function Main()
  $( "#left_margin ").load("http://localhost/Cell_Modems/public_html/MarginLeft/left_margin.html") ;
  $( "#center_body" ).load("http://localhost/Cell_Modems/public_html/table_forms/modem_config_and_activity_table.html") ;
  $( "#right_margin ").load("http://localhost/Cell_Modems/public_html/MarginRight/right_margin.html") ;

// =================================================================================================
function LeftMargin()
  $( "#LeftMarginList" ).load("http://localhost/Cell_Modems/public_html/MarginLeft/left_margin_report.html") ;
    var thislink=$(this).attr('href') ;
    $( "#LeftMarginList" ).load(thislink, function( response, status, xhr ) 
      if ( status == "error" ) 
        var msg = "Sorry but there was an error: ";
        $( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
        alert("loaded okay") ;
    }) ;
    return false ;
  }) // EO load page into DIV

Open in new window


Avatar of undefined
Last Comment

8/22/2022 - Mon
Klaus Talkenberger


I think you have to use

$('a[href^=http://]').on("click", function(){
$( document ).on("click", "a[href^=http://]", function(){

instead of



Julian Hansen

View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.

Thank you Talki, but it's still not working right.

I'm getting:
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/. (12:41:50:944 | warning, deprecation)
  at https://code.jquery.com/jquery-1.12.0.min.js:4

whenever I 'run project' in netbeans, so I wonder if that's messing things up.  I suspect so.
No change to my index.html page from what I posted yesterday.

It also says Uncaught Error: Syntax error, unrecognized expression: a[href^=http://] (12:41:51:099 | error, javascript)

So I'm stuck until I get past that I guess.  This is the latest jquery too!

This was the key.  I went looking for that very answer in a book I have, but it did not include quotes...
Now I know.

The remaining 'Synchronous XMLHttpRequest on the main thread...' error is still happening though.
Time to look that up too.

Again, thanks Julian.
Your help has saved me hundreds of hours of internet surfing.
Julian Hansen

You are welcome. I was not seeing an error in the code I mocked up for this but I did not go beyond the match on the a[href^="http://l"] part.

No, what you provided works great.  That error appears to be a Chrome and or jQuery library thing.  Fortunately it's not hanging me up.
-- -- --
Your solution got me going on the left and right margin.
On the left margin, DIV 1 I can load a page into DIV 2 there, and on the right margin I can load into the parent (index.html) page's DIV.

Now I'm one level deeper in DIV 2 on the left and need to load into index.html's center DIV again.
I'll submit another Q for that now.

Again, thanks.