PHP/AJAX generating URL

Question

I have an input that the user can type something and an ajax request fetch these results in the database via php, works fine, then each result, when clicked, has a more detailed page about it, that works fine too, except that i would like it to have a unique url that i can link to someone instead of being the same. For instance: i want this 'www.mysite.com/allItems.php?=detailedItem' and at the moment it's just www.mysite.com/allItems.php even when i'm in detailed page. I already tried with 'a' tag but didn't work.

var handleSearch = function(id, isStateBack) {
        var popID = typeof id != 'undefined' ? id : $(this).attr('id');

        if (!isStateBack) {
            window.history.pushState({popID: popID}, 'Search: ' + popID, 'work.php?=' + encodeURIComponent(popID));
        }
        $.get('AjaxSpecifics.php', {"details": popID}, function(data) {
            $('html').stop().html(data).hide().fadeIn(500);
        });
        return false;
    };
    $(document).on('click', '.imageSearchAjax', handleSearch);

    // popstate event
    window.addEventListener("popstate", function() {
        var currentState = history.state;
        if (typeof currentState.popID != 'undefined') {
            // this state has 'popID' property, handle it
            handleSearch(currentState.popID, true);
        }
    });

Senorsen · Accepted Answer · 2014-08-13 12:07:04Z

1

Easy. Just take a step in PJAX (Ajax + pushState)

And you can even handle with popstate event to handle the browser's history back.

Adapt to your code here:

var handleSearch = function(id, item, isStateBack) {
    var popID = typeof id != 'undefined' ? id : $(this).attr('id'),
        detailedItem = typeof item != 'undefined' ? item : 'your_current_detailed_item_here';
    // TODO: replace your_current_detailed_item_here with the proper thing
    if (!isStateBack) {
        window.history.pushState({popID: popID, detailedItem: detailedItem}, 'Search: ' + detailedItem, 'http://example.com/allItems.php?=' + encodeURIComponent(detailedItem));
    }
    $.get('AjaxSpecifics.php', {"details": popID}, function(data) {
        $('html').stop().html(data).hide().fadeIn(500);
    });
    return false;
};
$(document).on('click', '.imageSearchAjax', handleSearch);

// popstate event
window.addEventListener("popstate", function() {
    var currentState = history.state;
    if (typeof currentState.popID != 'undefined') {
        // this state has 'popID' property, handle it
        handleSearch(currentState.popID, currentState.detailedItem, true);
    }
});

edited Aug 13, 2014 at 12:07

answered Aug 13, 2014 at 10:20

Senorsen

644 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Miguel Over a year ago

The prevous page button not working at all now, and the errors i told you above appear, and url changes to "...?=undefined"

Senorsen Over a year ago

Oh I think you should also log the detailItem into the state object. Wait and I'll edit my answer again.

Miguel Over a year ago

Btw, i edit the detailedItem to be the popID for test porpuse, i have it like this at the moment: "window.history.pushState({id: popID}, 'Search: work.php'+popID, 'work.php?='+popID);"

Miguel Over a year ago

"DataCloneError: The object could not be cloned", refering to "window.history.pushState({popID: popID}, 'Search: ' + popID, 'work.php?=' + encodeURIComponent(popID));". I edit my code so you can see what i want... just the id is enought, i can go from there then

Senorsen Over a year ago

Sorry but where the exception happened, which line?

|

Collectives™ on Stack Overflow

PHP/AJAX generating URL

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related