Home/ Questions/Q 7510335
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T23:12:09+00:00

I am reading a book about Javascript and jQuery and using one of the

  • 0

I am reading a book about Javascript and jQuery and using one of the examples I have created an ajax web page with 3 tabs :
Here is the code : (of the main page and of the first tab, the other two tabs are identical)

load.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>News Headlines</title>
<link href="../_css/site.css" rel="stylesheet">
<style>
#newslinks li {
    display: inline-block;
    margin-right: 20px;
}
#newslinks li a {
    padding: 5px 10px; 
    background-color: white;
    color: black !important;
    text-decoration: none;  
}
#newslinks li a:hover {
    background-color: rgb(110,138,195);
    color: white !important;    
}
#headlines .newsItem {
    margin-top: 10px;
    padding: 20px;
    border: 1px solid white;    
}
</style>
<script src="../_js/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function() {
  $('#newslinks a').click(function() {
     var url=$(this).attr('href');
     $('#headlines').load(url + ' #newsItem');
     return false;
  }); //end click

}); // end ready
</script>
</head>
<body>
<div class="wrapper">
    <div class="header">
        <p class="logo">JavaScript <i>&</i> jQuery <i class="mm">The<br>Missing<br>Manual</i></p>
    </div>
    <div class="content">
        <div class="main">
            <h1>News Headlines</h1>
            <ul id="newslinks">
            <li><a href="today.html">Today&#8217;s News</a></li>
    <li><a href="yesterday.html">Yesterday&#8217;s News</a></li>
    <li><a href="lastweek.html">Last Week&#8217;s News</a></li>
            </ul>
            <div id="headlines"></div>
        </div>
    </div>
    <div class="footer">
        <p>JavaScript &amp; jQuery: The Missing Manual, by <a href="http://sawmac.com/">David McFarland</a>. Published by <a href="http://oreilly.com/">O'Reilly Media, Inc</a>.</p>
    </div>
</div>
</body>
</html>

today.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>News Headlines</title>
<link href="../_css/site.css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
    <div class="header">
        <p class="logo">JavaScript <i>&</i> jQuery <i class="mm">The<br>Missing<br>Manual</i></p>
    </div>
    <div class="content">
        <div class="main">
            <div id="newsItem">
            <h2 class="shadowLine">Today&#8217;s News</h2>
            <h3>Labore et dolore</h3>
  <p>Quis nostrud exercitation ut labore et dolore magna aliqua. Sed do eiusmod tempor incididunt cupidatat non proident, duis aute irure dolor. Consectetur adipisicing elit, velit esse cillum dolore ut aliquip ex ea commodo consequat. Ullamco laboris nisi ut enim ad minim veniam. Ut enim ad minim veniam, lorem ipsum dolor sit amet, ut labore et dolore magna aliqua.</p>
  <h3>Quis nostrud exercitation</h3>
  <p> ut labore et dolore magna aliqua. Sed do eiusmod tempor incididunt cupidatat non proident, duis aute irure dolor. Consectetur adipisicing elit, velit esse cillum dolore ut aliquip ex ea commodo consequat. Ullamco laboris nisi ut enim ad minim veniam. Ut enim ad minim veniam, lorem ipsum dolor sit amet, ut labore et dolore magna aliqua.</p>
  </div>
        </div>
    </div>
    <div class="footer">
        <p>JavaScript &amp; jQuery: The Missing Manual, by <a href="http://sawmac.com/">David McFarland</a>. Published by <a href="http://oreilly.com/">O'Reilly Media, Inc</a>.</p>
    </div>
</div>
</body>
</html>

Now I am trying to add another page instead of today.html but with no results so far.
The problem is that the new page I want to add is much more complicated than today.html so I need some help on this.
Of course the new tab1.html page works fine on its own
Here is the code.

tab1.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>News Headlines</title>
    <link href="../_css/site.css" rel="stylesheet">
    <!--  Add fancyBox2 css-->
    <link rel="stylesheet" href="../fancybox2/source/jquery.fancybox.css" type="text/css" media="screen" />

    <style>
        .image {
            float: left;
            padding: 10px;
            border: solid 1px white;
            margin: 0 30px 30px 0;
        }
        .image:hover {
            border-color: red;
            background-color: rgb(204,204,204);
        }


    </style>

    <script src="../_js/jquery-1.7.1.min.js"></script>
    <!-- Add fancyBox2 script-->
    <script type="text/javascript" src="../fancybox2/source/jquery.fancybox.pack.js"></script>

    <script>
        $(document).ready(function() {
            var URL = "http://api.flickr.com/services/feeds/groups_pool.gne";
            var ID = "35034346867@N01";
            var jsonFormat = "&format=json&jsoncallback=?";

            var ajaxURL = URL + "?id=" + ID + jsonFormat;
            $.getJSON(ajaxURL,function(data)
                    {
                        $('h1').text(data.title);
                        $.each(data.items,function(i, photo)

                                {
                                    var photoHTML = '<span class="image">';
                                    photoHTML += '<a class="fancybox" rel="gallery1" href="' + photo.media.m.replace('_m', '_b') + '">';
                                    photoHTML += '<img src="' + photo.media.m.replace('_m', '_s') + '"></a>';


                                    $('#photos').append(photoHTML);

                                }


                        );//end each

                        $('#photos .fancybox').fancybox(
                                {
                                    openEffect:'none',
                                    closeEffect:'none'
                                }
                        );
                    }

            );//end get JSON


        }); // end ready
    </script>
</head>
<body>
<div class="wrapper">
    <div class="header">
        <p class="logo">JavaScript <i>&</i> jQuery <i class="mm">The<br>Missing<br>Manual</i></p>
    </div>
    <div class="content">
        <div class="main">
            <div id="newsItem">
                <h1>Flickr Images</h1>
                <div id="photos"></div>
                <br class="clearLeft">
            </div>
        </div>
    </div>
    <div class="footer">
        <p>JavaScript &amp; jQuery: The Missing Manual, by <a href="http://sawmac.com/">David McFarland</a>. Published by <a href="http://oreilly.com/">O'Reilly Media, Inc</a>.</p>
    </div>
</div>
</body>
</html>

The site.css file is located here and instructions on how to install fancybox2 can be found here : http://fancyapps.com/fancybox/

The question is how can I embed tab1 into load without copying all the javascript code in load.html?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I would change to $.get() from $.load() and manually parse the page for javascript.

    $(document).ready(function() {
  $('#newslinks a').click(function(e) {
    e.preventDefault(); // replaces return false
    var url=$(this).attr('href');
    var $content = $('#headlines');
    $.get(url).done(function(html){
      var outHTML = html;
      // replace all script tags with divs that have a class of iscript
      outHTML = outHTML.replace(/<script/ig, "<div class='iscript'").replace(/<\/script/ig, '</div');
      // parse outHTML as a jQuery-wrapped html fragment
      outHTML = $(outHTML);
      // select and detach all script divs and store in variable
      var scripts = outHTML.filter('div.iscript').add(outHTML.find(.iscript)).detach();
      // append the news item to content
      $content.html(outHTML.find("#newsItem"));
      scripts.each(function(){
        var $this = $(this), s = document.createElement("script");
        // prevent loading jQuery twice, optional and can be modified removed
        if ($this.attr('src') == "../_js/jquery-1.7.1.min.js") {
          // continue to next script
          return true;
        }

        if ($this.attr('src') != "") {
          s.src = $this.attr('src');
        } else {
          s.nodeValue = $this.text();
        }
        $content[0].appendChild(s);
      });  
    });
  });
});

    Additionally, i would suggest using some kind of ajax caching.

    var ajaxCache = {};
$('#newslinks a').click(function(e) {
  e.preventDefault();
  var url = $(this).attr('href');
  if (!ajaxCache[url]) {
    ajaxCache[url] = $.get(url);
  }
  ajaxCache[url].done(function(html){
    /*... code from within done function above ...*/
  });
});
    • 0