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
}
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();
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, "") %>
I'm playing around with the Jquery UI dialog. I have a page with a gridview, a button that refreshes the gridview and a link. When you click a link, a dialog window popup up with the details of the record.
When I press save on the child page, I have the child page calling a javascript function from the parent page. In this function, it tried to do the button click event but it doesn't seem to be working.
If you look at the showThanks function below,
The alert works, the button text changes but the button click doesn't work.
Could this be a security feature? Both pages are on the same page right now.
hmm any clue?
Thanks
Edit - if you click the button manually, it changes the grid (in the button event handler). Yet, the jquery doesn't seem to be going in the button's event handler and the grid doesn't change.
Parent page html
<asp:GridView ID="gv" runat="server" />
<asp:Button ID="btnRefresh" runat="server" />
<a id="popoutUsers" href="popup.aspx?page=Bob" class="OpenNewLink">CLICK ME</a>
<script type="text/javascript">
$(function () {
$('.OpenNewLink').click(function () {
var url = $(this).attr('href');
var dialog = $('<div id="modal"></div>').appendTo('body')
$('<iframe id="site" src="' + url + '" />').dialog({
modal: true
, close: function (event, ui) {
// remove div with all data and events
dialog.remove();
}
});
return false;
});
showThanks = function () {
alert("Thanks");
var button = $("#btnRefresh");
button.val("hello"); //This works
button.click(); //Nothing seems to happen
// button.trigger("click"); (Tried trigger as well but no luck)
};
});
</script>
Child page
<div>
Why hello there
<asp:Button ID="btnBob" runat="server" Text="click me" />
</div>
<script type="text/javascript">
$(function () {
$('#btnBob').click(function (e) {
e.preventDefault();
window.parent.showThanks();
window.parent.$('.ui-dialog-content').filter(function () { return $(this).dialog('isOpen'); }).dialog('close');
return false;
});
});
</script>
So decided to do a new round of google searching and found this link Html Button that calls JQuery and does not post back
I changed my button to the following (added the UseSubmitBehavior)
and now it works. Hopefully I didn't waste people's time...
I have this script which shows a message to the user when the page is loaded in ASP.NET, my problem is that every time an user clicks any button which causes I believe a PostBack the same message gets reloaded. I only want to show this on First Page load. Any help will be appreciate.
$('.block .message').hide().append('<span class="close" title="Dismiss"></span>').fadeIn('slow');
$('.block .message .close').hover(
function () { $(this).addClass('hover'); },
function () { $(this).removeClass('hover'); }
);
$('.block .message .close').click(function () {
$(this).parent().fadeOut('slow', function () { $(this).remove(); });
});
Here is my HTML code,
<div class="message info">The first input field would allow you to provide the From Date, PO, Shipment or Single Date.</div>
Add runat=server and an id:
<div class="message info" runat="server" id="divmessage" >
Add code in your Page_Load to make it visible only if !IsPostback
protected void Page_Load(object sender, EventArgs e)
{
divmessage.visible = !IsPostBack;
}
You could add this to your page:
<script>
function isPostBack () {
return <%= Page.IsPostBack %>;
}
</script>
And now:
if ( !isPostBack() ) {
//show message
}