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

Popup fails with query strings that include URI encoded characters #8534

Open
carloguli opened this issue Oct 28, 2016 · 1 comment
Open

Comments

@carloguli
Copy link

Not sure if or how this issue might relate to #8299

My intent is to embed filter parameters in the URL query string so that the filtered request can be saved as a bookmark.

I display my filter form in a popup.
I disable ajax globally.
If e.g. Chinese characters are included in the query string the popup fails to load.
I'm providing an example:
https://output.jsbin.com/nugulij/1

The bug can be fixed by applying the following patch to $.mobile.path.isEmbeddedPage
var decodedHrefNoHash = decodeURI(this.documentUrl.hrefNoHash); if ( u.protocol !== "" ) { return ( !this.isPath(u.hash) && u.hash && ( u.hrefNoHash === decodedHrefNoHash || ( this.documentBaseDiffers && u.hrefNoHash === decodedHrefNoHash ) ) ); }

I'm not sure if there's a better or more proper way to fix this issue.

Further to that and when ajax transitions are enabled popup loading appears to be broken anyway even if the query string doesn't contain encoded characters.

This is observable from the jQuery mobile popup demo page itself:
http://demos.jquerymobile.com/1.4.5/popup/

To reproduce use the form popup in the demo (you may have to submit twice - another bug?)
After the query string has been added clicking on any popup button fails to load the popup and #&ui-state=dialog gets appended to the URL.
I notice that the view source popups will work until one of the popup buttons is clicked.
By reloading the page (with or without the appended #&ui-state=dialog) popups start working again.

My example behaves in the same way if you remove the global $.mobile.ajaxEnabled configuration

@carloguli
Copy link
Author

The reason for the problem I was experiencing with the popup was that I was omitting the id attribute for the div with data-role="page".

Looks like the framework adds a class ui-page to the div and also a data-url attribute.
The value of the latter is set to the decoded url if the id attribute is missing, to the value of the id attribute otherwise.

I'm not sure of why this is as it doesn't seem reasonable to set data-url with the value of an id.
Anyway the value of data-url of the element with class ui-page is what makes the whole thing work or break.

Function getClosestBaseUrl() returns a url based on $( ele ).closest( ".ui-page" ).jqmData( "url" ) if such value is a valid url or dynamicBaseEnabled is true (which is the default) or path.documentBase.hrefNoHash otherwise, which is the url not decoded.

This url value (decoded when data-url is set to the url, not decoded when data-url is set to the value of the id attribute which is not a valid url) is then passed with the call to isEmbeddedPage() in the click handler of the link element triggering the popup.

If the id attribute for div with data-role="page" is set, the url will be not decoded and this function works correctly.
If the id attribute is missing the function will be passed a decoded url and the test u.hrefNoHash === this.documentUrl.hrefNoHash will fail.

This is why the patch I was applying, which was decoding this.documentUrl.hrefNoHash, fixed it for me.
Equally my patch breaks the code when I add the id attribute.

Hope this helps to identify more closely where the actual problem is and leads to a fix for the problem with url containing URI encoded characters.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant