Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Backbone navigate - url encode in different language with diacritics #4085

Open
adyz opened this issue Oct 6, 2016 · 7 comments · May be fixed by #4175
Open

Backbone navigate - url encode in different language with diacritics #4085

adyz opened this issue Oct 6, 2016 · 7 comments · May be fixed by #4175
Labels
question

Comments

@adyz
Copy link

adyz commented Oct 6, 2016

I have a search form that redirects the user to search/thetermusersearched where thetermusersearched is the exact value he entered. All this with the navigate function provided by Backbone.

This is all fine when I use strings in English (masa de calcat), but when I add diacritics in the input (masă de călcat) I get the route function fired twice.

The problem I have is in Firefox and Safari (the later in Mac and iOS)

I tried using encodeURI and encodeURIComponent when I use the navigate, but no success.

HTML

<div id="view-goes-here">
    <a href="#" data-string="masa de calcat">One alert</a>
    <a href="#" data-string="masă de călcat">Two alerts</a>
</div>

JS

    var R = Backbone.Router.extend({
        routes: {
            'results/:query': 'results'
        },
        results: function(query) {
            alert('Route triggered: ' + decodeURIComponent(query));
        }
    });
    var myR = new R;
    Backbone.history.start();

    $(function(){
      $('a').on('click', function(e){
       e.preventDefault();
       var href = $(this).data('string');
       href = 'results/' + encodeURIComponent(href);
       console.log(href);
       myR.navigate(href, {trigger: true});
      })
    })

See fiddle here: http://jsfiddle.net/adyz/qcged76e/4/

Any thoughts on this?
@astronautas
Copy link

On Ubuntu Chrome, whenever I click on either English string or the one with diacritics, I still get single alerts for both. Maybe the problem is not with backbone at all but your local stack?

@gwynjudd
Copy link

Hello,

I have some reports that we are also seeing this issue. I did some investigation into this. I could not replicate it using the jsfiddle in chrome/windows. On Safari on the Mac, I did see the issue.

At the root, the problem seems to be that in webkit (replicates issue), the location hash is URL encoded, but in chrome (does not replicate), the URL hash is not encoded. I will attach screenshots showing the behaviour and how it causes the route to fire twice.

Firstly, the route function fires once due to the jsfiddle code calling route.navigate, which calls loadURL. This is expected behaviour and happens on all platforms so I won't mention it again:

screen shot 2016-11-28 at 9 37 33 am

Following the handling of this event, a hash change event fires. This causes the checkUrl method to fire:

screen shot 2016-11-28 at 9 42 00 am

Note that the value of location.href and the return value from this.getFragment() are encoded. BUT the value of this.fragment is not encoded. The check at line 1774 fails, which causes line 1775 to do this.navigate() again. This causes the route function to fire a second time.

@gwynjudd
Copy link

On chrome, the values are different:

image

Note that this time window.location.href and this.getFragment() are not encoded. The check at line 1774 succeeds so line 1775 is skipped and the second route does not happen.

@gwynjudd
Copy link

Actually this is more confusing than I originally thought. The "encoded" version of the href in safari isn't the URL encoded version of the original URL. The value "%03" decodes to some not printable value.

@gwynjudd
Copy link

Here is some more information:

screen shot 2016-11-28 at 10 27 13 am

It appears to be a straight up bug in safari - if you set location.hash containing diacriticals, it just seems to get corrupted

@gwynjudd
Copy link

In the latest webkit nightly, the corruption doesn't occur, but the behaviour is still going to be different from chrome.

screen shot 2016-11-28 at 11 25 25 am

Note that the URL remains encoded, unlike chrome which decodes it when getting location.href. I don't know which one is correct.

gwynjudd added a commit to gwynjudd/backbone that referenced this issue Dec 14, 2017
@gwynjudd
Fix navigate with replace: true and diacriticals/unicode characters in
9fd4c79 
the hash

It seems there is a change in chrome 63 (also similarly
introduced a while ago in some earlier version of iOS Safari) where the
hash portion of the location.href is encoded, where it used to be
decoded

Fixes jashkenas#4085
@gwynjudd gwynjudd linked a pull request Dec 14, 2017 that will close this issue
Open
@gwynjudd gwynjudd mentioned this issue Sep 16, 2019
Merged
@jgonggrijp
Copy link
Collaborator

Possibly fixed in 4026, but need to check.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
question
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix navigate with replace: true and diacriticals/unicode characters in the hash gwynjudd/backbone
4 participants
@gwynjudd @adyz @jgonggrijp @astronautas