I'm working on a simple radio button function, that enables an input text on click; if other radio elems are clicked, then the input back to disabled state.
Everything works fine, until I wanted to add the ID elem as a parameter.
Right now I'm using a CSS selector :not to exclude any others radio elems.
'input[type=radio]:not(element)'
Is there any jQuery approach to replace this not working line?
function enableInputonClick(element) {
var input = $('.form-control-optional');
$(element).on('ifClicked', function() {
if(input.length && input.attr("disabled", "disabled")) {
input.removeAttr("disabled");
}
});
$('input[type=radio]:not(element)').on('ifClicked', function() {
if(input.length && input.attr("disabled", "")) {
input.attr("disabled");
}
});
}
enableInputonClick("#myRadioEl");
Since your element is a selector string, you can just use string concatenators +:
$('input[type=radio]:not(' + element + ')') ...
Or you replace the CSS :not() with the jQuery .not() (as mentioned in the comments):
$('input[type=radio]').not(element).on( ...
Try this:
$('input[type=radio]:not(' + element + ')')
I believe you can rewrite it the following way.
$('input[type=radio]').not(element).on('ifClicked', function() {
Related
I am working on a very old legacy project. On this project is included a very old JQuery version (the 1.2.3 version). I can't change the JQuery version.
I am finding some difficulties to do the following operation.
In my script I have to check if a specific element has certain CSS class setted, so in my code I have something like this:
var theadElement = $(this);
if(theadClass.hasClass('active')) {
alert("THEAD ACTIVE");
}else {
alert("THEAD NOT ACTIVE");
}
So the theadElement contain the reference of a thead tag retrieved from my DOM (this works fine) and I have to check if this thead tag have setted a CSS class named active.
I tryied to use the hasClass() function as shown here: Jquery: How to check if the element has certain css class/style
But when it try to performe the hasClass() function it can't work and I obtain the following error message into the FireBug console:
TypeError: theadClass.hasClass is not a function
http://localhost:7001/wea-web/edi.do?serv=8.2
Line 47
So I think that the problem could be that the JQuery 1.2.3 version is too old and the hasClass() function is not implemented in this version.
What can I do to solve this issue in an alternative way? How can I check if the active CSS class is setted on the selected element?
EDIT-1: This is my entire script:
$(document).ready(function () {
$("thead.opening").click(function () {
alert("INTO FIRST FUNCTION !!!");
//alert($(this).next().css('display'));
var theadElement = $(this);
var tbodyElement = $(this).next();
alert("THEAD TAG BEFORE: " + theadElement.attr('tagName'));
var theadClass = theadElement.attr('class');
alert("CLASS THEAD BEFORE: " + theadClass);
$(this).next().slideToggle('slow', function () {
$(this).prev("thead.opening").toggleClass("active");
$("thead.opening").find(".imgAccordion").attr("src", "img/arrow.gif");
$("thead.active").find(".imgAccordion").attr("src", "img/arrow_down.gif");
alert("THEAD TAG AFTER: " + theadElement[0].tagName);
// Retrieve the class of the clicked thead element in the DOM:
var theadClass = theadElement.attr('class');
alert("CLASS THEAD AFTER: " + theadClass);
if(theadClass.attr('class').match(/active/)) {
alert("THEAD ACTIVE");
}
else {
alert("THEAD NOT ACTIVE");
}
});
return false;
});
Tnx
Your variable names are different:
theadElement
theadClass
Anyway, you can get the className property of the node in the dom.
var hasClass = (threadElement[0].className.search(/(^|\s)myClass(\s|$)/) !== -1)
You can try to use:
theadClass.attr('class').match(/active/)
You can skip jQuery altogether and do it using vanilla JS:
if (/\s?active\s?/.test(this.className)) {
// your code here
}
if(theadClass.attr('class').indexOf('active') !== -1){
alert("THEAD ACTIVE");
}else {
alert("THEAD NOT ACTIVE");
}
Are you sure theadClass refers to a jqueryObject?
just do threadclass.attr('class'), if you get the proper result then it has a jqueryObject if not you need to look into it as well!
According to this, hasClass is implemented in JQuery 1.2.3 version...
I think the issue is that you're attempting to call a jQuery function on an object that is no longer a jQuery object.
If you don't have the "hasClass" method available, you can always "steal" that method from a newer version of jQuery and implement it in your code.
function (a){for(var b=" "+a+" ",c=0,d=this.length;d>c;c++)if(1===this[c].nodeType&&(" "+this[c].className+" ").replace(uc," ").indexOf(b)>=0)return!0;return!1}
Is the most recent hasClass implementation and you can extend your jQuery to include it. If you prefer to leave jQuery alone, you can also use a separate function to use however/wherever you wish:
function hasClass( target, className ) {
return new RegExp('(\\s|^)' + className + '(\\s|$)').test(target.className);
}
That one above should be pretty browser compatible!
I'm trying to listen to both "button" and "a" click, and then pass the value of the attribute "name" to a variable, I can't find what's wrong with my code:
$('a').click(function() {
var anchor;
anchor=$(this).attr('name');
$('#linkPressed').val(anchor);
});
$('button').click(function() {
var anchor;
anchor=$(this).attr('name');
$('#linkPressed').val(anchor);
});
Update: I have a PHP script that do something different according to the "linkPressed" value. Seemingly, this code is applicable also for <a> and <button> that don't have "name" attribute, which ruins my script. Is there a way to exclude the objects that don't have "name" attribute from the "click listener"?
To only select elements that have an attribute name, use the attribute selector:
$('a[name], button[name]').click(...);
// or
$('a, button').filter('[name]').click(...);
You can separate your selectors using comma ,. It's probably not working because you've initialize anchor variable two times:
$('a, button').click(function() {
var anchor;
anchor=$(this).attr('name');
$('#linkPressed').val(anchor);
});
You can bind the handler only to elements with name attributes:
$('a[name], button[name]').click(function() {
$('#linkPressed').val(this.name);
}
use multiple selector by the , at a one time it remove repetitive code
may be #linkPressed is a tag type not a input type at that time use text() at the palace of val()
$('a,button').click(function() {
var anchor;
anchor=$(this).attr('name');
$('#linkPressed').val(anchor);
});
I think this is it.
$("a, button").click(function() {
var anchor;
if($(this).attr("name") != undefined) {
anchor=$(this).attr('name');
$('#linkPressed').val(anchor);
}
});
I have an e-mail form on my website, with four fields. Three text inputs and a text area. Each field has a default value attribute which serves as its label. I would like these values to be automatically unset/reset on their element's focus and focusout events.
I have the following JavaScript/jQuery code, which creates this behaviour.
$('input,textarea').data('default', "bleh");
$('input,textarea').focus(function() {
if($(this).val() === $(this).data('default')) {
$(this).val('');
}
});
$('input,textarea').focusout(function() {
if ($(this).val() === '')
{
$(this).val($(this).data('default'));
}
});
My problem comes in the storing of the initial data('default') attribute. I had tried using .data('default', $(this).val())... but apparently that is illegal and $(this) is not recognized.
I have tried to find a clean jQuery way to iterate over each of the elements, but I can't seem to find one.
Is there an easy way, using jQuery, to achieve what I want?
Unless I'm mistaken, there's no reason to be setting data properties on the element, you can make use of the elements defaultValue property:
$('input, textarea').focus(function() {
if (this.value === this.defaultValue) {
this.value = '';
}
});
$('input, textarea').focusout(function() {
if (!$.trim(this.value).length) {
this.value = this.defaultValue;
}
});
Here's a fiddle
There is no this, because you're not in a callback. You'll have to iterate over each matched element, setting their default one at a time.
The "clean jQuery way" is simply with each:
$('input,textarea').each(function () {
$(this).data('default', $(this).val());
});
You need iterate through the input elements and then set the value to data using .each()
$('input,textarea').each(function(){
var $this = $(this);
$this.data('default', $this.val())
});
I facing problem with my jquery, on showing input text based on input value.
Here is the JS fiddle demo :
http://jsfiddle.net/Ltapp/364/
When I try to input #hotmail, the input box will show. But when I want to type some text in the #hotm input box, it will hide again.
JS code :
$(window).load(function(){
var myString = '#hotmail';
$('#hotm').hide();
$("input").keyup(function () {
var value = $(this).val();
if($(this).val().match(myString)) {
$('#hotm').show();
} else {
$('#hotm').hide();
}
});
});
It's because your selector $("input") affects both input elements. I have updated it to the $("input:first") selector instead. JsFiddle here
$("input:first").keyup(function () {
var value = $(this).val();
if(value.match(myString)) {
$('#hotm').show();
} else {
$('#hotm').hide();
}
});
As many has said, you are binding the event on all the inputs I did a little change:
$(function(){
var myString = /#hotmail/ig;
$("#check").bind('keyup checkvalue', function() {
$('#hotm')[myString.test(this.value) ? 'show' : 'hide']();
}).trigger('checkvalue');
});
using regex if you are using #HoTmAil it will also hit on that, and also added a custom event checkvalue to see if #hotm should be visible on for example a postback on the form you might be using.
demo: http://jsfiddle.net/voigtan/xjwvT/1/
You're affecting all inputs. Either give each one a unique ID / Class or use the jQuery $(this) method.
See JSFiddle Here:
http://jsfiddle.net/Ltapp/366/
<input type="text" id="firstinput"/>
<p id="secondinput"><input type="text"/></p>
var myString = '#hotmail';
$('#secondinput').hide();
$("#firstinput").keyup(function () {
var value = $(this).val();
if($(this).val().match(myString)) {
$('#secondinput').show();
} else {
$('#secondinput').hide();
}
});
use this for your if part :
if($(this).val().match($(this).val().substr(0,strlen($(this).val())))
it's because the new box also = "input"; if you give the hotmail textbox it's own id, it won't hide
<input id="hotmail" type="text"/>
and then
$("#hotmail").keyup(function () {...});
Some generated output can be as follows:
<div class="fivecol"></div>
<div class="sevencol">content</div>
if the div.fivecol is empty, I want to remove it and change the div.sevencol to a div.twelvecol
$('.fivecol').each(function() {
if ($(this).html() ==''){
$(this).remove().next('sevencol').removeClass('sevencol').addClass('twelvecol');
}
});
doesn't do the trick. Any ideas?
$('.fivecol:empty + .sevencol').toggleClass('sevencol twelvecol')
.prev()
.remove();
DEMO: http://jsfiddle.net/JY9NN/
$('.fivecol').each(function(i, div) {
if (!div.html().trim()) {
div.remove().next('sevencol').removeClass('sevencol').addClass('twelvecol');
}
});
basically I just fixed some syntax errors, and changed the this reference to the proper argument call. Let me know how that works.
Best,
-Brian
Try this,
$(function () {
$('.fivecol').each(function() {
if ($(this).html() =='') {
$(this).remove();
$('.sevencol').each(function(){
$(this).attr('class','twelvecol');
});
}
});
});
We could use a couple fancy selector tricks:
$(".fivecol:empty + .sevencol").attr("class", function(){
return $(this).prev().remove(), "twelvecol";
});
As you can probably guess, .fivecol:empty attempts to find an empty element with the class fivecol. It then proceeds to grab the sibling element, using +, which has the class .sevencol.
Once we have our .sevencol element, we set out to change its class value to twelvecol. Since we're in this function, we know that .fivecol:empty was found, so we can safely remove it. Lastly, we simply return the new class value to be assigned in the place of sevencol.
Demo: http://jsfiddle.net/cLcVh/1/