I am using Intel XDK with jquery mobile and I am trying to override the hardware back button because it is not working. I am not sure how much of my code I can post. I do have a complicated app though. I have three html files. With an index.html with links (hrefs) to page one and page two. In index.html I have this code
script src="intelxdk.js"></script>
<script src="cordova.js"></script>
<script src="xhr.js"></script>
<script src="js/jquery.min.js"></script> <!-- jQuery v2.1.1 -->
<script src="jqm/jquery.mobile-min.js"></script> <!-- jQuery Mobile 1.4.2 -->
<script type="text/javascript">
/* Intel native bridge is available */
var onBackKeyDown = function() {
$.mobile.goBack();
}
var onDeviceReady = function() {
intel.xdk.device.hideSplashScreen();
intel.xdk.display.useViewport;
intel.xdk.device.addVirtualPage();
document.addEventListener("intel.xdk.device.hardware.back", onBackKeyDown, false);
};
document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);
</script>
On page one and page two currently I have about ten subpages each (more to come) and I definitely want to back able to go back to the previous subpage. I have done kind of a lot of work with jquery mobile so far and I hope I don't have to switch to App Framework just to get the back button to work. Thanks for any help, let me know if you need any more html code or JS.
Got this ddl and it works fine with this version of jQm "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js":
But if I change it to 1.2.0 the items never hides. Anyone seen this problem?
<asp:DropDownList ID="LanguageDropDownList" OnSelectedIndexChanged="LanguageDropDownList_OnSelectedIndexChanged"
data-native-menu="false" AutoPostBack="true" runat="server">
</asp:DropDownList>
jQuery Mobile and asp.net web forms fundamentally don't work together. The postback model and jQuery Mobile's ajax form loading and navigation are incompatible. Move to MVC or turn off ajax.
Make sure to invoke this code before jQuery Mobile initializes. (Include it before the tag that references jQuery Mobile.)
<script src="jquery.js"></script>
<script>
$(document).bind("mobileinit", function() {
$.mobile.ajaxEnabled = false;
});
</script>
<script src="jquery-mobile.js"></script>
http://jquerymobile.com/demos/1.2.0/docs/api/globalconfig.html
I've been trying to figure this out but still stuck.
so I'm using PhoneGap for iOS and JQueryMobile.
I'm trying to show alert when a button is clicked.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
<script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js">
</script>
and I have
this
Login
$(document).ready("#button").click(function() {
alert('button clicked');
});
when I tried to launch this in chrome, this works fine.
however, when I used iphone simulator, it doesnt show anything.
For a normal web application you would use dom ready i.e.
$(function(){ // <-- this is a shortcut for $(document).ready(function(){ ... });
$('#button').click(function(){
alert('button clicked');
});
});
However in a JQM application it is much more useful to bind to 'pageinit' i.e.
$(document).on('pageinit','[data-role=page]',function(){
$('#button').click(function(){
alert('button clicked');
});
});
Binding to pageinit works better because JQM inserts new pages into the same dom as the first page. Because of this all of your code in dom ready doesn't get called again. So that first bit of code i put above will only work for that first page in your JQM application. The second will work no matter what page your button is in. Let me know if I can clarify this further for you.
I'm using ASP.net MVC4 with jquery mobile.
i'm trying to change the transition page effect setting $.mobile.defaultPageTransition to 'none' in 'mobileinit' bind, but nothing happens and the default transition (slide) persists!
I even tried alter jquery.mobile-1.0.js directly and nothing changes too.
anyone have any tips?
Are you binding to mobileinit in the correct place?
<script src="jquery.js"></script>
<script>
$(document).bind("mobileinit", function(){
$.mobile.defaultPageTransition = 'none';
});
</script>
<script src="jquery-mobile.js"></script>
Notice jQuery Core gets loaded first, then we bind to the mobileinit event, then the jQuery Mobile JS file is loaded.
Docs: http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/globalconfig.html
Here is a demo: http://jsfiddle.net/JczRj/
What's the right way to initialize objects on a jquery mobile page? The events docs say to use "pageInit()" with no examples of that function, but give examples of binding to the "pageinit" method (note case difference). However, I don't see the event firing at all in this simple test page:
<html>
<body>
<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
<div data-role="page" id="myPage">
test
</div>
<script>
$("#myPage").live('pageinit',function() {
alert("This never happens");
});
</script>
</body>
</html>
What am I missing? I should add that if you change pageinit to another event like pagecreate this code works.
---- UPDATE ----
This bug is marked as "closed" in the JQM issue tracker. Apparently opinions differ about whether this is working properly or not.
It started working when I embedded script within page div:
<body>
<div id="indexPage" data-role="page">
<script type="text/javascript">
$("#indexPage").live('pageinit', function() {
// do something here...
});
</script>
</div>
</body>
Used jQuery Mobile 1.0RC1
.live() is deprecated, suggestion is to use .on() in jQuery 1.7+ :
<script type="text/javascript">
$(document).on('pageinit', '#indexPage', function(){
// code
});
</script>
Check the online doc for more information about .on(): http://api.jquery.com/on/
Turns out this is a bug in 1.0b3 that is fixed in the current head. So if you want a fix now, you gotta grab the latest from git. Or wait for the next release.
jQuery(document).live('pageinit',function(event){
centerHeaderDiv();
updateOrientation();
settingsMenu.init();
menu();
hideMenuPopupOnBodyClick();
})
This is working now. Now all page transitions and all JQM AJAX functionality would work along with your defined javascript functions! Enjoy!
pageinit will not fire in case it is on secondary pages ( NOT MAIN page ) if it is written in common <script> tag...
I have such a problem - on secondary pages that are not loaded with 'rel="external"', the code in the common <script> tag is never executed...
really this code is always executed...
<body>
<div id="indexPage" data-role="page">
<script type="text/javascript">
$("#indexPage").live('pageinit', function() {
// do something here...
});
</script>
</div>
</body>
althrough if you made "tabbed interface", using of "pageshow" is better
I had to put the script in the HTML page section which to me is a bug. It is loaded normally in a browser (not via AJAX) and all on a single page including javascript. We're not supposed to have to use document ready.
The easiest way I found to deal with this was to use JQM + Steal. It works like a charm as long as you put:
<script type='text/javascript' src='../steal/steal.js?mypage'></script>
Inside of the data-role='page' div.
Then use AJAX to connect anything that can use the same mypage.js and use an external link (by using the rel="external" tag) to anything that requires a different steal page.
#Wojciech Bańcer
From the jQuery docs:
As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().
Try this:
$('div.page').live('pageinit', function(e) {
console.log("Event Fired");
});
$(document).on("pageinit", "#myPage", function(event) {
alert("This page was just enhanced by jQuery Mobile!");
});
The events don't fire on the initial page, only on pages you load via Ajax. In the above case you can just:
<script>
$(document).ready(function() {
alert("This happens");
});
</script>