I have a JQM panel that holds a selectmenu.
When you open the panel and click on the menu, the dialog opens.
Now if you choose an option, you will return to the page and the panel will be closed.
Is there a way to keep the panel open?
Here's the fiddle.
<div id="panel" data-role="panel">
<select id="select" data-native-menu="false">
<option value="1">text</option>
...
<option value="9">text</option>
</select>
</div>
What causes the panel to close is the dialog. Because dialogs are treated like pages, so when you open a dialog you leave the page to another page but with data-rel='dialog'.
Even data-dismissible='false' doesn't force the panel to remain open. However, you can also force panel to open on pageshow or once the dialog disappears pagehide.
Demo
$(document).on('pagehide', '#select-dialog', function () {
$('#panel').panel('open');
});
Following up ot #Omar's suggestion, I had to add a trigger() method to get the panel to open. So: $('#panel').panel('open').trigger();
Related
When using Jquery mobile, When you select an option from a select with the keyboard, you cannot tab to the next input in the DOM. If you take out the jquery mobile bits, things work as expected.
I have the following html:
<body>
<input type='text' id='starter' /><br />
<select id='sel'>
<option value=''></option>
<option value='1'>One</option>
<option value='2'>Two</option>
</select><br />
<input type='text' id='ender' /><br />
</body>
I have set this up on fiddler with jquery and jquery mobile below:
http://jsfiddle.net/58jkj1wa/ - raw jquery works as expected.
http://jsfiddle.net/a5reojmo/4/ - jquery mobile broken select.
To reproduce the issue perform the following:
The cursor starts in the first input
press 'tab' to move to the select
press down arrow to activate the options
press down arrow to select the first option
press return to accept the change (non mobile - focus is now correctly on the select)
press tab
In the non-mobile version the cursor is now in the second input as expected. In the mobile version it's someplace else... and I don't know where. You have tab a lot for the focus to move to the first input again... then through the inputs to the field you want after the select you just used.
Personally I reckon this is a bug, so the most interfering I felt prepared to do was to try the on change trigger to try and set the focus back to the select like this:
$("#sel").on("change", function (e) {
$("#sel").focus();
});
But this does not work. If you do the focus call anywhere else, it works as expected, highlighting correctly and tabbing off if you do not change the value. but as soon as you change the value the focus is someplace else.
I can set the focus to the next item however:
$("#sel").on("change", function (e) {
$("#ender").focus();
});
But I'd rather not do this as this means I can't do some of the dynamic hiding of inputs I'm doing and have to programmatically mirror the flow handling in the form.
I've tried updating some of wrapper stuff that JQM adds and I've tried setting focus on another input and then back again, and then optionally doing a selectmenu refresh, but the mobile still can't tab out to the next input. I've also tried various blur() and focus() calls all to no avail.
I did see this answer doing something similar by adding a keydown handler, but since I don't know where the focus is after a value change I don't know where to add the keydown handler... besides this sounds like a JQuery Mobile bug doesn't it??
Do you know how I can make tab and focus-highlight work correctly after a select change in JQuery Mobile?
Is this a bug I should report?
I have a jqm radio button that looks like this:
<div data-role="controlgroup" data-type="horizontal">
<h3>Type</h3>
<input type="radio" name="type" id="deposit_typeTotal" value="t" checked/>
<label for="deposit_typeTotal">Total</label>
<input type="radio" name="type" id="deposit_typeIndividual" value="i"/>
<label for="deposit_typeIndividual">Individual</label>
</div>
It's part of a phonegap application which I'm currently testing on an android galaxy s2, which is where I'm seeing the problem. I've never been able to get it to break in Google Chrome on the desktop.
I have an click event attached to this button which calls a function which does various things, but I've modified it to alter the title to the value of the button to aid my debugging.
var type = $("#deposit input[name=type]:checked").val(); // Gets the value of the checked button
app.count++;$(".depositOrPayment").html(app.count+"/"+type); // Sets the title of the page
So what I'm seeing is the number of times the function has been called / t or i depending on which button I click. However, sometimes (particularly if I click the buttons quickly) I get undefined as the button's value. Once this happens, it stays as undefined no matter how many clicks I do.
Anybody got any ideas?
Cheers
Graham
There is a difference between click and tap. A tap has about a 300ms delay (around that). Anyway, you can also bind to the tap & click event in JQM (virtual mouse events).
$('#element').on('tap', function() {
...
});
or
$('#element').on('click tap', function() {
...
});
Read this: http://phonegap-tips.com/articles/fast-touch-event-handling-eliminate-click-delay.html
So there is FastClick https://github.com/ftlabs/fastclick
Check this out What is the difference between the click and tap events?
And this http://phonegap-tips.com/articles/fast-touch-event-handling-eliminate-click-delay.html
EDIT: I made this a wiki in the hopes that someone can answer it better than me :)
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()}
});
I'm trying to make the sample from here work on my page. I've included the following into my page body:
<script>
$(function () {
$("#datepicker").datepicker();
});
</script>
<div id="myDivId">
<p>Date: <input type="text" id="datepicker"></p>
</div>
which is the same as the sample.
In the sample when I click onto the edit box the datepicker appears. I can step between months and when I click on a specific date that date gets posted into the edit box.
Now on my page when I click onto the edit box the datepicker does appear, but "next" and "previous" buttons have no effect and when I click onto a specific date the datepicker doesn't close and the date is not posted but the page scrolls to the top.
The problem is only reproduced in IE (I tried IE 8 only) - works in both Firefox and Chrome.
What am I doing wrong?
Turns out it was because of some "extra safe" configuration that is enabled on Windows Server 2008 R2 by default.
I started using the jquery ui library to add some enhanced UI elements to the asp.net app. and have run into a minor bug/problem:
I have a jquery UI dialog that is called when a button is clicked..the text for the dialog is all in a and is normaly hidden from the user, and then the jquery UI does its magic and uses that text to display the dialog - all works perfectly.
Here is the code:
<input type="button" value="Cancel This Event" onclick="$('#myCancelEventDialog').dialog('open');" />
and here is the div:
<div id="myCancelEventDialog" title="Cancel an Event or Meeting">
<p>Are you sure you would like to cancel this event/meeting?</p>
</div>
Question is, everytime my form repaints, the "hidden" text actually flashes onto the page for a split second before it becomes hidden again. (i.e. the "are you sre you would like to cancel this event/meeting text actually is visible for a split second)
Is it possible to prevent this?
I set the style on the div to "display: none". The dialog changes this when it displays.
<div id="myCancelEventDialog"
title="Cancel an Event or Meeting"
style="display: none;">
<p>Are you sure you would like to cancel this event/meeting?</p>
</div>
Set the height on the control to zero. This way it renders to the screen at 0 height? This is somewhat of a guess by the way...
Which browser? Also, you can experiment with CSS visibility by setting display:none and undoing that just before you pop up the dialog.