I am trying to build a small mobile app with JQuery Mobile and EmberJS.
This is actually a Rhodes Application (Rhomobile).
This is my Layout.erb:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Todo</title>
<!-- Ember Libraries -->
<script src="/public/js/libs/handlebars-1.0.0.js"></script>
<script src="/public/js/libs/ember.js"></script>
<script src="/public/js/libs/ember-data.js"></script>
<!-- Ember Application -->
<script src="/public/js/application.js"></script>
<script src="/public/js/router.js"></script>
<script src="/public/js/models/todo.js"></script>
<script src="/public/js/controllers/todos_controller.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function(){
$.mobile.loadingMessage = false;
$.mobile.loadingMessageDelay = 300; // in ms
$.mobile.defaultPageTransition = 'none';
$.mobile.defaultDialogTransition = 'none';
$.mobile.ajaxEnabled = false;
$.mobile.pushStateEnabled = false;
$.mobile.loadingMessageDelay = 50; // in ms
});
</script>
<link rel="stylesheet" href="/public/jqmobile/jquery.mobile-1.3.1.min.css">
<link rel="stylesheet" href="/public/css/jqmobile-patch.css">
<script src="/public/jqmobile/jquery.mobile-1.3.1.min.js"></script>
<script src="/public/js/jqmobile-patch.js"></script>
</head>
<body data-platform="<%= Rho::System.getProperty('platform') %>">
<%= #content %>
</body>
</html>
As you can see I have disabled Ajax and PushState and stuff. This is my index.erb:
<script type="text/x-handlebars" data-template-name="todos">
<div data-role="page">
//My Template
</div>
</script>
Now when I try it, I just get a blank grey page. But no error in console or in Ember-Console (extension of Chrome). It even detects my views and controllers properly.
Then I try commenting the JqueryMobile CSS files and what I get is a page's height worth of blank space with "Loading" message and then I see my application below and it works fine. And if I remove JqueryMobile JS, I get the stuff but its not styled.
What is the problem?
It's kind of hard to say without seeing some more code of your app. If you only have the one template defined ('todos') it may be the case that Ember doesn't know how to kickstart the rendering of your app. You may need to define an 'application' template. It might be as simple as:
<script type="text/x-handlebars" data-template-name="application">
{{outlet}}
</script>
Related
In this example,
http://jsfiddle.net/7Ev43/2/ the inclusion of the first <script> line (<script src="http://www.polymer-project.org/platform.js"></script>) causes the jQueryMobile events pagebeforecreate and pageinit events not to fire, in Safari and Firefox. However, it works in Chrome.
Any ideas on how to amend this?
Further investigation:
It appears that on Firefox and Safari, platform.js is overriding addEventListener
At this point I'm not sure how to proceed further, any suggestions would be most welcome.
full example:
<!DOCTYPE >
<html>
<head>
<script src="http://www.polymer-project.org/platform.js"></script>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js" type="text/javascript"></script>
<script>
$(document).on('mobileinit', '#mainpage', function(){
console.log("mobileinit");
})
$(document).delegate("#mainpage", "pagebeforecreate", function(){
console.log("pagebeforecreate")
})
$(document).on("pageinit", '#mainpage', function()
{
console.log("pageinit")
});
console.log('end of script')
</script>
</head>
<body>
<div id="mainpage" data-role="page" data-theme="b">
</div>
</body>
</html>
when I tried to run even a blank app, the console output is:
"Error calling js to fire nativeReady event. Did you include cordova.js in your html script tag?"
Doctype is:
<!DOCTYPE html>
And this are script references:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height" />
<link rel="stylesheet" href="css/jquery.mobile.structure-1.3.0.min.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type='text/javascript' src='js/angular.min.js'></script>
<script type='text/javascript' src='js/angular-ui.js'></script>
<script type='text/javascript' src='js/jqm-setup.js'></script>
<script type="text/javascript" src="js/jquery.mobile.js"></script>
<script type="text/javascript" src="js/jquery-mobile-angular-adapter.min.js"></script>
<script type="text/javascript" src="cordova-2.5.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>-->
This error disappears only when I remove the jquery mobile stuff...
Thanks in advance.
I would avoid JQuery Mobile in PhoneGap applications. I got to meet Andrew Trice, Adobe PhoneGap Evangelist, at a DC Droid Meet and listened to him present in a few Webinars. I've heard him say more than once that JQuery Mobile has huge performance issues. He recommended using other frameworks if possible. There are many other frameworks out there with good design, widgets, and samples that make them easy to learn. I think he even created his own called AppUI. Just look around and you'll find some really cool ones.
That error is definitely what it says: your cordova.js file is not being included correctly. Fix that first.
To answer your larger question: Angular, jQuery Mobile, and PhoneGap will play together but it comes with some big caveats.
The biggest issue is that the jQuery Angular Mobile adapter is currently abandoned while they invest time in building a better solution: angular-jqm. That means that the adapter only works with outdated versions of the libraries.
Second: those outdated library versions have some issues working with Windows Phone. These are fixable, too, but lock you into an even less maintainable version of them.
So here is the setup:
<script src="javascripts/vendor/jquery-mobile-1.3.1.js"></script>
<!-- this angular-1.0.6 includes a patch to support WP8 URLs: https://github.com/angular/angular.js/issues/2303 -->
<script src="javascripts/vendor/angular-1.0.6.js"></script>
<script src="javascripts/vendor/jquery-angular-mobile-adapter-1.3.2.js"></script>
Unfortunately I was never able to get partials to load via XHR so I included all pages in index.html document.
<body ng-controller="AppController">
<div data-role="page" id="first" ng-controller="FirstController">
<h1>First Page</h1>
<p>{{foo}}</p>
<p>Second Page</p>
</div>
<div data-role="page" id="second" ng-controller="SecondController">
<h2>Second Page</h2>
</div>
</body>
Then you need to switch off a few niceties in the JavaScript and set up your routes:
<script>
var so_example = angular.module('so_example', []).
config(function ($routeProvider, $locationProvider, $compileProvider) {
// turn off html5 mode so that we just navigate around using hashes
$locationProvider.html5Mode(false).hashPrefix("");
// allow for the odd URLs included in Windows Mobile PhoneGap
$compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel|x-wmapp0):/);
$routeProvider.
when('/second', {
templateUrl: '#second',
jqmOptions: { transition: 'slide' }
}).
when('/', {
templateUrl: "#first"
});
}).
controller("FirstController", function ($scope) {
$scope.foo = "Hello, World!";
}).
controller("SecondController", function ($scope) {
});
</script>
Now you need to leverage the Cordova library before you bootstrap Angular to your HTML:
var app = (function () {
function onDeviceReady() {
angular.bootstrap(document, ['so_example']);
$.mobile.phonegapNavigationEnabled = true;
}
return {
initialize: function() {
document.addEventListener('deviceready', onDeviceReady, false);
}
};
})();
app.initialize();
Ok so im expanding my existing MVC4 app into a mobile app.
Totally new to jquery mobile and im having so many issues with this in MVC.
Layout pages (MVC) and jquery mobile are a nightmare to work with or is it just me?
So im simply trying to show jquery ui datepicker in my page, it does not show!
I have to do a reload of the page for it to show, why???
Ok Layout page
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"/>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
</head>
<body>
#RenderBody();
</body>
</html>
and now the view
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_AppLayout.Iphone.cshtml";
}
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
#using (Html.BeginForm())
{
<div data-role="page" id="pageAccount">
<div data-role="content">
<div id="datepicker"></div>
</div>
</div>
}
Any ideas why the page shows, but no datepicker (I have to reload the page for it to show)?
Solution :
This should be changed:
$(function() {
$( "#datepicker" ).datepicker();
});
to this:
$(document).on('pageshow', '#pageAccount', function(){
$( "#datepicker" ).datepicker();
});
To make a story short. jQuery Mobile should not be used with classic DOM ready jQuery functions. Instead jQuery Mobile is providing us with page events. If you want to find out more about jQuery mobile page events and how they work take a look at this ARTICLE, to make it transparent it is my personal blog. Or you can take a look HERE.
Edit :
Here's a working example:
Change positions of
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
into:
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
jQuery Mobile should always load last when used with jQuery UI.
Also you have forgot jQuery UI CSS, you will find datepicker without its CSS formatting.
I am having trouble with using OpenLayers in Gmaps4Rails (Gem version 1.5.2.) When I click on a marker I would like to show the typical callout (Infobox). Unfortunately I get the following JavaScript error:
this.serviceObject is undefined
Firebug calls the line 195 of the file "gmaps4rails.openlayers.js" responsable:
return this.serviceObject.addPopup(popup);
If I use Google Maps as API provider instead, everything works fine. Showing and hiding the infobox works nicely. This is why I assume that the error must be somewhere in "gmaps4rails.openlayers.js"
I tried on the latest FF and Chrome on Mac.
For reproducing the error in a reduced example, I created a simple HTML page in the public folder of my Rails 3.2 app and directly linked the needed JS and CSS files. To create the HTML page I copied the HTML code of my broken Rails app and reduced it.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link href="/assets/gmaps4rails.css" media="screen" rel="stylesheet" type="text/css" />
<script src="/assets/gmaps4rails/gmaps4rails.base.js" type="text/javascript"></script>
<script src="/assets/gmaps4rails/gmaps4rails.openlayers.js" type="text/javascript"></script>
</head>
<body>
<div class="map_container">
<div id="map" class="gmaps4rails_map"></div>
</div>
<script src="http://www.openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
Gmaps.map = new Gmaps4RailsOpenlayers();
Gmaps.load_map = function() {
Gmaps.map.map_options.provider = "openlayers";
Gmaps.map.initialize();
Gmaps.map.markers = [
{"description":"<p>This shall be in in the popup</p>",
"id":117979030,
"lat":39.5715,
"lng":2.64694}
];
Gmaps.map.create_markers();
Gmaps.map.adjustMapToBounds();
Gmaps.map.callback();
};
Gmaps.oldOnload = window.onload;
window.onload = function() {
Gmaps.triggerOldOnload();
Gmaps.loadMaps();
};
</script>
</body>
</html>
Unfortunately I could not find a working example of a successful Gmap4Rails–Openlayers integration on the web. Am I missing a mandatory parameter?
Thanks in advance.
It's a bug.
Replace:
return this.serviceObject.addPopup(popup);
with:
return this.map.addPopup(popup);
I'll push a fix soon, thanks and +1
I'm trying to use JQueryMobile for an POC and it seems even though I use #using (Html.BeginForm()) instead of #using (Ajax.BeginForm()), ajax is enabled by default. It is being injected from one of the script files [ ~/Scripts/jquery.mobile-1.0a2.js ].
So what I want is to simply disable the Ajax for certain forms and do full form posts. This might be pretty abvious, but i simply cant get my head around it.
Any help is appreciated.
/BB
You have to set up the jquery mobile framework correctly to disable its auto - ajax
Here it's documented:
http://jquerymobile.com/demos/1.0a3/#docs/api/globalconfig.html
You could do something like this.
<html lang="en-us">
<head>
<title>#ViewBag.Title</title>
<link href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.min.js")" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).bind("mobileinit", function () {
$.mobile.ajaxFormsEnabled = #ViewBag.EnableAjax;
});
</script>
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" data-cache="never">
<div data-role="header">
<h1>#ViewBag.HeaderString</h1>
</div>
<div data-role="content">
#RenderBody()
</div>
<div data-role="footer">
<h1>HTDE</h1>
</div>
</div>
</body>
</html>
Just add the following line to your page, obviously you have too add this under the document.Ready() function:
$.mobile.ajaxEnabled = false;
Note: If you are using Jquery Mobile beta, the configuration parameter for disabling ajax has changed.
http://jquerymobile.com/blog/2011/06/20/jquery-mobile-beta-1-released/
"Use ajaxEnabled to globally set auto-ajax handling."
Here's a link to the documentation for beta configs:
http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/api/globalconfig.html
It took me way to long to figure this one out.
there is an easier way.. just figured it out from JqueryMobile documentation
http://jquerymobile.com/demos/1.0a3/#docs/api/globalconfig.html
all you have to do is,
ajaxFormsEnabled :false