I am trying to make button which are gonna do something and close popup ( button is on popup, I am using jquery mobile)
<div class="ui-block-b">
Feedback
</div>
<div data-role="popup" id="popupDialog" data-theme="c">
<div data-role="header" data-theme="a" class="ui-corner-top">
<h1>Feedback</h1>
</div>
<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
<h3 class="ui-title">Thank you for your participation!</h3>
<p>Some content</p>
Cancel
<input type="button" id="feedback_send" value="Send" data-inline="true" data-theme="b">
</div>
</div>
When I click button I would like to send data to server and close popup ( I connect send with function which sends data to server but I don't know how to close popup after), I tried to emulate cancel click but it doesn't close.
Popup can be closed like this:
$( ".selector" ).popup( "close" );
But in your case you should use it like this:
setTimeout(function(){
$( ".selector" ).popup( "close" );
},1);
setTimeout is needed because web-kit browser cant close popup without a slight delay.
Working example: http://jsfiddle.net/Gajotres/B6TgZ/
$(document).on('pagebeforeshow', '#index', function(){
$(document).on('click', '#feedback_send', function(){
setTimeout(function(){
$( "#popupDialog" ).popup( "close" );
},1);
});
});
Before you close popup do everything that needs to be done. There also another approach, you can always close your popup and trigger popupafterclose to do what ever needs to be done.
$( "#popupDialog" ).on( "popupafterclose", function( event, ui ) {
// Do something here, it requires SOlution 1 to trigger popup close
alert('Popup closed');
});
Of course this solution still requires button to trigger popup close function. But unlike solution 1 this will not cause slight delay (delay = action you will do before popup is closed) before popup is closed.
It worked for me to place data-rel="back" in the button, as I was catching the click with another on click function. This way you get to call your function and close the popup.
Related
I'm using jquery mobile to create a little mobile website.
I have a popup with a link, but this link works only if the popup is not taller than the phone screen. But it works on a computer...
The cross to close the popup is illuminated when I click on my link.
<div id="trouverUnMatch" data-role="page">
<div id="notification" data-role="popup" data-overlay-theme="b">
STUFF HERE
More
</div>
</div>
<div id="allNotifications" data-role="page">
</div>
Edit: It's not a problem with the bottom link, when I click on everywhere inside the popup it go to the popup top and illuminate the close button.
For example if you go to http://demos.jquerymobile.com/1.4.5/popup/ and click on a picture (Photo lightbox), you resize your browser to get only the half of it (in height), then if you click on the picture the close button will be illuminated.
I have replace the link by :
<span class="link" data-link="allNotifications">More</span>
$(document).ready(function() {
$(".link").on('tap', function () {
$.mobile.changePage( "#" + $(this).attr("data-link") );
});
});
It works with iOS but chrome on desktop has the problem now...
I can't do a click event it's suppose that the popup starts after 5 seconds after the app runs.
Any ideas?
UPDATE:
Here is the iFrame Popup example. I just changed the src from where the ads are going to come from.
The isue is that I need to set a timeout after 5 seconds to use the popup, but I'm a little confused on how will the timeout function will render the popup because I can't use a click event.
Open Map
<div data-role="popup" id="popupMap" data-overlay-theme="a" data-theme="a" data-corners="false" data-tolerance="15,15">
Close
<iframe src="http://googleadmobORadsense.com" width="480" height="320" seamless=""></iframe>
</div>
$(document).on("mobileinit", function () {
setTimeout(function () {
//show your popup here
}, 5000);
});
I have the following header in my JQM page to have popup menu when tapping option.
<div data-role="header" data-theme="a" data-position="fixed">
<div><img src="custom-icon.png" class="ui-btn-left" width="32" height="32"/></div>
<h1>HOME</h1>
Option
<div data-role="popup" id="main-menu">
<ul data-role="listview" data-inset="true" data-theme="a">
<li>MENU 1
<li>MENU 2</li>
</ul>
</div>
</div>
It works but it sometimes need to be tapped many times in my android device. The JQM page was used in android-webview. How to solve tapping issue?
THanks
In my suggestion you have to stop event bubbling. In jQuery you can do this by:
e.stopPropagation();
So in my suggestion write a handler function for the click event for menu link popup.
Make this change in the JQM webview page
Option
And better bind your link in the .ready(), you should try to avoid Javascript code in the DOM for better maintainability.
$('#my_link').live('tap',function(event) {
event.stopPropagation();
$('#main-menu').popup('open');
});
EDIT:
$('#YOUR_PAGE_ID').live( 'pageinit',function(event){
$('#my_link').live('tap',function(event) {
event.stopPropagation();
$('#main-menu').popup('open');
});
});
Using jquery mobile 1.2, I have a popup menu (OK/Cancel) which should be answered before changing to a new page. But the page changes (and the popup disappears) before it is clicked:
if (rider.time.valueOf() > 0) {
$('#popupMsg').text("Rider has already finished; update the time?");
$('#alreadyFinished').popup("open");
}
alert("rf");
// other code.......
$.mobile.changePage("#finishLine");
// other code.......
I put in the 'alert' just to prove that the popup does actually appear - there it is, behind the alert, but the popup closes (and the page changes) as soon as the alert is clicked. Also tried removing the 'other code' but still the same problem.
Here's the html:
<div data-role="popup" id="alreadyFinished" class="ui-content">
<p id="popupMsg"></p>
<a data-role="button" data-theme="b" id="OKBtn">OK</a>
Cancel
</div>
Even without the buttons in the popup, the popup doesn't persist. So what's wrong?
A jQuery Mobile popup is part of a page. Changing the page will close any current popup, so you should not directly call it following the opening of a popup. The following code would open your popup and not close it.
if (rider.time.valueOf() > 0) {
$('#popupMsg').text("Rider has already finished; update the time?");
$('#alreadyFinished').popup("open");
} else {
alert("rf");
// other code.......
$.mobile.changePage("#finishLine");
// other code.......
}
If you want your popup to be modal, the simplest way is to bind the execution of the rest of your code to the closing of the popup. For instance, if you want the restOfCode function to be run after the popup is closed:
$('#alreadyFinished').popup("open");
$( "#alreadyFinished" ).on({
popupafterclose: function(event, ui) {restOfCode()}
});
jQuery mobile button renders gibberish for filter button after clicking on pagination. Click event that shows map also stops working after changing the page.
Should I call refresh page?
Sandbox link
Markup is as following:
<div data-role="header" data-theme="b" id="rest-header">
<div class="ui-grid-b">
<div class="ui-block-a">Filter</div>
<div class="ui-block-b"><input type="search" name="search"value="" data-theme="d" /></div>
<div class="ui-block-c">Map</div>
</div>
</div><!-- /header -->
First I would suggest using jQuery 1.6.4 as jQM only supports this version for 1.0
Your problem is you're adding a back button when navigating to another page, this is causing an overlap of both the filter and back button.
Removing the data-add-back-btn="true" attribute should solve the issue
For map button you should use live event binding or delegation so that it works for dynamic content. Instead of
$( "#map-btn" ).bind( "click", function(event, ui) { ... });
try
$(document).on('click', '#map-btn', function() {
// ...
})
For filter button I can see the Back button under the Filter one, so you want to get rid of the Back button since you don't need it right there. You can remove data-add-back-btn="true" attribute.