Postback from jQuery Modal Dialog by invoking ASP.NET Button Click - javascript

I have a ASP.NET web forms application. I am trying to show a Modal Dialog for confirmation when user clicks on Submit button. I am using OnClientClick of the Button to call a JavaScript function. The function opens the modal dialog if Page Validation is successful. When the user clicks on Yes button of modal dialog, I want the form to be submitted. I tried _doPostback(btn, 'OnClick'), btn.trigger('click') and btn.click(). I can see the modal dialog and the Cancel button works. But when I click on Yes, Page is not Posting. Please see the below code and help me. Thanks!
ASPX:
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click"
OnClientClick="clientValidate();return false;"/>
<div id="alert" style="display: none">
Are you sure you want to submit?
</div>
JavaScript:
$(document).ready(function () {
$('#alert').dialog({
title: 'Confirm',
modal: true,
autoOpen: false,
buttons: {
Yes: function () {
var btn = document.getElementById('<%=btnSubmit.ClientID%>');
//_doPostback(btn, 'OnClick');
//btn.trigger('click');
//btn.click();
// Above three didn't work! :(
},
Cancel: function () {
$(this).dialog('close');
}
}
});
});
function clientValidate() {
var btnsubmit = document.getElementById(<%=btnSubmit.ClientID%>);
if (Page_ClientValidate()) {
$('#alert').dialog('open');
}
}
UPDATE:
Corrected _doPostBack() to __doPostBack(). The page posts now. But btnSubmit_Click in not getting called.

Your doPostBack call is wrong. It should be __doPostBack() not _doPostBack() - there are supposed to be two underscores, you have one. Which is probably why it failed to begin with.
Try this instead:
buttons: {
Yes: function () {
var btn = document.getElementById('<%=btnSubmit.ClientID%>');
__doPostback(btn, 'OnClick');
},
UPDATE
Try this:
In your code behind add this in your page load function
if (Page.IsPostBack)
{
var param = Request["__EVENTARGUMENT"];
if (target == "Submit")
btnSubmit_Click(sender, e);
}
In your Javascript you would do
__doPostBack(btn, 'Submit');
That should do it.

Related

How to block the popups alert on beforeUnload while using custom alert popup?

I am using JqueryUI for custom Confirm box when user clicks on a button.
Here is the script,
function exit() {
$("#dialog-confirm").dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
buttons: {
"Restore": function () {
callClick();
},
Cancel: function () {
$(this).dialog("close");
}
}
});
}
Here is the HTML code
<asp:Button ID="btnExit" runat="server" Text="Exit" OnClientClick="exit()" />
<div id="dialog-confirm" title="Proceed Confirmation?">
<p>Are you sure you want to exit?</p>
</div
When user click on proceed button i want to call another function.
window.onbeforeunload = null;
function callClick() {
$('#test').click()
}
But as soon as button is clicked alert popups appear along with my custom made alert popup.
i wish to disable the default popup.
please see below image for referrence.
Try to use this method window.onbeforeunload = function(event){} to catch this event.

How to prevent bootbox modal from closing by clicking on a button?

I add a button in the footer and I don't want that the modal close when I click on it. I tried preventDefault but it doesn't work..
dialog.find('.modal-footer').append('<button type="button" class="btn btn-primary">Display</button>')
I use bootbox.
Thank you.
I found the solution. I added the button like this.
buttons: {
success: {
label: "Display",
className: "btn-primary",
callback: function () {
return false;
}
}
return false
in callback prevent the closing.
Thank you.

Alert confirmation issue

I have a button on which when the user clicks to delete project on the site a confirmation pops up , I am using alertify.js for this I have the button etc working however when clicking delete the confirmation box appears and automatically deletes project and vanishes before I can either click ok to confirm or cancel.. ?
here is the html
<button type="submit" class="btn btn-link btn-sm" Onclick="return ConfirmDelete();" style="margin:5px;"></button>
here is javascript code
function ConfirmDelete()
{
alertify.confirm("This is a confirm dialog", function (ev) {
ev.preventDefault();
alertify.success("You've clicked OK");
}, function(ev) {
ev.preventDefault();
alertify.error("You've clicked Cancel");
});
}
how can I prevent this from happening ?
You can't prevent form submission in this case because custom confirmation is non-blocking asynchronous dialog. You can stop it however by always returning false and submitting form manually (programmatically) in case of Ok button press:
function ConfirmDelete(button) {
alertify.confirm("This is a confirm dialog", function() {
button.form.submit()
// alertify.success("You've clicked OK", function() {
// button.form.submit()
// });
}, function() {
alertify.error("You've clicked Cancel");
});
return false;
}
For this make sure to pass button reference to your function:
<button type="submit" onclick="return ConfirmDelete(this)">ConfirmDelete</button>

click the button then pop up a dialogthen submit the button

<button onclick="productAddToCartForm.submit(this)" class="button btn-cart" title="Add to Cart" type="button"><span><span>Add to Cart</span></span></button>
js codeļ¼š
var productAddToCartForm = new VarienForm('product_addtocart_form');
productAddToCartForm.submit = function(){
if (this.validator.validate()) {
this.form.submit();
}
}.bind(productAddToCartForm);
The above is the normal step. click the button, then submit the form. now, i want to add one step before the form is submitted. the step is. when click the button, it will pop up a dialog. when close the dialog.there are some content on it. then submit the form.
1, i want to use jquery in productAddToCartForm.submit = function(){....} .if the page have loaded the jquery library.but i don't know how to add jquery code in the function. thank you
You can use jQuery show() and hide().
var productAddToCartForm = new VarienForm('product_addtocart_form');
productAddToCartForm.submit = function(){
if (this.validator.validate()) {
$("#YourPopUp").show('slow', function() {
$('#YourPopUp').hide(1000,'slow', function() {
productAddToCartForm.form.submit();
});
});
}
}
}.bind(productAddToCartForm);
Edit: Here is a jsfiddle example of my answer -> jsfiddle
If your popup window will be an HTML page, you could bind to the click event on your button, display / close the popup and then call form.submit();
Give your button and form an id:
<form id="myForm" action="/formsubmit.html" method="post"></form>
<button id="submitButton" class="button btn-cart" title="Add to Cart" type="button"><span><span>Add to Cart</span></span></button>
Then do something like this with jQuery
$(document).ready(function () {
$('#submitButton').click(function (e) {
e.preventDefault(); //prevent the default action
//show your popup
//hide your popup
$('#myForm').submit(); //submit the form
});
});
If there is a button on the popup that the user will click to close it, you could call the submit function by binding to the click event of whatever element is used to close the popup.

jquery modal dialog before form submit

I have a form on a page, and I am trapping the click action on two submit buttons. There is another submit button that is not trapped (i.e. I dont need to show a modal for this button).
So, my obvious problem is that I need to block the submit action when the modal first opens, and I then need to force the submit when the user actually clicks the OK button in the modal. However, because each button has a specific name and value associated with it (which the back-end script needs to know), a $('#myform').submit() method will therefore not work.
function something(msg) {
var $dialog = $('<div></div>').html(msg).dialog({
autoOpen: false,
title: 'Please confirm...',
modal: true,
buttons: {
"OK": function () {
$dialog.dialog('close');
//submit needs to happen here
},
Cancel: function () {
$(this).dialog("close");
}
}
});
$dialog.dialog('open');
event.preventDefault();
return false;
}
I would include a hidden field to take on the name and value of the submit button clicked:
<input type="hidden" name="subName" value="" />
$("#submit_button_one").function() {
$("input[name='subName']").attr("name", $(this).attr("name")).val(($(this).val());
something("message");
return false;
});
$("#submit_button_two").function() {
$("input[name='subName']").attr("name", $(this).attr("name")).val(($(this).val());
something("message");
return false;
});
function something(msg, act) {
// ...
//submit needs to happen here
$('#myform').submit()
}

Categories