I have the following obout control on my page:
<cc1:ComboBox ID="ActivityTypeComboBox" runat="server" Width="100" AllowEdit="False">
<ClientSideEvents OnSelectedIndexChanged="alert('x')" OnItemClick="alert('y')" />
</cc1:ComboBox>
Both of the ClientSideEvents fire when the page first loads but not after that when I actually do the events.
Any idea why or what I am missing or doing wrong?
Thanks!
Don't know about "Obout" controls, but at least for Infragistics ones the ClientSideEvents only contain the function names, not actual JavaScript code.
If I'm correct, you'd have to do something like this:
<cc1:ComboBox ID="ActivityTypeComboBox" runat="server" Width="100" AllowEdit="False">
<ClientSideEvents OnSelectedIndexChanged="onActivityTypeChanged" OnItemClick="onActivityTypeClicked" />
</cc1:ComboBox>
Then in JS:
function onActivityTypeChanged()
{
//...
}
function onActivityTypeClicked()
{
//...
}
The JS functions might also get some additional parameters from the control, but you'd have to consult the documentation for that.
Related
I use Telerik radWindowManager to display alert windows.
I have code like this:
<telerik:RadWindowManager ID="window1" runat="server" ReloadOnShow="true"
EnableEmbeddedBaseStylesheet="false" EnableEmbeddedSkins="false" OnClientClose="javascript:alert('test')">
...
</telerik:RadWindowManager>
The problem is when I use this code without "OnClientClose" it works fine but when I add "OnClientClose" the alert is not displayed.
Thanks.
The OnClientClose attribute takes pointer to a JS method, not a call.
Which is why Nima M's solution works
From the Telerik website, RadControls for ASP.NET AJAX > Documentation > Client-Side Events:
The RadWindow control has a number of properties whose value is the name of a javascript function that executes when specific client-side events occur.
That is, not inline JavaScript. The equivalent properties on the RadWindowManager class work the same way.
You can probably write a separate method to handle OnClientClose:
<telerik:RadWindowManager ID="window1" runat="server" ReloadOnShow="true"
EnableEmbeddedBaseStylesheet="false" EnableEmbeddedSkins="false" OnClientClose="OnClientCloseHandler">
...
</telerik:RadWindowManager>
<telerik:RadCodeBlock ID="rcbModal" runat="server">
<script language="javascript" type="text/javascript">
function OnClientCloseHandler(radWindow) {
//Do Domething Here
}
</script>
</telerik:RadCodeBlock>
I have the following markup. The errorPanel was first only used to show server side exception messages, and works fine like that. Now I'd like to incorporate my validation summary into that same errorPanel.
<asp:Panel ID="errorPanel" runat="server" CssClass="error" Visible="false">
<div style="float: right;">
Close</div>
<asp:Label ID="errorLabel" runat="server"></asp:Label>
<asp:ValidationSummary ID="validationSummary" runat="server" EnableClientScript="true" />
</asp:Panel>
<fieldset>
<legend>Create New Role</legend><asp:Label ID="newRoleNameLabel" runat="server" AssociatedControlID="newRoleNameText">Role Name:</asp:Label>
<asp:TextBox ID="newRoleNameText" runat="server" Width="100px"></asp:TextBox>
<asp:RequiredFieldValidator ID="newRoleNameRequired" runat="server" EnableClientScript="true" ControlToValidate="newRoleNameText" Display="Dynamic" ErrorMessage="Please enter a role name.">*</asp:RequiredFieldValidator>
<asp:Button ID="createButton" runat="server" Text="Create" OnClick="createButton_Click" />
</fieldset>
My problem now is that the required validation happens client side, and I want to keep that, so I have no server side opportunity to make errorPanel visible, in order to make the validation summary visible.
I see I have two options: Do validation server side, and use my code there to make the panel visible, or hook into the client side code somehow and catch an event there when the summary should be made visible, and then also make the errorPanel visible. How could I go about the latter?
Here is an approach which is really not recommended, but I had fun writing it, and it might lead you to some zany ideas!
(p.s. I am using jQuery to make life easier)
Take the Visible="false" off your asp:Panel, we'll do it all client side.
<asp:Panel ID="errorPanel" runat="server" CssClass="error">
Now, at document ready time we will hide the panel, and mess with ASP.NET's validation code.
$(document).ready(function () {
// This is more like it!
$("#<% =errorPanel.ClientID %>").hide();
eval('ValidatorCommonOnSubmit = ' + ValidatorCommonOnSubmit.toString().replace('return result;', 'myValidatorHook(result); return result;'));
});
That eval takes the ValidatorCommonOnSubmit() function which is generated by the ASP.NET validators, and modifies it in place so just before it returns its result, it calls myValidatorHook() with that result.
(see this StackOverflow question for where I got the idea)
Now, our hook:
function myValidatorHook(validated) {
if (validated) {
$("#<% =errorPanel.ClientID %>").hide();
}
else {
$("#<% =errorPanel.ClientID %>").show();
}
}
Simple enough - if the validator returned true (page validates), hide the panel; if it returned false (page did not validate), show it.
Use at your own risk! If the JavaScript generated by the ASP.NET validators changes, this will break horribly - but I did test it in ASP.NET 2.0, 3.5 and 4.0, and it worked the same in all three.
I had a similar problem where I had a containing div around a set of ASP validation fields, I wanted to only show the container if there was an error to show.
I used jQuery to hide the container as per Carson63000's answer, but then used jQuery to look at the visibility of the errors and show the container again if something was visible.
jQuery(function () {
jQuery(".checkout-validation").hide();
var show = false;
jQuery(".checkout-validation span").each(function () {
if (jQuery(this).css('display') != 'none' && jQuery(this).css('visibility') != 'hidden') {
show = true;
}
});
if (show == true) {
jQuery(".checkout-validation").show();
}
});
The only clarification other clarification I would add is that standard validation fields are set to visibility: hidden by default and Display="Dynamic" validations are display: none
Old question, but anyway.
I found one simple and clean solution to this. No server-side, no javascript needed.
You can simply put your content of errorPanel in HeaderText of ValidationSummary Control.
Like said on MSDN site:
The HeaderText property is not HTML encoded. Therefore, HTML tags can
be included in HeaderText.
Your example:
<asp:ValidationSummary ID="validationSummary" runat="server" EnableClientScript="true" CssClass="error"
HeaderText='<div style="float: right;">Close</div><span ID="errorLabel" runat="server"></span>'/>
<fieldset>
...
And PLBlum also nailed it on Microsoft asp.net forum:
I'm trying to use the ImageButton control for client-side script execution only. I can specify the client-side script to execute using the OnClientClick property, but how do I stop it from trying to post every time the user clicks it? There is no reason to post when this button is clicked. I've set CausesValidation to False, but this doesn't stop it from posting.
I know this problem has already been answered but a simple solution is to return false from the HTML onclick method (i.e. the ASPX OnClientClick method) e.g.
<asp:ImageButton ID="ImageNewLink" runat="server"
ImageUrl="~/images/Link.gif" OnClientClick="DoYourStuff(); return false;" />
Returning false stops the browser from making the request back to the server i.s. stops the .NET postback.
Here's one way you could do it without conflicting with the postback functioning of other controls:
Define your button something like this:
<asp:Button runat="server" Text="Button" UseSubmitBehavior="false" OnClientClick="alert('my client script here');my" />
The "my" ending in the handler for OnClientClick is a way to alias asp.net's __doPostBack client event that forces the postback; we simply override the behavior by doing nothing similar to this script:
<script type="text/javascript">
function my__doPostBack(eventTarget, eventArgument) {
//Just swallow the click without postback of the form
}
</script>
Edit: Yeesh, I feel like I need to take a shower after some of the dirty tricks that I need to pull in order to get asp.net to do what I want.
Another solution would be to define a PostBackUrl that does nothing
<asp:imagebutton runat="server" PostBackUrl="javascript:void(0);" .../>
<image src="..." onclick="DoYourThing();" />
Use a server side Image control
<asp:Image runat="server" .../>
Pretty sure you can add the client onclick event to that.
Solution 1
<asp:ImageButton ID="btn" runat="server" ImageUrl="~/images/yourimage.jpg"
OnClientClick="return false;" />
OR
Solution 2
<asp:ImageButton ID="btn" runat="server" ImageUrl="~/images/yourimage.jpg"
OnClientClick="yourmethod(); return false;" />
In addition (solution 2), your javascript method may be in this form
<script type="text/javascript">
function yourmethod() {
__doPostBack (__EVENTTARGET,__EVENTARGUMENT); //for example __doPostBack ('idValue',3);
}
</script>
in code behind
protected void Page_Load(object sender, System.EventArgs e)
{
if (this.IsPostBack) {
string eventTarget = this.Request("__EVENTTARGET") == null ? string.Empty : this.Request("__EVENTTARGET");
string eventArgument = this.Request("__EVENTARGUMENT") == null ? string.Empty : this.Request("__EVENTARGUMENT");
}
}
This works Great for me:
Use OnClientClick to write your script and PostBackUrl="javascript:void(0);" to avoid postback.
<div class="close_but">
<asp:ImageButton ID="imgbtnEChartZoomClose" runat="server" ImageUrl="images/close.png" OnClientClick="javascript:zoomclosepopup();" PostBackUrl="javascript:void(0);" />
</div>
Use OnClientClick to write your script and PostBackUrl="javascript:void(0);" to avoid postback
I have an label "test" comimg from .cs [c# code] text="data saved successfully" . but once I click the save button i need to clear its text
right now I have 3 required field validators. with message [cannot be blank, cannot be blank,cannot be blank,] as user as clicked the save button I need to clear the text of the label. But need to show the required fields validator message
any idea how to solve it
thank you
make a javascript function like:
<Script type="text/javascript">
function clearText(cntId) {
var cnt = document.getElementById(cntId);
cnt.value ="";
return false;
}
</script>
then on your submit button attach a client side event
<asp:Button id='btnSubmit' Text='Submit' onClientClick='clearText("<%this.lblLable.ClientId%>");' .... />
On the client-side use a script like this
<script type="text/javascript">
function clearLabelValue(){
var labelObj = document.getElementById("<%= myLabel.ClientID %>");
labelObj.value = "";
}
</script>
<asp:Label id="myLabel" runat="server" Text="Some text"/>
<asp:Button id="myButton" runat="server" Text="Submit" OnClientClick="clearLabelValue();return false;"/>
Didn't test it in detail, but should work.
It is not really clear what you want to achieve, although I have the feeling there may be a "better" (more standard compliant) way of achieving what you want. Maybe you could describe more clearly what you want, so we may be able to help you.
In these situations when a particular button has validation attached to it and also we need to fire some javascript what is done is to define a javascript function which is called on click of save button.
What this javascript function does:
This function will take your label and will set its value as blank so that the text is cleared.
Now in order to validate the page which happens internally (in case the javascript function is not written on the save button click) we need to explicitly call what asp.net call for client side validation.
There is a function page_ClientValidate which needs to be called from this javascript function so that validation is still done and we also do some other processing like clearing the label in this case.
<!--for cleaning to label ; -->
document.getElementById("MyLabel").innerHTML = "";
<!--and label is like;-->
<asp:Label ID="MyLabel" runat="server" ></asp:Label>
You can simply achieve this using below script:
<script type="text/javascript">
function clearLabelValue(){
document.getElementById("<%= myLabel.ClientID %>").innerText=""
}
</script>
<asp:Label ID="myLabel" runat="server" ></asp:Label>
<asp:Button id="myButton" runat="server" Text="Submit" OnClientClick="clearLabelValue();"/>
I have a server side button as
<asp:Button ID="btnSummary" runat="server" OnClick="btnSummary_Click" Text="Next" />
I want to attach the jQuery Click event using its ID and NOT using the alternative class attribute way.
I tried to attach the click event as:
$("#btnSummary").click(function()
{
alert("1");
});
But, its click event is not fired. Also, I have also tried $("id[$btnSummary]").
Is there any way to attach the click event on asp:button using jQuery without the class attribute on the button?
Some of the options you have can be found here
How to stop ASP.NET from changing ids in order to use jQuery
EDIT:
After reading your comments on other answers, it sounds like you need to bind the onclick event handler inside of ASP.NET AJAX's pageLoad, so that it is bound on every postback, including asynchronous postbacks. On the other hand, $(document).ready() binds only once on initial page load
function pageLoad(sender, args)
{
$("#<%=btnSummary.ClientID %>").click(function()
{
alert("1");
});
}
Dave Ward wrote a nice article on the difference between pageLoad and $(document).ready().
Add ClientIDMode="Static" to your asp:button, something like this:
<asp:Button ID="Button1" runat="server" ClientIDMode="Static" Text="Button" />
This will make the ID remain the same. It disables the autogenerated names for this control.
Here is the reference for this: http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientid.aspx
Check if the id attribute is in the html source when you run the site.
Do you have the click function inside a document ready function ?
-
$(document).ready(function() {
// put all your jQuery goodness in here.
});
EDIT:
Since its a server side control and the ID changes, you will need to dynamically update the javascript on every page load with the variable.
ASP.NET generates a UniqueID for client-side stuff, you can use that to bind the event. That ID is generated based on the position of that Control inside a ControlCollection and different INamingContainers, it's ugly and you can't guess it...
Add this kind of code somewhere on your page to hook up that button.
<script type="text/javascript">
$(function() { $("#<%=btnSummary.ClientID%>") }).click(function(){/*...*/});
</script>
I'm little confused here now.
Let me explain:
1. I added a button on the page:
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="Button" />
<div>
2. Then I added a JavaScript and jQuery:
<script type="text/javascript">
$(document).ready(function() {
$("#Button1").click(function() {
alert("Hello world!");
});
});
</script>
3. The generated html is this:
<div>
<input type="submit" name="Button1" value="Button" id="Button1" />
<div>
Now, I don't see ASP.NET (asp.net 3.5) changing the ids. Why do I see
different behavior?
Btw. This does work when I hit the button!
Thanks.
Assigning the selector to the class worked for me.
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="My Button" CssClass="myButton"/>
<script>
jQuery(".myButton").click(function () {
alert("clicked");
});
</script>
Please use the following syntax : $("[id*=Button1]") to reference any asp control
use pageLoad when using updatepanels because document.ready only runs once on initialization of the page and loses its binding on partial postbacks.
PageLoad gets run everytime so will rebind every partial postback.
I had the same problem, this works for me
<asp:Button ID="Button1" runat="server" Text="ASP Button" OnClientClick="return false;" />
Its the addition of return false that seems to make the difference. Hope this helps.
regards
Peter
ASP.NET adds to you id (example: id "selectButton" becomes
"ctl00_middleContent_gvPeople_ctl04_selectButton");
Use the jquery syntax to search for the part of the id that doesn't change.
$("[id='_selectButton']")
Please try below:
document.getElementById("<%=button1.ClientID %>").click();
Wrap this <asp:Button/> inside a html <div> container.
<div id="testG">
<asp:Button ID="btn1" runat="server" Text="TestButton" />
</div>
$(document).ready(function () {
$("#testG").click(function () {
alert("1");
//your code
});
});
You have reached there. There are two ways i guess,
Either inspect the control from Browser and See the Control ID, looks like ct1000_ btnSummary. use this ID on Click event of jQuery.
replace code
$("#ctl00_contentplcedholder_btnSummary").click(function()
{
alert("1");
});
Next one is quite easy just add an attribute ClientIdMode="static" to your control and use your actual Jquery click event it will fire.