Develop Reference

ASP button OnClick not firing in javascript popup

I am attempting to submit form data from within a javascript popup window.
The popup opens fine and displays all elements as expected. When I click the asp:button, before inputting anything, it performs required field validation as expected. All of that is working just fine.
The problem I am having is in getting the OnClick to work and submit the form data.
To say I am a beginner to javascript/JQuery is an understatement, so requesting a bit of hand-holding on this one. Thanks in advance for the help.
<asp:Button ID="submitRes" CssClass="button" runat="server" ClientIDMode="Static" Text="Submit This Form Data" OnClick="Submit_Click" />
$( document ).ready(function() {
$(document).on("click", ".divPopupAdd", function(event){
showPopup()
});
function showPopup(){
$("#popup_add").dialog({
show: { effect: "blind", duration: 200 },
resizable: false,
modal: true,
width: 750,
height: 450,
open: function(){
$('#<%=submitRes.ClientID %>').click();
}
});
}
});

Ok, this is how you post back - click a button to run your code behind.
We going to lay this out step by step.
We assume, that you click a button on your form, and it launches the jQuery dialog? Beyond important here that this “is” in fact your flow in this form.
So, I’m going to assume user clicks a button, and the dialog is launched.
(and avoid that document on-ready. Please dump it).
Now the dialog is displayed. In that dialog, we assume user enters data, does whatever, and THEN either clicks a button for ok, or clicks a button to cancel?
Next up:
You CAN NOT do/use an asp.net button for a post back in that dialog. It WILL NOT work – end of story!
And if you did get the post back to work, it would mess up your current page “dom” that is holding the current web page, and also that of the dialog. It just does not work – don’t do it, ok?
(so no post backs in that dialog!!)
But we can still happy make this work!!!
So, how do we setup a button in the dialog?
Lets assume you need to click a button inside the dialog?
Button MUST be client side JavaScript (js).
That button will:
Close the dialog, and THEN do the post back.
So, we thus need this flow:
Display dialog on button click (client side js).
User does whatever in that dialog.
User now clicks on a button (say ok, or cancel).
We CAN and will for the sake of going crazy? We will drop on the form and use standard asp.net buttons. There is really no need to adopt HTML “input” buttons. (You can, but no real need here).
I am going to use BOTH built in jQuery buttons and ALSO two standard buttons in that dialog (the reason is many, but that way YOU can choose either way, and learn this. (boy, do I with someone had laid out how this works for me!!!). So, I going to save you much pain and suffering here.
So, lets start from the top:
Our button code to pop the dialog.
The asp button will be this:
<asp:Button ID="showdialog" runat="server" Text="Show the dialog"
OnClientClick="showpop();return false;"/>
Note close in above!!!!
We use OnClientClick=showpop();return false.
This will thus run js code, and NOT do a post back. The return = false is VERY important here, since if you leave that out, then the standard asp button will post back like it “normally” does. And we break our new rule!! – no post backs inside the dialog!!.
Ok, so that is the button to launch the dialog.
The js code to launch the popup is similar to what you have.
Eg this:
function showpop() {
var mydiv = $('#popdialog');
mydiv.dialog({
autoOpen: false, modal: true, title: 'My cool dialog, width: '30%'
});
// Open the dialog
mydiv.dialog('open');
}
Now, again for this example, we assume that you dropped some standard asp buttons in that dialog. But, OFTEN you want to use the built in dialog buttons. So let’s do BOTH for this example.
So, the above code thus becomes this:
function showpop() {
var mydiv = $('#popdialog');
mydiv.dialog({
autoOpen: false, modal: true, title: 'My cool other page', width: '30%',
position: { my: 'top', at: 'top+150' },
buttons: {
'ok': mycustomok,
'cancel': mycustomcancel
}
});
// Open the dialog
mydiv.dialog('open');
}
Note the two built in buttons we added. (ok, and cancel).
Note how I also broke out the 'setup' and THEN the one line that pops the dialog.
And in our pop up div, we also have two custom buttons. As noted, I am including both custom and built in dialogs. This will take you “hours” to get nice examples of this, and now you can choose either road.
So, our div has some text, and two custom buttons, and a simple text box.
The div looks like this:
<div id="popdialog" runat="server" style="display:none">
<h2>My cool pop dialog</h2>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<asp:Button ID="MyOk" runat="server" Text="My custom ok"
OnClientClick="mycustomok();return false;"/>
<br />
<asp:Button ID="MyCancel" runat="server" Text="My custom cancel"
OnClientClick="mycustomcancel();return false;"/>
</div>
The only real thing to note in above is the style=”display:none” for the WHOLE “div”. This will thus hide the div, and it will not display when the page loads.
So, when we click on the button, it will show the dialog. You will see this:
So, we have our two custom buttons, and the two jQuery but in buttons. If you don't want the built in ones then use my first sample code. As I stated, your choice as to which buttons you want, like, or feel to use here. The main point is that BOTH sets of buttons do the SAME thing.
So, for this example, you click “ok”, or “my custom ok”.
Either way? We want our post back to run for that choice.
And for my custom cancel, or the built in cancel, we want code behind (server code) to run for that cancel choice. Do keep in mind you often don't need any code - but JUST the dialog to close and cancel and do nothing.
So, the two js stubs we have for this are:
function mycustomok() {
// first, close the dialog
$('#popdialog').dialog('close');
#('#HiddenOk').click();
}
function mycustomcancel() {
// first, close the dialog
$('#popdialog').dialog('close');
$('#HiddenCancel').click();
}
As noted, if you use BUILT IN buttons for the dialog, then you do NOT need the “close” of the dialog I have above. But your using (we assume) custom buttons, and not the built in jQuery ones.
And as noted, based on either choice, we will do a post back and run code behind. As I stated, the short way, easy way is to drop two hidden buttons on the form, they will look like this, and of course our outside the above div
<asp:Button ID="HiddenOk" runat="server" Text="hidden ok"
style="display:normal"/>
<asp:Button ID="HiddenCancel" runat="server" Text="hidden cancel"
style="display:normal"/>
Note careful (note BEYOND carefull here).
I have display = normal for the two buttons. The reason is that then with the designer you can double click on the button, and write your code behind. When you are DONE and have both code behind stubs written, then change the above display:normal to display:none to hide them. So we left the buttons visible for easy development. Once you wired up the code behind (simply double click on the buttons in the designer), then you are jumped to the code behind editor, and can write that code.
I have this for now:
Protected Sub HiddenOk_Click(sender As Object, e As EventArgs) Handles HiddenOk.Click
Debug.Print("dialog ok code run")
End Sub
Protected Sub HiddenCancel_Click(sender As Object, e As EventArgs) Handles HiddenCancel.Click
Debug.Print("dialgo cancel code")
End Sub
Of course you write whatever you need. As noted, you may well not need any code for the cancel button – you can leave that out of this design if you wish.
So, with the two code subs automatic wired up for you (this is why we all love asp.net forms, right???).
The “click” button trick as noted is rather nice. It solves a LONG list of issues, and does so with great ease.
You get the needed post back.
You get to run your own cute little code stub behind.
You don't have to write up ajax calls to do this!!!
So this follows the whole asp.net design pattern in which you drop buttons on a form, click them, and you get to run that nice little short code behind stub. And it all wired up automatic for you.
Thus in summary:
Don’t try + attempt post backs in the dialog – you REALLY can’t do this.
And you find they don’t work anyway! So buttons on that dialog WILL run “js” code.
you can use asp buttons if you want, just remember the extra return=false part.
If you must set/send some information to the server in that dialog before you close? Well, that is a different question and answer. But the jQuery "ajax" method works REALLY nice, and you can directly call functions in your existing web page code behind, and do so with next to no effort. You don't even have to know how to setup web methods - asp.net will do all the dirty work. but lets leave that example for another day.
Try the above idea - the "click" button trick in js really is the magic key to making this all oh so very easy to write and setup.

If you wish to call the JavaScript popup from Backend side you can use ClientScript.RegisterStartupScript
Syntax:
ClientScript.RegisterStartupScript(Type type, string key, string script, bool addScriptTags)
Parameters
Type: The type of the startup script to register. This is of type 'Type'
key: The key of the startup script to register. This is of type String
script: The startup script literal to register. This is of type String
addScriptTags: A Boolean value indicating whether to add script tags. This is of type bool - true or false.
You can write like this:
protected void Button_clilck(Object sender, EventArgs e){
ClientScript.RegisterStartupScript(GetType(), "Key","showPopUp(),true);
}
And if you want to call your pop up method from Front End side you can simply call the JS method in asp:button by writing OnClientClick
<asp:Button ID="submitRes" CssClass="button" runat="server" ClientIDMode="Static" Text="Submit This Form Data" OnClick="Submit_Click" OnClientClick="showPopup" />

How to automatically press ENTER key/Confirm alert box with javascript/jquery

I'm writing a userscript (javascript/jquery) to automate some things in a browser game. There's an auction where products can be bought with a discount. I want a script that automatically buys goods when it has 33% discount.
The script runs on the url of the auction (greasemonkey), then checks if there are products with at least 33% discount - if that's the case then it will press the button in that row to buy the product.
The problem I'm facing now is: Once you have pressed the button, you have to confirm you want to buy the goods via an alert box. Is there a way to automate this?
I've googled and also checked stackoverflow and people say it's not possible with javascript/jquery. Is this really the case? That would mean it's basically impossible to automate buying goods in the browser game i'm playing. I was thinking of letting the script automatically press ENTER because that would be the same as clicking 'Ok' in the alert box. But that also is impossible they say. So now i'm wondering: is there a way to automate this?
This is the code behind the button:
<input id="buybutton_3204781" class="button" type="button" onclick="if(confirm('Wil je deze producten kopen?')){document.submitForm.BuyAuctionNr.value=3204781; document.submitForm.submit();}{return false;}" value="Kopen">
EDIT:
Hooray, it works by changing the attribute onClick of the button!!
This is the code used:
$('element').attr('some attribute','some attributes value');
Can be closed now, thanks alot guys, appreciate your help!!

Depending on the browser, it may be possible to overwrite window.confirm such as
(function() {
'use strict';
// Might was well save this in case you need it later
var oldConfirm = window.confirm;
window.confirm = function (e) {
// TODO: could put additional logic in here if necessary
return true;
};
} ());
I didn't do any extensive testing, but I was able to override window.alert and window.confirm in firebug at the very least.
Note that this won't help you if their scripts have gained a reference to alert / confirm already (such as var a = window.confirm; a('herp');)
An alternate approach would be to override the function of the button you are auto clicking, or issue the AJAX / POST manually using some xhr.

With JavaScript, you have the ability to alter the HTML and JavaScript code in any way you like.
I would recommend altering the OnClick function so that
<input id="buybutton_3204781" class="button" type="button"
onclick="
if(confirm('Wil je deze producten kopen?'))
{
document.submitForm.BuyAuctionNr.value=3204781;
document.submitForm.submit();
}
{
return false;
}" value="Kopen">
simply becomes
<input id="buybutton_3204781" class="button" type="button"
onclick=
"document.submitForm.BuyAuctionNr.value=3204781;
document.submitForm.submit();"
value="Kopen">

Without changing much you can try this
$(".button").each(function() {
if (this.id.indexOf("buybutton")!=-1) this.onclick=function() {
document.submitForm.BuyAuctionNr.value=this.id.replace("buybutton_","");
document.submitForm.BuyAuctionNr.submit();
}
});
I use this and onclick because I want to replace the existing onclick handler, not add one
If you just want to buy, grab the IDs and submit the form with your user script
since i do not know how you know the discount, an example could be
$(".button").each(function() {
if (this.id.indexOf("buybutton")!=-1) {
var ID = this.id.replace("buybutton_","");
if ($("#discount_"+ID).val()<30) {
document.submitForm.BuyAuctionNr.value=ID;
document.submitForm.BuyAuctionNr.submit();
}
}
});
Which will submit the first it finds. Replace the submit with $.get or post to submit all the discounted stuff

You have to replace the original system alert by the jquery modal to achieve such requirement.
The following is a tutorial to introduce jquery modal:
http://www.jacklmoore.com/notes/jquery-modal-tutorial

Javascript confirm dialog

I want to add a confirm dialog to a delete button to ask the user whether it is ok or not deleting the selected item.
If not, nothing should happend, else a url should be executed.
I know how to realize this via some Javascript code but I am looking for a solution that has less code. I mean e.g. :
Delete
Is it possible to put the whole functionality in the onClick element without having some extra Javascript in the header?

You can return the confirm() (which returns true/false), like this:
Delete
You can test it here

Better (though far from ideal!): turn it around. Don't let the link do anything, unless you got JavaScript:
<a href="#"
onclick="if confirm('Sure?') { window.location='http://mysite.de/xy/delete';}">
Click to delete
</a>
This at least prevents the link to work without JavaScript. This also reduces the risk of the link accidentally being crawled by Google, or even by some local plugin. (Image if you had a plugin that would try to load/show as thumbnail) the target page on hover of a link!)
Still, this solution is not ideal. You will actually browse to the url, and the url might show up in the history because of that. You could actually delete Bob, create a new Bob, and then delete that one by accident by just clicking 'back' in the browser!
A better option would be to use JavaScript or a form to post the desired action. You can make a request to the server with the POST method, or arguably better, the DELETE method. That should also prevent the urls from being indexed.

Consider what happens if the user has javascript disabled, or if google comes along and spiders the link. Will your entity be deleted?
A better way would be to post a form to delete.

There is a jQuery plugin that does just that: jquery.confirm.
Example:
Go to home
JS code:
$('.confirm').confirm();
If the user confirms, he is redirected to the link of the <a>, else nothing happens.

You can use this:
Download a bootboxjs from:[1]: http://bootboxjs.com/
Create the Button (HTML)
<button type="submit" id="btn">Delete</button>
Call the Dialog:
var myBtn = document.getElementById('btn');
myBtn.addEventListener('click', function(event) {
bootbox.confirm({
size: "small",
message: "Are you sure?",
callback: function (result) {
/* result is a boolean; true = OK, false = Cancel*/
if (result == true) {
alert("ok pressed");
}
else {
alert("cancel pressed");
}
}
})
});

ASP.NET/jQuery Post-Back, but not when using browser's "Back" button

I'm working on an ASP.NET Web Project with some AJAX magic. As my GridView's data needs up to 15 seconds to be gathered, I send the page to the client and fire an asynchronous update of an UpdatePanel via jQuery/JScript (see below).
This works well, so far. Now I'd like to skip this step when the user navigates to the next page (e.g. record detail view) and comes back via the "Back" button. Is there a way to get his, and what's the most elegant one?
This one does not work (hasDonePostBack's value isn't kept by the browser):
var hasDonePostBack = false;
function fRefreshAsyncOnce(id, param) {
$(document).ready(function() {
if (!hasDonePostBack) {
__doPostBack(id, param);
hasDonePostBack = true;
}
});
}
Any help would be great!
The reason why this is important: Regetting the data takes another 15 seconds. Moreover, the grid is working with controls and more client script (e.g. checkboxes that can be checked, CSS classes that are toggled, etc.), and all this should be the same after returning.
Cheers,
Matthias

You may want to look at the history point feature; you may be able to take advantage of that for this feature: http://msdn.microsoft.com/en-us/library/cc488548.aspx
However, that is the nature of the beast when triggering client-side operations... the other option is allowing the user to cancel the postback (or try to interpret a way to cancel it yourself) using this technique: http://msdn.microsoft.com/en-us/library/bb398789.aspx

Disabling an HTML button while waiting for a result

When I am clicking a submit button on my HTML form, the function related to the button is called and it does its work. After completing the work a mail notification is sent which is consuming too much time. After that a confirmation message is displayed on the same HTML page (without using Ajax; i.e., the page is refreshed).
I want to avoid letting the user click the submit button multiple times in confusion during the waiting period of sending mails. So I am thinking that I should disable the button after it is pressed once.
How can I do this?
Can you please suggest any other technique to achive this goal without disabling the button?

Simply:
<form action="file" method="post" onsubmit="this.submit_button.disabled = true;">
<input name="submit_button" type="submit" value="Submit" />
</form>
You can achieve this without disabling the button by using a nonce, however it is a bit more complex. Essentially, when the user requests the page that has the form that will be submitted, assign a unique id to that user's request (store it somewhere on the server, and make sure it's submitted along with the form). When the form is then submitted, look up the unique id to make sure it's not in process or already processed, and then if it's OK to proceed, mark the unique id as "in process", process the form, and then mark it as processed. If when you do the initial check and the page is in process or already processed, you'll need to take the necessary action (redirect them to a confirmation page if it was successfully processed, or back to the form if it was not successfully processed).

How can I do this?
You can take a look at the javascript code in this page:
http://www.codinghorror.com/blog/archives/000096.html
<input type="Button" onClick="this.value='Submitting..';this.disabled=true;" value="Submit">
Can you please suggest any other technique to achive this goal without disabling the button?
Show a busy panel:
"... Your request is being processed please wait..."
(source: vodafone.co.uk)

If you disable a button right before submitting, then the parent form will not be submitted. You need to disable the button after submitting. Best way it to use JavaScript's setTimeout() function for this.
<input type="submit" id="foo" onclick="setTimeout('document.getElementById(\'' + this.id + '\').disabled=true;', 50);">
50ms is affordable enough to give the form the chance to get submitted.
To enhance the user experience more, you could of course append a message or a loading image dynamically during the same onclick event as already suggested by others.

Assuming you don't want to disable the button you could always pop up a modal on the page. This will block the user's interaction with the page. You could throw some kind of loading spinner in there with a message that the submit is in progress.

I don't understand why it is a problem, as you are doing a regular submit, the user should see a white page while you are processing in the back end.. But in case if you want to disable the button, here is the code, use it on the button
onclick="this.disabled=disabled"

You could have the button be disabled, but still seem active to the user. In the function that gets called after the button is hit the first time, have the first thing it does set a global variable like disableButton to true. When the user presses the button, have that go to a function called something like checkSubmitStatus. If disableButton = true, return false. if disableButton = false, trigger the submit function.
You have still disabled the button, but your users can press away unaware.

I'm not submitting anything, but Google Chrome 31 doesn't update the button look while calculating, so i came up with this workaround:
<style>
.btnMenu{width:70px; font-size:12px}
.btnMenu:disabled{background-color:grey}
</style>
<input type="button" class="btnMenu" value="Total" onmousedown="b=this; b.disabled=true; b.v=b.value; b.value='Calculating...'; setTimeout('updateTotals(); b.value=b.v; b.disabled=false', 100)"/>