Following the MVC 4 article on new Mobile Features, I added the NuGet package jQuery.Mobile.MVC. That package installs, among other things, an older version 1.0.3b of jQuery Mobile (the current version is 1.1.0) and creates the following in _Layout.Mobile.cshtml:
$(document).bind("mobileinit", function ()
{
// As of Beta 2, jQuery Mobile's Ajax navigation does not work in all cases (e.g.,
// when navigating from a mobile to a non-mobile page), hence disabling it.
$.mobile.ajaxEnabled = false;
});
I can not find any documentation on what exactly is not working, whether there is a bug filed for it, and what the status of that bug might be. The closest non-ancient similar mention in the jQuery Mobile Forum is
http://forum.jquery.com/topic/ajax-navigation-system-is-causing-problems
In that case, the OP's issue was deemed "by design".
So...
Why might Ajax navigation be turned off out-of-the-box, and is that still a valid concern in jQuery Mobile 1.1.0?
This problem with MVC 4 Beta is that page navigation simply stops working after one navigation if the ajax navigation is not switched off.
This is still a valid concern in jQuery Mobile 1.1.0. I am using MVC 4 beta with jQuery Mobile 1.1.0, and navigation between pages is very unstable if the ajax navigation is not disabled.
Note:
The forum post you refer to is not related to this problem. The post is about values in the page header not being updated, which is per design.
(since this is the only problem for that OP, I guess he is using MVC 3)
About the status of this, related to your question:
(...) whether there is a bug filed for it, and what the status of that bug might be (...)
I don't know... I am also anctious to know this. Hopefully, it will be fixed when MVC 4 is officially released.
Related
This question already has an answer here:
How to change between pages using Jquery Mobile in Worklight
(1 answer)
Closed 8 years ago.
I am developing a sample mobile banking app in IBM Worklight V6.2 using the jQuery Mobile Framework. I read the Getting Started Documentation on IBM Worklight and it mentions a way to implement multi-page navigation using fragments. However, it also states that if you are using a JavaScript UI Framework, use its API's instead.
I read up on the jQuery Mobile pagecontainer method and am implementing it as below:
<li>Branch Locations</li>
However, I get the issue that the linked page loads after clicking the link but the original page then reloads. Could someone explain to me why this is happening? Is this a known issue?
I found the problem. I had a link to the
<script src="jqueryMobile/jquery.mobile-1.4.3.js"></script>
In the linked pages. That is the reason it was reinitializing the original index page.
See this project for a Worklight 6.2-based app using jQuery Mobile 1.4.3's Pagecontainer widget.
In the app, you click on a button to transition from index.html to page1.html by using:
HTML
load page1
JavaScript
function changeToPage1() {
$(':mobile-pagecontainer').pagecontainer('change','page1.html');
}
You may also take a look at the following questions that are answered with explanation and project examples for using changePage.
Note that the projects may be from Worklight 6.0 and 6.1 rather than 6.2 but that does not matter as here it's about the JavaScript, simply review it.
How to change between pages using Jquery Mobile in Worklight
IBM Workligt Single HTML file containing all application pages: How to load new page?
IBM Worklight 6.1 - Why is Cordova code not working when placed in a sub-page?
IBM Worklight - Page fragmentation
IBM Worklight - Navigation errors in a multipage app
In all of them, the idea is that Worklight is a Single Page Application. Thus you cannot load another HTML file and expect the application to continue functioning. By doing so you lose the "context" of the Worklight framework - the references to the included JS files, etc.
Instead, you can use jQuery's load or jQuery Mobile's changePage (deprecated in v1.4, to be removed in v5), to load different "pages". Ample examples are provided above.
Let me start off by saying I'm new to jQuery mobile. I've been asked to change to theme of a website and from looking at the jQuery mobile website here there is 5 default swatches that come with it. The only problem is that when I look at the theme file it only has 2 swatches, labeled A and B, but which look more like A and C. Can someone tell me where I can find the additional default swatches?
Thanks for your help.
The guys from jQuery mobile also created the classic theme for 1.4 although they don't actually support it.
You can find it here: http://demos.jquerymobile.com/1.4.0/theme-classic/theme-classic.css
And view the demo here: http://demos.jquerymobile.com/1.4.0/theme-classic/
jQuery Mobile 1.4 has two themes "a" and "b", unlike previous versions.
To upgrade custom themes previously created by ThemeRoller, at the page's top, click on import to upload old themes and then choose 1.4.0 from drop-down Upgrade to version list.
I'm using Visual Studio 2013 RC to create a new ASP.NET MVC project. Running the sample generated by the template works as expected. When I update bootsrap to the latest version (3) and rerun the application, my navigation bar is not rendering correctly. It's basically collapsed with just the "Application Name" link and icon in the upper left corner. If I click on it, then the menu appears, but only vertically. Something clearly wrong. Anyone else seeing this behavior?
The structure of many items - including the navbar - has changed from Bootstrap 2 to 3. If you just start applying the v3 CSS to the v2 code, things are bound to go heywire.
I would start with checking out the Bootstrap 3 docs for the navbar (http://getbootstrap.com/components/#navbar) and update your HTML accordingly. Then see if you are still having an issue.
Thanks everyone for the feedback/discussion. This was indeed helpful. For the benefit of the discussion, I found this post to be spot on in getting my MVC project updated to Bootstrap 3. This is only temporary though. Once VS RTM's, this shouldn't be an issue.
If I want to develop an web application on mobile, so should I use Twitter Bootstrap or Jquery Mobile? Twitter Bootstrap good for mobile or not?
As of version 2.0, Bootstrap is fully mobile compatible. There actually has been another question about it.
One thing you may want to keep in mind, is the purpose they're build for. jQuery mobile was created and is maintained with mobile compatibility in mind whereas Bootstrap offers it as an addition (meaning that it won't be it's main priority). If there is nothing in bootstrap that you are particularly interested in, I would go for jQuery mobile.
Depends what you want to do..
Twitter bootstrap is a CSS framework with some javascripts on it. While jquery Mobile is javascript to create native mobile feel..
So basically they are quite different..
Bootstrap 3 is built group up for mobile first, you may want to take a look at the 3.0 branch on GitHub. I didn't use jquery mobile in my app Django Market b/c I would have to change the backend and didn't want to invest. Bootstrap 3.0 IMHO will provide a lot of "competition" for other frameworks due to its power and simplicity
From my experience, i've using jQuery Mobile for a simple informative application. I spent some days on the base code, then i tested it on tablets, handsets using PhoneGap and the results wasn't good. There are still some troubles on transitions for Android and iOS devices.
It seems that the jQuery Mobile test site at http://jquerymobile.com/test is not really running alpha 2 (despite of what is written on the first page).
It definitely shows different (and perhaps less?) bugs than the alpha 2 demo at http://jquerymobile.com/demos/1.0a2/
Does that mean that the test site is running the latest nightly build? If not, what version is that?
As I just found out it is the daily build of jQuery Mobile. Which (as I hoped) makes it the easiest way to stay up to date with the latest development version.
if you view source on the page. and then click the link to the 'js' file (script src="js/" ) this then links to here.
http://jquerymobile.com/test/js/
v 1.4.4?
edit: it looks like the mobile script may be combined with the jQuery script.
search for * jQuery Mobile Framework : widget factory extentions for mobile in the js and that may be the start of it.
cant see a version number though :(