Can't make javascript run correctly - javascript

I have a jsfiddle, but I cannot make the javascript run correctly. The fiddle is at http://jsfiddle.net/davidm1181/suW6f/.
The javascript code that is stopping it is the following:
if ($(this).checked()) {
$('.r1').val('true');
}
The problem is, that I have the same code running on my production web server and it works fine, and on my web server if I change checked() to just checked the code will still run, but it will always return true. Can somebody please help me understand this? Thank you.

Explanation of your results:
There is no .checked() function for a jquery object. Therefore, when you call $(this).checked(), it results in the following error being thrown:
TypeError: Object [object Object] has no method 'checked'.
Also, there is no checked property for a jquery object. Therefore, the value of $(this).checked is undefined, which is considered falsy. (You say it always returns true, but I think that is a mistake.)
Correct way to check if a checkbox is checked:
You can use any one of the following:
if (this.checked) {
if ($(this).is(':checked')) {
if ($(this).prop('checked')) {
Which one you use is a matter of style.

JSFIDDLE DEMO
Use
if(this.checked) or if($(this).is(':checked'))
instead of
if ($(this).checked()) {
Code:
$(':checkbox').change(function () {
$('.r1').val(this.checked);
$('.r2').val(this.checked);
});

There is nothing called .checked() in jquery or javascript
you can use
.checked - use with this only
.is(":checked") - use with $(this)
.prop("checked") - use with $(this)
I have generated a fiddle here

When I have to validate if a checkbox is checked I use is(':checked'):
if ($(this).is(':checked')) {
$('.r1').val('true');
}

Related

Why isn't the test in my jQuery filter function working as expected?

I used a function in filter to check whether the display mode is block but it's not working.
Here's my code:
$("#wrap_element").find("*").filter(function(){
return this.css("display")==="block";
}).css("background-color","red");
Thanks.
You have a console error that hints at the problem:
Uncaught TypeError: this.css is not a function
You need to use a jQuery object since you're calling a jQuery method on it:
return $(this).css("display")==="block";
// ----^^----^
Demo

jQuery is not a function when using .has()

I have this simple jQuery code
function removePreloader() {
jQuery('ul.woocommerce-error').has('li').jQuery("#preloader").css("display", "hidden");
}
and it's being called by
jQuery('form[name="checkout"]').submit(function(e) {
... // lots of line
setTimeout(removePreloader(), 2000);
}
both block of codes is inside jQuery(document).ready(function() { ... });
the other jQuery() is working fine, only this one is causing a problem and showing
Uncaught TypeError: jQuery(...).has(...).jQuery is not a function
is it not possible to use .has? or is there any alternate? because this wordpress theme using a lot of old plugin, so they can't accept newer version of jQuery.
Thank you
here is the screenshot from jquery.com
I just trying to follow this javascript and modified it a little bit, please let me know how to do this the right way, because I don't never code with javascript before
You're using an invalid jQuery statement .jQuery..., I would suggest the use of the if statement when checking if there are any li children inside the list like :
function removePreloader() {
if( jQuery('ul.woocommerce-error li').length ){
jQuery("#preloader").css("display", "none");
}
}
NOTE 1: display property has no hidden value, so you're searching for none instead.
NOTE 2: Remove the () in the function call like :
setTimeout(removePreloader, 2000);
Uncaught TypeError: jQuery(...).has(...).jQuery is not a function
means .jQuery is not a function on the returned object of .has(). That also means .has() works just fine here. Try to use .find() instead.

How to intercept all submit() events via jquery

Long story made very short, I'm working on a frontend where the main controls involve a great many individual <form> tags.
What I want is to intercept all submit() events, check the submitting form for a custom attribute, and if it's there, execute certain code.
I've got this:
$('form').submit(function(event) {
var myForm=$(this);
alert('SUBMIT!');
if(myForm.hasOwnProperty('confirm')){
alert ('Call confirmation');
event.preventDefault();
}
if(myForm.hasOwnProperty('verify')) {
alert ('Call verification');
event.preventDefault();
}
});
but it doesn't seem to be working. The alert never triggers and neither does a breakpoint I set in the console.
I'm fairly new to JQuery and I'm not sure what I'm doing wrong. Any pointers?
myForm is a jQuery object. You need to access the underlying DOM element to use hasOwnProperty:
$('form').submit(function(event) {
var myForm = this; // Do not convert to a jQuery object here
alert('SUBMIT!');
if(myForm.hasOwnProperty('confirm')){
alert ('Call confirmation');
event.preventDefault();
}
if(myForm.hasOwnProperty('verify')) {
alert ('Call verification');
event.preventDefault();
}
});
FYI, jQuery has it's own method for checking for the existence of properties called .prop, however personally I think hasOwnProperty is much nicer as it highlights what you are actually trying to achieve. Plus, you already have the DOM object by default and all browsers support the hasOwnProperty method so this has slightly less overhead than converting to a jQuery object.

Retrieving jQuery.data() values from within setInterval

I've been stuck on this problem for a while now. I'm using jQuery's .data() method to store state in a plugin I'm writing. Everything works fine, except for when I try to retrieve these data values from within a setInterval block. I am able to see the jQuery object inside the setInterval block, but I'm not able to see values stored by the data() method.
tminusStart: function() {
return this.each(function() {
var $tminus = $(this).data("tminus.state", "running");
var intervalId = setInterval(function(tm) {
if ($tminus.tminusIsRunning()) {
$tminus.tminusDecrementCounter();
$tminus.data("tminus.settings").tick_event();
if ($tminus.tminusTimeRemaining() <= 0) {
$tminus.data("tminus.settings").expiration_event();
}
$tminus.text(tminus.tminusTimeRemaining);
}
else {
clearInterval(intervalId);
}
}, 1000, $tminus);
});
}
In the above code, the $tminus does return the jQuery object alright, but the calls to the functions - which are calling the .data() method - return undefined; so does the .data("tminus.settings") call.
Any help in understanding why .data() isn't working here would be greatly appreciated.
Rewrite of function removing cruft:
tminusStart: function() {
var tminus = this;
tminus.data("tminus.state", "running");
return this.each(function() {
console.log(tminus.data("tminus.state")); // "running"
var intervalId = setInterval(function() {
console.log(tminus.data("tminus.state")); // undefined
}, 1000);
});
}
I need to know why it's undefined in the setInterval block
What are tminusIsRunning and tminusDecrementCounter? Did you mean to call that under $tminus? Unless you're extending jQuery, those calls are going to error out. If you're using Chrome, check the Javascript Console, you should see something like: "Uncaught TypeError: Object [object Object] has no method 'tminusIsRunning'"
.data() doesn't work with xhtml + IE (see note in docs).
Alternatively, This looks like a jQ extension, so watch out for that. jQuery has a (IMO) bad habit of aliasing this all over the place. Make sure you don't have a dependency on this being something different than what it is. I suggest installing firebug and using console.log to log this in both the place where you set the value, and where you access it. If it's not the IE issue, I suspect this would locate it.
Finally figured it out. I'm using jasmine to test drive this and the jasmine-jquery library has a fixtures piece which I'm apparently not using correctly. I tested the code in a webpage and everything is now working according to plan. Now I just have to make sure all my tests are passing.
I won't accept my own answer since I didn't provide the necessary information to begin with. I appreciate everyone's time on this. I really wish I could have accepted someone's answer.

jQuery missing : after property id

$('#note').click({
$('#trigger').remove();
$('#info').slideDown(4000, function(){
$(this).fadeOut(40000);
});
});
What I'm trying to do here is obvious. Sadly, when I try this piece of code, FireBug throws the following error: missing : after property id.
After trying to debug for some time, I saw that seemingly nothing is wrong. The highlighting shows correctly in my editor (Notepad++), and no previous error was found.
Thank you in advance for any help.
click expects a function. You are trying to pass it a pseudo object-literal having an invalid syntax.
$('#note').click(function() { // pass a function to "click"
$('#trigger').remove();
$('#info').slideDown(4000, function(){
$(this).fadeOut(40000);
});
});

Categories