I am using $.mobile.changePage() to change move from a login page to a home page. From there, none of the links on the home page work. Those links are all using the standard href link. I tried just using an href="" link for the login button as well and that works but the problem is, once the login button is clicked, I need to do some sort of login process to make sure that they entered in the right stuff and as far as I know, the href just happens immediately and I cannot make it wait or stop all together. I tried using the event.preventDefault() but that would not stop the href from switching the page before the login checking was done. Anyone have any ideas on how to solve my situation? I am pretty new to jQuery Mobile so I dont fully understand every detail about it yet. Also I am working with some legacy code at the moment and that code uses jQuery mobile alpha 4.1.
How are you checking for the data from the login page? If you are only using javascript, you could just add an onClick() handler on the login button, and get the values from the fields with document.getElementByID(). AFTER that you could do $.mobile.changePage().
Or maybe I don't understand what you are trying to do.
Related
I've been looking to find a way to get the url parameters of the link that was clicked in my pagebeforeshow event
$(document).on('pagebeforeshow', '#category',function(e,data){
})
With the link looking like this (you can also see I added a data attribute)
Dairy
I've read a bunch of different answers on here and tried lots of them, but I've discovered that they are looking to use the current url of the page to get the parameters. However the current page url does not have the parameters in it (as I'm using pagebeforeshow)
And then I've seen other examples where people are manually changing pages using jQuery.mobile.changePage but to me it seems like overkill having to add click listeners to my buttons and then manually pass in parameters using changePage for each of them
I have also looked at this plugin which probably would work, but I am reluctant to use a plugin for something which to me seems so simple
I just need to be able to access the url or the data-cat attribute that was clicked, but I can't seem to find an efficient way to do it without having to a click listener and then manually changing the page, surely there's a better way?
Update: jQuery Mobile 1.4.2
I am building an app using Backbone.js and jQuery Mobile. On some pages in my app I have external href links and I'm running into an issue.
When a user clicks and external href link, get taken to the external site and then hits the back button. My app does not load from the proper page where the user originally left the app from.
In fact my entire DOM is reset so it looks like my site gets a complete refresh and doesn't keep any of its former state.
I have been trying to search for a solution but this issue is kind of hard to word out. I hope it makes sense.
Does anyone have any suggestions?
UPDATE
Stupid error on my part.. I had a bad id set on the page and it didn't load the data I had saved in the session for it when a user returns to the page.. Changed the id and all is well. Thanks!
Link
Make you external links open up new tabs.
If you have used one html with multiple pages solution then there's an explanation for this.
rel="external" will cause a full page refresh so last page location will not be remebered. When you return to the last location it will trigger new refresh and the first page will be shown again.
This can be prevented with a multiple html page solution.
I am developing a mobile web application using ASP.NET mvc 4. I am facing problem with response.redirect to some other website (eg: http://www.google.com) from my controller,it is showing "Error Loading Page" message without redirect.
I have tried the following codes to redirect under "About" action on Home controller:
return Redirect("http://www.google.com");
return RedirectResult("http://www.google.com");
response.Redirect("http://www.google.com");
All the above produced the same error.
Note: the hyperlinks in view pages are working fine
Thanks
When you are setting up your link to the controller...you need to make sure the data-ajax attribute is set to false.
Redirect
My understanding is that jQuery mobile wraps all anchor request in ajax, unless otherwise specified, and your response.redirect is just being served to the jQuery .done function which can't handle it properly.
http://jquerymobile.com/demos/1.2.0/docs/pages/page-navmodel.html
Important: rel="external" and $.mobile.ajaxEnabled=false
Slightly different implementations of the replaceState API in various
browsers can cause odd behavior in specific scenarios. For example,
some browser implementations (including desktop browsers) implement
the popstate event differently when linking externally and moving back
to a page onto which state has already been pushed/replaced. When
building a jQuery Mobile application where the Ajax navigation is
being explicitly disabled, either through the frequent use of
rel="external" on links or by disabling Ajax navigation completely via
the $.mobile.ajaxEnabled=false, we recommend disabling the pushState
feature to fall back to the hash based navigation for more consistent
behavior.
I suspect your problem is that you are redirecting outside local site.
See this part of the documentation: http://jquerymobile.com/test/docs/pages/page-navmodel.html
Hash values created by jQuery Mobile are normalized as full paths
relative to the URL of the first "real" page that was loaded.
Then later it confirms the "local" requirement here:
When a link is clicked, jQuery Mobile will make sure that the link is
referencing a local URL
I think the solution is to not redirect users to other domains.
UPDATE
The above solution highlights the wrong part of the problem but the solution may still be the same. You should use javascript to do the redirection such as:
window.location = 'http://www.google.com/';
I believe you will run into issues if your JQM solution is attempting to make an ajax call that is then redirecting. One issue, specifically for google.com, could be if you are signed in to google. It will then redirect you to https for example. That could be interfering with the JQM / window.location.hash.
I'm working on a mobile view of our site. I'm trying to implement JQuery mobile but I'm seeing two issues that might prevent me from continuing and hoping some of you have insights.
Many pages are brought up by searches. But when the page is brought up from a search box I can't get it to load as rel='external', thus the page loads via Ajax. Great, except the pages that load are almost always larger pages broken up into data-role='page'. So when the page loads it's unable to navigate within that page, though it does hide the secondary sections. According to the documentation I need to put the rel="external" on the form, but that is not working for me. Is it possible to get the page to load without Ajax via a form submit?
Second question in same topic. In the crawl, walk, run fashion first step is a basic mobile friendly site. But I'm hoping this can also be the foundation for a PhoneGap based version of the site. From what I understand the basic model for PhoneGap will break if pages are not always loaded in Ajax as it will trigger a browser load. Since JQM requires any page with embeded data-role=page sections to be loaded via rel=external, which turns off Ajax loading, does this mean using JQM will preclude using Phone Gap to create the native client later?
Thanks in advance for any replies.
This script below should be put between your jquery min and your jquery mobile min. Otherwise it will not take effect. Adding an extension to the $.mobile with these ajax functionalities turned off may help your issue. All 3 are not needed, but they are all test worthy for your issue.
<script>
$(document).bind('mobileinit',function(){
$.extend( $.mobile , {
ajaxFormsEnabled: false,
ajaxLinksEnabled: false,
ajaxEnabled: false
});
});
</script>
Phonegap is for building phone applications, not mobile websites. It is composed Javascript which talks to specific libraries to interface with the mobile device itself.
I am using JQuery mobile in asp.net web form website. I have the following code at the page "pageA.aspx".
View Saved Orders
When I am clicking on this link I am successfully redirected to the PageB, but the URL I am getting is
http://localhost:3244/MyFirstJQueryApp/PageA.aspx#PageB.aspx
But I want URL like this further processing, please help
http://localhost:3244/MyFirstJQueryApp/PageB.aspx
I have done it by setting target="_top" property.
Is this a good practice ?
There are a couple of mods out there (can't find the one I wanted) to remove the hash in the URL, but you have to edit the jQM framework.
You could try using the changePage() http://jquerymobile.com/demos/1.0a4.1/#docs/api/methods.html and set the transition without tracking it in history option to true (I think it's true)
Here is some more documentation on navigation as well: http://jquerymobile.com/demos/1.0a4.1/#docs/pages/docs-navmodel.html
mightbe able to think of another way
The idea behind jQuery Mobile is that you don't do it the way you're trying to do it! Check Dynamic pages with jQuery Mobile, which shows you how to let jQm do the work in the background by loading new data into the DOM.