I'm trying to switch our mobile site from the jQuery Mobile Alpha to the latest Beta version. The problem is with the way the Beta handles URLs for dynamic pages.
Our live Alpha 4 site loads the dynamic pages as relative links (i.e. /#news/). The Beta 1 site loads the dynamic pages as absolute links (i.e. /#/group/webdev/cgi-bin/m/news/).
My question is, is there a way to change the jQuery Mobile Beta to handle URLs as the Alpha 4 version did?
Here are my pages (click the News link for an example):
Live mobile site (jQuery Mobile Alpha 4)
Dev mobile site (jQuery Mobile Beta 1)
there are issues with relative paths. see
https://github.com/jquery/jquery-mobile/wiki/Refactor:-navigation-paths
I found a solution that worked for me.
I modified the jquery mobile sourcecode and replaces the variable "newPath" with the following code:
var newPath = path.get( $('head base').attr('href') );
Works like a charm with relative paths and base href.
Related
I am using Bootstrap in my MVC 5 application. The problem is that it works well on Firefox 35 an above but the UI gets disturbed when I open on IE 9 and IE 10.
Also, button colors that I am using appear as white on IE.
I want to make the application compatible to all the browsers.
Is this the problem with Bootstrap or CSS? What changes to make to make site work well on all browsers?
You can check the Browser and device support for bootstrap for supported and not supported features.
Additionaly Wall of browser bugs for some more information of known browser bugs.
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 built an web-app using the the JQuery Mobile multi page template
http://jquerymobile.com/demos/1.0rc1/docs/pages/page-anatomy.html
It looked fine on HTC Desire HD, iPhone, iPad but not on my friends Samsung and HTC Desire.
After multiple code tweeks I realised if i changed all my relative paths to absolute paths it worked fine.
Do I need to link every object I build using JQM in this manner or is there something inside the head tag I can add??
There are issues with relative paths. see https://github.com/jquery/jquery-mobile/wiki/Refactor:-navigation-paths
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 :(