document.ready(function(){ ... vs document.on('pagecreate', function(){ - jquery-mobile

first of all I try to use proper "language" but I am not a programmer. That said...
I don't seem to be able to get jquery mobile to work properly.
When I try to change document.ready(function() { ... })
to
document.on('pagecreate', function(){ ... })
I do not get the same result; in fact I cannot even alert a simple message.
Furthermore I would like to use mousedown and mousedown events. The documentation of jquery mobile tells me that I could use vmousedown and vmouseup. Does not work either. Can someone enlighten me please. the jquery mobile.js is added lastly in my script structure of the dom.

Maybe relevant for others with a similar problem.
Linking to the jquery CDN instead of hosting the files myself solved my problem.

Related

jquery-mobile: How do I not add a page to the history stack

I have an application which includes a series of forms, each on their own page.
I do not want some of these pages to be added to the history stack. So that when the user presses back, it skips them.
Jquery-mobile does this with dialogs. You can configure this to happen with ALL pages (or any other data-role) but not with just some pages.
Does anyone know how to do this? Alternatively, would it be possible to create a new data-role that extends "page". If that was possible, then I could disable history for all of those pages.
in this case, you can call $.mobile.changePage() by yourself:
$.mobile.changePage( "url", {
changeHash: false //do not track it in history
});
http://jquerymobile.com/demos/1.2.0/docs/pages/page-navmodel.html
http://jquerymobile.com/demos/1.2.0/docs/api/methods.html
I was facing the same issue and I was going berserk!!! Finally, I was able to do it with the following code that does just that!
The code below automatically prevents storing the changed locations for all pages in the current document.
Please note that it has been tested with jqm 1.4.2
<script>
$(document).on("pagebeforetransition",function(event, ui){
ui.options.changeHash = false;
}) ;
</script>
Hope it helps
Checkout this question, pretty much the same as what you are trying to do.
How to modify jQuery mobile history Back Button behavior
Thanks,
Alex.

Emberjs and jQuery UI clone helper

I'm trying to get jqueryui drag and drop to work with emberjs. I have a fiddle set up here: http://jsfiddle.net/XMgwV/13/ but I cant seem to get the drop event to fire.
The mixin is from this demo: http://www.lukemelia.com/blog/archives/2012/03/10/using-ember-js-with-jquery-ui/
Edit:
If I change the jQueryUI draggable helper function to 'original' it works as expected. It seems to be a problem with jquery ui .clone() and ember, as pointed out in #7 here. The safeClone method in the codebrief blog post does not seem to solve the problem fully..
Anyone knows how to get this to work as expected?
I've had to fix the jQuery UI wrapper to make it work. But all I could come up with was a dirty hack.
I had to turn
var ui = jQuery.ui[this.get('uiType')](options, this.get('element'));
into
var ui = $(this.get('element'))[this.get('uiType')]();
http://jsfiddle.net/MSch/LrHTB/1/
It looks like your example will work if you add:
clone.removeClass('ember-view');
to the safeClone helper.
Here's a jsfiddle that should solve the problem: http://jsfiddle.net/Wu2cu/

Replace the confirm javascript function with a jQuery dialog solution

I'm novice with jQuery dialog and I'm looking for a way to replace to ugly confirm javascript function by a jQuery dialog. If possible I would like a solution as easy as possible to set in place.
Example:
if (confirm("Are you sure?")) {
// user click Yes
}
To be replaced by a simple jQuery dialog solution. If possible an 'inline' solution like:
if jQconfirm("Are you sure") { ... }
I don't know if some solutions already exist?
Thanks.
It is complicated to have such an inline solution since the confirm() halts the execution of the script, however you may modify you script a bit and use such a construct:
$.confirm("message", "title",
function() { /* Ok action here*/
});
Check this site for the solution.
try this
http://jqueryui.com/demos/dialog/#modal-confirmation
its the JqueryUI box, and works well in a model form

jquery UI .datePicker is not a function

I have seen many people asking this question and have tried it all (such as: Why is jqueryUI datepicker throwing an error?).
Well i have an asp.net app; i am referring jquery-ui-1.8.16.custom.min.js which has all the jquery UI plugins with its css and jquery-1.6.2.min.js
Now when i say
$(document).ready(function () {
$('._txtReviewDate').datePicker();
});
I get an error : $("._txtReviewDate").datePicker is not a function; on firebug. i checked whether the js files have loaded etc.
Please suggest how i can get it working.
There was an old jquery library added deep down somewhere long back which was just ignored over a period. Removing that resolved the issue.

Why does jQuery UI show() with "blind" remove the element?

I am trying to show the element using the "blind" animation:
<div onclick="$('#animatable').show('blind', null, 1000);">Click me</div>
<div style="display: none;" id="animatable">Animated</div>
But it works only once. Element appears with the blind effect, and then it disappears completely, I do not see it even in Firebug DOM! Why doesn't it stay visible?
Some other show() animations ("explode"), work fine, but also "slide" makes the element disappear.
UPDATE:
It works fine in jsFiddle, but does not work in Firefox.
I am using jQuery UI 1.8.16 full minified file and jQuery v1.7.
I guess, I'll try a bare page from scratch, but still waiting for suggestions if someone has already experienced such a behavior and knows why this is happening.
This should work, here is working example:
http://jsfiddle.net/rogal111/Rk2rA/
Check version of jquery & ui.
I just found the problem.
One of the many Javascript plugins was using the code from
http://www.bennadel.com/blog/1624-Ask-Ben-Overriding-Core-jQuery-Methods.htm
var originalRemoveMethod = jQuery.fn.remove;
// Define overriding method.
jQuery.fn.remove = function(){
// Log the fact that we are calling our override.
console.log( "Override method" );
// Execute the original method.
originalRemoveMethod.apply( this, arguments );
}
The problem was that it does not return any value, and somehow this breaks jquery UI.
I added
return originalRemoveMethod.apply( this, arguments );
and now it seems working fine. I just hope, this will not break something else...
So the lesson for all: do not mess the remove() function.

Resources