We Keep Coding

JQuery show label on hover of input

I am trying to get a label to show when they hover over a Input field. Here is what my form looks like.
Here is my HTML:
<div class="loginbox">
<div class="box">
<input runat="server" id="txt_clientrefmock2" class="logintextbox" placeholder="Client Ref" type="text" />
<input runat="server" id="txt_postcodemock2" class="logintextbox" placeholder="Postcode" type="text" />
<asp:TextBox runat="server" ID="txt_dateofbirth" CssClass="logintextbox" />
<AjaxControlToolkit:MaskedEditExtender ID="MaskedEditExtender1" runat="server" TargetControlID="txt_dateofbirth" Mask="99/99/9999" />
</div>
</div>
<div class="button">
<div class="btnlogin">
<asp:Button ID="btnLogin" runat="server" Text="Log in" CssClass="loginButton" OnClick="btnLogin_Click" />
</div>
<div class="messages">
<asp:Label runat="server" Text="Please contact 88888 888 888 if you cannot find your client reference" ID="message" Visible="false" />
</div>
</div>
What I want to happen is when they hover over the Client Ref box then my label to become visible.
I have tried code like this (This isn't working):
<script>
$(".txt_clientrefmock2").hover(
function () {
$("#message").show();
},
function () {
$("#message").hide();
}
);
</script>
EDIT
I have found out the problem which leads to another similar problem.
When I took the "Visable = False" from the label and ran the code it works fine.
So how else can I hide the label on Page_Load?

As you are using ASP.NET and txt_clientrefmock2 is a server control you need to use Control.ClientID and you are using ID so you need to use # for ID selector.
<%= txt_clientrefmock2.ClientID %> will Gets the control ID for HTML markup that is generated by ASP.NET.
Use
$("#<%= txt_clientrefmock2.ClientID %>").hover(function() {
$(".message").show(); //Here Message is a class so you need to use .
}, function() {
$(".message").hide();
});

In your code txt_clientrefmock2 is ID not a class. Update your code like below.
$("#txt_clientrefmock2").hover(
function () {
$("#message").show();
},
function () {
$("#message").hide();
}
);

Answering my own question as I just figured it out going through some of the comments.
When #James Thorpe mentioned about the ID changing when the page renders, I took out "Visable=False" from the label and ran my code.
When i hovered over the Input then it worked.
I replaced
Visable=False
With
style="display:none;"
This then worked. Thanks for all your help on the situation.

Doing Visible=false will not hide that thing . Hiding anything is done by display:none . If you are doing Visible=false ,then that thing would be present over there but not be actually seen .It's just you made it's visiblity false not hid that . And yes ofcourse , you have wrongly used the ids and classes in your syntax.

ASPNET get ClientID in onchange event using Javascript

I use:
onchange="alert('<%= AbcControl.ClientID %>')"
but Unfortunately it will translate to:
onchange="alert('<%= AbcControl.ClientID %>')"
May I know what is the best solution for this other than adding the onchange even during server side Page_Load even?
Thanks in Advance.

You can use this.id here
onchange="alert(this.id);"

Try this, if you want to see only Id (Client side generated id) of the AbcControl
<asp:TextBox runat="server" ID="AbcControl" />
<input type="text" onchange='<%= "alert('"+ AbcControl.ClientID +"');" %>' />
OR
Try this, if you want to get the client side object of AbcControl
<asp:TextBox runat="server" ID="AbcControl" />
<input type="text" onchange='<%= "alert("+ AbcControl.ClientID +");" %>' />

runat="server" breaks my jQuery - datapicker

The runat="server" is breaking my jquery. I have two input, but for testing purpose added runat="server" in only one of those. Actually , I need to add on both.
Below you can find JS script to trigger the datetimepicker:
note: dateTo has runat="server" set and tried to change the way JS trying to get its ID, but still not working.
<script>
$(function(){
$("#dateFrom").datetimepicker();
$("#<%=dateTo%>").datetimepicker();
});
</script>
Here you can find the HTML input using runat="server" or not into asp.net code.
<tr>
<td>
<input type="text" id="dateFrom" name="dateFrom" value="" class="dateFrom" />
</td>
<td >
<input type="text" id="dateTo" name="dateTo" runat="server" value="" class="dateTo" />
</td>
</tr>
Does anybody has any idea,hint.....?
thank you

Use ClientID to get the generated Id of a server side control:
$("#<%=dateTo.ClientID%>").datetimepicker();
ASP.NET will generate a specific id attribute that is different from the id attribute of the server side control, so you need to use the generated value in order to access it from jQuery.

Since you're supplying class names, I suggest simply using those.
$(function(){
$(".dateTo, .dateFrom").datetimepicker();
});
Alternatively, you could give any "date" field on your form a class of "date" and use that:
$(function(){
$(".date").datetimepicker();
});
This is a common pattern for client-side validation, and also allows you to provide context clues through styling with CSS.

If you're using .NET 4 you can set the ClientIDMode attribute to Static. This will prevent the framework from changing the element's ID:
<input type="text" id="dateTo" name="dateTo" runat="server"
ClientIDMode="Static" class="dateTo" value="" />

ASP.NET will treat the inputs as server-side controls when runat=server is added, and this will result in transformed identifiers of those inputs so that they start with a container prefix (something like ctl00_), hence 'breaking' your jQuery selectors.
If you're using .NET 4 then you can disable these transformations by altering the ClientIDMode. Otherwise you will need to include the prefix in your selectors, or refactor your selectors to be independent of ID and somewhat distinct for selection by other means.

Use this to get correct client id for server controls
$('[id$=dateTo]').datetimepicker();

Get the properties of an asp.button function in a javascript function

I would like to know how I can get the properties of an asp:Button from a javascript function.
Specifically I want to be able to test whether a specific aspx button is enabled or not in a javascript function.

Once you know the client ID of the <asp:Button /> you can use document.getElementById function to get the reference of it's DOM object and get other properties you are interested in.
An example:
Some where in aspx mark up:
<asp:Button id="button1" runat="server" Text="Click Me"/>
In javascript:
<script type="text/javascript">
//button1 is the ID of asp:Button
var objButton = document.getElementById('<%=button1.ClientID');
</script>

You do this like you would with a plain html button.
<asp:Button id="foo" runat="server" />
Turns into
<input type="button" id="foo" />
If youre using a new version of asp.net, you can add ClientIDMode="Static" so that the id doesnt change to something else.

getting control ID inside repeater by Jquery

I have Entries I want to comment on them . So I created a Repeater with a TextBox and a
Button inside it . How can I get the id of the button and textbox for specific row by
Jquery ?
<ASP:REPEATER runat="server">
<ItemTemplate>
...
// Entries: bind data from DB
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" />
</ItemTemplate>
</ASP:REPEATER>
Thanks .

Your big problem is that your asp repeater control is going to generate ids like this ct100_repeater_txt1 which isn't going to help you get that comment associated with its corresponding db row
The common way I have found to accomplish this (which is a pretty standard way I believe) is to assign the elements id with the row id from the database, or if you have no control over the id, to create a custom attribute.
Pseudo code I have used looks something like this: (I'll try and make it language/platform agnostic so you can learn the concept, as opposed to only the language)
<repeater template>
<textbox id="txt1" dbid='<% eval database id>'/>
<button id="btn1" dbid='<% eval database id>'/>
</repeater template>
that should generate code that looks like:
<input type="textbox" value="" id="ct100_txt1" dbid="14" />
<input type="button value="submit" id="ct100_btn1" dbid="14" />
<input type="textbox" value="" id="ct100_txt2" dbid="12" />
<input type="button value="submit" id="ct100_btn2" dbid="12" />
<input type="textbox" value="" id="ct100_txt3" dbid="39" />
<input type="button value="submit" id="ct100_btn3" dbid="39" />
Then in whatever language you want you can read from that attribute:
Button.Click{
get attribute dbid of button clicked;
save text of textbox of same dbid to a database;
}
Many cheers! Hope that works for ya
EDIT
In response the the comment "where do id save the dbid?!" I'm assuming in a database :) How should you save it? There are lots of ways. Here's one you could try with jquery:
create a javascript function to save answers that takes a parameter. when you bind the dbid to the control, bind it into an onclick function and pass that id to the function. The function then gets the text where the dbid matches and saves the comment and id to a database.
<textbox dbid="14" />
<input onclick="doStuff(14)" />
<script>
function doStuff(var id){
var comment = $('textbox[dbid=id]').value();
ajax(your url and arguments);
};
</script>

Without more information this is the best I can offer you:
for html like this (which is how asp.net will render your button/textbox):
<div id="row1"><button type="button">Click Me!</button><input type="text" name="tb_info" /></div>
<div id="row2"><button type="button">Click Me again!</button><input type="text" name="tb_info" /></div>
You could select the button and textbox for specific row by using the following jQuery:
$("#row1 > button, #row1 > input")