I am using custom jquery confirm dialog box on button click in aspx page. Problem is that when I am clicking the button the dialog box is coming but automatically closes after some seconds due to autopostback. How to resolve it?
Here is my code...
<script>
$(function confirmation () {
$('#btnUpdate').click(function () {
$('#dialog').dialogBox({
content:'Are you sure to update..!!',
hasClose: true,
effect: 'fade',
hasBtn: true,
confirm: function () {
$('#message').dialogBox({
title: 'Confirmation..',
content: 'Updated Sucessfully..!!',
hasClose: true
})
}
})
})
})
</script>
<asp:Button ID="btnUpdate" runat="server" Text="Update" OnClick="btnUpdate_Click" OnClientClick="return confirmation()" />
Try adding UseSubmitBehavior="false" in <asp:Button> to prevent the button triggering the postback.
Sample:
<asp:Button ID="btnUpdate" runat="server" Text="Update" OnClick="btnUpdate_Click" OnClientClick="return confirmation()" UseSubmitBehavior="false" />
Add the event parameter to your click handler, and then cancel (prevent) the default action:
$('#btnUpdate').click(function (e) {
e.preventDefault();
})
Do the following changes:
Cancel the default behavior of the asp.
Replace the #btnUpdate with #<%=btnUpdate.ClientID%>
Call the postback when the confirm is true.
Below is the updated code:
$("#<%=btnUpdate.ClientID%>").click(function(){
event.preventDefault();
$('#dialog').dialogBox({
content:'Are you sure to update..!!',
hasClose: true,
effect: 'fade',
hasBtn: true,
confirmValue: 'I am sure',
confirm: function(){
__doPostBack($('#<%=btnUpdate.ClientID %>').attr('name'), '');
}
});
})
Related
I have a form within popup window something like that:
<div id="dialog" title="Rezerwacja">
<asp:TextBox ID="imieTextBox" runat="server" placeholder="Imię"></asp:TextBox>
<asp:TextBox ID="nazwiskoTextBox" runat="server" placeholder="Nazwisko"></asp:TextBox>
<asp:TextBox ID="emailTextBox" runat="server" TextMode="Email" placeholder="Email"></asp:TextBox>
<asp:TextBox ID="telefonKomorkowyTextBox" runat="server" TextMode="Phone" placeholder="Telefon kom."></asp:TextBox>
<div id="plansza"></div>
<asp:Button ID="rezerwujButton" runat="server" Text="Zarezerwuj" OnClick="rezerwujButton_Click" />
</div>
And JavaScript:
$(document).ready( function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "puff",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( ".opener" ).on( "click", function() {
$( "#dialog" ).dialog( "open" );
});
});
So I have to behind code:
protected void rezerwujButton_Click(object sender, EventArgs e)
{
rezerwacje nowaRezerwacja = new rezerwacje();
nowaRezerwacja.imie_klienta = imieTextBox.Text;
nowaRezerwacja.nazwisko_klienta = nazwiskoTextBox.Text;
nowaRezerwacja.email_klienta = emailTextBox.Text;
nowaRezerwacja.nrtel_klienta = telefonKomorkowyTextBox.Text;
bazaDC.rezerwacjes.InsertOnSubmit(nowaRezerwacja);
bazaDC.SubmitChanges();
}
And there is the problem, submit button "rezerwujButton" does not work. It look like a unclickable or something like that... I'm clicking on it and nothing do... Not refresh page or anything...
When I going to use that form without popup window, It work but within popup not.
I tried to set usesubmitbehavior="false" but when I did it, button worked, send something but every field was blank... I mean when i tried to get something like that: imieTextBox.Text It will be blank... Always...
Any ideas?
#edit
I don't know what Do I do wrong?
Always a fields from form is blank...
Anybody can tell me how can I use correct this __PostBack? Because I have to do something wrong...
I added to button UseSubmitBehavior="fase" and in function PageLoad I got something like that:
if (Page.IsPostBack)
{
rezerwacje nowaRezerwacja = new rezerwacje();
nowaRezerwacja.imie_klienta = imieTextBox.Text;
nowaRezerwacja.nazwisko_klienta = nazwiskoTextBox.Text;
nowaRezerwacja.email_klienta = emailTextBox.Text;
nowaRezerwacja.nrtel_klienta = telefonKomorkowyTextBox.Text;
bazaDC.rezerwacjes.InsertOnSubmit(nowaRezerwacja);
bazaDC.SubmitChanges();
}
For example imieTextBox.Text is always blank... I don't know why...?
edit
Im done. I change the way to get modal window. I used popup window which not moving modal div anywhere and It working.
The reason of the "nothing happens" behaviour is the fact that jQuery-UI dialog widget moves the DOM-element, which is converted to a dialog (in your case - $("#dialog")), to body. After this, the submit button is not inside a form tag anymore, and clicking it does not cause any submission.
It will still work if the whole form is inside the dialog content:
<div id="dialog" title="Rezerwacja">
<form ...>
...
<asp:Button ID="rezerwujButton" runat="server" Text="Zarezerwuj" OnClick="rezerwujButton_Click" />
</form>
</div>
You can try putting your rezerwujButton_Click method into PageMethods
[ScriptMethod, WebMethod]
public string RezerwujCall() {
// logic here
return "ok";
}
Then in your js:
<script type="text/javascript">
function rezerwuj_clicked() {
PageMethods.RezerwujCall(function (response) { if(response == "ok"){} }, function(response){ console.log("failed"); });
}
</script>
This will require to change OnClick="rezerwujButton_Click" into OnClientClick="rezerwuj_clicked()"
I have this code in an ASP.NET Page
function ShowPopup() {
$("#GridView2").dialog({
title: "GridView2",
width: 1200,
buttons: {
Ok: function () {
$(this).dialog('close');
}
,
Export: function funcXport() {
//EVENT HERE?
}
},
modal: true
});
which is a popup with a gridview and there are 2 buttons on it.
I want the "Ok" button to actually close the Grid but I'd like the "Export" button to trigger an event (I suppose) so I can write a C# code that exports the GridView to an EXCEL file.
Well you could do it with a little trick:
Define a non-visble button and click it:
<asp:Button ID="ButtonID" runat="server" OnClick="DoExport" style="visibility: hidden; display: none;" />
Then:
Export: function funcXport() {
$("#<%=ButtonID.ClientID%>").Click();
}
Or use ClientIDMode=Static on the button and $("#ButtonID").click();
$(document).ready(function () {
$('#btnApplyFilter').click(function () {
alert("JQuery Running!");
});
});
The above function is not getting fired on button click. What would be the cause?
My Button :
<asp:Button ID="btnApplyFilter" runat="server" Text="Apply Filter" OnClick="btnApplyFilter_Click" />
Remove onClick from button
There is no use of onClick in button
Write the function delegately if its a dynamic element
$(document).ready(function () {
$(document).on('click','#btnApplyFilter',function () {
alert("JQuery Running!");
});
});
The OnClick is for server side event. You can use OnClientClick if you want to call a javascript function or also you can use jQuery click event.
How does the client know to send request to server only when the confirmation box result is ok and stay on page if cancelled?
Also, is this mechanism any different in ASP.Net and ASP.Net MVC?
The responses I got seem to tell me how to implement the functionality.
I want to know the internal working of when user clicks OK/cancel what happens internally. How does browser come to know it has to proceed to server call or close itself and do nothing?
You can use simple confirm box
$("#callConfirm").on("click", function(e) {
if(confirm('Are you sure'))
alert('Yes');
else
alert('No');
});
JSFIDDLE
Try This
<script>
function CallConfirm()
{
if(confirm('Are you sure'))
//do your stuff
else
return false;
}
<script />
and on asp button write like this
<asp:Button id="Click" runat="server" onclientclick="return CallConfirm();" onclick="btn_Click"/>
you can use bootstrap in asp.net and it will help you give new look and help you in lots of other things,see this http://getbootstrap.com/ and u can use bootstrap confirmation box.
<asp:button
id="Button1" runat="server" text="Button" xmlns:asp="#unknown">OnClientClick="return confirmation();" onclick="Button1_Click"/>
</asp:button>
<script type="text/javascript">
function confirmation() {
if (confirm('are you sure you want to delete ?')) {
return true;
}else{
return false;
}
}
</script>
I write this Jquery code in the aspx page for button.
Steps:
Add a button for which you want to have a confirm box, add its jquery and div to show the confirm box.
Register the script for button on Page_Load, and write the methods which will bind this script on button.
Also do not forget the server side method or event for button click, which will be continued after OK confirmation from confirm box.
If cancel is clicked, nothing will happen and div will be closed.
<script type="text/javascript">
function FileItem(callBackFunction, title, content) {
$("#File-confirm").html(content).dialog({
autoOpen: true,
modal: true,
title: title,
resizable: false,
height: 140,
close: function (event, ui) { $(this).dialog("destroy"); },
buttons: {
'Ok': function () {
callBackFunction(); $(this).dialog("destroy");
},
'Cancel': function () {
$(this).dialog("destroy");
}
});
}
}
where SaveBtn is the button in the UI:
<asp:Button ID="SaveBtn" runat="server" Text="File" OnClick="SaveBtn_Click"/>
<div id="File-confirm" style="display: none">
</div>
Again the code behind:
FileConfirmRequest(SaveBtn, "Confirm", "Are you sure you want to file the changes?");
// In the Page_Load, write the above code
//Use this method later on the page
protected void FileConfirmRequest(Button control, string title, string message)
{
string postBackReference = Page.ClientScript.GetPostBackEventReference(control, String.Empty);
string function = String.Format("javascript:FileItem(function() {{ {0} }}, '{1}', '{2}'); return false;", postBackReference, title, message);
control.Attributes.Add("OnClick", function);
}
Now, The Onclick of the Button:
protected void SaveBtn_Click(object sender, EventArgs e)
{
//Do what you want to after OK Click from the confirm box
}
I want a LinkButton to popup a jQuery UI dialog that prompts the user to confirm the action. If the user hits OK, then I'd like the action to continue by posting back to the server.
I ended up creating two links: One is regular HTML that invokes my confirmation dialog. And the other is a regular LinkButton server control that is hidden, and that I want to invoke if the user confirms the dialog box.
The two links look like this:
<a id="preEnterOperations" href="#">
Enter Operations
</a>
<asp:LinkButton ID="lnkEnterOperations" runat="server"
OnClick="lnkEnterOperations_Click" Style="display:none">
Enter Operations
</asp:LinkButton>
And here's my JavaScript:
$(function () {
$('#preEnterOperations').on('click',
function (e) {
var confirmDialog = $('#enterOperationsConfirmationDialog');
confirmDialog.dialog({
modal: true,
buttons: {
Ok: function () {
confirmDialog.dialog("close");
confirmDialog.data('confirmed', '1');
$('#<%= lnkEnterOperations.ClientID %>').click();
},
Cancel: function () {
confirmDialog.dialog("close");
}
}
});
return false;
});
});
Everything seems right. The confirmation dialog pops up as expected. I can see my Ok handler runs if the user hits Ok. But the line $('#<%= lnkEnterOperations.ClientID %>').click(); doesn't do a thing! I've tried numerous variations on this line and the effect is always the same: nothing.
Can anyone help me see how I can execute a LinkButton postback if the user confirms the dialog box?
You can replace the following line:
$('#<%= lnkEnterOperations.ClientID %>').click();
With:
__doPostBack('<%= lnkEnterOperations.UniqueID %>', '');
That should do the trick.
Ok: function () {
confirmDialog.dialog("close");
confirmDialog.data('confirmed', '1');
$('#<%= lnkEnterOperations.ClientID %>').click(function(){
__doPostBack('<%= lnkEnterOperations.UniqueID %>', '');
});
},
Cancel: function () {
confirmDialog.dialog("close");
}
May be this can help.
You can replace "$('#<%= lnkEnterOperations.ClientID %>').click();"
with <%=Page.ClientScript.GetPostBackEventReference(lnkEnterOperations, "") %>