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/
Related
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>
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>