Textbox Losing value under Jquery Modal Dialog Box - javascript

I am using the script below for Modal Dialog box.I have a textbox and a button under dialog box div but when i click on button textbox value remains null why ? Can anyone help please
//Everything is working fine but textboxes are losing their values on button click
$("#dialog").dialog({ modal: true });
$("#dialog").dialog({ resizable: false });
$("#dialog").dialog({
buttons: {
//'Confirm': function () {
// $("[id*=btn_Confirm_View]").click();
//},
'Cancel': function () {
$(this).dialog('close');
}
}
});
$("#dialog").dialog({ draggable: false });
$("#dialog").dialog({ closeOnEscape: false });
$("#dialog").dialog({
width: 'auto',
autoOpen: false,
show: {
effect: "blind",
duration: 1500
},
hide: {
effect: "scale",
duration: 300
}
});
$("#dialog").dialog({
close: function (event, ui) {
}
});
//Everything is working fine but textboxes are losing their values on button

I got the solution ... :)
Here is my Modified Code...
// $("#dialog").dialog({ modal: true });
$("#dialog").dialog({ resizable: false });
$("#dialog").dialog({
buttons: {
//'Confirm': function () {
// $("[id*=btn_Confirm_View]").click();
//},
'Cancel': function () {
$(this).dialog('close');
}
}
});
$("#dialog").dialog({ draggable: false });
$("#dialog").dialog({ closeOnEscape: false });
$("#dialog").dialog({
width: 'auto',
autoOpen: false,
show: {
effect: "blind",
duration: 1500
},
hide: {
effect: "scale",
duration: 300
}
});
//I Added these two lines and now they are working fine
$("#dialog").parent().appendTo(jQuery("form:first"));
$("#dialog").dialog({
close: function (event, ui) {
}
});

Related

how to put a jquery confirmation dialog box for javascript method

i have this javascript method and i want to put jquery confirmation dialog box
function editcart(id,code,stock_qw,stock_rtq,pack){
if((stock_qw%pack) != 0){
if(!x) return false;
}
}
i have this jquery dialogbox and i am bit confuse how to put it together
$('<div></div>').appendTo('body')
.html('<div><h6>Yes or No?</h6></div>')
.dialog({
modal: true,
title: 'message',
zIndex: 10000,
autoOpen: true,
width: 'auto',
resizable: false,
buttons: {
Yes: function () {
doFunctionForYes();
$(this).dialog("close");
},
No: function () {
doFunctionForNo();
$(this).dialog("close");
}
},
close: function (event, ui) {
$(this).remove();
}
});
//$('#msg').hide();
function doFunctionForYes() {
alert("Yes");
$('#msg').show();
}
function doFunctionForNo() {
// alert("No");
$('#msg').show();
}
}
anyone has better idea how this work?
What about pure JS confirmation dialog?
confirm('Yes or no? ') ? doFunctionForYes() : doFunctionFotNo();
you may try this:
$('<div></div>').appendTo('body')
.html('<div><h6>Yes or No?</h6></div>')
.dialog({
modal: true, title: 'message', zIndex: 10000, autoOpen: true,
width: 'auto', resizable: false,
buttons: {
Yes: function () {
doFunctionForYes();
$(this).dialog("close");
},
No: function () {
doFunctionForNo();
$(this).dialog("close");
}
},
close: function (event, ui) {
$(this).remove();
}
});
Example:
http://jsfiddle.net/3d7QC/1032/

Called javaScript function from jquery dialog button

I'm trying to call javascript function from jquery dialog buton, but it is not working
my code :
============================
$('#dialogAddActe').dialog({
autoOpen: false,
modal: true,
width: 800,
height:400,
show: "slide",
hide: "slide",
buttons: {
"Suivant": function() {
$(this).dialog("close");
if ($(this).checkNombre())
{
document.forms[0].dispatch.value = "ajouterActe";
document.forms[0].submit();
}
},
"Annuler": function() {
$(this).dialog("close");
document.forms[0].patientId.value="";
}
}
});
============================
$(this).checkNombre() is not working.
BR,
Med Baba
Remove $(this), just use if (checkNombre()).

How to disable clicking on anything other than dialog

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");

jQuery delay or JavaScript SetTimeOut Simple solution

I need to set an alert nice message box via Jquery-UI
and then after the effects of the animation is done , and only then
to navigate to a different URL
This is the code I am using though no matter what I did try
the navigation occurs... only the UI effects does not get the chance to perform.
$("#dialog").dialog({
show: { effect: "puff", duration: 2000 },
hide: { effect: "explode", duration: 500 },
height: 340,
width: 400,
modal: true,
buttons: {
"אישור": function () {
$(this).dialog("close").delay(2000).delay(800, function () {
window.location = "http://rcl.co.il";
});
}
}
});
Try bind redirect function on dialogclose event.
http://jsfiddle.net/tarabyte/tDFq3/
$("#dialog").dialog({
show: { effect: "puff", duration: 2000 },
hide: { effect: "explode", duration: 500 },
height: 340,
width: 400,
modal: true,
buttons: {
"אישור": function () {
$(this).on('dialogclose', function () {
window.location = "http://rcl.co.il";
}).dialog('close');
}
}
});

JQuery Dialog - Replace Timeout with close button

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");
}
}
]
});

Categories

Resources