Develop Reference

Using OnClick and OnClientClick together doesn't work

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.

Control is not declared. It may be inaccessible due to its protection level

I'm really stuck and I've tried all the other examples but nothing works. I'm fairly new to ASP.NET but learning fast!
I want to use the jQuery datepicker and I am inserting this script
<script>
$(document).ready(function () {
$(function () {
$("#" + '<%=txtDOB.ClientID%>').datepicker();
});
});
</script>
and my control on the aspx page is
<asp:TextBox ID="txtDOB" CssClass="form-control" runat="server"></asp:TextBox>
As soon as I close the the server tag %> the red line appears under the txtDOB control and says:
txtDOB is not declared. It may be inaccessible due to its protection level.
I've made the class public in the code behind but doesn't make any difference. I've also moved the script to the bottom of the page. If I change the asp textbox to a HTML input it works fine.

It will work fine with an ASP.NET TextBox as you have used. Therefore it must be to do with where your control is located. For example, if it's inside a Repeater or Grid, you will not be able to use its ID directly like that, since the framework will generate unique ids for each row at runtime.
Create a simple webform with no other controls on the page, and you will find it works just as you have it.

Try using static ID mode instead:
<script>
$(document).ready(function () {
$("#txtDOB").datepicker();
});
</script>
It makes the client script easier (especially when you move it to an external .js file to take advantage of caching), and is an easy change to the ASP control:
<asp:TextBox ID="txtDOB" CssClass="form-control" runat="server" ClientIDMode="Static"/>

You could use a different type of jQuery selector to select for that ID as follows:
<script>
$(document).ready(function () {
$("input[id$=_txtDOB]").datepicker();
});
</script>
That selector will account for the text that is being appended to the beginning of your ID due to the use of your CreateUserWizard control. It is cleaner than the way you are currently doing it, and you can use your original HTML.
<asp:TextBox ID="txtDOB" CssClass="form-control" runat="server"></asp:TextBox>

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 can I get a tabcontainer ID using jquery or javascript?

I have a tabcontainer in an updatepanel and I would like to display gridview below the tabcontainer. inside of tab container, it is ok to change when I press each tabs but I cannot make changes in a gridview when tab clicks.
Currently I can see that the javascript as below is working as I confirmed using alert.
<script type="text/javascript" src="Scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.8.13.custom.min.js">
</script>
<script type="text/javascript">
function tabClick() {
var selected_tab = $("#TabContainer1").tabs();
alert(selected_tab);
return;
}
I have a tabcontainer as below
<asp:UpdatePanel ID="EmployeeInfoUpdatePanel" runat="server">
<ContentTemplate>
<div style="padding-left:205px">
<asp:TabContainer ID="TabContainer1" runat="server" Width="955px"
Height="350px" CssClass="fancy fancy-green" ActiveTabIndex="0" OnClientActiveTabChanged="tabClick">
<asp:TabPanel ID="companyTab" HeaderText="Company" runat="server" ForeColor="Black">
<ContentTemplate>
codes....
I have searched and found some codes such as tab.get_activetab however it doesnt work. if i type selected_tab. and visual studio came up with options that I can choose however there is no options for get_activetab or _activeTabIndex
I would like to get a active tab ID and pass the parameter to the C# code.
Is it possible??
Can someone please help?
Thanks

First you can get the id of any element from a jquery object or native javascript object like so
// jquery get id of html element
$(myJquerySelector)[0].id
$(myJquerySelector).attr('id');
// native js get id of html element
document.querySelector(myNativeSelector).id;
document.getElementById(theID).id;
But your problem is beyond that. To get the id of the active tab, you need to just get that tab
$('.ui-tabs-active')[0].id // will give you the id of the active tab
Then to pass that to your server you will need AJAX. So something like:
$.post('/my/server/path', { id : $('.ui-tabs-active')[0].id });
That will post the id of the active tab to your server and c#.

For a straight javascript function I use this below to get the active tab:
var tab = document.getElementById('tabContainer');
var currentTabIndex = tab.control.get_activeTabIndex();
var currentTabId = tab.control._tabs[currentTabIndex]._tab.id;
Then, use some AJAX to get the id back to the server.

Once again, how do I convert ct100 IDs to original id using javascript?

I have a tag element in .aspx page:
<a id="loginLink" runat="server" class="loginLink" href="#" onclick="$('registerform').hide(); $('signin').show(); this.style.display='none'; $('back').show(); $('reg-signin-email').focus(); return false">Already signed up? Log in here</a>
and trying to get loginLink.ClientID , but it spits back ct100_main_loginLink. How do I get original 'loginLink' id in the same aspx page?
Tried var ctrl = document.getElementById('<%# loginLink.ClientID %>');
and it didnt work..
example:
<asp:Content runat="server" ContentPlaceHolderID="Main">
<a id="loginLink" runat="server" class="loginLink" href="#" onclick="$('registerform').hide(); $('signin').show(); this.style.display='none'; $('back').show(); $('reg-signin-email').focus(); return false">Already signed up? Log in here</a>
<script type="text/javascript"> alert('diplay here original loginLink ID instead of ct100_Main_LoginLink'); </script>
</asp:Content>

if you know the name, and that's what you want to have available in js, you can just type it in js. alternatively, if you want the control to provide its own id, you could do
<script type="text/javascript">
alert('<% =loginLink.ID %>');
</script>
although I don't see the point in that. if you need to grab the element during a javascript routine, you'll need the ClientID value as there won't be any element on the page with the short-form id in the example I've given.

You need to write '<%# loginLink.ClientID %>', and you can only write it in the original ASPX page. (Not an external JS file)
If you wnat to get the original ID (which never shows up on the client), use loginLink.ID.

if you use a tool like FireBug you will see that the actual ID output to the client is the long one with ct100.... in ASP.NET pages.
You will not normally get loginlink back to the client unless you are using Dot.NET 4.0 and controlling the client-mode.
in your example the var ctrl should hold a reference to the DOM element