I have a web application made with jQuery Mobile beta 2. The start page of the application has the URL http://server/mob/start.php and its page div has ID 'frontpage' and data-url is also 'frontpage'.
When I click a link from the start page and from the just opened page click Home button which points back to URL /mob/start.php, I end up with two frontpage divs in my DOM. The newly added frontpage has the same ID but its data-url is '/mob/start.php/'.
I could of course remove the page divs where I'm navigating away from but after the above described navigation the browser is pointed at URL /mob/start.php#/mob/start.php. Thus when I reload the page, I end up with same situation again.
What am I doing wrong because this problem doesn't seem to appear in jQueryMobile.com site?
UPDATE: Each page is an independent page and contains only one page div so links are not made by ID but by local relative URL.
I updated jQuery Mobile to beta 3 and can no longer reproduce the problem.
Related
I have a Home page with links to Offer page and Contact page, which are different .html files, and a Home page, which is current file.
First two have attributes: target="blank", and rel="noopener noreferrer".
When i click on one of those links, it correctly opens new page in a new tab.
But when i come back to Home page using Home link and then i try to open one of the two first links, the attribute target="blank" doesn't work anymore and I'm getting redirected to chosen page, instead of opening it in a new tab.
Can anyone explain what is happening? Can i change this behavior?
Below is the part of screenshot of mywebsite/index.php, a PC site with NO jQuery Mobile (JQM), with all scripts and styles.
Below the screenshot of mywebsite/mobile/options.php, a page designed to be run on mobile browsers, having JQM.
Here is the HTML script for Logout button, actually an ahchor tag:
Logout
.. refers to the main mywebsite folder out from mobile folder.
When I tap/click Logout, it should go to mywebsite/index.php, the PC site. And here's what shows up:
If I display the location using alert(document.location);, it shows - mywebsite/mobile/options.php.
I have to press F5 to view the page as it should.
I know that this is happening because JQM loads the pages AJAXually and hence ignores all scripts and stylesheets outside of BODY tag. I know this question is duplicate of many questions in StackOverflow and I have tried my level best to find a solution, but can't find one.
How do I move to the index.php without need to refresh?
You need to add additional code to your logout.php file to execute after the logout code executes. PHP headers can accomplish this. Within your PHP tags, add this to the end of your code:
header( 'Location: http://mywebsite/index.php' ) ;
I created a web app (without browser chrome) which loads most of its pages locally from index.html. Now I have one page which i can not integrate into index.html, since it has to be refreshed when loaded. I placed it on the same server and called it stats.html and link to it like this:
Stats
When I click this link, the browser pops to the front instead switching to the page without browser chrome.
How can I link to an external page in a way that it still looks like one app?
I appreciate any hints to solve this problem.
just found https://github.com/mrmoses/jQuery.stayInWebApp that seems to be the solution.
I have 2 application layouts: application.html.haml and application.mobile.haml. But when I switch from mobile to the non-mobile version the mobile layout is still used for the first load. In Firebug console I see that the non-mobile view was properly returned, however the browser and the Firebug HTML tab show the mobile layout. Any idea what's going? It's fine after a refresh.
The issue turned out to be caused by JQuery Mobile.
I found the answer here: http://jquerymobile.com/demos/1.0a3/docs/pages/docs-pages.html
JQuery Mobile doesn't do full page reloads unless it's told to, so although the full html was returned, JQuery Mobile just replaced the page portion.
The key portion from the docs is:
"It's important to note if you are linking from a mobile page that was loaded via Ajax to a page with multiple internal pages, you need to add a rel="external" or data-ajax="false" to the link. This tells the framework to do a full page reload to clear out the Ajax hash in the URL. This is critical because Ajax pages use the hash (#) to track the Ajax history, while multiple internal pages use the hash to indicate internal pages so there will be a conflicts."
Recently, I encountered a similar problem.
In my case, Rails4's turbolinks suffered. Similarly as JQuery Mobile, turbolinks only updates the body part of a full page without updating the head part of the html when an intra-site link is clicked. I simply removed the require line for turbolinks in my application.js and the problem disappeared.
I'm making a mobile site with JQuery Mobile and need to allow entry to any section and still allow the user to navigate backwards.
Example to show what I mean. The JQuery Mobile demo site starts at:
http://jquerymobile.com/demos/1.0a3/
If I click on "Toolbars" I reach:
http://jquerymobile.com/demos/1.0a3/#docs/toolbars/index.html
There is a back-button which leads to the previous site. But if I manually enter the above toolbar URL into my browser the page will not have a back button.
How can I accomplish to always have a back button, while still keeping the nice AJAX backed page loads? The server back-end will generate all html-pages so it's fine to "hard code" what the previous section is.
If it's fine to hardcode, then just add
<a href="hardcodedprevious" data-icon="back" />
to the header