CODEWITHSUNDEEP
javascriptphpjqueryhtml
zkanoca
zkanoca

Reputation: 9928

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

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.

Upvotes: 1

Views: 768

Answers (3)

zkanoca
zkanoca

Reputation: 9928

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");
            });
});

Upvotes: 0

Łukasz
Łukasz

Reputation: 331

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");
}

Upvotes: 1

devanand
devanand

Reputation: 5290

$(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");
   });
});

Upvotes: 1

Related Questions