Using OnClick and OnClientClick together doesn't work - javascript

I am using RadButton and RadWindow. On my RadButton I am trying to use OnClick and OnClientClick together to show a popup first and then go to a page via a server call.
<div class="actionButtons">
<telerik:RadButton ID="btnMedLogin" CssClass="actionButton secondary" runat="server" Text="Doctor Login"
SingleClick="true" SingleClickText="Logging in" OnClick="btnDoctor_Click" OnClientClick="openwin();return false">
</telerik:RadButton>
</div>
When I just put
OnClick="btnDoctor_Click"
It works fine. however I want my radwindow modal to show as well so I put
OnClientClick="openwin();"
but it isn't working. I tried OnClientClicked but not working either.
Here is the rest of the code
function openwin() {
window.radopen(null, "RadWindow1");
}
<telerik:RadWindowManager ID="RadWindowManager1" runat="server" Width="500px" Height="500px">
<Windows>
<telerik:RadWindow ID="RadWindow1" runat="server" Modal="true" Behaviors="close" Title="Countdown Clock"> <ContentTemplate>
<div id="timerHorizontal">Some Text</div>
</ContentTemplate> </telerik:RadWindow>
</Windows> </telerik:RadWindowManager>
How can I make it so it goes to the page and my radwindow pop up shows up?

Right name of the property is OnClientClicked, and it should be given a function name, so:
OnClientClicked="openwin"
This comes directly from docs:
Sets a name of a JavaScript function that will be called when the RadButton is > clicked, after the OnClientClicking event.

While the previous answer (to pass only the function name to the OnClientClicked property) is absolutely true, a subsequent postback will destroy your RadWindow. Thus, you will need to use AJAX for this RadButton so it does not dispose the RadWindow.

Related

Why changing text of Textbox by Javascript does not trigger OnTextChanged in Asp .Net

I am using Visual Studio 2012. It contains the following textbox:
<asp:TextBox ID="txtdate" runat="server" OnTextChanged="txtdate_TextChanged" AutoPostBack="true"></asp:TextBox>
<img src="../img/scw.gif" title='Click Here' alt='Click Here' onclick="scwShow(scwID('ContentPlaceHolder1_txtdate'),this); setcalender();" />
On clicking on the image a Calendar opens in which the user can select the date. Now if I enter the date manually by typing and then press the Enter key txtdate_TextChanged method is called but the change has to be done using the Calender. So I want to know why and how the browser/server is able to detect that the change is being done by Javascript.
And is there any way I can call the txtdate_TextChanged method in javascript.
Thanks in advance.
As you are saying that you click on the image and not the textbox it means that the textbox was never in focus and javascript functions do not trigger server side functions if they are called along with the server side functions like
<asp:Button runat ="server" ID="btn" OnClick="btn_Click" OnClientClick="return check();" />
where in javascript function check() you do your validations and return true.
So you have to do this in javascript on the onclick eventof your Calender
__doPostBack("txt_sssn_dt", "TextChanged");

how to disable button after first click in javascript

I am new to C#. I have a save button inside InsertItemTemplate. I have used the following code to disable the button after first click in java script but its not even working for the first click please help me.
<asp:ImageButton ID="imgbtnSave" runat="server" CommandName="Add" CausesValidation="true" OnClientClick="this.disabled='true';return true;" />
You are modifying the "disabled" property of the DOM object on the browser, but the button will do a post back to the server when it's clicked, so any change to the DOM will be lost.
On the function where you handle the command "Add" in your server code you must retrieve the button from the InsertItemTemplate and set its "Enabled" property to false, that will disable the control from the server side.
If you want to avoid multiple clicks while the page has not been reloaded then you need a client function to avoid this, something like this:
<asp:ImageButton ID="imgbtnSave" runat="server" CommandName="Add" CausesValidation="true" OnClientClick="return checkEnabled(this);" />
<!-- somewhere in your page -->
<script>
function checkEnabled(item)
{
if(item.disabled != 'true')
{
item.disabled = 'true';
return true;
}
return false;
}
</script>

How can I refer to an ImageButton in jquery?

I have an html page.
There is a div in the body of the html page where I added some buttons and images.
<div id="div_one">
<button id="button_one">
<asp:Image id="image_button_one" ImageUrl=".." runat="server">
</button>
</div>
Up this div there is a form where I put inside an:
<form..>
<asp:ImageButton id="id_one" runtat="server" ImageUrl=".." visible="false">.
</form>
The buttons have a jquery/javascript associated.
When I click on the button "button_one" for example, there are some css that modify the page and nothing else.
The point is that: when jquery is executed ($("#button_one").click(){..}) I want to visualize the ImageButton and eventually, if there is a click on that, change the page.
Is possible to refer to that ImageButton to visualize it and use it if necessary?How?
First of all make its ClientIDMode Static :
<form..>
<asp:ImageButton id="id_one" runtat="server" ClientIDMode="Static" ImageUrl=".." visible="false">.
</form>
JQUERY:
$("#id_one").click(function(){
// do something here
})
For Visualizing it:
$("#id_one").show();
UPDATED:
In Visible = "false" case control is not rendered on Client Side so it's not accessible via client side script, instead of setting visible to do set css property like this:
<asp:ImageButton id="id_one" style="display:none;" runtat="server" ImageUrl=".."
visible="true">

how to call javascript from asp.net HyperLink control

I simply want to call a JavaScript function from asp.net hyperlink
im using http://orangoo.com/labs/GreyBox/ my requirement is to show thumbnail on hyperlink and on click show full image. Should I use another control?
my code is below:
<asp:HyperLink ID="Hyperlink" runat="server" CssClass="Screenshot" ImageUrl="App_Themes/White/Images/thmb_screenshot_1.png"
NavigateUrl="App_Themes/White/Images/screenshot_1.png" ToolTip="screenshot 1" />
<script language="javascript" type="text/javascript">
//Greybox Image popup window
function OpenImage(url) {
var caption = "Home";
return GB_showImage(caption, url)
}
</script>
how can I use
onclick="OpenImage(this.src);
or
OnClientClick="OpenImage(this.src);
I know this is old but to anyone interested, just add onclick and it will work fine. The extra attribute (even though it doesn't show up on intellisense) will pass through to the rendered markup.
<asp:HyperLink ID="HyperLink4" runat="server" onclick="logDownload();" NavigateUrl="~/download/Sample-Icons.zip">Download Icons</asp:HyperLink>
If you use a LinkButton instead, you can use the OnClientClick property to execute a JavaScript function. Using the HyperLink control, you can use the NavigateUrl property like this:
<asp:HyperLink ID="Link1" runat="server"
Text="Click Me!"
NavigateUrl="javascript:OpenImage('App_Themes/White/Images/thmb_screenshot_1.png');">
</asp:HyperLink>
Here's an article that discusses it:
http://gchandra.wordpress.com/2007/09/27/call-javascript-function-inside/
I know this is old, but for anyone looking to do this on the server side and not through the markup, you can do.
var hyperLink = new HyperLink { Text = "Display text", ID = "hyperlinkId"};
hyperLink.Attributes.Add("onclick", "javascriptMethod()");
It looks like you are basically there, what's wrong with this?
<asp:HyperLink ID="Hyperlink" runat="server" OnClientClick="OpenImage(this.src)" />

Getting ClientID of control in RadGrid edit form

I have Telerik RadGrid with a custom edit form. In my edit form there is a RadDatePicker to which I have added a custom footer template containing a 'Today' button.
In the OnClick event of the button I call a Javascript function which takes the control ID to set the selected date.
However, because the control is inside the edit form there is no variable created for it and the compiler throws an error when I try getting the client ID.
The RadDatePicker is declared with:
<telerik:RadDatePicker ID="ControlName" runat="server" SelectedDate='<%# Bind("Field") %>'>
<Calendar ID="Calendar1" runat="server">
<FooterTemplate>
<div style="width: 100%; text-align: center; background-color: Gray;">
<input id="Button1" type="button" value="Today" class="button"
onclick="GoToToday('<%= ControlName.ClientID %>')" />
</div>
</FooterTemplate>
</Calendar>
</telerik:RadDatePicker>
The error I get is CS0103: The name 'ControlName' does not exist in the current context on the line referencing the ClientID.
Is there another way in which to get the ID to pass to the Javascript function?
I resorted to wrapping the Telerik RadGrid with a RadAjaxPanel and then in the server side code for the bind event I used the Ajax panel to set some Javascript variables:
RadAjaxPanel1.ResponseScripts.Add(string.Format("window['ControlNameId'] = '{0}';", ControlName.ClientID));
I then added a client side event handler to the DatePicker: ClientEvents-OnPopupOpening="AddButtonClickEvent"
The page then includes the following Javascript to bind the click event handler using jQuery:
function AddButtonClickEvent(sender, eventArgs) {
var cal = window['ControlNameId'];
$('#Button1').bind('click', function() {
GoToToday(cal);
});
}
And it all works as expected.
Try:
OnClick=<%# "GoToToday('" + ControlName.ClientID + "')" %>
You could also set the event handler in the page_load event.
Maybe ClientEvents-OnLoad event of controls on form will help? It's not very beautiful, but seems to work.
First make script on page
<script type="text/javascript">
var textBoxFromFormClientObject;
function onTextBoxLoad(sender) {
textBoxFromFormClientObject = sender;
}
</script>
Then in aspx, for control on edit form that you need to get on client,
add event like this
<rad:RadTextBox ID="txSomeTextBoxe" runat="server"
ClientEvents-OnLoad="onTextBoxLoad"/>
So, when you press edit or insert button on grid, and form will be shown - global variable in javascript will be set. And you can use it to manipulate textbox. Only problem is that you need event like this for each control on form, if you want to manipulate all controls =(

Categories

Resources