I'm working on a small WebApp for iPad to present Reportings to a user from SSRS. I know that there are existing solution like the one of MobiWave, but my costumer ask me to develop a solution wich is more suitable for his enviroment.
So my question is the following. I'm loading the content of the SSRS into an iFrame and present it to the user. Now, when I click on the links the behavior is the following. In Chrome an Safari Mobile (on the iPad) the Site works as expected. When I runs the same site as a webapp the links are opened in a new safari window. I tried many solutions like this and this but I didn't got it working as expected.
My Code is the following:
<!DOCTYPE html>
<html>
<head>
<title> TEST </title>
<link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.mobile-1.1.1.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<link rel="apple-touch-icon" sizes="72x72" href="images/touch-icon-ipad.png" />
<link rel="apple-touch-startup-image" href="images/startup.png">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<ul data-role="controlgroup" data-type="horizontal" class="localnav">
<li><a data-role="button" data-rel="back" data-icon="arrow-l">Back</a></li>
<li>Home</li>
</ul>
</div>
<div id="content" data-role="content">
<iframe src="../ReportServer"></iframe>
</div>
</div>
</body>
</html>
EDIT
The code which is loaded to the iFrame is the following:
<html>
<head>
<meta name="Generator" content="Microsoft SQL Server Reporting Services, Version 10.50.1600.1">
<title>localhost/ReportServer - /Reportings</title>
</head>
<body><H1>localhost/ReportServer - /Reportings</H1><hr>
<pre>
[In übergeordnetes Verzeichnis]
Donnerstag, 13. September 2012 15:16 39033 Report1
</pre>
<hr>
Microsoft SQL Server Reporting Services, Version 10.50.1600.1
</body>
</html>
Which links are opening the new tab, the jqm navigation or the reporting services report contents? Are your reports loaded as a full reporting services site Ui or are you linking directly to a reportserver basic rendering of the report?
If linking to a report server version of the report one fallback might be to render as PDF instead of HTML.
Consider removing the dependency on jQuery Mobile as it can interfere with normal page/click events. You may also want to look at other alternative mobile frameworks if you plan to build a larger mobile app and have problems with jQM compatibility:
http://enyojs.com/
http://www.sencha.com/products/touch
http://www.kendoui.com/mobile.aspx
Related
I am using jquery mobile in Adobe Air.
When I updated jquery mobile to 1.4.5, I found the icons are disappear.
I testing in a very simple html, when using jquery.mobile-1.1.2.css, the icons work well, but when changing to jquery.mobile-1.4.5.css the icons disappear as shown in the screenshots.
I have checked the 1.4.5 icons file, they are in images/icons-png.
I use too many features of 1.4.5 to switch back to 1.1.2.
The questions are:
How can I fix the missing icons in 1.4.5?
What are some tips for debugging this myself?
I usually debug in Chrome, but this works in Chrome.
I am testing air OSX; my air CFBundleVersion is 18.0.0.180
<html>
<head>
<title>Hello World</title>
<script src="AIRAliases.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.mobile.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.mobile-1.1.2.css"/>
<!--link rel="stylesheet" type="text/css" href="jquery.mobile-1.1.2.css"/-->
<!--link rel="stylesheet" type="text/css" href="jquery.mobile-1.4.5.css"/-->
</head>
<body>
<h1>Hello World</h1>
<div id="informationPage" data-role="page">
<div data-role="header">
<h1> 1.1.2 </h1>
</div>
<div data-role="content">
<select id="heightDropdown">
<option value="408">Here is 1.1.2.css</option>
<option value="409">4'9"</option>
</select>
</div>
</div>
</body>
</html>
I work for the asker.
The problem come from AIR don't support SVG icons which have brought in since jQuery Mobile 1.4.0 and use as default format.
To use png icons as default format. Download jquery.mobile-1.4.5.zip from
jQuery Mobile site. Then use jquery.mobile.inline-png.css or jquery.mobile.external-png.css replace jquery.mobile.css. If use jquery.mobile.external-png.css, make sure copy images folder too.
I am new to jquery mobile framework. I implemented the sample application using jquery mobile.Now i want to deploy this application into device. I don't know how to deploy this? please can anybody help me.
Sample Application
<!DOCTYPE html>
<html>
<head>
<title>My Page< /title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>My Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Hello world</p>
</div><!-- /content -->
<div data-role="footer">
<h1>End of the page</h1>
</div>
</div><!-- /page -->
</body>
</html>
thanks
Jquery is a framework which makes your life simpler in modifying the content through its
funcitons,selectors.Instead of writing huge lines of javascript You can make your life simpler with Jquery.
In order to check your result of your code.
You can use phonegap .
Install the phonegap plugin with eclipse.
Create an new project through phone gap.
Paste your code in index.html.
Then build the code as per your choice of mobile platform.
Then u can debug/run the code through android simulators or deploy it on the phone.
jQuery mobile only provides you with tools for mobile UI (mostly, touch-oriented). It is used with normal web application backend to make mobile view (presentation), based on user agent, for example. Such applications are deployed on web-server. If you want to make device-deployable application - use PhoneGap or something like that.
I'm trying to migrate a Phonegap app wich uses jQuery Mobile to Blackberry. When I start the app, which runs fine on Android and iOS. I see no styles, javascript whatsoever.
I figured, that Blackberry webworks apps use different file paths than iOs and Android. I find this file path thing a bit odd in general.
Like when you use a file path in an HTML file like for <img src="res/img/..."> the normal relative path is fine for Android and iOS. BUT if you specify a file path in JS you need "file:///android_asset/www/res/img" for Android while "res/img/" is fine for iOS. But anyways... what's the case with Blackberry here?
Do external JavaScript and CSS files require something like the following?
<link rel="stylesheet" href="local:///lib/jquerymobile/jquery.mobile.min.css" />
or should it work the normal way by just specifinging the relative path?
Besides that, are there other pitfalls? Like I heard about file naming issues when using "dashes", "underscores", whatsoever.
Would be great if someone with exerience with Phonegap apps for BB could share their experiences.
This is what i have:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, height=device-height,
initial-scale=1.0, 'maximum-scale=1.0, 'minimum-scale=1.0, user-scalable=no" />
<!-- PhoneGAP -->
<script src="json2.js" type="text/javascript"></script>
<script src="phonegap-1.0.0.js" type="text/javascript"></script>
<!-- JQuery Mobile -->
<link rel="stylesheet" href="resources/jquery.mobile-1.0rc1/jquery.mobile-1.0rc1.min.css" />
<script src="resources/jquery-1.6.4.min.js"></script>
<script src="resources/jquery.cookie.js"></script>
<script src="resources/jquery.mobile-1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
That´s the order that works, check the src attribs to know where you must copy the jqm library.
Good luck!
I'm at the very early stages of writing a BlackBerry app using WebWorks. I'm aiming at mainly OS6 devices (Torch), but I need it to be compatible with OS5 for a small number of users who'll be using older devices. As far as I'm aware, WebWorks should work on OS5, however I have created a basic app with a hyperlink, and the text doesn't show on the OS5 simulator (it works fine on the OS6 simulator). All it shows is a blank screen. I've tried to just put some text on the app (i.e. not in hyperlink tags) and this doesn't show either.
HTML file as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<meta name="viewport" id="viewport" content="height=device-height,width=device-width,user-scalable=no" />
<title>My App</title>
<script type="text/javascript" language="jscript" src="http://localhost/PubInfo/scripts.js" />
</head>
<body>
Click to show device model.
</body>
</html>
You'll notice the only unusual thing I've done (and this is reflected in the config.xml to load the index.htm) is to reference the script file from localhost so I can amend the app without recompiling, again this works fine in OS6 so I don't think it's this that is causing the problem.
I'm developing using the WebWorks Plugin for Visual Studio on Windows 7 (x64). Apart from referencing the files from localhost, everything else is default, i.e. as it is set up when you create a new project.
Has anybody come across a similar problem, and if so what was your workaround? Any help would be appreciated.
Its because your script is not well written (completed):
Also update your meta tags.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My App</title>
<script type="text/javascript" language="jscript"
src="http://localhost/PubInfo/scripts.js"></script>
</head>
<body>
Click to show device model.
</body>
</html>
We've got an ipad web app that needs all the screen real estate it can get. The plan is to use the "add to home screen" functionality once the app is done. However, we've run into a major issue when launching the app via the home screen. When using the HTML5 doctype, the page simply seems to render as plain text (none of the stylesheets or javascript files are loaded). Instead, using the XHTML 1.0 Transitional Doctype causes the page to render correctly, but we're using jQuery Mobile, which requires an HTML5 Doctype to work.
I've made attempts to simply use 'full screen' meta tags and such, but they don't seem to work either. This is the current state of our header code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--<!DOCTYPE html>-->
<html lang="en">
<head runat="server">
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>PAGE TITLE</title>
<link href="favicon.png" rel="icon" type="image/png" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" />
<!-- cut other stylesheets and javascript files being loaded -->
<link rel="stylesheet" href="/Vertex.Web/Content/style/tablet/tablet.css" type="text/css" media="all" />
From the research I've done, it sounds like the ipad uses a web.app instead of safarimobile.app when it launches from the home screen. I'm wondering if this is at least part of the problem. One other thought is that the ipad is trying to use a local cache when launching from the home screen, and it's just not liking the relative paths or external URLs when loading stylesheets and javascript.
Fun fact: using both Doctypes in the page will cause correct rendering the first time we open up the page from the home screen, but further attempts will fail due to a parse error (which is expected, since it's a terrible, terrible solution)
Try to add a manifest file, read more here
https://developer.apple.com/library/archive/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/OfflineApplicationCache/OfflineApplicationCache.html