CODEWITHSUNDEEP
jqueryhtmlpushstate
user634850
user634850

Reputation: 515

history.pushState() is not displaying the correct URL

I'm using jQuery and PHP, I have a problem with history.pushState.

When I click the anchor tag or the link once the URL in the browser looks like this www.example.com/index.php/home/viewer/id

When I click the link again the URL in the browser looks like this www.example.com/index.php/home/photo_viewer/index.php/home/viewer/id
which is not correct.

I want the URL in the browser to be www.example.com/index.php/home/viewer/id

How do I solve this problem? 

<a href="index.php/home/viewer/ $row['id'] " Onclick="viewer(this); return false;"> id </a>

<script type="text/javascript">
   function viewer(link){
       var ajax_data ={ajax:'1'};

       $.ajax({
             type: "POST",
             url: link,  
    data: ajax_data,
             success: function(html){

                  $("#viewer").html(html); 

    window.history.pushState(null,null, link);

    e.preventDefault();
     }});
        return false; }

Upvotes: 2

Views: 6557

Answers (1)

Felix Kling
Felix Kling

Reputation: 817208

Probably because your URL is relative. You have to make it absolute by prepending a slash:

href="/index.php/home/viewer/..."
//    ^

A relative URL always specifies a resources that is relative to the current resource, i.e. the path is just appended to the current path. See also the documentation:

The new URL does not need to be absolute; if it's relative, it's resolved relative to the current URL.

Update: Although it does make a big difference, access the href attribute of the link, instead of the link itself: link.href.

Upvotes: 5

Related Questions