CODEWITHSUNDEEP
htmldynamic
sgibson
sgibson

Reputation: 23

Dynamically load new html page into another DIV (jQuery)

I found this code on the net to load an HTML page dynamically into a DIV:

<script src="http://code.jquery.com/jquery-1.4.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function(){
           $("#page1").click(function(){
            $('#result').load('page1.html');
             //alert("Thanks for visiting!");
           }); 

           $("#page2").click(function(){
            $('#result').load('page2.html');
             //alert("Thanks for visiting!");
           });
         });
    </script>

However, I have 3 DIVs, namely header, nav, and content. I'd like the nav DIV to house 3 links, namely geology, glossary, and legend. When someone clicks the links, I want the content in header DIV to be replaced, not nav DIV. Here's my bare code, minus the above Internet script:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>   
</head>

<body>
<table id="maintable" width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">

  <tr style="width:100%; height:20%">
    <div id="header">dynamically loaded content, Geological Record onload</div>
  </tr>

  <tr style="width:100%; height:5%">
    <td><div id="navigation">Geological Record | Glossary | Legend</div>
  </tr>

  <tr style="width:100%; height:75%">
    <td><div id="content">MAIN CONTENT HTML PAGE</div></td>
  </tr>

</table>
</body>
</html>

Upvotes: 1

Views: 787

Answers (1)

Ali Naci Erdem
Ali Naci Erdem

Reputation: 435

Use your element ids (namely navigation, content and header) in place of "#result".

Upvotes: 1

Related Questions