We Keep Coding

Dialog popup doesn't work

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

jquery dialog opens and all things work but not second time

my site is in mvc-4, i am opening partial view in dialog. partial view works fine first time, but when i open it second time and so on it opens he dialog but partial view is not working. I think some jquery issue i am doing wrong. In partial view div hover event is not working.
This is my code to open dialog:
<div onclick="ShowHistory();">Actions History</div>
function ShowHistory()
{
myDialog = $("<div> </div>");
myDialog.dialog({
autoOpen: false,
width: 1050,
title: "Title",
resizable: false,
modal: true,
draggable: false,
});
myDialog.load("#Url.Action("Method_return_partial_view", new {id = 1 })",
function () {
myDialog.dialog('open');
});
}
Controller method:
[Authorize]
public PartialViewResult Method_return_partial_view(int id)
{
var list = GetHistory(id);
return PartialView("_partialViewName", list);
}
Edit:
I am also sorting the grid, and grid sorting is done using jquery ajax, it works fine when open first time and controller method for sorting called once, but when i open dialog second time and i click on sorting header then controller methods called with multiple of two, means if click once then call once, if click 2nd time then controller method calls 2 times, if 3rd then calls 4 times.

You should try and specify what happens when the dialog closes so that it can be reused again. Try this:
function ShowHistory()
{
myDialog = $("<div> </div>");
myDialog.dialog({
close: function (event, ui) {
// remove div with all data and events
myDialog.remove();
},
autoOpen: false,
width: 1050,
title: "Title",
resizable: false,
modal: true,
draggable: false,
});
myDialog.load("#Url.Action("Method_return_partial_view", new {id = 1 })",
function () {
myDialog.dialog('open');
});
}

How do I call up a jQuery UI dialog from ASP.NET code behind without a client-side event?

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

How to pass parameters to an action that's called on JQuery dialog() Open event

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

jQuery UI Modal Dialog - Prevent Action Unless OK clicked

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