Try our conversational search powered by Generative AI!

Problem with episerver.find and anchor tags

Vote:
 

Hi,

After adding Episerver.find to a site my anchor tags have stopped working.

I have traced the problem back to native.history.js. Episerver.find uses the History api to track clicks on the site. When I enter a url with a # it results in a redirect.

Eg. http://mysite.com/a_page#conditions this loads the page and the url is changed to http://mysite.com/conditions . If the user then presses refresh it results in 404 of course.

This also effects angular apps. Is there a work around for this? Is there an other implementation of the history api that I can use?

#120661
Apr 22, 2015 11:16
Vote:
 

Hi,

Did you ever find a solution for this problem?

#123192
Jun 26, 2015 11:45
Vote:
 

We also had that problem, but since it was a bug in a framework that find are including we thought it will take some time to fix so we changed the code at our solution.

I can't find it reported as a bug, can you do that?

#123249
Jun 30, 2015 9:37
Vote:
 

Hi,

I ended up making a work around for this.

I Made a javascript that binds to "statechange" and lisens for a parameter named scroll.

If the url contains a scroll parameter it scrols to thet ellement selected by id.

function getParams() {
    var urlParams;
    var match,
        pl     = /\+/g,  // Regex for replacing addition symbol with a space
        search = /([^&=]+)=?([^&]*)/g,
        decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
        query  = window.location.search.substring(1);
    urlParams = {};
    while (match = search.exec(query))
        urlParams[decode(match[1])] = decode(match[2]);
    return urlParams;
}

function ScrollerProvider() {
    return {
        scrollToIdAndOffset: function (id, offset) {
            var elm;
            if ((elm = $('#' + id)).length) {
                $('html, body').animate({
                    'scrollTop': (elm.offset().top - offset) + 'px'
                }, 'fast');
            }
        }
    }
}


(function (){var History = History || window.History;
    if (History && History.Adapter && History.Adapter.bind) {
        var loadLocation = function() {
            var urlParams = getParams();
            var scroller = ScrollerProvider();
            var scroll = urlParams["scroll"];
            if (scroll) {
                scroller.scrollToIdAndOffset(scroll, 270);
            }
        }
        History.Adapter.bind(window, "statechange", function() {
            loadLocation();
        });
        $(function() {
            loadLocation();
        });
    }
})();
#123372
Jul 02, 2015 14:35
Vote:
 

Hello,

Could you, please, provide more details about the issue and your environment? I can’t reproduce it on a plain Alloy Tech web site with Find installed. One cause of the issue might be a conflicting URL handling on the client side, as you suggested, so I need to know which JavaScript libraries do you use and what kind of URL handling do you have on the client side in order to be able to fix this issue.

#123564
Jul 08, 2015 14:22
Vote:
 

I was told to put this script before native.history.js loads.

<script type="text/javascript" language="javascript"> 
window.History = { options: { html4Mode: true} }; 
</script>

#133018
Aug 25, 2015 9:18
This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.