JQuery focus isn't working with my dialog window checkbox - javascript

I'm using jQuery UI 1.8.4, I have a context menu that opens up a dialog window. When the dialog window opens it doesn't get focused on. I try setting the autofocus in my checkbox element, also tried using $('input[type="checkbox"]').eq(0).focus() and $('input[type="checkbox"]').first().focus(). I also tried using open (event, ui) and focus (event, ui). None of the elements in the dialog gets focused on.
If I tab using the keyboard it doesn't get into the dialog window until its done with the tabbable objects behind it. The only way I got for the focus to work is if I used the mouse and clicked on the dialog. What would be causing my focus to not work? Here is my code.
assignmentContextMenu(){
var assignment_menu_items = [];
var assignment_menu = {};
assignment_menu_items.push({
name: 'Patient Info', title: 'Patient Info',
fn: function(el) {
$("#modal_window iframe").attr('src', "../Info?op=view&nosidemenu=1&patient_id="+patient_id+"&closeOnQuit=1").load(function() {resizeIframe(this)});
$("#modal_window").dialog({
modal: true,
show: 'scale',
hide: 'scale',
width: 'auto',
height: 'auto',
position: [670, 115],
open: function(event,ui) {
$('input[type="checkbox"]').eq(0).focus();
},
close: function() {
window.location.reload();
}
});
}
});
assignment_menu_items.push({
name: 'Close Menu', title: '',
fn: function(el){return false}, });
assignment_menu = new ContextMenu('patient_assignment_context_menu_'+count_id, 'Assignment Context Menu Options', '#info-'+patient_id, assignment_menu_items, {type:0});
count_id +=1;
}

Related

How do I prevent the original field resuming focus when the dialog closes?

My users don't want to have to let go of the keyboard to use the mouse on an input form; so I need to use the onFocus event to show a JQuery UI Dialog to them. But, when calling the dialog's close(); the dialog is being re-opened as the original field resumes focus. I've tried explicitly calling focus() on the next input field, but that call is ignored.
How do I prevent the original field resuming focus when the dialog closes?
Using IE11:
$("#divPayorTypes").dialog({
autoOpen: false,
height: 275,
width: 465,
top: 925,
left: 275,
modal: true,
dialogClass: "no-close",
title: "Payor Type Options",
buttons: [{
text: "Set New Payor Type",
click: function () {
var payorType = $("#ddlPayorTypes :selected").text();
var payorTypeId = $("#ddlPayorTypes").val();
$("#CCTMainForEdit_PayorType").val(payorType);
sessionStorage.setItem("CurrPayorType", payorType);
$("#CCTMainForEdit_refPayorTypeID").val(payorTypeId);
$("#CCTMainForEdit_CheckNmbr").focus();
$("#divPayorTypes").dialog("close");
}
}, {
text: "Cancel",
click: function () {
$("#CCTMainForEdit_LastName").focus();
$(this).dialog("close");
}
}]
});
You can use .blur() on your focused field
Example:
$("#myInputID").blur();

How can I load a pop up box with a specied URL in asp.net using JavaScript?

I want to display a pop-up box once I click the "Add Component" Link. The first time it's clicked, it will display a proper dialog box, but if I click again and again it will go that URL without the pop-up box, The pop-up box contains another view page. If I close that box, it should say "Closed", and if I click "Add Component" again the pop-up should show. Here is my JavaScript and HTML Code:
<script>
$(document).ready(function () {
$('#lnkCreate').on('click', function (e) {
var url = $(this).attr('href');
$("#dialog-edit").dialog({
title: 'Add Component',
autoOpen: false,
resizable: false,
height: 455,
width: 500,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
open: function () {
$(this).load(url);
alert(url);
},
close: function () {
$(this).dialog('close');
alert("closed view");
}
});
});
</script>
<p style="padding-left:18em;padding-top:1em">
#Html.ActionLink("Add Component", "Create",null, new { id = "lnkCreate" })
</p>

Override Magnific Popup close method when using the open method

I'm trying to override the Magnific Popup close method (as outlined in the documentation and answered here by the developer in another question). However, when using the open method to create the popup (rather than attaching to an element in the DOM), the $.magnificPopup.proto isn't accessible.
Here's my example of non-working code. As you can see, I'm trying to override the close method once the popup opens. The console.log fires when I try to close (either by my Close button or by hitting ESC) but the box does not close.
$.magnificPopup.open({
items: {
src: '/path/to/file',
type: 'ajax',
},
callbacks: {
open: function() {
$.magnificPopup.instance.close = function() {
console.log('close override is working');
$.magnificPopup.proto.close.call(this);
}
},
ajaxContentAdded: function() {
var m = this;
this.content.find('.redbutton').on('click', function(e) {
e.preventDefault();
m.close();
});
}
},
closeOnContentClick: false,
closeOnBgClick: false,
showCloseBtn: false,
enableEscapeKey: true
});
How can I close the box?

jquery dialog too many buttons

here is my code with jquery ui:
jQuery("#nodeliverydate").dialog({
resizable:false,
draggable:false,
modal:false,
buttons:[{text:"Close",click:function(){jQuery(this).dialog("close");}}]
});
It is a very simple code that using jquery dialog as an alert box. I defined one button to close the dialog. However, it runs in a very odd way that the dialog will contain many buttons, and the text on the buttons are all function names such as "each","all","clone","select","size", etc. And after I close it, if the dialog shows again, it will be normal. Does anyone have any idea about why this happens?
jQuery("#nodeliverydate").dialog({
modal: true, title: 'Delete msg', zIndex: 10000, autoOpen: true,
width: 'auto', resizable: false,
buttons: {
Yes: function () {
// $(obj).removeAttr('onclick');
// $(obj).parents('.Parent').remove();
$(this).dialog("close");
},
No: function () {
$(this).dialog("close");
}
},
close: function (event, ui) {
$(this).remove();
}
});
This work pretty well: Yes or No confirm box using jQuery

how to load mask while the grid is double clicked to wait for the detail window

forum member I am having one problem while using the loadMask property of the extjs 4.0.2a. Actually I am having one grid which on click open the window with detail information.
As my detail window takes more time to come on screen, so I just decided to make use of the loadMask property of Extjs. But don't know why the loading message is not shown when I double click the grid row and after some time the detail window is shown on the screen.
on grid double click I am executing the below code
projectEditTask: function(grid,cell,row,col,e) {
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Loading.."});
myMask.show();
var win = this.getProjectGanttwindow();
win.on('show', myMask.hide, myMask);
}
but don't know the loading is not displayed and after waiting for some moment my window is shown correctly.
I just want when I double click the grid Loading message should be displayed and after when the window is load completely Loading message should be dissapear and detail window should be viewed.
when I made the changes as per you said the loading message is displayed but my window is not opened yet. below is the code of window I am trying to open
my projectGanttwindow is
Ext.define('gantt.view.projectmgt.projectGanttwindow' ,{
extend: 'Ext.window.Window',
alias : 'widget.projectganttwindow',
requires: ['gantt.view.projectmgt.projectGanttpanel'],
editform:1,
id: 'projectganttwindow',
title: 'Project Management',
width: '100%',
height: '100%',
closeAction: 'destroy',
isWindow: true,
flex:1,
isModal: true,
constrain: true,
maximizable: true,
stateful: false,
projectId: null, // this will be set before showing window
listeners: {
hide: function() {
alert('hide');
//var store = Ext.data.StoreManager.lookup('taskStore').destroyStore();
//Ext.destroy(store);
//store.destroyStore();
console.log('Done destroying');
}
},
initComponent: function() {
var me = this;
me.layoutConfig = {
align: 'stretch'
};
me.items = [{
xtype: 'projectganttpanel',
allowBlank: false
}];
me.callParent(arguments);
me.on({
scope: me,
beforeshow: me.onBeforeShow
});
},
onBeforeShow: function() {
var projectId = this.projectId;
console.log('BEFOR SHOW ::'+projectId);
if(projectId != null) {
var store = Ext.data.StoreManager.lookup('taskStore');
store.load({
params: {'id': projectId}
});
}
}
});
Try this
function loadMask(el,flag,msg){
var Mask = new Ext.LoadMask(Ext.get(el), {msg:msg});
if(flag)
Mask.show();
else
Mask.hide();
}
When u click on grid call this function
//Enable mask message
loadMask(Ext.getBody(),'1','Please wait...');
After pop loaded call
//Disable mask Message
loadMask(Ext.getBody(),'','Please wait...');

Categories