Hi all I have a div in my page which represents a popup window. I have a button inside the window. On click of the button, I need to call a javascript function.(I need to do this only in client side, not in server). If the validation is successful, the popup can close. If not, it should display an alert message and STAY THERE INSTEAD OF CLOSING. I need to close my popup only if validation is successful. Else, it should display an alert and just stay. How do I make it stay? The following are my codes.
Div structure:
<script type="text/javascript">
$(function () {
$("#dialog:ui-dialog").dialog("destroy");
$('#TimeslotGroup').dialog({
autoOpen: false,
draggable: false,
resizable: false,
bgiframe: false,
modal: true,
width: 700,
title: "Timeslot Group Entry",
open: function (type, data) {
$(this).parent().appendTo("form");
}
});
});
function showDialog(id) {
$('#' + id).dialog("open");
}
function closeDialog(id) {
$('#' + id).dialog("close");
$("#dialog:ui-dialog").dialog("destroy");
}
//getter
var modal = $(".selector").dialog("option", "modal");
//setter
$(".selector").dialog("option", "modal", true);
</script>
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function (evt, args) {
$('#TimeslotGroup').dialog({
autoOpen: false,
draggable: false,
resizable: false,
bgiframe: false,
modal: true,
width: 500,
title: "Timeslot Group Entry",
open: function (type, data) {
$(this).parent().appendTo("form");
}
});
});
</script><div id="TimeslotGroup" class="ui-widget-overlay" style="overflow-y: scroll;">
Use the beforeClose event
$( "#dialog" ).dialog({
beforeClose: function(e, ui){
if(!valid){
return false;
}
}
});
Related
I want to call the default action of dialogue box button, so please tell me how to pass the variable in side the dialogue box initialization. Here is my try for that :
Calling the dialogue box with default function of 'Yes' button
$( "#confirmComplete" ).dialog( "option", "buttons:Yes");
$( "#confirmComplete" ).dialog({
autoOpen: false,
resizable: false,
modal: true,
async:false,
position: 'top',
buttons: {
"Yes": function() {
//SOME FUNCTIOANLITY
}
}
})
Put the code in a named function, call the function:
function doYes() {
// some functionality
}
$("#confirmComplete").dialog({
autoOpen: false,
resizable: false,
modal: true,
async: false,
position: "top",
buttons: {
"Yes": doYes
},
});
doYes(); // Call the default button action
You could do:
buttons: {
"Yes": function() {
$(this).dialog("close");
return true;
}
}
You could also have a No button that closes dialog and return false;
Based on the true/false returned, you can take further actions.
When I add the card to the in box. Then it is possible to double click on the card, and dialog pop up. In the dialog I have Tow buttons (Save) and (Cancel). When I press Cancel buttons a confirm window pop-ups.
I want when I press the close in the right corner, that confirm window pop-ups. I tried by this part of code to fix it, but not succeeded:
close: function () {
$('#dialog-confirm').dialog({
resizable: false,
height: 300,
modal: true,
draggable: false,
buttons: {
YES: function () {
$(this).dialog("close");
$('#modalDialog').dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
}
The issue is when I'm doing it in that way, the dialog window first close, then the confirm window pop-up. I don't want that, but I want the opposite.
JQuery:
$(function () {
// Click function to add a card
var $div = $('<div />').addClass('sortable-div');
$('<label>Title</label><br/>').appendTo($div);
$('<input/>', { "type": "text","class":"ctb"}).appendTo($div);
$('<input/>', { "type": "text","class":"date"}).appendTo($div);
var cnt =0,$currentTarget;
$('#AddCardBtn').click(function () {
var $newDiv = $div.clone(true);
cnt++;
$newDiv.prop("id","div"+cnt);
$('#userAddedCard').append($newDiv);
// alert($('#userAddedCard').find("div.sortable-div").length);
});
// Double click to open Modal Dialog Window
$('#userAddedCard').dblclick(function (e) {
$currentTarget = $(e.target);
$('#modalDialog').dialog({
modal: true,
height: 600,
width: 500,
position: 'center',
buttons: {
Save: function () { //submit
var val = $("#customTextBox").val();
$currentTarget.find(".ctb").val(val);
$currentTarget.find(".date").val($("#datepicker").val());
$('#modalDialog').dialog("close");
},
Cancel: function () { //cancel
$('#dialog-confirm').dialog({
resizable: false,
height: 300,
modal: true,
draggable: false,
buttons: {
YES: function () {
$(this).dialog("close");
$('#modalDialog').dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
}
},
close: function () {
$('#dialog-confirm').dialog({
resizable: false,
height: 300,
modal: true,
draggable: false,
buttons: {
YES: function () {
$(this).dialog("close");
$('#modalDialog').dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
}
});
});
$("#datepicker").datepicker({showWeek:true, firstDay:1});
});
Maybe I'm wrong, in that way I'm doing. Any idea how to fix it?
Live Demo
You may try use the beforeClose for the confirm window, and if confirmed then close the dialog.
I have a dialog like this
<div id="dialog">
<iframe id="myIframe" src=""></iframe>
</div>
<button id="opener1">Open Dialog</button>
<button id="opener2">Open Dialog</button>
My script is as follows
$(function () {
$("#dialog").dialog({
autoOpen: false,
show: "fade",
hide: "fade",
modal: true,
height: 'auto',
width: 'auto',
resizable: true,
title: 'Vessels'
});
$("#opener1").click(function () {
$('#myIframe').src = 'http://www.w3schools.com';
$("#dialog").dialog("open");
return false;
});
$("#opener2").click(function () {
$('#myIframe').src = 'http://www.google.com';
$("#dialog").dialog("open");
return false;
});
});
I want to set the url of the iframe dynamically before the dialog is displayed.
I tried the above code, but not working
You can Try this
$(function () {
$("#dialog").dialog({
autoOpen: false,
show: "fade",
hide: "fade",
modal: true,
height: 'auto',
width: 'auto',
resizable: true,
title: 'Vessels',
close: function( event, ui ) {
$('#myIframe').attr('src', '');
}
});
$("#opener1").click(function () {
$('#myIframe').attr('src', 'http://www.w3schools.com');
$("#dialog").dialog("open");
return false;
});
$("#opener2").click(function () {
$('#myIframe').attr('src', 'http://www.example.com/');
$("#dialog").dialog("open");
return false;
});
});
While closing the dialog box just simply set the iframe src as empty
Demo : http://jsfiddle.net/94KUB/3/
Try this,
$('#myIframe')[0].src = 'http://www.w3schools.com';
or use attr() like,
$('#myIframe').attr('src','http://www.google.com');
Demo
You can't set the source directly. You have to change the iframe's src attribute like this:
$('#myIframe').attr('src','http://www.w3schools.com');
I am using ASP.NET MVC 4, jQuery, and jQuery UI.
I have a dialog on my view. When I click a button the dialog pops up, takes the values on the dialog and send its through to a service. The service does what it needs to do and will either send back a blank message if it is successful or the actual error message. After this I need to check the error on the client side, close the current dialog and open a success dialog or the error dialog. I'm not sure how to close the current dialog and to display another dialog.
My button:
<button id="TestButton" type="button">Display pop up</button>
My dialogs:
<div id="confirmationDialog"></div>
<div id="successDialog"></div>
<div id="errorDialog">error dialog</div>
my jQuery code:
$('#TestButton').click(function () {
$('#confirmationDialog').dialog('open');
});
$('#errorDialog').dialog({
autoOpen: false,
modal: true,
resizable: false,
width: 500,
title: 'Add Rule Detail Error',
buttons: {
'Ok': function () {
$(this).dialog('close');
}
}
});
$('#confirmationDialog').dialog({
autoOpen: false,
modal: true,
resizable: false,
width: 330,
title: 'Add Rule Detail Confirmation',
open: function (event, ui) {
$(this).load('#Url.Action("AddRuleConfirmation")' +
'?systemCode=' + $('#SystemCode').val());
},
buttons: {
'Yes': function () {
var url = '#Url.Action("AddRuleConfirmationSubmit")';
var data = {
systemCode: $('#SystemCode').val()
};
$.getJSON(url, data, function (message) {
alert(message);
if (message == '') {
$(this).dialog('close');
}
else {
$(this).dialog('close');
$('#errorDialog').dialog('open');
}
});
},
'No': function () {
$(this).dialog('close');
}
}
});
My action methods:
public ActionResult AddRuleConfirmation(string systemCode)
{
DetailConfirmationViewModel viewModel = new DetailConfirmationViewModel()
{
SystemCode = systemCode
};
return PartialView("_AddRuleConfirmation", viewModel);
}
public ActionResult AddRuleConfirmationSubmit(string systemCode)
{
CreateRuleViewModel viewModel = new CreateRuleViewModel()
{
SystemCode = systemCode
};
ResCodeRuleAdd_Type result = ruleService.AddRule(viewModel);
string message = string.Empty;
if (result != ResCodeRuleAdd_Type.R00)
{
// Get the error message from resource file
message = ...
}
return Json(message, JsonRequestBehavior.AllowGet);
}
How do I close the current pop up after the get JSON call and open another?
You have to add the dialog to the page first: Put this prior to your current:
$('#errorDialog').dialog({
autoOpen: false,
modal: true,
resizable: false,
width: 330,
title: 'My Error Dialog'
});
//current code follows:
$('#confirmationDialog').dialog({
Then what you have should work.
EDIT: I thought about this a bit, you probably need to fix the scope of the $(this) inside the success handler.
change to do:
var myDialog = $('#confirmationDialog').dialog({
and then use:
myDialog.dialog('close');
inside that handler to close the first dialog.
In the getJSON callback close the window
$.getJSON( "test/demo", function( data) {
if(data==='success'){
$( ".selector" ).dialog( "close" );
$( ".selector" ).dialog( "open" );
}
});
To close the jquery UI dialog use this
$( ".selector" ).dialog( "close" );
Top Open a new dialog
$( ".selector" ).dialog( "open" );
for more info check the api of jquery UI http://api.jqueryui.com/dialog/#method-close
var dialogAviso;
url = "search.php";
$.ajax( {
"type": "POST",
"url": url,
"data": data,
"global": false,
"async": true,
"success": function(html){
msg_title ="Search";
msg_width = "600px";
showDialog(html,msg_title,msg_width);
}
} );
function showDialog(texto, titulo, width,height){
.......................
// IMPORTANT: send info to the aux variable, so you can access it from the dialog.
dialogAviso = $('#divaviso').dialog({
autoOpen: true,
width: width,
height:height,
modal:true,
resizable: false,
title: titulo,
dialogClass: 'dialog',
closeOnEscape:true,
beforeClose: function(){
},
close: function(event, ui) {
$(this).dialog( "destroy" );
},
show: "slide",
zindex: 100,
stack:true,
buttons: {}
});
$('#divaviso').html(texto);
}
search.php:
<table>
<tr>
<td><a style=\"text-decoration:underline;cursor:pointer;\" onclick="returnInfo(8)">Hello World</td>';
</tr>
</table>
functin returnInfo (id){
// Do something with the selected item
// close dialog
dialogAviso.dialog("close");
}
This is my document.ready code:
$(document).ready(function() {
$("#dialogbox").dialog({
open: function(event, ui) {$("a.ui-dialog-titlebar-close").remove();},
bgiframe: true,autoOpen: false,closeOnEscape: false,draggable: false,
show: "drop",hide: "drop",zIndex: 10000,modal: true,
buttons: {'Ok': function() {$(this).dialog("close");processEmp();}}
});
});
I have the following JavaScript code that takes one parameter:
function test(pEmp)
{
var a = pEmp.value);
$('#dialogbox').dialog('open');
}
My question is, based on the value that I pass into my test function, which in turn calls my jQuery UI dialog ('#dialogbox'), when the user presses the 'Ok' button in the dialog, I need to somehow (which is what I am not sure how to do), pass the the variable "a" which holds my pEmp.value, into my other function processEmp(a?), which I have attached to my 'Ok' button.
I basically need this value when the user acknowledges the dialog box.
You may pass custom option to dialog before opening it:
$(function () {
$("#dialog").dialog({
open: function (event, ui) { $("a.ui-dialog-titlebar-close").remove(); },
bgiframe: true,
autoOpen: false,
closeOnEscape: false,
draggable: false,
show: "drop",
hide: "drop",
zIndex: 10000,
modal: true,
buttons: { 'Ok': function () {
$(this).dialog("close");
processEmp($(this).data("pEmpValue"));
}
}
});
});
function processEmp(a) {
alert(a);
}
function test(pEmp) {
$("#dialog").data("pEmpValue", pEmp.value).dialog("open");
}
Or even the simplest solution is to declare a variable in scope of the window:
var a = null;
$(function () {
$("#dialog").dialog({
open: function (event, ui) { $("a.ui-dialog-titlebar-close").remove(); },
bgiframe: true,
autoOpen: false,
closeOnEscape: false,
draggable: false,
show: "drop",
hide: "drop",
zIndex: 10000,
modal: true,
buttons: { 'Ok': function () {
$(this).dialog("close");
processEmp(a);
}
}
});
});
function processEmp(a) {
alert(a);
}
function test(pEmp) {
a = pEmp.value;
$("#dialog").dialog("open");
}
You can achieve this by adding an event handler for 'close'. Something like this:
$("#dialogbox").bind("dialogclose", function(event, ui) { processEmp(a); });