I'd like to change my jQM page's URL dynamically (when the user does some action) in order to modify the query string. Using history.pushState works fine, but when jQM tries to add a hash to the URL, for example when navigating to a dialog, things don't work as expected: the URL reverts to its original value, and jQM appends the hash to that (not to mention that an error occurs when I try to dismiss the dialog).
I looked into the jQuery Mobile docs and, from what I understood, the original URL of a page is stored in the data-url attribute of the data-role="page" element. So I tried modifying that as well whenever I need to change my URL, but it still reverts back to the original one when a dialog is opened.
Check this JS Bin for an example: http://jsbin.com/egunif/5/edit
When clicking the "Dialog" button, the URL is changed (along with the data-url attribute) and then the dialog is opened. You can see that the url briefly changes to egunif/hashtest before jQM changes it to egunif/5#&ui-state=dialog.
So it seems that the original URL is being stored somewhere else, the question is where? And is it possible to change this URL so that there are no conflicts when jQM makes hash changes to it?
Thanks!
What I wound up doing was just setting the url back to its original value whenever I change page to a dialog (in a pagebeforechange handler), then re-replacing it with the new value when coming back to the page (in a pagechange handler).
I still get an error in the browser's debug console due to an empty hash value (possibly something to do with this issue), but it's not affecting the functionality of the site, so I'll leave it for now. I'm still open to better suggestions though!
Update:
In the 1.2.0 Final version of jQM, popups were introduced, along with the option to disable hash changing by setting data-history="false" on the popups. By replacing all my dialogs with popups, I am able to manipulate the url without having to worry about conflicting with
jQM.
Related
I am new to jquery mobile. I want to open a dialog containing external page as content. At the same time not want to change hash in url.
I have link
Open dialog
which opens the dialog but changes the hash in url. Need help, thank in advance
From official docs:
Since dialogs are typically used to support actions within a page, the
framework does not include dialogs in the hash state history tracking.
This means that dialogs will not appear in your browsing history
chronology when the Back button is clicked.
http://api.jquerymobile.com/dialog/
I need to point one page to another and then scroll to a particular section. In Chrome and Firefox, using an URL like www.example.com#section1 does the trick. (#section1 can be an anchor or an element's id).
However, in Safari, the hash disappears when I click the link.
Why is this happening? Is it possible to do it on Safari? If not, how can I get around this problem?
When using hyperlinks that point to inside sections on other pages you must remember to add a slash (/) before the hashtag for cross browser compatibility.
Eg: www.example.com/#item-1
doing www.example.com#item-1 isn't accepted by all browsers (apparently by Chrome and Firefox it is)
Case: I have parameters after '#' like url#myParam=123, when I changed params like
url#myParam=789 Safari sometimes loaded previous page based on myParam=123,
although in Address bar it showed myParam=789
Solution : Use url?#myParam=123, then Safari will everytime load new page.
Using '?' before '#' solved my problem.
I had a related problem with Safari (on iPhone/iOS) seemingly stripping off the hash/fragment when doing a:
var newHash = ...;
window.location.replace("#" + newHash);
The actually problem was a javascript error that only appeared on Safari. Since I could not easily assess a javascript console for the iPhone, I chose to download an old version of Window's Safari (related post, download).
Then, I could replicate the problem from the iPhone on my Window's desktop using the old version of Safari. At that point, I found a javascript tag had a missing ']'. This was a legitimate bug, but it was somehow ignored by Chrome, Firefox, and IE.
The window.location.replace() was not even being called, because the code was breaking out on the javascript error. So the problem wasn't that Safari was stripping the hashtag, even though it appeared that way from multi-browser testing.
I just experienced an issue like this. I was using a URL re-write in the asp.net web.config. With Safari, the hash and everything after was removed. After trying some of the things mentioned above I was still having problems. The issue for me was that this was all happening under HTTPS. Once I specified the full URL in the redirect and included the https:// scheme the redirect worked correctly and preserved the hash. Note this wasn't an issue with Chrome or Firefox.
For me it was the exact same issue like mrbinky3000 has stated above: The server mod-rewrite was killing the hash in safari.
The solution was to use a full absolute link like:
http://www.example.com/path/#item-1
If one uses remoteFunction or one of the the Grails Ajax capabilities, rendering a template to update a portion of a page, how does one see any additions made to the Javascript functions associated with the resulting page in Chrome or Firefox?
In Chrome, one is able to see the updated page/DOM via going to their Tools -> Developer Tools menu item, then selecting "Elements". There, I'm able to use the magnifying glass to select a portion of the updated page that I want to see. But, how do I also see the additional Javascript functions added to the page.
NOTE: Originally this question requested to see both html element content and Javascript content. Karthick AK's answer handles both.
In Chrome->Developer tool-> Network tab,
For each request being sent the response obtained can be seen in the Response tab. The rendered content can be seen in here.
Similiar option exists for firefox/firebug.
Another ajax gotcha i have experienced is, sometimes the ajax requests are cached and hence onclick the content is served from the cache and not an actual requests hits the server. This is more prominant in Old IE browsers
How do I create a button within the jQueryMobile framework and have it call the URL on the remote server but not do anything on the page?
I have a web enabled device that accepts commands in the form of http://deviceip/index.htm?cmd=xxxx
The url doesn't return any data or at least any data that I want to display. Calling the url causes the device to do something (i.e. turn a light on or off etc..)
In the old days I'd create a hidden Iframe and set it as the button's target I'm pretty sure that is really the wrong way to do it.
<div class="ui-block-a">On</div>
How do I make the above call the url but not do anything?
Call the URL using ajax:
On
I am using version 14.67.9 of TembeddedWB in a project in delphi 2007. I use TembeddedWB in combination with loadfromstring. That all works like I want it to but when clicking on a link in the page it goes to a page I am not expecting. If for instance the page is on a particular IMDB result site and one clicks on the link the browser goes to about:/title/tt1041829/. I guess I forgot to set some extra property or I am doing something else wrong. If somebody here can point me in the right way i would appreciate that.
It looks like the browser's current URL is not updated and the default "about:blank" is used. I guess this may happen when you don't navigate to the web site directly by Navigate or Navigate2 method but load the HTML from a local file or stream.
Edit: I see, you are using LoadFromString which confirms that.
In that case, it should be possible to use OnBeforeNavigate2 event to fix the URL.
The problem is that the web page you are accessing uses relative links and the reference point that it would be relative too is your loadfromstring which loads through the "about:blank" page. Another way of fixing this would be to inject a <BASE href="http://www.originaldomain.com/originalpath"> tag in the HTML header (between the <HEAD> and </HEAD> tags) which points to the location the page was accessed from. This will tell the browser where relative tags start from and will fix the problem without requiring inspection of every link.