10

I have a web page, I need part of the content separated to an individual page, but not use iframe. Just like to know if it is possible use div instead of iframe and works as it in the same page(With js base code or php code is cool).

I'd need the whole content of <div class="row-fluid">..</div> to be an individual html, but not use iframe, I will need a div instead of iframe, and make it works like just as in one page.

bard
  • 1,053
  • 3
  • 13
  • 22
  • Learn about jquery load() – epascarello Dec 18 '13 at 14:35
  • [This is a good answer](http://stackoverflow.com/questions/17636528/how-do-i-load-a-html-page-in-a-div-using-javascript-browser-google-chrome) – A1rPun Dec 18 '13 at 14:36
  • What reason do you have for not using an `iframe`? – Eric Dec 18 '13 at 14:44
  • Hi Eric,The sample page you see is for an app that made by phonegap, and the table content will be loaded from http web site. I can't leave something ui from iframe in this project(like scroll bar). – bard Dec 18 '13 at 15:10

2 Answers2

5

You can use the jQuery load() method to load the content when the corresponding link is clicked. you can also use this without event clicked with animation.

Vivek S
  • 2,010
  • 1
  • 13
  • 15
  • HI, what I need is loading the other page on the current page when the main page is loading, not loading by a click event. – bard Dec 18 '13 at 15:18
  • 1
    instead of click event function in jquery , you can use onload option. – Vivek S Dec 18 '13 at 15:20
5

With PHP you can include a page inside your code inside a specific division.

for example inside index.php:

<div>
  <?php include('page2.php'); ?>
</div>

and inside page2.php you have:

<span>Hello World</span>

The result would be:

<div>
  <span>Hello World</span>
</div>

If what you want to achieve needs to be in the front-end as the user navigates through your site; that is after a click is made to an element and you don't want to change to another page, then AJAX is your option. this example is with Jquery:

$('.clickme').click(function(){
  $.ajax({
    url:'page2.php'
    success:function(msg){
      $('#insert_div').html(msg)
    }
  });
});

HTML:

<span class="clickme">Get Page 2</span>

<div id="insert_div">
  <!-- Page 2 will be inserted here -->
</div>

Another solution is Jquery load() as many have posted:

$('.clickme').click(function(){
  $('#insert_div').load("page2.php");
});
multimediaxp
  • 9,348
  • 13
  • 49
  • 80
  • hi, is this a click to load solution? what I am asking is loading the content page as it is just in one page. – bard Dec 18 '13 at 17:36
  • When do you want to load it? Since the moment it opens the page? Why not having it directly in the page? Why an iframe or a division with external content? In any case, the PHP solution might be what you are looking for, that one doesn't involve any clicks. – multimediaxp Dec 18 '13 at 21:40