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");
}
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.
I have ajax.actionlink
#Ajax.ActionLink("Click here",//link text
"Insert", // action name
"Projects", // controller
new { poz = item.itemID.ToString() }, // route values
new AjaxOptions() { HttpMethod = "GET", UpdateTargetID = "PrjDiv" OnSuccess = "Initiate_Dialog" }, // ajax options
new { #class = "openDialog", #id = item.idemID.ToString() } //htmlAttributes
)
and jQuery UI dialog
function Initiate_Dialog() {
var itemID= $(this).attr("id").replace("item_", "");
var prjID= $("#m_project").val();
var url = encodeURI("/Projects/Insert?poz=" + itemID+ "&proj=" + prjID);
$("#dialog-edit").dialog({
title: 'Insert',
autoOpen: false,
resizable: false,
height: 'auto',
width: 650,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
open: function (event, ui) {
$(this).load(url);
},
close: function (event, ui) {
$(this).dialog('close');
},
buttons: {
Cancel: function () {
$(this).dialog("close");
}
}
});
$("#dialog-edit").dialog('open');
return false;
}
When i click on generated link, my controller action is executed 2 times. Once with parameters sent from ajax.actionlink, and second time, with parameters sent from javascript.
I know that i have 2 calls and that's why is action executed twice. My question is, is there a way around this to execute only call from javascript, and not from actionlink?
The Dialog Opens fine,but there is no Table tag,i also cant see any error, so that i can sort out whats wrong.
function CreateDialog(data){
$( "#dialog-form" ).dialog({
autoOpen: true,
height: 300,
width: 350,
modal: true,
open: function() {
jQuery('dialog-form').append('<table><tr>');
jQuery.each(data, function(key, value) {
jQuery('dialog-form').append("<td>"+value+"</td>");
});
jQuery('dialog-form').append('</tr></table>')
},
Cancel: function() {
$( this ).dialog( "close" );
}
});
}
Try to change:
jQuery('dialog-form')
to:
jQuery('#dialog-form')
You're missing # to target id here.
Let's say I have function1 which needs the results of function2 before it can continue.
But function2 gets what it needs by triggering a Jquery dialog window to open, and prompting the user to select one of two buttons.
The selection of the two buttons then causes function2 to do its work and pass that along to function1.
How do I get the value that the buttons give when selected in the dialog window back to function2.
See code below.
$('#choice-dialog').dialog({
autoOpen: false,
resizable: false,
height:140,
modal: true,
buttons: {
"Proceed": function() {
$( this ).dialog( "close" );
true //the value to be sent to function2;
},
Cancel: function() {
$( this ).dialog( "close" );
false //the value to be sent to function2;
}
}
});
function function1(){
if(function2(variable)===true){
return true
}
}
var function2 = function(variable){
if(idIsUsed){
$("#choice-dialog").dialog("open");
return **choice made by user via dialog**;
}else{
return true;
}
}
You cannot do it this way. It is better to restructure your code such that the dialog callbacks call another function with true or false:
$('#choice-dialog').dialog({
autoOpen: false,
resizable: false,
height:140,
modal: true,
buttons: {
"Proceed": function() {
$( this ).dialog( "close" );
otherFunction(true);
},
Cancel: function() {
$( this ).dialog( "close" );
otherFunction(false);
}
}
});
var function2 = function(variable){
if(idIsUsed){
$j("#choice-dialog").dialog("open");
} else {
otherFunction(true);
}
}
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;
}
}
});