Canceling Button AutoPostBack - Specifics of OnClientClick implementation - javascript

When using a standard asp:Button component, it is necessary to use the following technique to cancel an automatic postback (or make a postback conditionally):
Specify the client-side operations via the Button.OnClientClick property;
Implement a logic that returns a Boolean value that indicates whether or not a postback should performed.
The following does not cancel a postback (despite of the "OnClientClickHandler" method returns "false"):
<asp:Button ID="btn" runat="server" OnClientClick="OnClientClickHandler();" />
function OnClientClickHandler() {
return false;
}
The following implementation does:
<asp:Button ID="btn" runat="server" OnClientClick="return OnClientClickHandler();" />
It looks like that this behavior is caused by specifics of the JavaScript code scope. Anyway, I am interested in the low-level implementation details of this scenario.
Why doesn't the first implementation (where there is no "return" operator before the "OnClientClickHandler" method call) work?

The reason why you need to add return is because returning false from an event handler is the way to cancel the default behavior (in this case, submit the form).
Another way to do the same is executing event.prefentDefault()
OnClientClick="OnClientClickHandler();" would be equivalent to
function onclick(){
OnClientClickHandler();
}
while OnClientClick="return OnClientClickHandler();" would be equivalent to
function onclick(){
return OnClientClickHandler();
}
Do you see the difference? In the first case you're just executing the function, but returning nothing.

from MSDN
Use the OnClientClick property to specify additional client-side
script that executes when a Button control's Click event is raised.
The script that you specify for this property is rendered in the
Button control's OnClick attribute in addition to the control's
predefined client-side script.
and also it mentions like this SubmitBehaviour
Use the UseSubmitBehavior property to specify whether a Button control
uses the client browser's submit mechanism or the ASP.NET postback
mechanism. By default the value of this property is true, causing the
Button control to use the browser's submit mechanism. If you specify
false, the ASP.NET page framework adds client-side script to the page
to post the form to the server.
<asp:Button ID="btn" runat="server" OnClientClick="return OnClientClickHandler();" UseSubmitBehavior="false" />
try like this
function CancelPostBack()
{
return false;
}
c# code. in PageLoad event.
btn.Attributes.Add("onclick","return CancelPostBack();");

Related

In Telerik ASP.Net UI Client, How can I get the mouse event object if I attach the client event inline?

<telerik:RadButton runat="server" ID="testButton" OnClientClick="onclicktestbutton" />
<script type="text/javascript">
function onclicktestbutton(sender, args) {
// I don't use window.event (it is non-standard)
}
</script>
Where can I set the event object??
I wanted to do it like this:
<telerik:RadButton runat="server" ID="testButton" OnClientClick="onclicktestbutton(event)" />
but we all know you can't insert paragraph on a telerik client event attribute because it automatically includes in the function the parameters (sender, args).
First of all, the proper RadButton event is OnClientClicked (not cancellable, postback will continue unless you set AutoPostBack="false") or OnClientClicking (cancellable). OnClientClick is the property name for asp:Button.
You can read more about attaching client side event handlers to Telerik AJAX controls in the following blog post: http://www.telerik.com/blogs/migrating-onclientclick-handlers-from-asp-button-to-telerik-s-asp-net-ajax-button. The gist:
use a function name as you have discovered OnClientClicked="someFunctionName"
use an anonymous function declaration OnClientClicked="function(sender, args){someFunctionName(sender, args, 'myAdditionalArguments');}"
The two event arguments are the standard MS AJAX convention where the first argument is always the object that raised the event (the RadButton instance in this case) and the second is event arguments with methods/fields as deemed appropriate by the creator of the code.
RadButton does not expose the event at the moment and if window.event does not suit your needs, open a feature request with Telerik.

jQuery Mobile button click event not working

I'm new to JQuery Mobile so excuse me for this probably easy question.
I have a button:
<a id="btnSort" href=# data-role="button"
runat="server" onclick="Click_btnSort">Sort</a>
and code-behind event handler:
protected void Click_btnSort(object sender, EventArgs e)
{
...
}
I've got a breakpoint at the beginning of this method, however it does not fire when I click on the button.
PS. I'm not using any field validators.
Any suggestions?
The reason your event is nog firing is because you use a html a-element, that element does not trigger a postback (maybe it does when you set the elements autopostback proerty to true, not sure if this works for a-elements).
When you want to use the ASP.NET button click event in code behind (to do server side stuff when clicking), you probably better use a ASP:Button or LinkButton element, which works out of the box.
When you want to use a client side click event (for example with jQuery, to do client side stuff when clicking), you probably better add an event listener to the element like this:
$(document).on('click', '#btnSort', function () {
// client side stuff here
});
EDIT:
See this for basic client side event binding with jQuery. If this does not look familiar, please read about JavaScript / jQuery basics, it will be worth the time
http://jsfiddle.net/6mYQN/1/
As <a> tag is not related to serverside controls so I suppose that can't happen like that way.
your code even with run at server is still will look for the Click_btnSort in javascript function no the one in code behind so you should add a function in script/javascript tag with the name you will call in onclick event.
Although this is an old post what you can do is create a
<asp:Button ID="btnServerSort" style="display:none;" runat="server" Text="SORT" OnCommand="Click_btnServerSort" ..>
with an associated server side event.
Then modify the code as follow
<a id="btnSort" href=# data-role="button" data-ajax="false" runat="server" onserverclick="Click_btnServerSort" >Sort</a>
I hope this helps.

client side click event instead of code behind

How can I make this run at server?
javascript:
function confirm_delete()
{
if (confirm("Are you sure you want to delete?")==true)
return true;
else
return false;
}
asp
div.Attributes.Add("onclick", "return confirm_delete();");
To capture an event at the server side, you need to use runat="server":
<form runat="server">
<asp:Button id="button1" Text="Click me!" runat="server" OnClick="confirm_delete" />
</form>
The event handler itself needs to be in the code behind. I don't remember if JScript is supported in ASP.net but confirm definitely isn't.
To have this run on the server, you would want to refactor your application. You would need the confirm_delete function to render the page with a form that confirms their action. This isn't so bad because you can have it there already just hidden. confirm_delete would hide the normal content and show the confirmation form. The confirmation form would need to have "OK" or cancel buttons, also hooked to back end event handlers that either execute the deletion (I assume this is where the server OnClick is already wired) or take you back to the full page view.
It's much more complex than a JavaScript confirm popup but its not too awful to do.

how to trigger updatepanel within a javascript function

i have an updatepanel in my asp.net web page. I want to trigger the updatepanel within a javascript function insead of triggering with a button.
In order to do that, i used __doPostBack('myUpdatePanel', ''); function. But i think it causes the whole page postback. My document.ready function is also executed when i call this function. I may be missing some points.
Is there any other way to trigger updatepanel within a javascript function?
I think if you put a hidden button inside the update panel and you can use the javascript to fire the click of this button, it will do what you want.
<script type="text/javascript">
function Update_UpdatePaanel() {
document.getElementById('<%= YourButton.ClientID %>').click()
}
</script>
The button MUST be inside a hidden div and DON'T set visibile="false" because if you set it to false, the control will not render and the javascript will produce errors.
<div style="display:none">
<asp:Button ID="YourButton" runat="server" />
</div>
Just create a javascript function and execute the generated postback event:
<%=ClientScript.GetPostBackEventReference(myUpdatePanel, "")%>
The above statement is put on your aspx page, and it references the exact same code generated from the server to cause a postback for your panel. You can use it by putting it inside a function on the client side:
function fncUpdatePanel () {
<%=ClientScript.GetPostBackEventReference(myUpdatePanel, "")%>;
}
Then you can attach that function to any event on your page (even a mouseover event). This example uses a server side to attach the event:
myUpdatePanel.attributes('onmouseover', 'fncUpdatePanel()')

ASP.NET: Programmatically fire a server-side event in window.opener with JavaScript

I have a DropDownList that fires off some server-side databinding in its OnSelectedIndexChanged event.
<asp:DropDownList ID="ddlGroup" runat="server"
AutoPostBack="True" OnSelectedIndexChanged="SelectGroup" />
Elsewhere in the page, some JavaScript opens a popup. When the popup is filled out and submitted, I want to use JavaScript to fire that OnSelectedIndexChanged event in the opener page. I found some other code that does something similar:
if (window.opener != null ) {
var cf = window.opener.document.forms['aspnetForm'];
if (!cf) {
cf = window.opener.document.aspnetForm;
}
cf.__EVENTTARGET.value = "prAdded";
cf.__EVENTARGUMENT.value = "winClosed";
cf.submit();
}
I think this is what I'm looking for, but I'm not sure what should go in the EVENTTARGET and EVENTARGUMENT parts, or even if I need those at all. I want to specifically fire the OnSelectedIndexChanged event handler for ddlGroup. Is this possible/practical?
Secondary question: Can I make the parent page refresh AFTER I run server-side code in the popup?
Eh, you could do it that way, but I'd just use __doPostback() instead. That sets __EVENTTARGET and __EVENTARGUMENT to the two parameters, and assuming your first parameter is the UniqueID of an UpdatePanel, causes just that UpdatePanel to refresh.
So either you can set things up so refreshing the updatepanel does what you want to happen, or you can check those values on postback -- Request.Form["__EVENTTARGET"] ... and go from there.

Categories

Resources