how can i access to tooptip of textbox using jquery ?!!
or any asp control attribute !!
<asp:TextBox CssClass="myclass" ID="Name" runat="server" ToolTip="some tooltip">/asp:TextBox>
jquery:
$(document).ready(function() {
$('.myclass').click(function() {
alert($(this).attr('ToolTip'));
});
});
or just set my control to HTML
ToolTip attributes convert to title attributes in HTML. Try the following:
alert($(this).attr("title"));
Try this:
$(function () {
$('.mybutton').onclick(function () {
var tooltip = "B";
$('.mytb').attr('title', tooltip);
});
});
<button type="button" CssClass="mybutton">Click Me!</button>
<asp:TextBox ID="TextBox1" runat="server" ToolTip="A" CssClass="mytb"></asp:TextBox>
Related
I'm working on a legacy .NET WebForms project where the front-end is being updated with Bootstrap.
There are some .NET Validation Controls which are validating on the ClientSide, but the "has-error" class needs to be added to the parent div of the input fields to match the Bootstrap markup.
Is there an event hook or a way of extending the .NET Validators so that I can add the "has-error" class to an invalid control group and remove it when valid?
e.g: Here is my markup which works server side:
<div class="form-group <%= IIf(RequiredFieldValidator1.IsValid, "has-error", "") %>">
<label class="control-label">Test</label>
<asp:TextBox runat="server" ID="TextBox1" CssClass="form-control" />
<asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator1"
ContolToValidate="TextBox1" ErrorMessage="TextBox1 is Required!" />
</div>
I was requiring the has-feedback class on the form-group div as well as the glyphicon tick and crosses depending on whether the input was valid or not. What I have found that works in my solution is to override asp.net's client side function ValidatorUpdateDisplay (note my code utilizes jQuery although you could use native JavaScript):
var originalValidatorUpdateDisplayMethod;
if (typeof(ValidatorUpdateDisplay) == "function"
&& typeof(originalValidatorUpdateDisplayMethod) != "function") {
originalValidatorUpdateDisplayMethod = ValidatorUpdateDisplay;
// now overwrite original method
ValidatorUpdateDisplay = function (val) {
originalValidatorUpdateDisplayMethod(val); // call original method first
var parent = $("#" + val.controltovalidate).parent();
if (parent.hasClass("form-group")) {
parent.addClass("has-feedback");
parent.toggleClass("has-success", val.isvalid);
parent.toggleClass("has-error", !val.isvalid);
var glyph = parent.find("span.form-control-feedback");
if (glyph.length == 0) {
glyph = $("<span class='glyphicon form-control-feedback' />");
parent.append(glyph);
}
glyph.toggleClass("glyphicon-ok", val.isvalid);
glyph.toggleClass("glyphicon-remove", !val.isvalid);
}
}
}
This adds the bootstrap validation to fields when they change as well as when an event on a control that has causesvalidation="true" is triggered.
Note: this is only adding the validations on the client side.
You'll need to put a id on the element
<div id="div1" class="someclass">
<img ... id="image1" name="image1" />
</div>
and this is the javascript which adds a class to a <div> element
var d = document.getElementById("div1");
d.className = d.className + " otherclass";
Here is what I did:
<asp:Panel ID="pnlNumberOnly" runat="server" CssClass="form-group">
<label for="<%= tbNumberOnly.ClientID %>" class="control-label">Enter a number:</label>
<asp:TextBox ID="tbNumberOnly" runat="server" CssClass="form-control" />
<asp:RegularExpressionValidator runat="server" ID="regExpNumberOnly"
ControlToValidate="tbNumberOnly"
Display="Dynamic"
ErrorMessage="Numbers only" CssClass="control-label"
ValidationExpression="^\d+$" EnableClientScript="True"/>
</asp:Panel>
and then my js looked like this:
$(document).ready(function() {
$('#<%= tbNumberOnly.ClientID %>').change(function() {
if ($('#<%= regExpNumberOnly.ClientID %>').is(':visible')) {
$('#<%= pnlNumberOnly.ClientID %>').addClass('has-error');
} else {
$('#<%= pnlNumberOnly.ClientID %>').removeClass('has-error');
}
});
});
I have some markup as shown below
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon bootstrap-addon-info">
<asp:CheckBox runat="server" Checked="True" /></span>
<asp:TextBox ID="equitytrading" runat="server" CssClass="form-control bootstrap-default" text="Equity Trading" TextMode="SingleLine"></asp:TextBox>
</div>
<div class="input-group">
<span class="input-group-addon bootstrap-addon-info">
<asp:CheckBox runat="server" Checked="False" /></span>
<asp:TextBox ID="optionstrading" runat="server" CssClass="form-control bootstrap-default" text="Options Trading" TextMode="SingleLine"></asp:TextBox>
</div>
<div class="input-group">
<span class="input-group-addon bootstrap-addon-info">
<asp:CheckBox runat="server" Checked="False" /></span>
<asp:TextBox ID="futurestrading" runat="server" CssClass="form-control bootstrap-default" text="Futures Trading" TextMode="SingleLine"></asp:TextBox>
</div>
</div>
I am trying to change the background color of the span that holds the check box. when it is checked. Can't seem to get anything to work. Here is my latest attempt, which I really think should work since the span is the parent of the checkbox..
$(document).ready(function () {
$("input[type='checkbox']").each(function() {
if ($(this).checked) {
$(this).parent().removeClass('bootstrap-addon-info');
$(this).parent().addClass('bootstrap-addon-success');
}
});
});
Update:
The working version is as follows, thanks to those who replied for the help.
$(document).ready(function () {
var checkboxes = $("input[type='checkbox']");
checkboxes.on('click',function() {
//per chriz suggestion for chaining
if (this.checked) {
$(this).parent().removeClass('bootstrap-addon-info').addClass('bootstrap-addon-success');
} else {
$(this).parent().removeClass('bootstrap-addon-success').addClass('bootstrap-addon-info');
}
});
checkboxes.each(function () {
//so on page load the checked ones that were set in the html had the success class
if (this.checked) {
$(this).parent().toggleClass('bootstrap-addon-info bootstrap-addon-success');
}
});
});
You syntax is incorrect. $(this) is a jQuery object it doesn't have checked property. So you can use this.checked or $(this).prop('checked')
Use
$("input[type='checkbox']").each(function() {
if (this.checked) {
$(this).parent().removeClass('bootstrap-addon-info');
$(this).parent().addClass('bootstrap-addon-success');
}
});
OR
You can simply use
$("input[type='checkbox']:checked").each(function() {
$(this).parent().toggleClass('bootstrap-addon-info bootstrap-addon-success');
});
EDIT:
You can also try
$("input[type='checkbox']").change(function() {
if(this.checked)
$(this).parent().toggleClass('bootstrap-addon-info bootstrap-addon-success');
else
$(this).parent().toggleClass('bootstrap-addon-success bootstrap-addon-info');
}).change();
Rather than using .each on all checkboxes. Try to get checkboxes which are checked so that u wont even need to use if
$("input[type='checkbox']:checked").each(function() {
$(this).parent().removeClass('bootstrap-addon-info');
$(this).parent().addClass('bootstrap-addon-success');
});
a little simpler way
$("input[type='checkbox']:checked").each(function() {
$(this).parent().addClass('bootstrap-addon-succes').removeClass('bootstrap-addon-info');
});
Use this instead $(this)
$(document).ready(function () {
$("input[type='checkbox']").each(function() {
if (this.checked) {
$(this).parent().removeClass('bootstrap-addon-info');
$(this).parent().addClass('bootstrap-addon-success');
}
});
});
I am using twitter bootstrap validation class to get success and error in a text-box. I have two text boxes so when a user clicks on any text-box jquery should first check if the text-box is empty if its empty then red colour should appear around the box. When a user start entering data the text-box should change the colour to green. I would like to apply this technique across all the text-boxes. This is what I have done but when running a page it is not working?:
<div class="test">
<div class="form-group has-success">
</div>
</div>
<div class="form-group has-error">
</div>
<div id="pt" class="tab-pane active">
<asp:Label ID="label1" CssClass="form-group" runat="server" Text="Name:"></asp:Label>
<asp:TextBox ID="TextBox1" CssClass="form-control" runat="server" ></asp:TextBox>
<asp:Label ID="label2" CssClass="form-group" runat="server" Text="Surname:"></asp:Label>
<asp:TextBox ID="TextBox2" CssClass="form-control" runat="server"></asp:TextBox>
</div>
Jquery
$("TextBox").click(function () {
if ($.trim($('TextBox').val()) == "") {
$('.form-group has-error');
}
else if ($.trim($('TextBox').val()) != "") {
$('.form-group has-success');
}
});
This is the website i have used to get validation status: bootstrap example which i am following click here under form -> control status
try this:
$(function(){
$("#TextBox1").on("click", function(){
if($("#TextBox1").val().length === 0){
$("#TextBox1").parent().addClass("has-error");
}
});
$("#TextBox1").on("keydown", function(){
if($("#TextBox1").parent().hasClass("has-error")){
$("#TextBox1").parent().removeClass("has-error");
$("#TextBox1").parent().addClass("has-success");
}
});
$("#TextBox2").on("click", function(){
if($("#TextBox2").val().length === 0){
$("#TextBox2").parent().addClass("has-error");
}
});
$("#TextBox2").on("keydown", function(){
if($("#TextBox2").parent().hasClass("has-error")){
$("#TextBox2").parent().removeClass("has-error");
$("#TextBox2").parent().addClass("has-success");
}
});
});
Your HTML seems to be malformed.
I am not sure I understood correctly your question, but if you want to display the divs, then your code should work like that:
$("#tbDepartment").click(function () {
if ($.trim($('#tbDepartment').val()) == "") {
$('.form-group has-error').show();
}
else if ($.trim($('#tbDepartment').val()) != "") {
$('.form-group has-success').show();
}
});
I have the following input inside an asp.net repeater
<div class="detailsItem">
<input type="button" class="saveCommand" value="Save"/>
</div>
then within my document.ready I bind a click function
<script type="text/javascript">
$(document).ready(function () {
$('.saveCommand').live('click', function () {
var cur = $(this);
saveItem(cur.closest('div.detailsItem'));
});
});
When I'm binding my repeater, i want to be able to include an ID in call to the click function. something similar to:
<input type="button" onclikc="save(this,<%#((CustomViewItem)Container.DataItem).Id%>" value="Save"/>
Any idea on how to combine the two styles of binding?
I would suggest you to use a data attribute.
<!--
<div class="detailsItem" data-id="<%#((CustomViewItem)Container.DataItem).Id%>">
-->
<div class="detailsItem" data-id="YourIdHere">
<input type="button" class="saveCommand" value="Save"/>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('.saveCommand').on('click', function () {
var cur = $(this);
var detailsItem = cur.closest('div.detailsItem');
alert(detailsItem.data("id"));
saveItem(detailsItem);
});
});
</script>
More information on the data() method in jQuery: http://docs.jquery.com/Data .
You could use the new data-* attributes
<input type="button" data-id="<%#((CustomViewItem)Container.DataItem).Id%>" value="Save"/>
in the event handler you can then access it with
cur.data("id")
You Can pass the ID to the Save function in the Item Template of your Repeater.
<itemTemplate>
<input type='button' onclick='save(<%# Eval("Id")); %>' value='Save' />
</itemTemplate>
Try this
<ItemTemplate>
<div class="detailsItem">
<input type="button" class="saveCommand" onclick='save(<%# Eval("Id") %>);' value="Save"/>
</div>
</ItemTemplate>
I've asp.net web site , I used master page for the design. I've child page which is placed in the contentplaceholder. On the child page i used one hidden field as -
<input id="Hidden1" type="hidden" value="This is hidden text"/>
I want to display the hidden field value using alert() function from javascript on the page load event. How to do this?
I tried following thing in my script but it is not working-
(function msgShow() {
var e1 = document.getElementById('Hidden');
alert(e1.value);
})();
Thanks.
window.alert(document.getElementById("Hidden1").value);
Make sure this code is executed after the DOM is ready.
With jQuery you do like this:
$(document).ready(function() {
alert($('#Hidden1').val());
});
without jQuery you do:
alert(document.getElementById('Hidden1').value);
Just like with any other element, you can get it with document.getElementById('Hidden1').value
Refer the code given below to know how to get
<html>
<body>
<script type="text/javascript">
function printIt(){
alert(document.getElementById('abcId').value);
alert(document.formName.elements['abcName'].value);
}
</script>
<h1>Access Hidden value in JavaScript</h1>
<form name="formName">
<input type="hidden" id="abcId" name="abcName"
value="I am Hidden value"/>
<input type="button" value="Get Value" onclick="printIt()" />
</form>
</body>
</html>
document.getElementById('Hidden1').value;
and alert the return value
<script type="text/javascript">
function dis() {
var j = document.getElementById("<%= Hidden1.ClientID %>").value;
alert(j);
}
</script>
<input id="Hidden1" type="hidden" runat="server" value="Hello" /><br />
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="return dis();" />
With pure JavaScript:
var value = document.getElementById(id).value;
Also be sure not to reference a DOM element before it exists - like I just did and spent an hour trying to figure why even HelloWorld would not work.