EDIT:
I want to replace the following with a jquery UI dialog:
<asp:LinkButton ID="foo" runat="server" OnClick="someMethodThatPostsBack" OnClientClick="return confirmAction()" Text="Delete" />
<script type="text/javascript">
function confirmAction() {
return confirm("Are you sure you want to delete this?");
}
</script>
I don't want the action to post back unless the OK is clicked on the dialog. It works perfectly fine in regular javascript with confirm. I would like to replace it with jQuery UI dialog so it looks a little prettier. Is it possible?
I created a dialog that I open when I click a link or a button:
<a id="aboutLink" href="/Home/About">About</a>
<script type="text/javascript">
$("#aboutLInk").click(function() {
$("myDialog").dialog({
modal: true,
buttons: {
"OK": function () {
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
});
</script>
When I click the link it takes me to the About page. I want to be able to show the dialog and only go to the About page depending on if they click the OK button on the dialog. If they hit cancel, it should not do anything. How can I accomplish this?
Also, if I create the dialog every time I click the button do I need to destroy the dialog as well somehow? How do I do that?
You can't really do this - the click handler returns immediately so you have to prevent the link from being followed yourself, if (and only if) Javascript is enabled.
(Return false from your cancel handler to prevent the link from being followed)
To actually change page address when clicking OK, set window.location in the callback.
Yes, you do need to destroy the dialog when it's finished with - replacing close with destroy in your event handlers should achieve that.
I put a working demo at http://jsfiddle.net/alnitak/WWVEg/
$("#aboutLink").click(function() {
var that = this; // save a reference to the clicked link
$("#myDialog").dialog({
modal: true,
buttons: {
"OK": function() {
$(this).dialog("destroy");
window.location = that.href;
},
Cancel: function() {
$(this).dialog("destroy");
}
}
});
return false;
});
FWIW, it's probably not strictly necessary to close or destroy the dialog in the OK callback seeing as the next line is going to cause a page reload anyway - I expect the new page load would be faster without it.
Oh boy, this is old... but I ran in to the same problem as you and decided to do it like this:
jQuery(function () {
var accepted = false;
jQuery('#dialog').dialog({
autoOpen: false,
bgiframe: true,
width: 450,
modal: true,
open: function () {
accepted = false;
},
buttons: {
"Accept": function () {
accepted = true;
jQuery(this).dialog("close");
},
Cancel: function () {
jQuery(this).dialog("close");
}
},
close: function () {
if (accepted == false) {
jQuery("#chkBox").prop("checked", false);
}
}
});
});
Basically I just declared a boolean variable that changes when "OK" or "Accept" is clicked. The close function checks that boolean value, and if it's set to false, it unchecks my checkbox. If it's set to true, nothing happens.
Yes you can do same thing using jQuery UI dialog.
Your ASPX button code:
<asp:TemplateField HeaderStyle-Width="100px">
<ItemTemplate>
<asp:Button ID="Button1" runat="server" OnClientClick="javascript:return deleteItem(this.name, this.alt);"
CommandArgument='<%# Eval("id") %>' CommandName='<%# Eval("status") %>' Text='<%# Eval("status").ToString().Trim().Equals("y") ? "Deactive" : "Active" %>' />
</ItemTemplate>
</asp:TemplateField>
Javascript code:
<script type="text/javascript">
$(function () {
InitializeDeleteConfirmation();
});
function InitializeDeleteConfirmation() {
$('#dialog-confirm').dialog({
autoOpen: false,
resizable: false,
height: 140,
modal: true,
buttons: {
"Delete": function () {
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
}
function confirmDelete() {
return confirm("Are you sure you want to delete this?");
}
function deleteItem(uniqueID) {
$("#dialog-confirm").html("Are you sure you want to change the status ?");
$("#dialog-confirm").dialog({
title: 'Confirm',
height: 150,
width: 400,
buttons: {
"Yes": function () { __doPostBack(uniqueID, '');
$(this).dialog("close"); },
"No": function () { $(this).dialog("close"); }
}
});
$('#dialog-confirm').dialog('open');
return false;
}
</script>
I hope this will help you.
After seeing the comments, below is what works smoothly
Doing it in jQuery UI
You can use plugin jquery.confirm and then add $("#btndelete").trigger("click.confirmed"); in the confirmation events
Usage:
Requirements
jQuery > 1.8
jquery.confirm plugin
Bootstrap
$("#btndelete").confirm({
title:"Delete confirmation",
text:"Are you sure you want to delete ???",
confirm: function(button) {
// Do something..
$("#btndelete").trigger("click.confirmed");// it is to trigger
//the same elements click event which we would trigger without a
//confirmation dialog
//alert("You just confirmed.");
},
cancel: function(button) {
// Do something
//alert("You aborted the operation.");
},
confirmButton: "Yes I am sure",
cancelButton: "No Do not Delete" });
Of course, the solution for those who face the issue now onwards
Related
i m using asp.net forms this page i m working on has a masterpage it works great when autoopen is false but when autofalse is true i dont know why it doesnt work. code is ..
$(document).ready(function () {
$("#dialog").dialog({
autoOpen: false,
appendTo: "form",
show: {
effect: "fade",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
},
buttons: {
Ok: function () {
$("[id*=btnmsgOk]").click();
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
});
and i call this function by this..
$('<%=btnSave.ClientID %>').click(function () {
$("#dialog").dialog("open");
});
but it dosent work.
I have tried following, it is working fine. Please note that , you have missed to put # in jquery selector. It should be $('#<%=btnSave.ClientID %>').click...
$(document).ready(function() {
$("#dialog").dialog({
autoOpen: false,
appendTo: "form",
show: {
effect: "fade",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
},
buttons: {
Ok: function() {
$("[id*=btnmsgOk]").click();
$(this).dialog("close");
},
Cancel: function() {
$(this).dialog("close");
}
}
});
});
$("#clicktoopen").click(function() {
$('#dialog').dialog('open');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/humanity/jquery-ui.css" type="text/css" />
<div id="dialog">DIV</div>
<button id="btnmsgOk" value="btn" style="display:none">Ok</button>
<button id="clicktoopen" value="click">Click</button>
Important thing you should know while using Jquery is PostBack property
When postback occurse JQuery code will get its original values..
So you should prevent postback to see the functionality of it..
e.preventDefaults();
i used animations which delays forms to be visible so i wasnt able to see dialog but i fixed it myself. thanks for everybody who responded to it.
I'm trying open a view in popup (dialog) after a click on a link, i don't find the problem:
Here is my JS code in my view:
<script type="text/javascript">
$.ajaxSetup({ cache: false });
$(document).ready(function () {
$(".openDialog").on("click", "a", function (e) {
e.preventDefault();
$("<div></div>")
.addClass("dialog")
.attr("id", $(this).attr("data-dialog-id"))
.appendTo("body")
.dialog({
title: $(this).attr("data-dialog-title"),
close: function () {
$(this).remove();},
modal: true,
height: 500,
width: 700
})
.load(this.href);
});
$(".close").on("click", "a", function (e) {
e.preventDefault();
$(this).closest(".dialog").dialog("close");
});
});
</script>
And here is my link in the same view:
#Html.ActionLink("Exports",
"List",
new { id = Model.Orga_Id },
new {
#class = "openDialog",
data_dialog_id="exportDialog",
data_dialog_title="Tous les exports"
})
All the code is of this view and the code of the view i'd like to show in the dialog is in the same Controller.
When i click on the link, my nav only change the page like a <a href="#"..></a>
Can you see what is wrong here? Do you need more information?
I believe your problem is your click handler.
$(".openDialog").on("click", "a", function (e) {
Your ActionLink is an A tag. The javascript you are using adds a click to an anchor tag that is a child of the object with the .openDialog class. But the anchor is the object with the .openDialog class, e.g. has no child anchor to attach a click handler to.
Try just
$(".openDialog").on("click", function (e) {
Refer to JQuery Documention for .on() for more detailed examples,
http://api.jquery.com/on/
Change your code as like below,
$(".openDialog").on("click", function (e) {
e.preventDefault();
$("<div></div>")
.addClass("dialog")
.attr("id", $(this).attr("data-dialog-id"))
.appendTo("body")
.dialog({
title: $(this).attr("data-dialog-title"),
close: function () {
$(this).remove();},
modal: true,
height: 500,
width: 700
})
.load(this.href);
});
Perhaps trying the .live method instead of the .on
something like
('.openDialog').live('click', function (e) {
This solved a similar issue I was having recently, granted I am relatively new to JS/jQuery
I'm trying to open a jQuery UI dialog from my C# ASP.NET code based on a value being outside a certain range, rather than based on a button click or other client-side event. Here's the Javascript function that should create the dialog (at the top of the .aspx page):
<script type="text/javascript">
//Total out of range dialog
function ShowRangeDialog() {
$('#rangeDialog').dialog({
modal: true,
width: 'auto',
resizable: false,
draggable: false,
close: function (event, ui) {
$('body').find('#rangeDialog').remove();
},
buttons:
{
'OK': function () {
$(this).dialog('close');
}
}
});
}
</script>
Here's the dialog div itself (at the bottom of the .aspx page):
<div id="rangeDialog" style="display: none;" title="Total out of range">
<p>
Your line items total is out of the range allowed by the approval level you chose.
Please check the approval range and adjust the line items or quantities.
</p>
</div>
And here's the section of the C# code behind that attempts to display the dialog:
if (currTotal < lowerLim || currTotal > upperLim)
{
//Show jQuery dialog telling user that their line items total is out of range
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "dlgOutOfRange",
"ShowRangeDialog();", true);
}
The code in the if block is being reached and executed if I step through it in the debugger, but the dialog isn't being displayed. What am I missing?
I modified my function slightly, based on a question/answer I found at How do I open a jQuery UI Dialog from my c# code behind?, and now it works. Here's the modified function:
<script type="text/javascript">
//Total out of range dialog
function ShowRangeDialog() {
$(function() {
$('#rangeDialog').dialog({
modal: true,
width: 'auto',
resizable: false,
draggable: false,
close: function (event, ui) { $('body').find('#rangeDialog').remove(); },
buttons: { 'OK': function () { $(this).dialog('close'); }
}
})
}).dialog("open");
}
</script>
try this
if (currTotal < lowerLim || currTotal > upperLim)
{
//Show jQuery dialog telling user that their line items total is out of range
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "dlgOutOfRange",
"ShowRangeDialog();", true);
}
You should just be calling the function name.
Also, you may want to try startupscript instead of registerclientscriptblock. You have to be sure that your script gets added AFTER the function is defined, and not before.
if (currTotal < lowerLim || currTotal > upperLim)
{
//Show jQuery dialog telling user that their line items total is out of range
Page.ClientScript.RegisterStartupScript(this.GetType(), "dlgOutOfRange",
"ShowRangeDialog();", true);
}
I have a pageA.aspx. In it I open a jQuery dialog with an iframe containing the pageB.asxp.
var dlg = $('#dialog1').html('<iframe id="ifrm"></iframe>');
dlg.dialog({
autoOpen: false,
resizable: false,
draggable: false,
modal: true
});
dlg.parent().appendTo(jQuery("form:first"));
$('#buttonOpenDialog').click(function () {
var url = '../PageB.aspx';
$("#dialog1>#ifrm").attr("src", url);
$('#dialog1').dialog('open');
return false;
});
Until here is all alright. Now I submit the form and when postback finishes I want to close this dialog I do it like that:
function closePopup() {
parent.$("#dialog1").dialog('close');
__doPostBack();
}
and I want to refresh the parent page pageA.aspx without doing the ugly
__doPostBack()
How Can I accomplish this?
thank you
EDIT: It seems is a complex issue. Please get involved ;P
Add a hidden button in parent page. And when the modal closed, generate the hidden button's click event. It will refresh the parent page.
dlg.dialog({
autoOpen: false,
resizable: false,
draggable: false,
modal: true,
close: function (event, ui) {
// btnHidden is the id of the hidden button.
document.getElementById('<%=btnHidden.ClientID%>').click();
// To refresh gridview when user close dialog
}
});
You can set the _target attribute of the submitted form to _parent . The result of the POST will then be displayed in the parent frame (pageA.aspx)
<form target="_parent">
</form>
Is this what you wanted?
Good morning.
I have a modal JQuery dialog that on Open calls and loads a Partial View. Good example can be seen here https://stackoverflow.com/a/4802423/1193841 but I'll re-paste:
<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');
});
});
In my case ActionMethod "CreateAlbumPartial" takes an ID parameter that's passed from another page with onclick="" event.
How can I make that Id available to pass to an ActionMethod when its called as shown above ? Something like
$('#dialog').dialog('open',Id)
Would be awesome but I dont think that's how it works.
P.S. Right now I'm displaying my popup by doing $.post() to load .html(data) to div and then displaying that DIV in a .show().dialog('open').
However, instead of having my Action method call and Dialog related stuff separately I would really like to re-do it the way I'm asking to keep all logic in one place.
Thank you in advance.
Why dont you make a hidden control and assign the value to that and use it in the dialog