Skip to content
This repository was archived by the owner on Oct 8, 2021. It is now read-only.

Transition URL with ampersands #1251

Closed
alexfalkowski opened this issue Mar 18, 2011 · 9 comments
Closed

Transition URL with ampersands #1251

alexfalkowski opened this issue Mar 18, 2011 · 9 comments
Assignees
@jblas

Comments

@alexfalkowski
Copy link

Hi

When a page transitions to another page that contains multiple parameters separated by & it sets the URL to have &

So for example if the link is

test.html?id=2&debug=true

After the transition it becomes test.html?id=2&debug=true. This causes page cache issues.

The following code fixes is redirectLoc = redirectLoc.replace(/&/g,'&'); need to work out how to submit patches :)

Regards,
Alex
@johnbender
Copy link
Contributor

Alex any chance you could post an example of the issue (html)? I'm having a hard time seeing the different between those two url substrings.

@alexfalkowski
Copy link
Author

Hi,

Sorry was extremely tired when I wrote this what I meant to say was when the link is

test.html?id=2&debug=true

When you guys do an ajax call and get the data-url it becomes

test.html?id=2&debug=true

This cases issues in way it maintains history, so in the code the only thing that needs to be done is redirectLoc = redirectLoc.replace(/&/g,'&'); when you retrieve the data-url.

Regards,
Alex

@alexfalkowski
Copy link
Author

Sorry this keeps escaping the & turns into & amp ; (without the spaces)

@jblas
Copy link
Contributor

jblas commented Sep 15, 2011

@alexfalkowski

Is this still an issue? I must admit I was having problems too, understanding what the issue was here. Is the issue that when the data-url on a page is set, any ampersands in the query/search part of the URL are getting entity encoded to "&"?

@ghost ghost assigned jblas Sep 15, 2011
@jblas
Copy link
Contributor

jblas commented Sep 22, 2011

I'm having trouble reproducing the problem. I basically created a test case that looks like this:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Issue 1243</title>
<link rel="stylesheet" href="https://github.com/jquery-mobile/themes/default">
<script src="https://github.com/jquery-mobile/js/jquery.js"></script>
<script src="https://github.com/jquery-mobile/js"></script>
</head>

<body>
<div id="main" data-role="page">
    <div data-role="header"><h1>Main</h1></div>
    <div data-role="content">
        <p><a href="https://github.com/file-1.html?foo=0&bar=1">File 1</a></p>
        <p><a href="https://github.com/file-2.html?foo=1&bar=2">File 2</a></p>
        <p><a href="https://github.com/file-1.html?foo=0&amp;bar=1">File 1 (Entity URL)</a></p>
        <p><a href="https://github.com/file-2.html?foo=1&amp;bar=2">File 2 (Entity URL)</a></p>
    </div>
</div>
</body>
</html>

The 2 external files referred to are, file-1.html:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Issue 1243</title>
<link rel="stylesheet" href="https://github.com/jquery-mobile/themes/default">
<script src="https://github.com/jquery-mobile/js/jquery.js"></script>
<script src="https://github.com/jquery-mobile/js"></script>
</head>

<body>
<div data-role="page" data-dom-cache="true">
    <div data-role="header"><h1>File 1</h1></div>
    <div data-role="content">
        <p><a href="https://github.com/issue-1251.html">Main File</a></p>
        <p><a href="https://github.com/file-2.html?foo=1&bar=2">File 2</a></p>
    </div>
</div>
</body>
</html>

and file-2.html:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Issue 1243</title>
<link rel="stylesheet" href="https://github.com/jquery-mobile/themes/default">
<script src="https://github.com/jquery-mobile/js/jquery.js"></script>
<script src="https://github.com/jquery-mobile/js"></script>
</head>

<body>
<div data-role="page" data-dom-cache="true">
    <div data-role="header"><h1>File 2</h1></div>
    <div data-role="content">
        <p><a href="https://github.com/issue-1251.html">Main File</a></p>
        <p><a href="https://github.com/file-1.html?foo=0&bar=1">File 1</a></p>
    </div>
</div>
</body>
</html>

Whenever I click on a link with entity-encoded ampersands:

<a href="https://github.com/file-1.html?foo=0&amp;bar=1">File 1 (Entity URL)</a>

or non-entity-encoded ampersands:

<a href="https://github.com/file-1.html?foo=0&bar=1">File 1</a>

changePage() and loadPage() actually find the exact same page. So unless I'm missing something, I don't think this a problem anymore? I tested on FF, Chrome, and Safari.

@alexfalkowski was there a specific browser, platform, and/or device you were seeing this problem on?

@alexfalkowski
Copy link
Author

Hi Kin,

This bug was raised hen the product was in alpha stage, we currently don’t use it as at that stage it was not working to our ability. We have something coming up soon that will enable for us to exercise these bugs. Sounds like you guys have fixed it. We were seeing this across all browsers.

Regards,
Alex

-----Original Message-----
From: Kin Blas [mailto:[email protected]]
Sent: Thursday, 22 September 2011 10:16 AM
To: Alex Falkowski
Subject: Re: [jquery-mobile] Transition URL with ampersands (#1251)

I'm having trouble reproducing the problem. I basically created a test case that looks like this:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Issue 1243</title>
<link rel="stylesheet" href="https://github.com/jquery-mobile/themes/default">
<script src="https://github.com/jquery-mobile/js/jquery.js"></script>
<script src="https://github.com/jquery-mobile/js"></script>
</head>

<body>
<div id="main" data-role="page">
    <div data-role="header"><h1>Main</h1></div>
    <div data-role="content">
        <p><a href="https://github.com/file-1.html?foo=0&bar=1">File 1</a></p>
        <p><a href="https://github.com/file-2.html?foo=1&bar=2">File 2</a></p>
        <p><a href="https://github.com/file-1.html?foo=0&amp;bar=1">File 1 (Entity URL)</a></p>
        <p><a href="https://github.com/file-2.html?foo=1&amp;bar=2">File 2 (Entity URL)</a></p>
    </div>
</div>
</body>
</html>

The 2 external files referred to are, file-1.html:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Issue 1243</title>
<link rel="stylesheet" href="https://github.com/jquery-mobile/themes/default">
<script src="https://github.com/jquery-mobile/js/jquery.js"></script>
<script src="https://github.com/jquery-mobile/js"></script>
</head>

<body>
<div data-role="page" data-dom-cache="true">
    <div data-role="header"><h1>File 1</h1></div>
    <div data-role="content">
        <p><a href="https://github.com/issue-1251.html">Main File</a></p>
        <p><a href="https://github.com/file-2.html?foo=1&bar=2">File 2</a></p>
    </div>
</div>
</body>
</html>

and file-2.html:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Issue 1243</title>
<link rel="stylesheet" href="https://github.com/jquery-mobile/themes/default">
<script src="https://github.com/jquery-mobile/js/jquery.js"></script>
<script src="https://github.com/jquery-mobile/js"></script>
</head>

<body>
<div data-role="page" data-dom-cache="true">
    <div data-role="header"><h1>File 2</h1></div>
    <div data-role="content">
        <p><a href="https://github.com/issue-1251.html">Main File</a></p>
        <p><a href="https://github.com/file-1.html?foo=0&bar=1">File 1</a></p>
    </div>
</div>
</body>
</html>

Whenever I click on a link with entity-encoded ampersands:

<a href="https://github.com/file-1.html?foo=0&amp;bar=1">File 1 (Entity URL)</a>

or non-entity-encoded ampersands:

<a href="https://github.com/file-1.html?foo=0&bar=1">File 1</a>

changePage() and loadPage() actually find the exact same page. So unless I'm missing something, I don't think this a problem anymore? I tested on FF, Chrome, and Safari.

@alexfalkowski was there a specific browser, platform, and/or device you were seeing this problem on?

Reply to this email directly or view it on GitHub:
#1251 (comment)
The information contained in this e-mail communication may be confidential. You should only read, disclose, re-transmit, copy, distribute, act in reliance on or commercialise the information if you are authorised to do so. If you are not the intended recipient of this e-mail communication, please immediately notify the sender by e-mail and then destroy any electronic or paper copy of this message. Any views expressed in this e-mail communication are those of the individual sender, except where the sender specifically states them to be the views of Ninemsn Pty Limited. Ninemsn Pty Limited does not represent, warrant or guarantee that the integrity of this communication has been maintained or that the communication is free of errors, virus or interference.

@toddparker
Copy link
Contributor

Just checking...is this fixed?

@jblas
Copy link
Contributor

jblas commented Sep 22, 2011

@toddparker

I guess this is fixed? I can't reproduce it with the test case I provided above.

@jblas jblas closed this as completed Sep 22, 2011
@jbubriski
Copy link

Just in case anyone stumbles upon this...

I was having this issue in an ASP.NET MVC site with jQuery Mobile 1.0.1. I believe that I was having a navigation issue with jQuery mobile and the iPad web application I was developing, and setting the data-url attribute had solved that issue. It turns out that I was HTML encoding the URL! I'm using Razor for the view engine and it's default "mode" is to encode all variables that get outputted to the view. Just wrap your code in Html.Raw() and you should be good to go.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@jblas jblas

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@johnbender @jbubriski @toddparker @jblas @alexfalkowski