CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dazzy
Dazzy

Reputation: 61

Open another page/content in another div HTML Javascript

I need your help again. I have 2 divs : sidebar and content. In SIDEBAR I have some links (a b c), When I press an "a" link I want to open pageA.html in CONTENT div, when I press "b" link - pageB.html and so on. I tried whit iframe but i know it's not a great idea, any suggestions folks? Thanks in advance

Upvotes: 1

Views: 4134

Answers (4)

Aaron Belchamber
Aaron Belchamber

Reputation: 1698

I think a simple jQuery get with Ajax is easiest. I am on my phone but this is a few lines of code as long as you are using jQuery:

$.get("url-of-content.htm", "", function(data){ $("#CONTENT").html(data); );

Sorry i didn't provide more logic for retrieving dynamically the html content but I hope this helps as I have used this approach a lot with sites that already load jQuery because it is so easy to pull external content this way.

Upvotes: 0

Michael Hommé
Michael Hommé

Reputation: 1726

Use jQuery's load() function. It'll do just just what you're looking for without Angular or framesets.

http://api.jquery.com/load/

HTML

<h1>My Website</h1>
<div class="nav">
    <ul>
        <li><a id="nav_a" href="#">Page A</a></li>
        <li><a id="nav_b" href="#">Page B</a></li>
    </ul>
</div>
<div id="content">Here's some default content (maybe Page A?)</div>

Javascript

$(function(){
    $("#nav_a").on("click", function(){
        $("#content").load("pageA.html");  
    });
    $("#nav_b").on("click", function(){
        $("#content").load("pageB.html");  
    });    
});

Note that you won't be able to load pages outside of your domain, but it doesn't sound like you're trying to do that.

Upvotes: 4

steve.n
steve.n

Reputation: 88

If the content from pageA.html can live on the main HTML page instead, you could just use JavaScript to show/hide divs when the related links are clicked.

If the content needs to live on individual HTML pages, then setting the src on an iframe using JS is probably the way to go.

Upvotes: 0

azium
azium

Reputation: 20624

There are many ways of approaching this. I would recommend using AngularJS. It may seem daunting at first, but it'll be worth it and can achieve what you want very easily. 

<!-- include angular -->
<script src="angular.js"></script>

<div ng-app="app" ng-controller="main">

  <!-- sidebar -->
  <a ng-click="template = 'page1.html'">Page One</a>
  <a ng-click="template = 'page2.html'">Page Two</a>

  <!-- content -->
  <div ng-include="template"></div>

</div>

<script>
  // define angular app
  angular.module('app', []);

  // define controller
  function main ($scope) {

    // instantiate template to show page one by default  
    $scope.template = 'page1.html';
  }

  // register controller
  angular.module('app').controller('main', main);
</script>

Upvotes: 0

Related Questions