I have a simple form I'm opening inside a popup:
<div data-role="popup" id="request-form" data-dismissible="false">
<div class="ui-header">
<h2>Request Holiday</h2>
</div>
<div>
<div data-role="fieldcontain" class="single-day">
<label><b>Date</b>: <span id="date"></span></label>
<select id="half-day">
<option value="Full">Full Day</option>
<option value="Morning">Morning Only</option>
<option value="Afternoon">Afternoon Only</option>
</select>
</div>
<button id="request-button" data-theme="B">Request</button>
<button id="cancel-button" data-rel="back">Cancel</button>
</div>
</div>
Which works fine, except when I click either of the buttons, or the label or the header in iOS, the select menu pops open - it appears to receive focus whenever a click/tap event fires in the popup. This only seems to happen when the form is in a popup.
I originally set out to use a dialog, but that causes my original page to lose it's scrolled position when I close the dialog, and I preferred the look of the popup.
Is this a bug? Is there a way I can stop the select automatically receiving focus? Any other workarounds?
Found a hacky solution, which involves extending the popup widget, overriding a method with the same code, but commenting out the code that causes the first focusable element to receive focus when the popup is clicked:
$.widget( "mobile.popup", $.mobile.popup, {
_openPrerequisitesComplete: function() {
var id = this.element.attr( "id" ),
firstFocus = this._ui.container.find( ":focusable" ).first();
this._ui.container.addClass( "ui-popup-active" );
this._isOpen = true;
this._resizeScreen();
// Check to see if currElement is not a child of the container. If it's not, blur
if ( !$.contains( this._ui.container[ 0 ], this.document[ 0 ].activeElement ) ) {
this._safelyBlur( this.document[ 0 ].activeElement );
}
// if ( firstFocus.length > 0 ) {
// this._ui.focusElement = firstFocus;
// }
this._ignoreResizeEvents();
if ( id ) {
this.document.find( "[aria-haspopup='true'][aria-owns='" + id + "']" ).attr( "aria-expanded", true );
}
this._trigger( "afteropen" );
},
});
Related
I have two menu items Delete and Create under Menu Icon. I am selecting any operation from Menu Icon which opens confirmation dialog with two button Delete and Cancel.
Initially focus stays on menu icon after selecting any menu item from menu. I want to shift the focus on dialog button by default so that on Enter-Key hit , it close the dialog after performing desired operation.
Please check Demo here Stackblitz
I fixed this issue as Spinner was preventing focus to move into dialog button whenever i was trying to click on Delete from Menu.
I added id="deletebutton" in html as below.
<div *ngIf="!loadspinner">
<mat-dialog-content>
<p>Are you sure to delete this?</p>
</mat-dialog-content>
<mat-dialog-actions align="center">
<button id="deletebutton" mat-raised-button color="primary" (click)="deleteDocument()">Delete</button>
<button mat-raised-button mat-dialog-close tabindex="-1" (click)="close()" style="border-color:#3f51b5;">Cancel</button>
</mat-dialog-actions>
</div>
And added timeout in ngOnInit method in .ts file as below.
ngOnInit() {
this.service.validate(this.data).subscribe(value => {
this.loadspinner = false;
if (value != null) {
this.warningMsg = value.statusMessage;
} else {
this.warningMsg = "";
}
//For autoFocus in dialog button as Spinner prevents it to set by deafault
setTimeout(()=>{
document.getElementById('deletebutton').focus();
});
});
}
I am trying use dropdown inside popover but it close everytime popover. I tried using different visible property on state but still same.
<div>
<Dropdown
visible={visibleDropdown}
onVisibleChange={(visible)=>this.onDropdownVisibleChange(visible)}
overlay={
<Menu>
<Menu.Item key="0">
1st menu item
</Menu.Item>
<Menu.Item key="1">
2nd menu item
</Menu.Item>
<Menu.Divider />
<Menu.Item key="3">3d menu item</Menu.Item>
</Menu>
} trigger={['click']}>
<a className="ant-dropdown-link" href="#">
Click me <Icon type="down" />
</a>
</Dropdown>
</div>
This does not work am i missing something?
I played around a bit, and here is a working solution:
http://codepen.io/JesperWe/pen/QvMNjJ
Just using getPopupContainer doesn't solve it, you have to play with the visible state a bit. Looking at the most important parts from the Codepen:
onVisibleChange = ( visible ) => {
this.setState( { visible: true } )
};
closeDropdown = () => {
this.setState( { visible: false } )
};
...
const menu = (
<Menu onSelect={this.closeDropdown}>
<Menu.Item>
One
</Menu.Item>
<Menu.Item>
Two
</Menu.Item>
</Menu>
);
return (
<Dropdown overlay={menu} trigger={[ 'click' ]} getPopupContainer={this.getContainer}>
<Button onClick={this.onVisibleChange}>Dropdown</Button>
</Dropdown>
);
....
<Popover visible={this.state.visible}
onVisibleChange={this.onVisibleChange}
placement="right"
getPopupContainer={this.getContainer}
trigger="click" content={this.renderContent()}>
<Button icon="filter">click me</Button>
</Popover>
The trick is having onVisibleChange always set the state to true, and then closing the popover explicitly from the Dropdown overlay.
Basically I replaced the div in the content as soon as I click "Delete" on the Setting menu above. Well it does changes from collapsible set into checkbox with footer below containing two buttons. The buttons are delete and cancel but I can't perform anything with those buttons. For example, If Cancel clicked it should pop the alert popup (For the sake of testing). Please help..
<div data-role="content">
Tambah Katagori
<div id="Outcome" data-role="collapsibleset" data-theme="a" data-content-theme="a" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d"></div>
</div>
$("#Delete").click(function(){
$("#Outcome").replaceWith('<form><fieldset data-role="controlgroup" id="OutcometoDelete">');
db.transaction (function (transaction)
{
var sql = "SELECT * FROM KatagoriPengeluaran";
transaction.executeSql (sql,[],
function (transaction, result)
{
if (result.rows.length)
{
for(var i = 0; i< result.rows.length; i++ ) {
All2 =result.rows.item(i);
element = $(' <input type="checkbox" name="'+All2.Katagori+'" id="'+All2.Katagori+'"><label for="'+All2.Katagori+'">'+All2.Katagori+'</label>').appendTo($('#OutcometoDelete'));
}
All2 =result.rows.item((result.rows.length-1));
$('#'+All2.Katagori).append('</form></fieldset>');
$("#OutcometoDelete").append('<div id="someFooter" data-role="footer" data-position="fixed"><div id ="navbarFooter" data-role="navbar"><ul><li><a data-role="button" href="#popUpDelete">Delete</a></li><li><a data-role="button" href="index.html#Pengeluaran" data-ajax="false" id="cancelDelete" >Cancel</a></li></ul></div></div>');
$("#OutcometoDelete").trigger('create');
$("#someFooter").trigger('pagecreate');
$('#navbarFooter').trigger('pagecreate');
}
else
{
alert ("Retrieval Error");
}
}, error);
});
});
$("#cancelDelete").click(function(){
alert("oi");
});
This is because your way of event binding will not work for future elements. You can't just bind click event and expect it will work in the future, event(s) must be bind to something inside the DOM.
So this code will not work:
$("#cancelDelete").click(function(){
alert("oi");
});
On the other hand this code will work:
$(document).on('click',"#cancelDelete",function(){
alert("oi");
});
Second code will work because event is bind to document and it will propagate as soon as needed element is part of the DOM and appropriate event is trigger on it. This is also called delegated event binding.
I am new to jquery mobile. In my UI, one text box and one select menu are there. Initially select menu is empty.If the textbox value is more than 1 then some data is added to the select menu otherwise select menu is empty. For this, i am calling the function at the onchange of select menu but it is not working. Please can anybody help me.
Edit:
Ex:
$('#Goal_Time').bind( "focus", function(event, ui)
{
if(Goal_WeightVar.val() > 0)
{
Goal_WtVar = Math.abs(weightVar.val() - Goal_WeightVar.val());
Min_DurationVar = Math.round(Goal_WtVar * 2.2);
for(var i=0;i<10;i++)
{
$('#Goal_Time').append('<option value=Min_DurationVar>Min_DurationVar</option>');
}
}
});
thanks
Well Kinda working example:
http://jsfiddle.net/v5DC3/5/
JS
$('#Goal_WeightVar').live('change', function() {
var weightVar = 0; // for testing only
var goalWeightVar = $('#Goal_WeightVar').val();
if(goalWeightVar > 0)
{
Goal_WtVar = Math.abs(weightVar - goalWeightVar);
Min_DurationVar = Math.round(Goal_WtVar * 2.2);
for(var i=0;i<10;i++)
{
$('#Goal_Time').append('<option value='+Min_DurationVar+'>'+Min_DurationVar+'</option>');
}
$('#Goal_Time').listview('refresh');
}
});
HTML
<div data-role="page" id="Goal_Time_Page">
<div data-role="content">
<label for="Goal_WeightVar">Goal Weight:</label>
<input type="text" name="Goal_WeightVar" id="Goal_WeightVar" value="" />
<label for="Goal_Time" class="select">Goal Time:</label>
<select name="Goal_Time" id="Goal_Time">
<!-- Add options here -->
</select>
</div>
</div>
You will need to tweak it
As it says in the docs of jQuery Mobile, you have to tell the select menu to update it's contents by calling $('select').selectmenu();
If it still doesn't work you'll have to post a little sample code so I can have a look at it.
Edit:
Actually, that's not even necessary. If you have an empty <select id="to-append"></select>, you can just add options via $('#to-append').append('<option value="a">A</option>')!
The onchange event of the select is probably not the right event to do this though. The select will not change as long as it's empty, thus your event will never get triggered. Try the blur event of the text box.
jQuery Mobile Docs - Select
How I can create a drop down list using select_tag "xyz", options_for_select or any way where on selecting any option from down list and hitting button will redirect me.
Any help??
<td>
<%= select_tag "options", options_for_select(
[["Dashboard",
"/homes/"+registrar.enrollment_application.id.to_s
]] ) %>
</td>
<input type="button" value="Select" onclick = "check_options()" >
if above code is right then all i need to write a javascript?? please let me now
function = check_options() {
If you can use javascript or even jquery on the client side you could set the window.location based on the selected item in the drop down, after you click the button:
HTML: This is how you set up your select list and a button
<select id="options">
<option value="http://stackoverflow.com">Stack Overflow</option>
<option value="http://google.com/">Google</option>
</select>
<input type="button" id="optionsbutton" value="Go" />
JavaScript: This is how you wire up the button click to the window redirect
var onButtonClick = function() {
window.location.replace($("#options").val()) //<--- This gets the selected value
// and redirects the window
}
$(document).ready(function(){
$("#optionsbutton").click(onButtonClick); //<--- This hooks up the button click
// to do the onButtonClick function
});
See How to redirect to another webpage in JavaScript/jQuery? for more details.
Update Using Provided Code
You'd just have to make your check_options function find the selected value and set the window location:
var check_options = function() {
window.location.replace($(" [ use selector for select element ] ").val());
});
You should add javascript like this
function check_options() {
window.location = document.getElementById("options").value
}