Update URL after jQuery AJAX pull

Question

I have a webpage called index.html that is connected to other pages (portfolio.php, friendzone.php and so on) through jQuery load() method.

Example: my menu has the following code:

<a href="./" class="button"><div id="homepageBtn"></div></a>
<a onclick="showPage('progressi')" class="button"><div id="progressiBtn"></div></a>
<a onclick="showPage('interessi')" class="button"><div id="interessiBtn"></div></a>
<a onclick="showPage('friendzone')" class="button"><div id="friendzoneBtn"></div></a>
<a onclick="showPage('contact')" class="button"><div id="emailBtn"></div></a>

When I click something that is not the homepage option, the showPage() function is called:

function showPage(page) {
    $("#post-title").fadeOut (200, function() {
        $("#post-title").html(page); // Edit the page title in the div
        Cufon.refresh(); // I use Cufon plugin, so I reload it
    }).fadeIn(500);

    $("#post-content").fadeOut (200, function() {
        $("#post-content").load(page + ".php", function() { // If I pass for example "contact", it loads me the page contact.php in the "post-content" div
            $('a.boxed').colorbox({rel: 'Galleria'}); // I use colorbox jQuery plugin, so I reload it here
            $('a.iframe').colorbox({iframe: true, width: "80%", height: "80%"}); // Same here

        });
    }).fadeIn(500);
}

Everything works flawlessly, except for one thing:

When I load another page content inside my div's, the URL doesn't changes. I believe this is very bad for Google crawlers and for users who want to go on the previous page by clicking the back button of their browser or share a link to a specific page of my website.

Is there any way I can achieve a different URL based on the content I load in my div?

possible duplicate of [Modify the URL without reloading the page](http://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page) — Mark Schultheiss, Dec 07 '12 at 14:37
Luceos, what do you mean this is insecure and how can I make it secure still achieving what I want? — wiredmark, Dec 07 '12 at 14:38

score 3 · Accepted Answer · edited May 23 '17 at 12:33

3

You can modify the browser url without changing the actual page url, but I don't think this will effect crawlers. You will want to generate a sitemap for robots. Setup a google webmasters account and submit your sitemaps there.

Updating address bar with new URL without hash or reloading the page

window.history.pushState("object or string", "Title", "/new-url");

Why not make a share.php that redirects to main page with a get variable? For instance on every page you have a "Share" button that links to index.php?page=friendzone

When someone loads up the share link it will include something like this. Place it in your <head> tags.

<? 
//Include this right before your end </head>.
if(isset($_GET['page']))
{
    ?>
    <script>
    $(function() {
        showPage('<? echo htmlentities($_GET['page']); ?>');
    });
    </script>
    <?
}
?>

Inside of your showPage you can then do:

if ( history.pushState ) history.pushState( {}, page, "/?page="+page );

edited May 23 '17 at 12:33

Community

1
1

answered Dec 07 '12 at 14:39

ethree

1,582
2
14
21

Unfortunately this code doesn't helps.. if I reload the page on that URL, it gives me an error. works only temporarily but not if I want to share a link – wiredmark Dec 07 '12 at 14:44
This looks a great solution! But I tried to implement it. When I go to a page, for example localhost/?page=portfolio, I don't get any error but find myself still at the homepage, even if I have the URL changed. I added the PHP code before . – wiredmark Dec 07 '12 at 17:11
Try that edited code. I'm assuming you're using jQuery. If not, let me know. – ethree Dec 07 '12 at 17:25

score 0 · Answer 2 · answered Apr 21 '14 at 08:31

try below code its work.

         $.ajax
         ({
           type: "POST",
            url: 'Services/MyService.asmx/returnString2',
       dataType: "json",
           data: JSON.stringify({ fname: "yan" , lname: "key" }),
    contentType: "application/json; charset=utf-8",
          error: function (jqXHR, textStatus, errorThrown)   //what to do if fails
                 {
                   window.history.pushState("object or string", "Title", "/new-url");
                 },
        success: function (data)           //what to do if succedded
                 {
                   window.history.pushState("object or string", "Title", "/new-url");
                 }

});

Update URL after jQuery AJAX pull

2 Answers2