We Keep Coding

Popup a dialog use jquery mobile in phone gap

I'm developing a phonegap project, I wanna popup a dialog of error information. I learn some from the demos of jQuery mobile, here is the link http://demos.jquerymobile.com/1.4.0/popup/#&ui-state=dialog I used the code of it and in my js file I use popup('open') to open it.
Here is part of my html code
<div data-role="popup" id="dialogZ" data-overlay-theme="b" data-theme="a" data-dismissible="false" data-transition="pop">
<div data-role="header" data-theme="b">
<h1 align="center">Sign in failed</h1>
</div>
<div role="main" class="ui-content">
<p id="SigninError"></p>
<span align="center">OK</span>
</div>
</div>
And here is part of my js code
else if (data == "Error2") {
var message = '<p align="center">Wrong username or password</p>';
SigninError.empty().append(message);
$('#dialogZ').popup('open');
}
I wanna have the effect like the demo but it didn't work.
Anyone knows why? It seems I can not have the css work properly, but I have included the jquery.mobile-1.4.0.css. Need helps!!

ya i got same issue before 4 months finally i got a solution. when you append content inside the popupview at the time u must call like this.....
JS
$('#dialogZ').popup();
$('#dialogZ').popup('open');
or
$('#dialogZ').popup();
setTimeout(function(){
$('#dialogZ').popup('open');
},100);
HTML
your data-role popup must inside the content of your calling page

Ideally data-transition should be on the link which triggers popup. since you are opening the popup in code, there is an additional attribute for $(dialog).open function, u need to pass the transition as part of open function., jquery doc

JQueryMobile: stopPropagation() makes blank page flash on href click

I'm developing a RhoMobile appand I've been having lot of trouble with page transitions.
At the end, I just decided to turn them off for a better user experience. Every button click works perfectly, except for one where I have a button inside a Collapsible element.
For the click event on the button not to get interpreted as a click on the collapsible, I use this js code, which I suspect is causing trouble:
$(document).on('pagebeforeshow', '#index',function(e){
$('.details').bind('click', function (e) {
e.stopPropagation();
e.stopImmediatePropagation();
});
});
And in the HTML:
<div data-role="page" id="index">
Here go headers & navbar and other stuff
</div>
<div data-role="content">
<div data-role="collapsible-set" class="uurbon-block">
<div data-role="collapsible" data-collapsed="false">
<h3 data-position="inline"><p class='alignleft'>Collapsible title</p><div style="clear: both;"></div>
<span style="float:right;" class="button-span">
<a href="some_url.html" data-role="button" data-mini="true" data-inline='true' data-icon="star" data-iconpos="left" class="details" data-transition="none">
Button
</a>
</span>
</h3>
</div>
</div>
</div>
This will cause a blank page to be shown for 1-2 secs before transitioning. I'd be looking for a fix, but if not, i'd be happy with that page just beeing black (my app background is black also, so this blink wouldnt be so noticeable).
Note: I have alredy tried setting body background color in css, won't work.
Thanks for your ideas!

As pointed by Omar, if you want to put a button inside a collapsible and prevent the collapsible from capturing the click while also handling the page in the same browser, the correct way to do this is (Take notice that this may only apply to RhoMobile, but its worth a try on other jquerymobile-based frameworks):
and avoid RhoMobile trying to open this in a new browser is by using:
javascript:
$(document).on('pagebeforeshow', '#index',function(e){
$('.details').bind('click', function (e) {
e.stopPropagation();
$.mobile.changePage("your_page");
});
});
HTML:
Button
Notice the href="javascript:;". I had this first set to "#" and also "", but that didn't work.

after open event of pop up not working

I have a jquery mobile popup. I want after it opened to perform some things. The problem is not coming to the event:
$(document).ready(function () {
$("#alertsPopup1").bind({
popupafteropen: function (event, ui) { alert('popup'); }
});
});
Here the pop up in the html:
<div data-role="popup" data-corners="false" class="alertsPopup"
id="alertsPopup1" data-theme="e" data-overlay-theme="b" class="ui-content">
<p>
aaaa</p>
</div>
I can not understand what the problem is, it passes the bind without problems (I tested in Chrome's console).
I'd appreciate some help.

First don't use document ready with jQuery Mobile, sometimes it will trigger before jQuery Mobile can process page correctly inside the DOM. Read here why.
Instead of document ready you should use proper jQuery Mobile page events. Read more about them in a previous link.
Also if possible use delegated event binding. Basically use on function to bind an event and bind it to a document level. Delegated event binding should solve the problem of document ready usage, mainly because it doesn't care if popup exist / don't exist inside the DOM.
Javascript :
$(document).on('pagebeforeshow', '#index', function(){
$(document).on("popupafteropen", "#alertsPopup1",function( event, ui ) {
alert('popup');
});
});
HTML :
<div data-role="page" id="index">
<div data-role="content">
Open Popup
<div data-role="popup" data-corners="false" class="alertsPopup"
id="alertsPopup1" data-theme="e" data-overlay-theme="b" class="ui-content">
<p>
aaaa</p>
</div>
</div>
</div>
Working example: http://jsfiddle.net/Gajotres/Jgajv/

Questions about LocalScroll and ScrollTo (jQuery)

this problem might seem pretty trivial to some of you guys but i'm sorry i can't handle it.
Problem: I have one Div-Box called "DivBox" with the attribute overflow:hidden; and i want to display other information in it by scrolling to other divs inside of it.
Above I have links that refer to that other information.
Info
Info2
<div id="DivBox">
<div id="info1">Information</div>
<div id="info2">other Information</div>
</div>
I also included jquery, ScrollTo, LocalScroll and Easing and wrote this code:
$('#LinkToInfo').click(function(){
$('#DivBox').localScroll({
target:'#info1'
});
});
$('#LinkToInfo2').click(function(){
alert("Debugging reasons");
$('#DivBox').localScroll({
target:'#info2'
});
});
But it doesn't work. I tried debugging it but it did just not scroll. What am i doing wrong?
I hope you can help me. Thanks

Not sure if this will work, but try removing the href="#" from the <a> tags.

Defining a return-transition between page changes

I am using jQueryMobile's $.mobile.changePage(...) method to switch to a different page within my project.
$.mobile.changePage("#foo", {
transition:"slide"
});
When I run that method, the transition works perfectly but when I hit the browser's return button I see no reverse transition.
I played around with some of the parameters described in http://jquerymobile.com/test/docs/api/methods.html but had no luck.
Especially setting reverse:true just reversed the transition when moving forward to the target page but there is still no transition when I hit the back button.
Update: It seems like seeing data-rel="back" does the trick for "orginary links" defined via the <a>-tag BUT what I need is the JavaScript equivalent when calling the $.mobile.changePage() function.

Have a look at this page, http://jsfiddle.net/nachiket/mDTK2/show/light/
Works fine with me.
Click (on page 1) shows transition from Left to right, & Back button (on page 2) shows transition from right to left.
Source: http://jsfiddle.net/nachiket/mDTK2/
If it is not working fine, than please share your browse and other details.
If example is working fine, but not your code, make a jsfiddle highlighting your problem, so I can check and update code/answer.

For the links you want to have the reverse transition on you can use data-direction="reverse" with data-rel="back"
Example:
<div data-role="page" >
<div data-role="header"><h3> Header </h3> </div>
<div data-role="content" >
Page 2
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header"><h3> Header </h3> </div>
<div data-role="content" >
<a href="#" data-rel="back" data-role="button" data-direction="reverse" >Back</a>
</div>
</div>​
jsFiddle:
http://jsfiddle.net/GEDcF/
Docs:
http://jquerymobile.com/demos/1.1.1/docs/api/data-attributes.html
UPDATE
From your comment
"Yeah, but how do I do that with the JavaScript function $.mobile.changePage()?"
Docs:
http://jquerymobile.com/demos/1.1.1/docs/api/methods.html
Quote:
Properties:
reverse (boolean, default: false) Decides what direction the transition will run when showing the page.

Found it.
One of our developers turned off all return transitions globally, so no wonder that it didn't work.
This is what he used. Removing that line did the trick.
$.mobile.changePage.defaults.transition = "none";