I am using asp.net MVC.
I have control like
<%= Html.TextBox("username") %>
I want lost focus event to that control.
So code like
$(document).ready(function() {
$("#username").Attributes.Add("onblur", "alert('losing focus');");
});
but it is not working,
Ultimate goal is to check password & confirm password matches
help me!
It looks like you're trying to use C# code in jQuery?
The easiest way to bind an event to onblur in jQuery is:
$("#username").blur(function() { alert('losing focus'); });
More information on blur() is available at http://docs.jquery.com/Events/blur
You can try attach to this event with another way, like this:
$("#username").bind("blur", function(e){
alert('hello');
});
$(document).ready(function() {
$("#username").blur(function() {
alert('byebye focus');
});
});
http://docs.jquery.com/Events/blur
I believe your jQuery syntax is wrong,
You want to bind an event, "onBlur" that fires the alert, so try
$("#username").blur(function(){
alert("loosing focus");
});
-- update, looks like some one answered this as I was answering
Related
im trying to get a lil project going but im stuck on a very annoying thing.
$(document).ready(function() {
$("#search-button").click(console.log('hello'))
});
as you can see im targeting a search button with the id search-button and as soon as i click it something should happen. in this case i put a console.log in to test if it works but it doesn't. it always logs it as soon as i load the page , not when i click the button i target. ... what am i doing wrong
if you need more info on this pls tell me i tried to keep it as simple as i could
ty for your help
O.k
The click handler needs a function argument, not just the console.log by itself. Try this:
$(document).ready(function() {
$("#search-button").click(function() {
console.log('hello');
});
});
Inside of .click should be a handler .click(handler) and the handler should be a function. The browser is reading the code and when it hits console.log('hello'), it does it! It's seeing .click etc, but it doesn't matter; it next sees console.log and does it.
Try
$(document).ready(function() {
$("#search-button").click(function() {
console.log('hello');
});
});
As others have mentioned, the click function requires its own callback function. You can also use this, without requiring the use of document:
$("#search-button").on('click', function() {
console.log('hello')
})
I hope You're using jQuery version 3 or up. if you use 3 or up jquery version the good practice is you use Document binding Example:
jQuery(document).on('click', '#search-button', function(event) {
//your Code here...
console.log('hello');
});
I have some code I am working on and I cannot seem to figure out the terms to search for assistance.
I am trying to add a jquery statement that executes when the #quickSearchResults_section is clicked "AND" when #nav-input is focused out.
So in a nutshell, I am still learning jquery and programming logic and want to use click function and focusout.
<script>
$(":not(#quickSearchResults_section)").click(function(){
$("#quickSearchResults_section").hide();
});
</script>
Try something like this:
$("#nav-input").on("blur", function(){
$("#quickSearchResults_section").click(function(){
$("#quickSearchResults_section").hide();
});
});
I am working with jquery validation which is when press the submit button show error icon after hover the error icon message will display in tooltip. validation working fine with error icon now I want tool tip
$('#myForm').validate({
rules:{firstname:"required"},
messages:{firstname:"<div class='fir' style='display:none'>Please enter your firstname</div>"
}
});
I am trying to calling hover function it is not working
$('.error').hover(function(){
alert("hello");
});
Since the elements are created by the validation framework, they are dynamic so you need to make use of event delegation
$(document).on("mouseenter", ".error", function () {
//stuff to do on mouseover
})
You have the wrong function, try this:
$('.error').mouseover(function(){
alert("hello");
});
Try this mate.Hope this might help u .. :)
$(".error").on("mouseover", function () {
//stuff to do on mouseover
});
try this (put your code in document ready function...
$(document).ready(function(){
$('.error').mouseover(function(){
alert("hello");
});
});
REFERENCE MOUSEOVER
I am working on a project, what includes a smartsearch engine.
I'd like to write a method what makes the client write inside the smartsearch, even when it's not focused. F.e. browsing the site, the client hits down a key, and the focus jumps to the smartsearch.
That's working fine with this simple code:
$(document).ready(function()
{
$("*").keydown( function()
{
$("input.ss-24#b").focus();
});
});
But, yeah as You can see, it unfocuses other inputs too, and that's not the way I want it.
I have tried several 'possible-solutions', like :not() and even .not() method like:
$(document).ready(function()
{
$("*").not("input").keydown( function()
{
$("input.ss-24#b").focus();
});
});
But it still unfocuses fields with "input" tagname too. What should I do to force jQuery not to select input fields for this event listener?
Thanks, Steven.
$(document).keydown(function() {
if (!$('input').filter(':focus').length) {
$('#b').focus();
}
});
Working fiddle
$(document).ready(function () {
$(document).keydown(function (e) {
$("input.ss-24#b").focus();
});
});
Does this work?
http://jsfiddle.net/Xbbu8/
The setting is easy; I want to be able to add a class to (in this case) a button when onClick-event is fired. My problem is that I haven't found a way to pass the button itself as the parameter to the function. I'd like to do something like:
<asp:Button ID="Button" runat="server" onclick="addClassByClick(this)"/>
And then a javaScript function something like this:
function addClassByClick(button){
button.addClass("active")
}
I know I've got a lot of errors here, but that's why I'm posting. I've tried different scenarios with jQuery and without jQuery but I always end up with a broken solution (clicks suddenly stop coming through, class not added etc etc) so I decided to ask the pro's.
Any suggestion to what I can try? Thanks for reading editand all the help!
It needs to be a jQuery element to use .addClass(), so it needs to be wrapped in $() like this:
function addClassByClick(button){
$(button).addClass("active")
}
A better overall solution would be unobtrusive script, for example:
<asp:Button ID="Button" runat="server" class="clickable"/>
Then in jquery:
$(function() { //run when the DOM is ready
$(".clickable").click(function() { //use a class, since your ID gets mangled
$(this).addClass("active"); //add the class to the clicked element
});
});
Using jQuery:
$('#Button').click(function(){
$(this).addClass("active");
});
This way, you don't have to pollute your HTML markup with onclick handlers.
$(document).ready(function() {
$('#Button').click(function() {
$(this).addClass('active');
});
});
should do the trick.
unless you're loading the button with ajax.
In which case you could do:
$('#Button').live('click', function() {...
Also remember not to use the same id more than once in your html code.
$('#button').click(function(){
$(this).addClass('active');
});
Try to make your css more specific so that the new (green) style is more specific than the previous one, so that it worked for me!
For example, you might use in css:
button:active {/*your style here*/}
Instead of (probably not working):
.active {/*style*/} (.active is not a pseudo-class)
Hope it helps!