Following answers like this one, I wanted to hook the enter key press on a JQuery dialog so I can trigger the same event as when you click "OK", however the event is never called, and consequently I'm never getting the alert "it worked":
$("#logout_popup").dialog(
{
title: "Log Out",
width: 'auto',
height: 'auto',
modal: true,
draggable: false,
resizable: false,
open: function(e) {
$('.ui-widget-overlay').hide().fadeIn(600);
//This is the event that's never called
$(e.target).keydown(function(ev) {
alert("Worked!");
});
},
show: {
effect: 'fade',
duration: 600
},
hide: {
effect: 'fade',
duration: 600
},
buttons: [
{
text: "Yes",
click: logout
},
{
text: "No",
click: function() {
$('#logout_popup').dialog('close');
}
}
],
close: clear_forms
});
Most of the dialog settings are irrelevant, but I included them all just in case. How come the event is never being called?
I should add that if I use the event $("#logout_popup").keydown, it also doesn't work, but if I use $(document).keydown, it does work (although I'd rather not have to filter every single event in the document.
This would be the way to trigger the alert at least and catch the event of keydown (on some Element...)
open: function() {
$('.ui-widget-overlay').hide().fadeIn(600);
$('theElementYouWant').keydown(function(e) {
alert("Worked!");
});
},
If you want to pass the keydown event from down up, you should try
$("#logout_popup").keydown(function(e) {
$(this).dialog({
title: "Log Out",
width: 'auto',
height: 'auto',
modal: true,
draggable: false,
resizable: false,
open: function() {
$('.ui-widget-overlay').hide().fadeIn(600);
if ( e.which == 13 )
alert('Hurrah!');
},
You can pass the event with call(this,event), but I don't know wherefrom and when you want that.
From here: http://forum.jquery.com/topic/how-to-pass-event-target-to-a-function (#KevinB).
Call: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call.
Related
I have made a JQuery Dialog, but for some reason the code which executes, when the 'ok' button is clicked is not functioning properly.
I would like there to be a “Confirm Dialog”, after a person clicks on the edit button which would fundamentally warn the user that they are going to edit something that perhaps they shouldn't be editing.
Furthermore, if the user clicks the “Ok” button, I want the edit input to be editable, whilst hiding the edit button.
Nevertheless, everything else is working the way it should. For example when users click on the close or cancel button, the dialog is closed correctly, and when users clicks on the ok button, the alert works, and the dialog is closed properly. So the only thing that isn't working correctly is the code between the alert and the dialog close.
function ShowDialogBox(title, content) {
$("#lblMessage").html(content);
$("#dialog").dialog({
resizable: false,
title: title,
modal: true,
width: '400px',
height: 'auto',
bgiframe: false,
hide: { effect: 'fade', duration: 400 },
buttons: [
{
text: 'OK',
"class": 'showcss',
click: function () {
alert('hello');
$("#edit_input").attr("readonly", false);
$("#edit_input").focus();
$('#edit_button').hide();
$("#dialog").dialog('close');
}
},
{
text: 'Cancel',
"class": 'showcss',
click: function () {
$("#dialog").dialog('close');
}
}
]
});
}
The problem is that the property name readOnly is case sentitive.
Code using prop instead of attr:
function ShowDialogBox(title, content) {
$("#lblMessage").html(content);
$("#dialog").dialog({
resizable: false,
title: title,
modal: true,
width: '400px',
height: 'auto',
bgiframe: false,
hide: {
effect: 'fade',
duration: 400
},
buttons: [{
text: 'OK',
"class": 'showcss',
click: function () {
alert('hello');
$("#edit_input").prop("readOnly", false);
$("#edit_input").focus();
$('#edit_button').hide();
$("#dialog").dialog('close');
}
}, {
text: 'Cancel',
"class": 'showcss',
click: function () {
$("#dialog").dialog('close');
}
}]
});
}
The problem was that I was making the actions before closing the dialog.
function ShowDialogBox(title, content) {
$("#lblMessage").html(content);
$("#dialog").dialog({
resizable: false,
title: title,
modal: true,
width: '400px',
height: 'auto',
bgiframe: false,
hide: { effect: 'fade', duration: 400 },
buttons: [
{
text: 'OK',
"class": 'showcss',
click: function () {
$("#dialog").dialog('close');
$("#edit_input").attr("readonly", false);
$("#edit_input").focus();
$('#edit_button').hide();
}
},
{
text: 'Cancel',
"class": 'showcss',
click: function () {
$("#dialog").dialog('close');
}
}
]
});
}
I've got a jQuery Dialog, and would like to disable clicking on anything other than the dialog itself (i.e. no clicking in my ASPX page other than on the dialog). I have searched extensively and not found anything - can this be achieved?
This is my dialog code:
$('#controlSettingsForm').dialog({
autoOpen: false,
width: 'auto',
maxHeight: 300,
buttons: {
"Save": function () {
},
"Cancel": function () {
$(this).dialog("close");
}
},
});
$('#controlSettingsForm').dialog("open");
Use modal true for overlay:
('#controlSettingsForm').dialog({
autoOpen: false,
width: 'auto',
maxHeight: 300,
modal:true,
buttons: {
"Save": function () {
},
"Cancel": function () {
$(this).dialog("close");
}
},
});
$('#controlSettingsForm').dialog("open");
Simply add the parameter modal: true:
$('#controlSettingsForm').dialog({
autoOpen: false,
width: 'auto',
modal: true, // <---- Add this parameter
maxHeight: 300,
buttons: {
"Save": function () {
},
"Cancel": function () {
$(this).dialog("close");
}
},
});
$('#controlSettingsForm').dialog("open");
This will make the dialog appear as "modal". Which means the background will get grayed out and you can't click on it until the dialog is closed.
For more information and examples on the modal parameter check:
http://jqueryui.com/dialog/#modal-confirmation
http://jqueryui.com/dialog/#modal
$('#controlSettingsForm').dialog({
autoOpen: false,
width: 'auto',
maxHeight: 300,
modal: true,
buttons: {
"Save": function () {
},
"Cancel": function () {
$(this).dialog("close");
}
},
});
$('#controlSettingsForm').dialog("open");
I'm using Qtip2 to create modal window with the code below:
$('a#my-link-id').qtip({
content: {
text: $('#my-modal-content'),
title: "My Modal Window Title",
button: true
},
position: {
my: 'center',
at: 'center',
target: $(window)
},
show: {
event: 'click',
solo: true,
modal: {
on: true
}
},
hide: {
event: false
},
style: 'qtip-modal qtip-shadow'
});
This modal will be activated when I click on the link with id my-link-id.
However, I want to activate this modal using the OnClick feature in a link. So say I have the following link:
<a id="my-link-id" href="#" onClick="javascript:getModalWindow('my-link-id');return false;">Fire Modal</a>
And I have the following function:
window.getModalWindow = function(link_id)
{
var elem_link = $('a#'+link_id);
elem_link.qtip({
content: {
text: 'my content',
title: 'My Modal Window Title',
button: true
},
position: {
my: 'center',
at: 'center',
target: $(window)
},
show: {
event: 'click',
solo: true,
modal: {
on: true
}
},
hide: {
event: false
},
style: 'qtip-modal qtip-shadow'
}).on('click', function(e){
e.preventDefault();
return false;
});
elem_link.trigger('click');
return false;
}
The above code does not work as I expect it to. What happens is the click gets triggered continously (not once) until my browser (Chrome) halts it with an 'Aw, Snap!' error. And also the modal does not get activated.
What do I need to do to get this to work?!
I solved this doing what you have below:
window._getModalWindow = function(link_id)
{
var elem_link = $('a#'+link_id);
var modal_init_bool = elem_link.data('modal_init');
switch(true)
{
case (modal_init_bool !== true):
elem_link.qtip({
content: {
text: 'Modal Window Content',
title: 'Modal Window Title',
button: true
},
position: {
my: 'center',
at: 'center',
target: $(window)
},
show: {
event: 'modal',
solo: true,
modal: {
on: true
}
},
hide: {
event: false
},
style: 'qtip-modal qtip-shadow'
});
elem_link.data('modal_init', true);
break;
}
elem_link.trigger('modal');
return false;
}
I tried using 'click' instead of 'modal' but it just kept firing multiple times when I did that and I don't really understand why.
I am using the code below and decided I want a close button instead of the timeout.
How can I replace the timeout with a close button with the code below?
<script type="text/javascript">
$(document).ready(function() {
$("#info_box").dialog({
autoOpen: false,
modal: true,
width: 400,
zIndex: 9999999,
resizable: false,
open: function() {
// close the dialog 10 secs after it's opened
setTimeout(function() {
$(this).dialog("close");
}, 10000);
}
});
$(".notavailable").bind("click", function() {
$("#info_box").dialog("open");
});
});
</script>
You just need to add a buttons property to the Object the dialog is created with, something like:
$("#info_box").dialog({
autoOpen: false,
modal: true,
width: 400,
zIndex: 9999999,
resizable: false,
buttons: [
{
text: "Close",
click: function () {
$(this).dialog("close");
}
}
]
});
I am using the following code to open a modal box when a button is clicked. Works fine in all browsers but IE7 where I get an error.
This is the code. Have I done something wrong???
<script type="text/javascript">
$(document).ready(function(){
var dialogOpts = {
modal: true,
bgiframe: true,
autoOpen: false,
height: 550,
width: 550,
draggable: true,
resizeable: true,
title: "Invite a friend",
};
$("#invitebox").dialog(dialogOpts); //end dialog
$('#invitebutton').click(
function() {
$("#invitebox").load("widgets/invite_a_friend/index.php", [], function(){
$("#invitebox").dialog("open");
}
);
return false;
}
);
});
</script>
Remove the , at the end after title:
var dialogOpts = {
modal: true,
bgiframe: true,
autoOpen: false,
height: 550,
width: 550,
draggable: true,
resizeable: true,
title: "Invite a friend", // <-- REMOVE THIS COMMA
};
Also the .load() function takes an object and not array as second argument:
$("#invitebox").load("widgets/invite_a_friend/index.php", { }, function() {
$("#invitebox").dialog("open");
});
Here is the problem, the comma at the end:
title: "Invite a friend",
};
JSLint can tell you whether your code is correct.