I have button
<UpdatePanel>
<asp:Button CssClass="btn-send" runat="server"
OnClick="SendMessage" Text="Send" />
</UpdatePanel>
Server side method
protected void SendMessage(object sender, EventArgs e){...}
I need to make little delay and show progress bar animation before POST. I would like to use javascript (jquery) for this.
How to make this delayed submit
1) without server delay
2) without second button with client script, which click server button?
You could try something like this...
<asp:Button runat="server" OnClick="SendMessage" Text="Send"
OnClientClick="return sendMessage(this);" />
<script type="text/javascript">
var sendBtn = null;
function sendMessage(btn){
if(sendBtn==null){
sendBtn = btn;
window.setTimeout(function(){ sendBtn.click(); }, 1000);
// DO YOUR VISUAL STUFF HERE
return false;
}else{
return true;
}
}
</script>
The idea is that the clicking of the button first stores the button object, sets a timeout to click the button, and then does the visual things you want to do.
Then after one second, the button is clicked again (this time not doing the timeout section)
(I have not had time to learn jquery yet, but I'm sure there is a simpler way to do this with it)
You can do this without jQuery, just using a regular Javascript setTimeout.
You can capture the onsubmit of your form, and then when you have submit (your button is pressed) you open your wait message of the page. So you add this line on Page_Load()
Page.Form.Attributes["onsubmit"] = "return AllowFormToRun();";
and the javascript:
<script>
function AllowFormToRun()
{
setTimeout(OpenWaitMsg, 10);
return true;
}
function OpenWaitMsg()
{
// open here the wait div
}
</script>
You should use Event.preventDefault() on the submit button click to prevent the page from submiting on click. Then start your progress animation, when its complete, call your form submit from the js.
$("form").submit(function(e){
var form = this;
e.preventDefault();
function animation(total,callback){
//perform your animation
callback();
};
animation(100,function(){
form.submit();
});
});
Related
I have a asp button that I want to be clicked by a javascript function when I click a regular html button. However when it gets to the button.click() there is no effect whatsoever. If I look in the debugger, everything else in the function acts as normal, and if I click on the asp button myself it runs the code I expect it to or if I call the joingameBtn_Click in the console it also properly clicks the button. I created the buttons dynamically on page load in a loop so that each has an onclick function that passes an id unique to it.
function joinGameBtn_Click(campaignid) {
var temp = document.getElementById('CampaignID');
temp.value = campaignid;
var button = document.getElementById("CampaignBtn");
button.click();
}
function createFunction(id) {
return function() { joinGameBtn_Click(id); };
}
//Where the button is created
var hoverbutton = document.createElement('button');
hoverbutton.id = 'hoverbutton';
var func = createFunction(campId);
hoverbutton.onclick = func;
After reading some other posts I saw that sometimes the dynamically created buttons could be the problem in that the event listener isn't tied to them. Some suggestions mentioned making sure the document was ready so I tried this as well to no avail.
$(document).ready(function() {
$(document).on('click', '#hoverbutton', function () {
$("#CampaignBtn").click();
});
});
EDIT: Here is the asp.net button in question.
<asp:Button ID="CampaignBtn" runat="server" Text="Button" style="display:none;" OnClick="joinGame_Click" ClientIDMode="Static"/>
Here is the server side button click function:
public void joinGame_Click(object sender, EventArgs e)
{
Session["campaignid"] = int.Parse(CampaignID.Value);
Response.Redirect("CampaignSession.aspx");
}
I changed my asp button to a regular html button which seemed to resolve the issue
<button onserverclick="joinGame_Click" runat="server" id="CampaignBtn" ClientIDMode="Static">Button</button>
Not sure if fixing the issues with duplicate id's played a role in it as well.
I am working on ASP.NET 3.5 webform application. I have submit button in webform
<cc1:FlatButton ID="btnSubmit" runat="server" class="positive" Text="Submit Assessment" OnClick="btnSubmit_Click" RemoveDiv="True" />
which call OnClick="btnSubmit_Click code-behind.
protected void btnSubmit_Click(object sender, EventArgs e)
{
....
Now I have additional requirement, provide messagebox i.e. alert which appear when user click on above submit button, and based on user option selection, form submit or not
My question is how can I prevent to call code-behind btnSubmit_Click event based on user selection i.e. e.preventDefault() when user select no otherwise carry on call to btnSubmit_Click
now below code doesn't stop calling server code because I am calling e.preventDefault() at later stage of process flow.
is there any way I can achieve this as for pause server calling???
JQuery Code
$(document).ready(function () {
createDialogElements();
$("#ctl00_ContentArea_btnSubmit").click(function (e) {
$("#WindowMessageDialog").jqxWindow('open');
$("#messageDialog_btn_no").click(function () {
alert("answer is no");
e.preventDefault();
});
$("#messageDialog_btn_yes").click(function () {
alert("answer is yes");
});
});
You can use the OnClientClick property for server controls in asp.net.
The problem is, when you click the submit button, the function defined in OnClientClick will be triggered and its result must be true of false, to continue or cancel the submit.
In your example, you're opening a dialog and waiting for an user click, but the javascript will not stop for waiting that action from user.
If it was a simple validation in javascript, like a required field, or any expected value would be very simple.
There are some solutions. The most simple (but not the better) I could think is to create a variable to control if your form can be submitted. When you click the submit, it will call a javascript function that open you dialog, and return false, so the form will not be submited.
When the dialog closes, if the form is valid, it will submit the form.
Try this, to set a client function on click:
<cc1:FlatButton ID="btnSubmit" runat="server" class="positive" Text="Submit Assessment" OnClick="btnSubmit_Click" OnClientClick="if (validForSubmit) return true; else return validateForm();" RemoveDiv="True" />
And replace your jQuery code by this Javascript function:
var validForSubmit = false;
function validateForm() {
$("#WindowMessageDialog").jqxWindow('open');
$("#messageDialog_btn_no").click(function () {
alert("answer is no");
return false;
});
$("#messageDialog_btn_yes").click(function () {
alert("answer is yes");
// set form as valid for submit
validForSubmit = true;
// fire the click, because the form is now valid
$("#ctl00_ContentArea_btnSubmit").click();
return true;
});
return false;
}
You may need to fix something, but this is the idea, hope it helps.
I have tried the following two scripts to prevent user from submitting the below form more than one. The submit button is being disabled in both cases, however the form is not being sent (placed a break point and the OnClick method is not being called)
Button:
<asp:Button ID="BtnSubmit" runat="server" Text="Submit" onclick="BtnSubmit_Click" />
Scripts:
<script type="text/javascript"> $("#BtnSubmit").click(function () {
var button = $(this);
button.prop('disabled', true);
setTimeout(function () {
button.prop('disabled', false);
}, 5000);
});</script>
and
$('form').on('submit', function (e) {
$('[type="submit"]').prop('disabled','disabled');
});
One quick idea is to change the type of the button to "button" (instead of "submit"), instead of disabling it. That way, it won't submit the form if clicked again at least.
Another other idea comes from here: http://encosia.com/disable-a-button-control-during-postback/ -
The important text from the link:
The one pitfall that comes with disabling a submit button on the
client side is that it will cancel the browser’s submit, and thus the
postback. Setting the UseSubmitBehavior property to false tells .NET
to inject the necessary client script to fire the postback anyway,
instead of relying on the browser’s form submission behavior.
Following that, your button would look something like this:
<asp:Button runat="server" ID="BtnSubmit" Text="Submit"
OnClientClick="this.disabled = true; this.value = 'Submitting...';"
UseSubmitBehavior="false"
OnClick="BtnSubmit_Click" />
I don't like the inline OnClientClick, so you should try taking it out and keeping your jQuery click handler, as well as setting the UseSubmitBehavior appropriately. I have a feeling the order of events shouldn't matter.
For the former, you would have to do instead:
<script type="text/javascript">
$("#<%= BtnSubmit.ClientID %>").click(function () {
var button = $(this);
button.prop('disabled', true);
setTimeout(function () {
button.prop('disabled', false);
}, 5000);
});</script>
The actual ID is going to be way longer than btnsubmit, unless you have ClientIDMode="Static" defined. (something like ct100_contentplaceholder_btnsubmit). Using the ClientID property from the server locates the proper ID of the control.
I have an input as count named in a repeater with hdncount hidden input. And I have a server side button out of repeater. This script runs onblur event of count. I want to trigger server side button's click event if client click OK button on confirmation. What should I do to do that?
<script type="text/javascript">
function changeItemCount(input) {
var hdnCount = $(input).closest("div").find("input[id=hdnCount]").val();
var crrCount = $(input).closest("div").find("input[id=count]").val();
if (hdnCount != crrCount) {
var answer = confirm("Ürün adedi değiştirilecektir. Onaylıyor musunuz?");
return answer;
} else {
return true;
}
}
</script>
How to fire a button click event from JavaScript in ASP.NET
var answer = confirm("Ürün adedi değiştirilecektir. Onaylıyor musunuz?");
if(answer)
__doPostBack('btnSubmit','OnClick'); //use the server-side ID of the control here
Use OnClientClick together with OnClick
<asp:Button ID="btnGo" runat="server" Text="Go" OnClick="btnGo_Click" OnClientClick="return CheckGoJSEvents();" />
EDIT:
Didn't see that you had the function execute on the blur event. In that case you would not use the OnClientClick of the button. The answer posted by mattmanser would be correct.
If you wanted it to function from the button click, then you could use this method. Sorry for the confusion.
I have a strange problem, it seems, that I don't know how to solve.
I have a button like this:
<asp:Button ID="btnSave" runat="server" ClientIDMode="Static" Text="Save" OnClientClick="return ConfirmSave();" OnClick="btnSave_Click" />
If I write my client function like the following, it works as expected:
function ConfirmSave()
{
return confirm('Confirm?');
}
But I should check, inside the function, for the confirm result, like this:
function ConfirmSave()
{
if (Page_ClientValidate('validationGroup'))
{
var conf = confirm("Confirm?");
if (conf)
{
$('#btnSave').attr('disabled', 'disabled');
}
return conf;
}
else
return false;
}
Doing this, the page postback but the server click event doesn't fire.
Anyone could help? Thanks
use a timeout to disable the button immediately after your code completes and the submit happens.
if (conf)
{
setTimeout( function() { $('#btnSave').attr('disabled', 'disabled') }, 0 );
}
Yes its fires because the Button is input with submit type.
You probably have some other error, maybe a duplicate of your button id, in the page (because you have set it on static mode).
Check if you have give the btnSave again somewhere else, or check also if you have any JavaScript error.
(After your page is render, on your browser see the source code of your page and search for the btnSave id if exist more than one time)
If you have a method called btnSave_Click() in your code behind then when you post back it will fall into your Page_load method first and then fall into that method. If you are using VB then you will need a method with Handles btnSave_Click() after it.