CODEWITHSUNDEEP
javascriptphphtmlajax
John
John

Reputation: 101

How to remove hash in link inside anchor tag when ajax is calling the page to load in div

Hi every one i calling the page through ajax call to load in a particular div. 

<ul id="nav" class="nav" style="font-size:12px;">
    <li><a href="#" id="m_blink" onclick="fun1()">tab1</a></li>
    <li><a href="#" id="d_blink" onclick="fun2()">tab2</a></li>
    <li><a href="#" id="k_blink" onclick="fun3()">tab3</a></li>

</ul>

<div id="home"></div>

This is my Javascript script calling the pages in a particular 'home' div

<script type="text/javascript">

function fun1(){

$("#home").load("page1.php",{},function(){});

}

function fun2(){

$("#home").load("page2.php",{},function(){});

}

function fun3(){

$("#home").load("page3.php",{},function(){});

}
</script>

And when i called the pages in 'home' div :

In the URl :

when i clicked on the tab1

localhost/site/#

Even when i clicked on the tab2

localhost/site/#

And when i clicked on the tab3

localhost/site/#

I want to remove the # value on the URL ,Any one please suggest me how to remove the hash value from the URL.

Thanks

Upvotes: 0

Views: 1134

Answers (3)

Nick R
Nick R

Reputation: 7784

You could refactor the whole script into something like:

It's also worth noting that it's a good idea to separate the Javascript from HTML, so you don't have inline click events being called.

 $(document).ready(function() {

    $("#nav a").on("click", function(e){
        e.preventDefault();

        var page = $(this).attr("href");
        $("#home").load(page);
    });
});

And the preventDefault(); function will stop the # being added, and the default link event happening - the same as returning false.

HTML

I've added the page1.php links to the href - so if Javascript is disabled for whatever reason, you'll still be able to navigate to that page.

<ul id="nav" class="nav" style="font-size:12px;">
    <li><a href="page1.php" id="m_blink">tab1</a></li>
    <li><a href="page2.php" id="d_blink">tab2</a></li>
    <li><a href="page3.php" id="k_blink">tab3</a></li>
</ul>

Upvotes: 0

Angel Bonev
Angel Bonev

Reputation: 64

The click handler should return false so the link isn't followed if the JavaScript doesn't fail 

<script type="text/javascript">

    function fun1(){

    $("#home").load("page1.php",{},function(){});
    return false;
    }

    function fun2(){

    $("#home").load("page2.php",{},function(){});
    return false;
    }

    function fun3(){

    $("#home").load("page3.php",{},function(){});
    return false;
    }
    </script>

Upvotes: 0

Zemistr
Zemistr

Reputation: 1049

Try this solution ;)

<ul id="nav" class="nav" style="font-size:12px;">
    <li><a href="#" id="m_blink">tab1</a></li>
    <li><a href="#" id="d_blink">tab2</a></li>
    <li><a href="#" id="k_blink">tab3</a></li>

</ul>

<div id="home"></div>


<script type="text/javascript">
    $("#m_blink").click(function(event) {
        event.preventDefault();
        $("#home").load("page1.php", {}, function() {});
    });

    $("#d_blink").click(function(event) {
        event.preventDefault();
        $("#home").load("page2.php", {}, function() {});
    });

    $("#k_blink").click(function(event) {
        event.preventDefault();
        $("#home").load("page3.php", {}, function() {});
    });
</script>

Upvotes: 1

Related Questions