Where is the documentation of the mobileinit event for JQuery Mobile 1.3.x?
It isn't in the Events API documentation page.
The documentation of the mobileinit event is in this page:
Configuring Defaults
Related
There are a few questions on this site and others similar to this, but none work for my implementation on Phonegap 2.9, jQuery 2.0.3, and jQM 1.3.2.
The general consensus is that you need to incorporate jQuery UI and a small library called jQuery UI Touch Punch to 'fool' jQuery UI's mouse events for touch events. You can see that approach on this blog: http://forresst.github.io/2012/06/22/Make-a-list-jQuery-Mobile-sortable-by-drag-and-drop/. Basically, you just include the jQuery UI and Touch Punch libraries and use this syntax:
<script>
$(document).bind('pageinit', function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
<!-- Refresh list to the end of sort to have a correct display -->
$( "#sortable" ).bind( "sortstop", function(event, ui) {
$('#sortable').listview('refresh');
});
});
</script>
But, alas, this doesn't work when I use it within my Phonegap Build app. I can clearly drag and drop a listview <li>, but the listview never refreshes to actually finish off the drop. The maddening part is that there's a demo at http://forresst.github.io/demos/sortable/en/index.html that works perfectly fine on my test mobile browsers. All of them, but it just doesn't work when embedded into Phonegap.
I have found through trial and error, that if the page has a RESET button on it, when I press the RESET button the listview item snaps into place. So, logically I tried to simulate this with .click(); calls, but those haven't worked. I've searched the interwebs and tried my best to follow the stacktrace within the phonegap app, but I haven't found a solution. Also, I'd love to not have to incorporate jQuery UI into my jQuery Mobile app.
Has anyone found a working solution for the current versions of Phonegap and jQuery Mobile for a user to drag and drop a sortable list?
I've found that, in general, reducing the dependency on jquery's sortable functionality while constructing a Cordova/Phonegap environment is time well spent. Sorting html table elements in a mobile app work great with https://rubaxa.github.io/Sortable/
Is there a (simple) way to get the events functionality of jQuery mobile without any of the UI elements?
This is for upgrading a set of already written UI components to play nice in a mobile environment.
You will have to use data-role=page since those are what the JQM events are fired for.
For rest of the elements within the page you can prevent JQM from styling them using the data-enhance=false flag.
Read the Enhancement Section
From JQM Source
// The current version exposes the following virtual events to jQuery bind methods:
// "vmouseover vmousedown vmousemove vmouseup vclick vmouseout vmousecancel"
You should be able to bind to all these just like any other events using live/on/delegate
I am working on a project that another developer started. They used jQuery UI for some of the effects, and I am not exactly sure how I can use jQuery for my AJAX functions and still have the jQuery UI stuff functional.
Any Suggestions?
Thanks in Advance.
jQuery UI is dependent on jQuery, so assuming the jQuery UI widgets/effects are actually working, you can just go ahead and start using the ajax API.
Like the others have said, jQuery UI uses jQuery and thus jQuery is a dependency. What that also means though, is that it needs to be included AFTER jQuery for jQuery UI to work.
jQueryUI uses jQuery. In other words, jQuery is a dependency for jQueryUI. You will need to include both javascript files
I'm trying to integrate DotNetOpenAuth with a site that uses jquery mobile. I'm running into an issue where jquery mobile appears to be canceling a 302 redirect to the providing party (an external site) that the server is responding with.
I've tried turning off the default jquery mobile ajax handling with the following in the mobileinit event:
$.mobile.ajaxEnabled = false;
If I take jquery mobile out of the picture the 302 redirect is handled correctly and the OpenID integration with the providing party works fine.
Can anyone tell me how to make jquery mobile correctly handle the 302 redirect to an external site?
For forms just set "data-ajax" attribute to false.
It should be like this:
<form action="postthis" method="post" data-ajax="false">
This will disable default ajax handling of jQuery mobile.
Reference: http://jquerymobile.com/test/docs/forms/forms-sample.html
I had the same problem and was able to login after adding rel="external" to the login link, see example below
Login
I'm not sure if this is the solution you are looking for?
To disable Ajax you should add this script just before the script reference to jquery mobile:
<script language="javascript" type="text/javascript">
$(document).bind('mobileinit', function () {
$.mobile.ajaxEnabled = false;
});
</script>
Redirecting to an external url does work if you don't use Ajax.
But there should be an alternative where you don't need to disable Ajax.
I'm using jQuery 1.6, and jQuery Mobile Beta 1. I have a jQuery Mobile themed button which I initialize as disabled. During a certain event, I'd like to enable the button. The following code is what I'd expect to work:
$("#id").prop("disabled", false);
But it seems like this doesn't propagate up to the jQuery Mobile wrapping DOM elements.
The solution, per the jQuery Mobile docs page Form Plugins Method is as follows:
$('#id').button('enable');