0

I want to know how can i include html page inside another html since i don't use any server side languages, I just want to make it through html and css. I want to click over anchor and then display the html in the center div of the page, since i devide the html page to header, footer, and body.

palAlaa
  • 9,500
  • 33
  • 107
  • 166

1 Answers1

3

You can use jQuery to fetch the HTML page from the server and set its contents within the desired div. Just bind it to the anchor's click event, something like this:

$('#myanchor').click(function() {
    $.get('mypage.html', function(data) {
        $('#mydiv').html(data);
    });
});

(Note that this is freehand code, I haven't tested it. But you get the idea.)

David
  • 208,112
  • 36
  • 198
  • 279
  • I don't want to call the page through server, I just want to reder it. Can u rewrite ur code through js not jquery? – palAlaa Jan 01 '11 at 20:52
  • 3
    @David This should work, but the mixture of jQuery and `href="javascript:` is unorthodox at best... – lonesomeday Jan 01 '11 at 20:52
  • @lonesomeday: True, it was a rush job. Better to bind to the click event. Mixing markup and code is never good. Code updated. – David Jan 01 '11 at 20:53
  • @Alaa: If you're not getting the page from the server, where are you getting it from? Also, jQuery _is_ JavaScript. – David Jan 01 '11 at 20:54
  • It's just case of rendering html pages inside each other. It's not a real website ,but just for learning . – palAlaa Jan 01 '11 at 20:56
  • @Alaa: This should do just that. This code would be put on Page A, which would load the contents of Page B (referred to as mypage.html in the example) into a div on Page A (referred to as #mydiv in the example) when an anchor is clicked (referred to as #myanchor in the example). No server-side code necessary. I'm assuming that the two pages (one rendering inside the other) are separate files on the server. – David Jan 01 '11 at 20:59