I have this link on my page:
<a href='/Admin/Users/Delete/123' class='confirm'>Delete</a>
<div id="dialog-confirm" title="Delete this user?">
<p>
<span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
This item will be permanently deleted and cannot be recovered. Are you sure?
</p>
</div>
And this javascript:
$("#dialog-confirm").dialog({
autoOpen: false,
modal: true,
buttons: {
"Delete": function () {
window.location.href = $(this).attr("href"); ;
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
$("a.confirm").click(function () {
$("#dialog-confirm").dialog("open");
});
The dialog opens like I should when I click the link. The only problem is that it doesn't wait for me to confirm or cancel, the dialog just pops up and it redirects to the url.
What am I doing wrong here?
$("a.confirm").click(function () {
$("#dialog-confirm").dialog("open");
return false;
});
You need to prevent the default action from occurring by returning false.
You need to return false from your anchor's click event else the page will be loaded with the href URl.
Try this:
$("a.confirm").click(function () {
$("#dialog-confirm").dialog("open");
return false;
});
Related
I am working on an asp.net page where I have used JQuery UI dialogue. This dialogue has a submit button. When I click the submit button dialogue closes. I want to call a Webmethod on it. If method returns ture, then I want to close it otherwise I want to keep it open with error message shown.
[Edited]
<script>
jQuery(function () {
var dlg = jQuery("#dialog").dialog({
draggable: true,
resizable: true,
show: 'Transfer',
hide: 'Transfer',
width: 320,
autoOpen: false,
minHeight: 10,
minwidth: 10,
beforeClose: function () {
$.ajax({
url: "Default.aspx/GetResult",
success: function (response) {
if (response == true) {
("#dialog").close()
}
else {
alert('asdasdds');
}
}
});
return false; //this will stop dialog box to close
}
});
dlg.parent().appendTo(jQuery("form:first"));
});
</script>
<div id="Result">
Click here for the time.</div>
<div id="dialog" style="text-align: left; display: none;">
<asp:Button ID="btnButton" runat="server" Text="Button" OnClick="btnButton_Click" />
</div>
how to do it. Please suggest.
Regards,
Asif Hameed
You can call webmethod using ajax and then act on it conditionally based on the response. Let your webmethod just return true/false and then you can check this value on the client side.
Execute this code on submit button click and do not close the dialog. Let the success handler decide whether to close it or no.
$.ajax({
url: "urlOfTheService.asmx/methodName",
success: function(response){
if(response == true){
//Code to close the dialog
}
else{
//Show the error message
}
}
});
ajax() reference: http://api.jquery.com/jQuery.ajax/
Update:
Use open event of dialog box to attach the submit handler to form and execute the above code.
jQuery(function () {
var dlg = jQuery("#dialog").dialog({
draggable: true,
resizable: true,
show: 'Transfer',
hide: 'Transfer',
width: 320,
autoOpen: false,
minHeight: 10,
minwidth: 10,
open: function(){
$(this).find('form')
.unbind('submit')
.submit(function(){
var $form = $(this);
$.ajax({
url: "urlOfTheService.asmx/methodName",
success: function(response){
if(response == true){
//Submit the form
$form.unbind('submit')[0].submit();
}
else{
//Show the error message
}
}
});
return false;
});
}
});
dlg.parent().appendTo(jQuery("form:first"));
});
Perhaps someone out there can help me understand what's going on. I'm using jQuery UI dialog() to display html partials in my project. When a user clicks Add New it displays the add client form. However, when the user clicks on the Add or Cancel buttons in the dialog I get an error, "$(this).dialog is not a function". If I remove the open event and display a static form in the dialog the buttons the work fine.
ClientsController
public ActionResult ajaxCreateClient()
{
Client c = new Client();
AddToViewData(c); // adds some additional info about client
return PartialView("__ClientForm", c);
}
View: Contacts/Create
....
<p>
#Html.LabelForField(model => model.Client.Name) <!-- custom extension that I wrote -->
#Html.TextboxFor(model => model.Client.Name)
<a id="btnAddNew" href="javascript:void()">Add New</a>
</p>
....
<div id="addNew"></div>
jQuery
$(document).ready(function () {
$("#btnAddNew").click(function () {
$("#addNew").dialog("open");
});
$("#addNew").dialog({
autoOpen: false,
title: "Add Client",
width: 410,
modal: true,
resizable: false,
open: function(event, ui) {
$(this).load("#Url.Action("ajaxCreateClient", "Clients")");
},
buttons:
{
"Add": function () {
// validate() and do something
$(this).dialog("close");
},
"Cancel": function () {
// do something else
$(this).dialog("close");
}
}
});
});
Thanks!
Try like this:
$('#addNew').dialog('close');
I have a TemplateField in a GridView in an UpdatePanel with a button called btnDelete. Rather than the standard OnClientClick="return confirm('Are you sure?')" I'd like to use jQuery Dialog.
So far, I'm able to set the jQuery using btnDelete.Attributes["onclick"] and setting the jQuery Dialog code in the code-behind. However, it posts back to the server in all cases before I have a chance to click "Confirm" or "Cancel".
Here is the HTML it produces:
<input type="submit" rel="Are you sure?" class="action-link delete" id="ctl00_c1_gvTransfers_ctl02_btnDelete" onclick="return function() {
$('#delete-transfer-confirm').dialog({
buttons: {
'Confirm' : function() { $(this).dialog('close'); return true; },
'Cancel' : function() { $(this).dialog('close'); return false; }
}
});
$('p.message').text($(this).attr('rel'));
$('#delete-transfer-confirm').dialog('open');
};" value="Delete" name="ctl00$c1$gvTransfers$ctl02$btnDelete">
What am I doing wrong that is causing this function not to block until either button is clicked?
Conversely, the standard confirm works just fine:
<input type="submit" class="action-link delete" id="ctl00_c1_gvTransfers_ctl02_btnDelete" onclick="try{if (!window.confirm('Are you sure?')){return false;};}catch(e1){alert("Unexpected Error:\n\n" + e1.toString());return false;};" value="Delete" name="ctl00$c1$gvTransfers$ctl02$btnDelete">
Thanks,
Mark
UPDATE:
Ultimately, I had to use UseSubmitBehavior="false" to get the name="" attribute to render. Then I had to override the OnClientClick, setting the value to "return;" so the default __doPostBack() doesn't get executed. Then I was able to wire up a .live() click handler, which invokes the __doPostBack() on Confirm:
$('input.delete').live('click', function(e) {
var btnDelete = $(this);
alert($(btnDelete).attr('name'));
e.preventDefault();
$('#delete-transfer-confirm').dialog({
buttons: {
'Confirm': function() {
$(this).dialog('close');
__doPostBack($(btnDelete).attr('name'), '');
return true;
},
'Cancel': function() {
$(this).dialog('close');
return false;
}
}
});
$('p.message').text($(this).attr('rel'));
$('#delete-transfer-confirm').dialog('open');
});
Check the selected answer for this question for an example: How to implement "confirmation" dialog in Jquery UI dialog?
A couple of notes:
Don't put your onclick functionality in an onclick attribute. One of the great benefits of jQuery is that it allows you to do Unobtrusive Javascript. Instead, do something like this:
$(function() {
$('.delete').click(function(e) {
e.preventDefault() //this will stop the automatic form submission
//your functionality here
});
});
Also, make sure that your dialog is instantiated outside the click event, so that it is initialized before the first click event happens. So, something like this would be your result:
$(function() {
$("#delete-transfer-confirm").dialog({
autoOpen: false,
modal: true
});
$('.delete').click(function(e) {
e.preventDefault();
$('#delete-transfer-confirm').dialog({
buttons: {
'Confirm': function() {
$(this).dialog('close');
return true;
},
'Cancel': function() {
$(this).dialog('close');
return false;
}
}
});
$('p.message').text($(this).attr('rel'));
$('#delete-transfer-confirm').dialog('open');
});
});
That should do the trick for you.
$(document).ready(function () {
$('#btnCancel').click(function (e) {
e.preventDefault();
$("<div><span><b>Are you sure you want to cancel this order?</b></span></div>").dialog({
modal: true,
draggable: false,
resizable: false,
width: 430,
height: 150,
buttons: {
"No": function () {
$(this).dialog("destroy");
},
"Yes": function () {
$("#btnCancel").unbind();
$(this).dialog("destroy");
document.getElementById('<%= btnCancel.ClientID %>').click();
}
}
});
});
});
Then in the Page Body
<asp:button id="btnCancel" runat="server" cssclass="button_major" text="Cancel" style="float: right"
onclick="btnCancel_ClickEvent" clientidmode="Static" />
I'd like to use jQuery UI's dialog to implement a confirm dialog which is shown when the user clicks a delete-link (implemented using an asp:LinkButton).
I'm using code as shown below (copied from the jquery ui documentation):
<!-- the delete link -->
<asp:LinkButton ID="btnDelete" runat="server" Text="Delete"
OnClick="btnDelete_Click" CssClass="btnDelete"></asp:LinkButton>
<!-- the confirm-dialog -->
<div id="dialog-confirm-delete" title="Delete?" style="display:none;">
<p>Are you sure you want to permanently deleted the selected items?</p>
</div>
<script>
$(document).ready(function () {
// setup the dialog
$('#dialog-confirm-delete').dialog({
autoOpen: false,
modal: true,
buttons: {
"Delete all items": function () {
$(this).dialog("close");
// ===>>> how to invoke the default action here
},
Cancel: function () { $(this).dialog("close"); }
}
});
// display the dialog
$('.btnDelete').click(function () {
$('#dialog-confirm-cancel').dialog('open');
// return false to prevent the default action (postback)
return false;
});
});
</script>
So in the click event handler, I have to prevent the default action of the LinkButton (the postback) and instead display the dialog.
My question is: how can I then invoke the default action (the postback) of the delete link to perform the postback in case the user clicked the "Delete all items" button in the dialog?
OK, here's my approach (it works, but it might not be the best solution):
$(document).ready(function () {
$('#dialog-confirm-cancel').dialog({
autoOpen: false,
modal: true,
buttons: {
"Delete all items": function () {
// invoke the href (postback) of the linkbutton,
// that triggered the confirm-dialog
eval($(this).dialog('option', 'onOk'));
$(this).dialog("close");
},
Cancel: function () { $(this).dialog("close"); }
}
});
$('.btnDelete').click(function () {
$('#dialog-confirm-delete')
// pass the value of the LinkButton's href to the dialog
.dialog('option', 'onOk', $(this).attr('href'))
.dialog('open');
// prevent the default action, e.g., following a link
return false;
});
});
If you're not doing anything more than confirming you can add an attribute to the button.
<asp:LinkButton ID="btnDelete" runat="server" Text="Delete"
OnClientClick="if(!confirm('Are you sure?'))return false;" CssClass="btnDelete"></asp:LinkButton>
If you look at the Project Awesome on Codeplex it has a generic implementation of a Confirm Dialog that you can inspect for your scope.
So you prevented the default action of the link(following the link), right? So adding location.replace('path/to/file'); after $(this).dialog('close'); would solve your problem.
Not sure I understood your question right though.
Try adding $("#yourformid").submit(); at this spot // ===>>> how to invoke the default action here.
According to the docs: "... the default submit action on the form will be fired, so the form will be submitted."
Edit
You can try to do something like this:
$('.btnDelete').click(function (event, confirmed) {
if (confirmed) {
return true;
} else {
$('#dialog-confirm-cancel').dialog('open');
// prevent the default action, e.g., following a link
return false;
}
});
And then in your delete all items function:
"Delete all items": function () {
$(this).dialog("close");
$('.btnDelete').trigger("click", [true]);
},
$('#dialog-confirm-delete').dialog({
autoOpen: false,
modal: true,
buttons: {
Cancel: function() {
$(this).dialog("close");
},
"Delete all items": function() {
$(this).dialog("close");
// ===>>> how to invoke the default action here
}
}
});
If you are using a LinkButton you can do this:
__doPostBack("<%= lnkMyButton.UniqueID %>", "");
I have a need to check two unrelated conditions when the user clicks submit, and request user feedback for each.
I can get one jquery dialog up working great but I will sometimes need two in a row, and then have it complete the button event.
Here's the gist:
I have button
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />
and then some Jquery checking a certain condition that if true pops up a dialog. If the dialog opens I return false so the original click event doesn't occur but in most case I want to let it pass through:
$("#<%=btnSubmit.ClientID %>").click(
function() {
if (Condition) {
$('#Dialog').dialog('open');
return false;
}
return true;
}
);
I'm not using the regular dialog buttons but have another asp:button that calls a different OnClick Event in the code-behind:
$("#Dialog").dialog({
bgiframe: true,
autoOpen: false,
height: 90,
width: 450,
modal: true,
close: function() {}
<div id="Dialog">
<asp:Button ID="Button1" runat="server" Text="OK" OnClick="btnDeleteSomethingThenSubmit_Click" />
<input type="button" value="Cancel" id="btnCancelDialog" />
</div>
Which is all great. Works anyway. But I also need another condition checked, with a different dialog but this time just a yes/no flag and I don't need to hit a server side event, so how can I get one to pop first, wait for response and set a value, pop the second, and then go to the OnClick event? Something like :
$("#<%=btnSubmit.ClientID %>").click(
function() {
if (OtherCondition) {
$('#Dialog2').dialog('open');
}
if (Condition) {
$('#Dialog').dialog('open');
return false;
}
return true;
}
);
Which obviously doesn't work.
Couldn't you have something like:
$("#<%=btnSubmit.ClientID %>").click(
function() {
var success = true;
if (OtherCondition) {
$('#Dialog2').dialog('open');
success = false;
}
if (Condition) {
$('#Dialog').dialog('open');
success false;
}
return success;
}
);
Basically, catch either dialog returning false in a variable, otherwise return true and allow the form to submit?
jQuery dialogs are non-blocking and don't behave like native JavaScript dialogs, which is why you cannot do
$("#<%=btnSubmit.ClientID %>").click(function() {
if (OtherCondition) {
$('#Dialog2').dialog('open');
}
if (Condition) {
$('#Dialog').dialog('open');
return false;
}
return true;
});
You need to use the close callback like this:
$("#<%=btnSubmit.ClientID %>").click(function() {
if (OtherCondition) {
$('#Dialog2').dialog('open', {
close: function() {
if (Condition) {
$('#Dialog').dialog('open', {
// Call some function here to report the status
close: function() {}
});
} else {
// Call some function here to report a different status
}
}
});
}
});