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.
Related
In Bower, how do I get and continue to update a custom build of jQuery UI? Let's say I only need components for Core, Widget, Mouse, Position, Sortable, and Accordion in jQuery UI? I rather not download the entire jQuery UI library.
To give a practical example of a possible approach and to answer to Egg's comment here's a way to do it.
Just bower install the whole thing as suggested by Sindre and include only the scripts that you need in the html.
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/jquery-ui/ui/core.js"></script>
<script src="bower_components/jquery-ui/ui/widget.js"></script>
<script src="bower_components/jquery-ui/ui/mouse.js"></script>
<script src="bower_components/jquery-ui/ui/sortable.js"></script>
<script>
(function() {
$( "#some-div" ).sortable(); // it works!
})();
</script>
</body>
</html>
This will already work and reduce significantly the file size of the libraries downloaded by the user when using your app or website. Here is a post about this straight from the horse's mouth.
To further increase download speed you can then create your own bundle in your preferred way, maybe using Grunt usemin or whatever else method you fancy to get to this kind of html:
<script src="scripts/bundle.min.js"></script>
<script>
(function() {
$( "#some-div" ).sortable(); // it works!
})();
</script>
</body>
</html>
You could have your own fork, but then you would need to keep that up to date too. Just let it download the whole thing and only use the pieces you need, I don't see the problem with that.
I am using jQuery-1.9.1 and jQuery-ui-1.10.2 to popup a dialog, my code is below:
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jqueryUI/theme/redmond/jquery-ui- 1.10.2.custom.min.css" />
<script type="text/javascript">
$(function(){
$("#dialog").dialog();
});
</script>
</head>
<body>
<div id="dialog">
hello, this is a dialog
</div>
</body>
the dialog has only close button, no minimize and maximize buttons, but I want to show them. I find in this page, its dialog has minimize and maximize buttons, I don't find any special settings about dialog in author's javascript code, and the jQuery-ui version s/he used is 1.8.16, does jQuery-ui of my version has removed this functionality?
PS: my jQuery-1.9.1.min.js and jQuery-ui-1.10.2.min,js are downloaded from official website, no any customization change.
Looking at the source of jQuery UI in that example it looks like the guy that runs that blog site added customization for minimize and maximize support. You can find the following comment in the code.
/*
* jQuery UI Dialog 1.8.16
* w/ Minimize & Maximize Support
* by Elijah Horton (fieryprophet#yahoo.com)
*/
You will need to add customization's for the dialog to support this or include a library that extends the jQuery UI dialog. It looks like this site has a plugin called jquery-dialogextend that will do what you are asking for.
If you look towards the middle of the jquery-ui.js file linked in that page there is a section of unminified code from line 366 up to around line 1429 where he has added custom code to handle the minimize/maximize functionality.
Just note that there is no guarantee that section of code will work correctly (or at all) in any version of jQuery UI other than 1.8.16.
Also Check out jQuery Dialogr. I think this can help.
I made a little plugin with the widget factory that extends the jquery ui dialog.
I use the jquery widget factory to add new functionnalities
$.widget('fq-ui.extendeddialog', $.ui.dialog, {
...
})(jQuery);
In the Jquery UI dialog code, there is a _createTitlebar method.
I override it and add a maximize and minimize button
_createTitlebar: function () {
this._super();
// Add the new buttons
...
},
jquery-extendeddialog
sample page
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.
Running latest release of jQuery Mobile (1.0.1), and do not want to use AJAX for page navigation.
I added the following code which according to jQuery Mobile website should stop the use of AJAX:
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
But it still uses AJAX and adds the hash (# ) to URLs.
How can I disable the use of AJAX?
Just a guess, but are you binding to mobileinit before jQuery Mobile is loaded?
As stated in the documentation, you'll want to load the JavaScript files in this order:
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>