My site is built in HTML5, CSS3 and Jquery-moblie..
I use pop-ups of Jquery-mobile.
On a popup window I have a button that when pressed I want the current pop-up window will close and another will open.
I tried it this way:
popup windows:
<div id="MyFirstPopup" data-role="popup" data-theme="a" data-overlay-theme="a" class="ui-content">
<a data-role="button" data-transition="none" data-theme="b"
onclick="ShowSecond();" data-icon="forward" data-iconpos="left" >
</a>
</div>
<div id="MySecondPopup" data-role="popup" data-theme="a" data-overlay-theme="a" class="ui-content">
...
</div>
JS:
function ShowSecond()
{
$('#MyFirstPopup').popup('close');
$('#MySecondPopup').popup('open');
}
It did not work.
Does anyone have a solution?
First don't use onclick="ShowSecond();" directly on an a tag.
I have created you a working example: http://jsfiddle.net/Gajotres/8Arrt/
Add click event like this:
$('#popup-button').live('click', function(e) {
setTimeout(function(){$('#MySecondPopup').popup('open');},500)
$('#MyFirstPopup').popup('close');
});
Or use .on( if you are using new jQuery library. You can not open new popup unless old one is close but you also can't open now popup in event that closes last one, so setTimeout function is needed. Set whatever timeout you need/want.
Try this:
<div id="MyFirstPopup" data-role="popup" data-theme="a" data-overlay-theme="a" class="ui-content">
<a id="btOpenSecPopup" data-role="button" data-transition="none" data-theme="b"
onclick="ShowSecond();" data-icon="forward" data-iconpos="left" >
</a>
</div>
<div id="MySecondPopup" data-role="popup" data-theme="a" data-overlay-theme="a" class="ui-content">
...
</div>
Your js file
$('#btOpenSecPopup').live('click', function(e) {
$('#MyFirstPopup').popup('close');
$('#MySecondPopup').popup('open');
}
Related
I have a form in which on clicking submit button the form data is sent through ajax and the related message may it be error or confirmation details from the server script which has been written in php is displayed . For now every thing is working fine . But what I want to know is that the message whcih is being displayed with help of JS can I change it into JQM popup as I am using JQM 1.4.2 for my design .
Popup
<div data-role="popup" id="mDialog" data-overlay-theme="a" data-theme="c" style="max-width:400px;" class="ui-corner-all">
<div data-role="header" data-theme="a" class="ui-corner-top">
<h1>Attention!!</h1>
</div>
<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
<h3 class="ui-title">{Are you sure you want to delete this page?</h3>
<p>This action cannot be undone.} <?php if($this->error->description!='')echo trim($this->error->description)?> </p>
Cancel
Delete
</div>
</div>
Thanks in advance
Try this;
Put this in your HTML, above your <form>
<div id="formNotice"><img src="loading.gif" alt="Loading" /></div>
Now put this where you handle the AJAX response
$("#formNotice").html(AJAXResponse);
$("#formNotice").popup("open");
Here's the docs
Jsfiddle (Without JQM - but you get the idea)
I have a jquery dialog page, noted here:
<div data-role="page" data-rel="dialog" data-close-btn="none">
<div data-role="header">
<h2>Failed to find driver</h2>
</div>
<div data-role="content">
<p>Failed to find a driver. Would you like to continue searching or cancel the search? </p>
<a data-role="button" id="continueBtn" onclick="alert('continue')">Continue </a>
<a data-role="button" id="cancelBtn" onclick="alert('cancel')">Cancel </a>
</div>
</div>
These alerts work in the dialog. However, I cannot attach event handlers for other functions to these buttons. How can I attach events to these buttons?
don't do something this onclick="alert('cancel')" already as you already using jquery.. do it like this
$("#cancelBtn").click(function(){
alert('cancel');
});
http://api.jquery.com/click/
and if the contents is dynamically loaded you need to use Jquery.on()
$("#cancelBtn")on.("click",function(){
alert('cancel');
});
My jQuery mobile popup header doesn't have the same size as the content.
jQuery 1.8.3 and jQuery mobile 1.2.0.
<div data-role="popup" id="commentPopup" style="width: 800px;" class="ui-corner-all">
<div data-role="header" data-theme="b" class="ui-corner-top">
<h1>Please enter your comment</h1>
</div>
<div data-role="content" data-theme="b" class="ui-corner-bottom ui-content">
<textarea></textarea>
OK
CANCEL
</div>
</div>
For info, I open it with $('#commentPopup').popup("open");.
Is it possible to disable the scroll while the popup is opened?
Is it possible to prevent the user from closing the popup when clicking in another place of the page?
Thanks
I was overriding a CSS .ui-content class as #Omar found it.
The problem is solved.
Concerning the dismissible, this is not possible with jQM version < 1.3.0.
I am trying to append buttons to a header if a case is true, but it ends up looking like this:
The edit and new event buttons are supposed to be a control group...
HTML
<div data-role="header">
<h1 class="ui-title" role="heading" id="hdr"></h1>
<div class="ui-btn-right" id ="addbuttons" data-role="controlgroup" data-type="horizontal">
</div>
</div>
JAVASCRIPT
$('#addbuttons').append('<div data-role="button" data-icon="gears" data-theme="b">Edit</div>');
$('#addbuttons').append('<div data-role="button" data-icon="plus" data-theme="b">New Event</div>');
Whenever you do any changes to header or footer, you need to re-enhance the markup this way.
$('[data-role=page]').trigger('pagecreate');
You also can use this,
$('[data-role=header]').trigger('create');
Using this call <a href="deleteDialog.html" data-rel="dialog" data-transition="pop" data-role="button" id='deleteDialog'>Delete</a> to get the following dialog page:
<div data-role="page" id="deleteCompanyDialog">
<script type="text/javascript">
$("#deleteButton").live("click", function() {
alert("this alert increments");
});
</script>
<div data-role="header" data-theme="d">
<h1>Dialog</h1>
</div>
<div data-role="content" data-theme="c">
<h1>Delete Company</h1>
<p id="message"></p>
<a data-role="button" data-theme="b" id="deleteButton" >Sounds good</a>
Cancel
</div>
</div>
seems to retain the live("click".. binding from any previous calls to this dialog and then binds the live call again. So if I call the page 4 separate times, on the forth dialog page call it will popup 4 alert screens. Is there a way to have the javascript still be within data-role="page" so it can load with ajax but not increment the "live" binding. I tried $("#deleteCompanyDialog").live("pagecreate"... as well as pageload (a long shot) which does not work either.
Help would be greatly appreciated.
Instead of using .live(), use .bind() and place your JavaScript in a delegated event handler:
<div data-role="page" id="deleteCompanyDialog">
<div data-role="header" data-theme="d">
<h1>Dialog</h1>
</div>
<div data-role="content" data-theme="c">
<h1>Delete Company</h1>
<p id="message"></p>
<a data-role="button" data-theme="b" id="deleteButton" >Sounds good</a>
Cancel
</div>
<script type="text/javascript">
$(document).delegate("#deleteCompanyDialog", "pageinit", function() {
$("#deleteButton").bind('click', function () {
alert("this alert DOES NOT increment");
});
});
</script>
</div>
This is like using $(function () {}); but for jQuery Mobile. The pageinit event will fire when the page is initialized (happens once per pseudo-page) and the .bind() function call will only bind to elements present in the DOM. When you use .live() it doesn't bind to the actual element, it binds to the document element, which does not get removed when you navigate away from the dialog (so each time you show the dialog you add another delegated event handler).