JQuery show label on hover of input - javascript

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.

Related

How to pass a value from asp.net datalist to javascript textbox?

I already have a dataList:
<asp:DataList ID="dlIndex" runat="server" Width="61%" Height="83px">
<ItemTemplate>
<td style="text-align: center; padding-right: 0px; width: 50px;">
<asp:Label ID="Adress" runat="server" Text='<%# Eval("artikli_na_skladistu.skladista.Adresa")%>'></asp:Label>
</td>
</ItemTemplate>
</asp:DataList>
Now, I want to pass the value of the Label to a javascript textbox let's say ...
<input type="text" id="fname" value="">
document.getElementById("fname").value = getVal();
function getVal() {
???
}
So when I run the web site, I wanna see the value of the datalist Label inside the textbox javascript ...
How do I do that ?
Thank you,
You haven't thought out your solution well enough. If you only have one item, why are you using a DataList? You should directly bind in the markup using <%=MyObject.artikli_na_skladistu.skladista.Adresa%>. If you have more than one item in your DataList, how are you going to figure out which one to show?
I found a solution ... it's very, very ugly, but it works (for me)::
So, in the datalist ... the Label(s) was an asp.net Label(s) ... I change it javascript Label, like so:
<asp:DataList ID="dlIndex" runat="server" Width="61%" Height="83px">
<ItemTemplate>
<label id="Adresa"><%# Eval("artikli_na_skladistu.skladista.Adresa") %></label>
</ItemTemplate>
</asp:DataList>
and then, I just had to call it in javascript:
<script type = "text/javascript">
var url = "/Something.aspx?val=" + document.getElementById("Adresa").textContent;
</script>
I really am a newbie in javascript ... so this really works for me ...
Thanks to everyone who replied :D

HTML button causing unwanted page load

I feel with this particular problem I have to explain how my webpage works, otherwise it might not make sense to anyone. The page will load, you will be given some text and the option to click on a asp.net combobox filled with options, when you select one of them, the page will reload and get all the information in relation to that user and display it in a dynamically created HTML table.
After this there are two divs that runat server and dependent on if the user has uploaded a file will display an option of changing the file, or adding a new one.
I have a standard html button that when is clicked is meant to run my JavaScript function, but when you click on the button it fires my aspxcombobox code again. I will attach all my code that I feel might be useful.
HTML for DIVS
<div id ="upload" runat = "server" visible = "false" class="default">
<asp:Label ID="uploadlbl" runat="server" Text="Upload driving licence" style="color:Red"></asp:Label>
<dx:ASPxUploadControl ID="LicenceUpload" runat="server">
</dx:ASPxUploadControl>
<dx:ASPxButton ID="UploadButton" runat="server" Text="Upload" style="margin-left: 2px">
</dx:ASPxButton>
</div>
<div id="ChangeUpload" runat="server" visible="false" class="default">
<span>Licence already uploaded</span>
<br />
<button id="changeLicence" onclick="changeLicence()">Change Licence?</button>
</div>
JAVASCRIPT
function changeLicence() {
alert('test');
}
It's a submit button. It submits the form it is in. Since you are using ASP.NET, the entire page is probably in a form.
Add type="button" to make it a non-submit button.
default behavior of button is submit, Add type="button" attribute so that it doesn't submits form.
<button
type="button"
id="changeLicence"
onclick="changeLicence()">Change Licence?</button>

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")

How can i check a radio button by clicking on asp text field using javascript

Hi
While working on asp, i want if i click on my asp text field, a radio button should be checked, but i dont find any onClick event available for asp text field, and if i use onchange, it is from the server end, i want this situation without page refresh, just like we do in html fields using javascript, please help!!!
Try this one:
HTML:
<asp:TextBox ID="txtSelect" runat="server" Width="200px" Text="Click here"> </asp:TextBox>
<br />
<asp:RadioButton ID="radCheck" runat="server" />
JQUERY:
$("#txtSelect").click(function(){
$("#radCheck").attr("checked",true);
});
OnFocus is probably the event I would use.
You can use Ajax if you don't wanna refresh the page

html editor cursor focus problem

I have a page with textbox and an html editor. When the page is loaded the cursor is focussing on the html editor. instead i want to focus the cursor on the textbox how can i do that.
I got the answer by setting the Autofocus property to false of the html editor
You have a couple of options here. You can use JavaScript:
<body onload="javascript:document.Form1.TextBox1.focus();">
or, if you are using a Form, then you can do the following:
<form id="Form1" defaultfocus="textbox" runat="server">
<asp:textbox id="textbox1" runat="server"/>
<asp:textbox id="textbox2" runat="server"/>
<asp:button id="button1" text="Button1" runat="server"/>
</form>
If you plan on using mroe Javascript based stuff, may I recommend jQuery?
http://www.jquery.com/
and use:
$(document).ready(function() {
$('#formID .textboxClass').focus();
});

Categories