jQuery :not() with parameter as value not working - javascript

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

Why I can't check if an HTML element (retrieved from the DOM) have set a specific CSS class using JQuery?

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!

Listen to objects click

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);
}
});

jQuery - set data() variable from $(this).val()

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())
});

Jquery Show Input Text Based On Input Value

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 () {...});

If div is empty, remove it and change class of next div

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/

Categories