jQuery loads external HTML file but does not stay still after page refresh

Question

I am trying to do something different without knowing if it is a good idea or not

I have a navigation menu as the following:

...
<li><a href = "#mhome">Home</a></li>
<li><a href = "#mfaq">FAQ</a></li>
<li><a href = "#mcontact">Contact</a></li>
...

I do not want to use a server-side scripting because it takes more time to make db connection and define some configuration, and not want to multiply the pages for each one. So I made a master page index.php

in body section

there are two elements:

an h3 element to display the page title and a div to display the content which is called from another html source.

...

  <div class="container">

    <h3 id="pageTitle"></h3>

    <div id="pageContent"></div>

  </div>

...

I am using jQuery's click event to load the page into the div

$(function() {
    $("a[href^='#m']").click(
        function() {
            $("#pageTitle").text($(this).text());
            $("#pageContent").load($(this).attr("href").substring(1) + ".html"); //removing # char.
        });

});

It works fine. But when I press F5 it returns the initial state as normal. How can I load the current page by referencing the address bar (I can see eg. sitename/#mfaq) when page is refreshed.

I think, first I need to detect if page is refreshing and load the corresponding html file in according to the #m**** on the addressbar.

http://stackoverflow.com/questions/2358928/whats-the-best-library-to-do-a-url-hash-history-in-jquery — devanand, Dec 19 '13 at 11:57

devanand · Answer 1 · 2013-12-19T11:23:07.193

1

$(function() {
   $("a[href^='#m']").click( function(evt) {
     // ------  This should work
     // renamed parameter elem to evt like corrected in comment
     evt.preventDefault();
     $("#pageTitle").text($(this).text());
     $("#pageContent").load($(this).attr("href").substring(1) + ".html");
   });
});

edited Dec 19 '13 at 11:23

answered Dec 19 '13 at 11:17

devanand

5,116
2
20
19

1

It works, but your choice of parameter name is odd. It's an **event**, not an element, so calling it `elem` makes no sense. – Anthony Grist Dec 19 '13 at 11:18
1

This doesn't answer the OPs question, he specifies that when he presses "F5" the page refreshes and does not load the current html that was loaded by jQuery. – Nunners Dec 19 '13 at 11:24

score 1 · Answer 2 · answered Dec 19 '13 at 11:30

1

Add to your DOM ready function:

if (window.location.hash != "") {
    $("#pageTitle").text($("a[href='"+window.location.hash+"']").text());
    $("#pageContent").load(window.location.hash.slice(1) + ".html");
}

answered Dec 19 '13 at 11:30

Łukasz

321
1
2
11

zkanoca · Accepted Answer · 2013-12-19T12:39:16.747

I have made this. It works well. But I am not sure about performance issues:

$(function() {

    var address = $(location).attr('href');
    var hash = address.lastIndexOf("#");
    var page = address.substring(hash+1);


    if (hash < 1)
    {
        $("#pageContent").load("mhome.html");
        $("#pageTitle").html("Default Page Title");
    }
    else
    {
        $("#pageContent").load(page + ".html");
        $("#pageTitle").html($("a[href='" + address.substring(hash) + "']").text());
    }

    $("a[href^='#m']").click(
            function() {                   
                $("#pageTitle").text($(this).text());
                $("#pageContent").load($(this).attr("href").substring(1) + ".html");
            });
});

jQuery loads external HTML file but does not stay still after page refresh

3 Answers3