How can we change only inner part of a web page?

Question

I am developing a web application, where headers and footers for all pages are the same. What I want to achieve, is to change only the part of the page between the header and the footer when a button in the header is clicked. For example, there are 3 buttons Home, Activities and Areas. If I click activities then header and footer of the page should remain the same and activities page should come in between header and footer. How can I do that?

Sthe · Accepted Answer · 2016-03-27T09:23:51.663

14

I agree with rlemon. I think jQuery/AJAX is what you are looking for. For example:

<html>
    <head>
        <!-- Include Jquery here in a script tag -->
        <script type="text/javascript">
            $(document).ready(function(){
                 $("#activities").click(function(){
                     $("#body").load("activities.html");
                 });
            });
        </script>
    </head>
    <body>
        <div id="header">
            <a href="#" id="activities">Activities</a>
            <!-- this stays the same -->
        </div>
        <div id="body">

            <!-- All content will be loaded here dynamically -->

        </div>
        <div id="footer">
            <!-- this stays the same -->
        </div>
    </body>
</html>

In this simple implementation, I have just created 2 simple HTML pages, index.html will be used as a template. And activities.html, which contains the content I want to load dynamically.

Therefore, if I click Activities, it should load activities.html into without reloading the entire page.

You can download the jquery library from jquery.org

I haven't tested this, but it should work.

Hope it helps :-)

edited Mar 27 '16 at 09:23

answered Nov 10 '11 at 13:00

Sthe

2,575
2
31
48

just want to ask 1 thing that all pages will have different heights. how shoud i adjust height and width of div body. height: 100% and width: 100%, is it ok? – Piscean Nov 10 '11 at 14:20
1

should not be neccesary, height will normally adjust to the content automatically – Flo Nov 10 '11 at 14:36
1

In the HTML, the ID of the href is "#activities" but should be "activities". – showdev Dec 08 '15 at 23:35
@Sthe In the OP's query, he has 3 webpages that he wants to load, but just say you have 10+...is there any way to merge the different pages all into the same script? or do you just have to write out the script 10+ times? Kind of like an "if this is clicked then this, else if this is clicked then this, else..." – Chase Mar 27 '16 at 04:21
You would need to make this more dynamic. You could give your links the same class name e.g. `links`. Instead of doing `$("#activities").click(function()...`, you do `$(".links").click(function()`. On each link, you could have an attribute that matches the name of the page you want to load. Like this `...`. To load them, you can do: `$("#body").load($(this).attr("page")+".html")`. Now you can have 10+ pages using the same logic. – Sthe Mar 27 '16 at 09:22

score 1 · Answer 2 · answered Nov 10 '11 at 12:39

When the page is delivered - Header + Body + Footer is merged. You are able to treat this as one page. So if you in your header called an element in your body say "Container" then providing you include it in the body section you will be able to modify it.

score 1 · Answer 3 · answered Nov 10 '11 at 12:40

1

Are you using PHP or Server-Side Pages? You could just have headers and footers as includes. Jquery is really complex for just wanting to include heads and footers on your page.

answered Nov 10 '11 at 12:40

Kevin Oluseun Karimu

535
2
5
17

Are you using PHP, JSP, or ASP? – Kevin Oluseun Karimu Nov 10 '11 at 12:40
Then you would include the headers in footers by inserting the following in your code. <%@ include file="filename" %> Filename would be the location of the file like header.jsp or footer.jsp – Kevin Oluseun Karimu Nov 10 '11 at 12:49
Also, make sure that if you have any links or images, or video in the header or footer file, make them ABSOLUTE links so that they work no matter what page you include the file in. – Kevin Oluseun Karimu Nov 10 '11 at 12:51

score 1 · Answer 4 · answered Nov 10 '11 at 12:40

1

You are looking for AJAX (acronym for Asynchronous JavaScript and XML)

in jQuery you can use $.ajax

here is an example/tutorial on how to do this with php.

answered Nov 10 '11 at 12:40

rlemon

17,518
14
92
123

score 1 · Answer 5 · answered Nov 10 '11 at 12:42

You need to make an AJAX request to the server. The server would answer with the HTML to "inject" between the header and the footer. And the AJAX callback hendler would replace the current content with the new one.

All this is done for you by the shortcut load function from jQuery. See http://api.jquery.com/load/

score 1 · Answer 6 · answered Nov 10 '11 at 12:42

create a div that contains the content, and give it a unique class or an id. Then in your jquery code bind a click event on the elements you want to use as navigation and in that bind use $("#div").load("page.php") or something like that to load content from another file into the div

score 0 · Answer 7 · answered Nov 15 '19 at 00:25

0

Alternatively, this can be done with iframes. The parent page (with header and footer) can control the iframe and force it to navigate.

Tradeoffs:

This may be a bit slower (loading a full page)
this may be simpler depending on your case

answered Nov 15 '19 at 00:25

Offirmo

18,962
12
76
97

How can we change only inner part of a web page?

7 Answers7

Linked