I have a toggle button which works perfectly. The javascript and view is below:
jQuery:
$('.list-delist-link').delegate("a", "click", function (e) {
var obj = $(this);
if ($(this).hasClass('delist-property')) {
// Post to controller
e.preventDefault();
} else {
// Post to controller
e.preventDefault();
}
});
View:
<div class="list-delist-link">
#if(item.IsPropertyDisabled) {
#Html.ActionLink("List", "Enable", "Property", new { id = item.PropertyId }, new { #class="list-property other-button" })
} else {
#Html.ActionLink("Delist", "Disable", "Property", new { id = item.PropertyId }, new { #class="delist-property other-button" })
}
</div>
However, now I want to add a confirmation dialog box before the ajax action. However, everything breaks up when I am try to do that ... I am not sure why. I have the jQuery and css files on the layout page
The changes I made are listed below:
Changes to jQUery:
var obj;
$('.list-delist-link').delegate("a", "click", function (e) {
obj = $(this);
$("#dialog-confirm").dialog(open):
e.preventDefault();
});
Additional jQuery for modal confirmation:
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false, height:140, modal: true,
buttons: {
"Delete all items": function() {
if (obj.hasClass('delist-property')) {
// Post to controller
} else {
// Post to controller
}
$(this).dialog("close");
},
Cancel: function() {
$(this).dialog("close");
}
}
});
});
Additional div in View:
<div id="dialog-confirm" title="Are you sure?">
<p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>
Can you please tell me what is wrong?
You must add autoOpen: false, look this
$( "#dialog-confirm" ).dialog({
autoOpen : false,
resizable: false, height:140, modal: true,
buttons: {......
Related
I have jquery UI code for confirm popup.
if (confirm('Are you sure you want to delete the batchjob:' +
dataItem["Name"])) {
$.get("#Url.Content("~/BatchJob/DeleteBatchJob")", { batchJobDetailId: parseInt(dataItem["BatchJobDetailId"]) }, function (data) {
if (data) {
debugger
var batchJobValidateWnd = $("#ValidateBatchJobStatus").data("kendoWindow");
batchJobValidateWnd.content("BatchJob deleted successfully.");
batchJobValidateWnd.center().open();
$.post("#Url.Content("~/BatchJob/SearchBatchJobDetailByParams")", { jobName: $("#Name").val(), startDate: $("#ScheduleStartDate").val() }, function (data) {
});
}
else {
debugger
window.location = '#Url.Content("~/BatchJob/Create")/' + parseInt(dataItem["BatchJobDetailId"]);
}
});
}
And I need Kendo Confirmation popup?How i change jquery confirm popup to kendo confirm popup
You can create a Kendo Confirmation Dialog via a promise, and if confirmed execute the same way as you would with a jQuery dialog.
The dialog itself should be created using an External Template which is rendered on buttonDisplayDialog click event which will wait for a response before continuing.
<script id="confirmationTemplate" type="text/x-kendo-template">
<div class="popupMessage"></div>
</br>
<hr/>
<div class="dialog_buttons">
<input type="button" class="confirm_yes k-button" value="Yes" style="width: 70px" />
<input type="button" class="confirm_no k-button" value="No" style="width: 70px" />
</div>
</script>
Based on whether the user clicks "Yes" or "No" will return result as a true or false value which is where you should put the remainder of your code:
$("#buttonDisplayDialog").kendoButton({
click: function(e) {
$.when(showConfirmationWindow('Are you sure you want to delete the batchjob:')).then(function(confirmed){
if(confirmed){
alert('This is where you will put confirmation code');
}
else{
alert('User clicked no');
}
});
}
});
});
function showConfirmationWindow(message) {
return showWindow('#confirmationTemplate', message)
};
function showWindow(template, message) {
var dfd = new jQuery.Deferred();
var result = false;
$("<div id='popupWindow'></div>")
.appendTo("body")
.kendoWindow({
width: "200px",
modal: true,
title: "",
modal: true,
visible: false,
close: function (e) {
this.destroy();
dfd.resolve(result);
}
}).data('kendoWindow').content($(template).html()).center().open();
$('.popupMessage').html(message);
$('#popupWindow .confirm_yes').val('OK');
$('#popupWindow .confirm_no').val('Cancel');
$('#popupWindow .confirm_no').click(function () {
$('#popupWindow').data('kendoWindow').close();
});
$('#popupWindow .confirm_yes').click(function () {
result = true;
$('#popupWindow').data('kendoWindow').close();
});
return dfd.promise();
};
Here is a Dojo example to demonstrate the above code in action.
I want to use JQuery UI Dialog to confirm my delete action, i tried some tutorial on the internet but i still having the redirection to the delete page confirmation instead of showing the confirmation dialogue:
here my scripts implementation:
<link href="#Url.Content("~/Content/themes/base/minified/jquery-ui.min.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-2.1.0.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.10.4.min.js")" type="text/javascript"></script>
$("#dialog-confirm").dialog({
autoOpen: false,
resizable: false,
width: 500,
modal: true,
buttons: {
"Delete this item": function () {
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
$("[data-dialog-confirm]").click(function (e) {
e.preventDefault();
var theHREF = $(this).attr("href");
$("#dialog-confirm").dialog('option', 'buttons', {
"Yes":
function () {
$.get(theHREF, null, function () { refreshList() });
$(this).dialog("close");
}, "No":
function () { $(this).dialog("close"); }
});
$("#dialog-confirm").dialog("open");
});
my confirmation div :
<div id="dialog-confirm" title="Delete the item?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>This item will be deleted. Are you sure?</p>
</div>
and my action link that invoke the delete confirmation dialogue
#Html.Raw(#Html.ActionLink(".", "DeleteDemandeLocation", new { id = item.Publication_ID }, new { data_dialog_confirm = "true" }).ToHtmlString().Replace(".", "<img src=\"/Content/Images/Delete.png\" style=\"margin-left:0px; width:19px; height:19px\" />")) |
Finally my delete action/controller side :
//
// GET: /DemandeLocation/Delete/5
public ActionResult DeleteDemandeLocation(int id)
{
return View(db.PublicationSet.Find(id));
}
//
// POST: /DemandeLocation/Delete/5
[HttpPost]
public ActionResult DeleteDemandeLocation(int id, DemandeLocation demandeLocation)
{
try
{
var demandeLocationGetById = db.DemandeLocations.Find(id);
if (demandeLocationGetById != null)
db.DemandeLocations.Remove(demandeLocationGetById);
db.SaveChanges();
return RedirectToAction("ListDemandeLocation");
}
catch
{
return RedirectToAction("Error");
}
}
You have forgotten to return false from the click handler
$("[data-dialog-confirm]").click(function (e) {
e.preventDefault();
var theHREF = $(this).attr("href");
$("#dialog-confirm").dialog('option', 'buttons', {
"Yes":
function () {
$.get(theHREF, null, function () { refreshList() });
$(this).dialog("close");
}, "No":
function () { $(this).dialog("close"); }
});
$("#dialog-confirm").dialog("open");
return false;
});
Try this:
$(document).ready(function(){
$("#dialog-confirm").dialog({
autoOpen: false,
resizable: false,
width: 500,
modal: true,
buttons: {
"Delete this item": function () {
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
$("[data-dialog-confirm]").click(function (e) {
e.preventDefault();
var theHREF = $(this).attr("href");
$("#dialog-confirm").dialog('option', 'buttons', {
"Yes":
function () {
$.get(theHREF, null, function () { refreshList() });
$(this).dialog("close");
}, "No":
function () { $(this).dialog("close"); }
});
$("#dialog-confirm").dialog("open");
});
});
I'm trying to show a modal confirm dialog on delete link in a list action of a mvc 3 application.
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#dialog-confirm").dialog({
autoOpen: false,
modal: true,
resizable: false,
height: 180
});
});
$(document).delegate(".deleteLink", "click", function (e) {
e.preventDefault();
alert('test');
var $link = $(this);
var $dialog = $('#dialog-confirm')
.dialog({
autoOpen: false,
modal: true,
resizable: false,
height: 180,
buttons: {
'button text': function () {
alert("button"); //this is the button, do something with it :)
}
}
});
$dialog.dialog('open');
});
<div id="dialog-confirm" title="Delete the item?" >
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>This item will be deleted. Are you sure?</p>
and this is the link
#Html.ActionLink("حذف", "Delete", "Need", new { id = item.NeedID }, new { #class = "deleteLink", title = "حذف" })
when i remove the buttons option it works but when i add it , it doesn't show up anymore
where i'm doing wrong?
At a very quick glance - it would seem that buttons is an array. Try pasting in the sample from the documentation:
... {
autoOpen: false,
modal: true,
resizable: false,
height: 180,
buttons: [ { text: "Ok", click: function() { $( this ).dialog( "close" ); } } ]
}
when i click the New Trade button in the form it opens jquery ui dialog. but, i have link button in the gridview when i click the link button it should open jquery ui dialog, it opens jquery ui dialog before clicking the new trade button. but, after clicking the new trade button, if i click link button in the gridview it invoke "ViewTradeDialog(id)" function, the dialog doesn't open, it shows error message "$vwdia.html(data).dialog is not a function". my code follows:
#using (Html.BeginForm("NewTrade", "Trade", FormMethod.Post, new { id = "searchForm" }))
{
<div id="searchbtn">
<input id="btn_newtrade" type="submit" value="New Trade" />
</div>
}
jquery code
<script type="text/javascript">
$(function () {
var $loading = $('<img src="../../loading.gif" alt="loading">');
var $dialog = $('<div></div>').append($loading);
$('#searchForm').submit(function (e) {
var url = this.action;
$.ajax({
autoOpen: false,
url: url,
success: function (data) {
$dialog.html(data).dialog({
zIndex:1,
width: 1400,
height: 600,
resizable: false,
title: 'New Trade Details',
modal: true,
buttons: {
"close": function () {
$dialog.dialog('close');
},
"Add Trade": function () {
$dialog.dialog('close');
$.ajax({
type: 'POST',
url: url
});
}
}
});
}
});
return false;
});
});
function ViewTradeDialog(id) {
alert(id);
var $vwdia = $('<div></div>');
var url = '/Trade/ViewTrades?tradeid=' + id;
$.ajax({
url: url,
success: function (data) {
$vwdia.html(data).dialog({
width: 600,
height: 600,
resizable: false,
title: 'View Trade Details',
modal: false,
buttons: {
"close": function () {
$vwdia.dialog('close');
}
}
});
}
});
return false;
}
You are probably overwriting the dialog plugin each time you click new trade, since it is applied to the same element:
$dialog.html(data).dialog(...
It is possible that by replacing the html of the dialog and reapplying the plugin that it is breaking. Are you seeing any other errors in the JS console?
I am a completely new to mvc and trying to create a dummy application to learn mvc 3.
I have worked my way through the music store example and now I am trying to extend it slightly into a more real world application.
With the example whenever you want to any new item you are redirected to the Create view which is fine however I want instead of doing a full page post back I want to use the jquery.dialog to open a modal popup which will allow the user to insert a new item.
so far I have
<script type="text/javascript">
$(function () {
$('#dialog').dialog({
autoOpen: false,
width: 400,
resizable: false,
title: "hi there",
modal: true,
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
$('#my-button').click(function () {
$('#dialog').dialog('open');
});}); </script>
<div id="dialog" title="Create Album" style="overflow: hidden;">
#Html.Partial("_CreateAlbumPartial")</div>
Problems with this is the partial view is loaded everytime not through ajax and I dont really know where I should be placing the partial view. Shoukld it be in the shared location or in the folder with the other views?
How do I update the controller class to cater for the partial view?
Sorry if these are easy to do, im 3 days into mvc :)
Try something like this:
<script type="text/javascript">
$(function () {
$('#dialog').dialog({
autoOpen: false,
width: 400,
resizable: false,
title: 'hi there',
modal: true,
open: function(event, ui) {
//Load the CreateAlbumPartial action which will return
// the partial view _CreateAlbumPartial
$(this).load("#Url.Action("CreateAlbumPartial")");
},
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
$('#my-button').click(function () {
$('#dialog').dialog('open');
});
});
</script>
<div id="dialog" title="Create Album" style="overflow: hidden;">
We used the open function which is triggered when the dialog is opened and inside we send an AJAX request to a controller action which would return the partial:
public ActionResult CreateAlbumPartial()
{
return View("_CreateAlbumPartial");
}
To improve Darin answer, we can move the div loading code in the button click event.
In this way all position's alghorithms of the dialog works on the new text, and so the dialog is placed correctly.
<script type="text/javascript">
$(function () {
$('#dialog').dialog({
autoOpen: false,
width: 400,
resizable: false,
title: 'hi there',
modal: true,
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
$('#my-button').click(function () {
//Load the CreateAlbumPartial action which will return
// the partial view _CreateAlbumPartial
$('#dialog').load("#Url.Action("CreateAlbumPartial")",
function (response, status, xhr) {
$('#dialog').dialog('open');
});
});
});
</script>
<div id="dialog" title="Create Album" style="overflow: hidden;">