How to print value of .hasClass via console? - javascript

using the Firebug console I'm trying to test whether this code is working:
$(window).bind("load", function() {
$('#tab1link').click(function() {
$('#tab2').hide();
$('#tab2').removeClass('selected');
$('#tab1').show();
$('#tab1').addClass('selected');
});
$('#tab2link').click(function() {
$('#tab1').hide();
$('#tab1').removeClass('selected');
$('#tab2').show();
$('#tab2').addClass('selected');
});
});
but this:
console.log($('#tab2').hasClass('selected'))
returns the error:
TypeError: $("#tab2").hasClass is not a function { message="$("#tab2").hasClass is not a function", more...}
Does anyone know why the above console command is incorrect? (Not a jQuery expert...)
Based on the link below, I think it should work...
http://api.jquery.com/hasClass/
Thanks!

Try refreshing the console/page because sometimes it doesn't properly assign $ to jQuery, assuming you're using Firebug ( it keeps the native $ function which ISNT jquery ).
You can confirm this with:
alert( $ == jQuery )
If this isn't it, then make sure you aren't using multiple libraries that use $.
Unrelated: You can also do $(function(){ /* code */ }); instead of binding on window load.

Try this instead:
console.log(jQuery('#tab2').hasClass('selected'))
It looks suspiciously like the $ is given up but still in use, like Prototype in included in the page and jQuery.noConflict() was called (which means $ != jQuery when you're running commands in the console later).

Related

Uncaught TypeError: undefined is not a function when moved same code to another site

I have moved my javascript over to another site without modifying it and it should work out of the box as nothing has changed but I keep getting "Uncaught TypeError: undefined is not a function" on two instances.
My first website here works fine.
My second website here does not.
Example with this code as one of the instances but gives me the same error for the same part of code:
<script>
$(document).ready(function(){
$('#clock_sydney').jClocksGMT({offset: '+11'});
$('#clock_greece').jClocksGMT({offset: '+3'});
});
</script>
It is telling me there is something wrong with:
$(document).ready(function(){
On both pieces.
Any help would be greatly appreciated as it is driving me insane.
Thanks so much guys!
Looks like your jQuery is in noConflict mode, thus it cant identify $ symbol
You can use jQuery() instead of $ or wrap your code like this:
jQuery( document ).ready(function( $ ) {
// Code that uses jQuery's $ can follow here.
});
more info here
You are missing the jQuery reference. It is really easy to identify this kind of errors because it said that $ is undefined and $ is the var which represent the jQuery object.
Just include the respective script in your page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Prototype and jQuery conflict with $.when.apply

I have tried multiple combination of usage of code to make the Prototype and jQuery to work, but no luck yet.
Here is what I have currently.
index.html:
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.2.0/prototype.js"></script>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="MAIN_JS_FILE.js"></script>`
main_js_file.js:
jQuery(document).ready(function() {
var jsq = [];
jsq.push(AJAX_CALL_FOR_FETCHING_JS_FILE_1);
jsq.push(AJAX_CALL_FOR_FETCHING_JS_FILE_2);
jsq.push(AJAX_CALL_FOR_FETCHING_JS_FILE_3);
var deferredjs = jQuery.when.apply(jQuery, jsq);
deferredjs.done(function() {
//Various variable initialization
//Various function definition.
}
});
Now when page is loaded (page loads properly), chrome console shows an error message:
Uncaught TypeError: undefined is not a function.
When clicked on the error file link, it points to element.dispatchEvent(event); in the prototype.js file, line no 7066.
Any help is appreciated.
Thanks.
Edit: I have changed the MAIN_JS_FILE.js file to use only jQuery instead of $
So now there is not a single javascript code that uses $ and still the undefined error is displayed.
If I now use jQuery.noConflict(); before .ready() function, then the $.when.apply code does not even execute.
As #steven iseki mentioned in comment you, can use jQuery.noConflict. You can read on their website that:
Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $.
And it's indeed a case with Prototype also using $ sign.
Also, remember to use jQuery instead of $ sign in your jQuery code, e.g.:
jQuery(selector).on('click', function(){...});
I don't think there's jQuery Conflict error here. Try changing your code from main.js. Try alternate method to get your task done here. I analyzed your code but prototype.js has a way of hiding real thing.

Possible causes of Cannot read property constructor of undefined

I want to iterate over all the forms present in a div. So I am using the following code for this
$('#divid form').each(function (index, formDetails) {
if (formDetails) {
console.log($(formDetails).attr('id'));
}
});
This is working fine in Mozilla with no issues but when I run this code in Chrome sometimes it throws the following error.
This error is coming
Uncaught TypeError: Cannot read property 'Constructor' of undefined
I am using Version 33.0.1750.117 m of Chrome.
Why this error is coming I am not able to understand?
Sounds like you don't have jQuery included before your try and load your functions.
Wrap your javascript code inside the below function:
$(document).ready(function() {
alert('loaded');
}
Also check if the initial is $ or jQuery

Why $(document).append() doesn't work in jQuery 1.9.1?

Why following piece of code doesn't work since jQuery 1.9.1? With previous versions works fine.
$(function () {
$(document).append(test);
document.write('done');
});
var test = {
version: "1.0",
};
JSFiddle: http://jsfiddle.net/Chessjan/NsjqM/
In JS console it issues error like this:
TypeError: document is null
safeFrag = document.createDocumentFragment(); jquery-1.9.1.js (line 5823)
Edit:
Thanks everybody for quick and extensive aswers. Observed issue was found by accident, and of course, $(document.body).append() is proper approach.
jQuery 1.9.x calls
this[ 0 ].ownerDocument
within its buildFragment() method. Since you pass in the document, the call
document.ownerDocument
will reference to null and cause the error. Any other node will reference the document, which of course, works.
Conclusion: Don't call $(document).append() but use $(document.body) for instance.
Your code will of never worked. It has to document.body not document.
Here's a few examples in different versions of it not working:
jQuery 1.6.4: http://jsfiddle.net/us9Kz/
jQuery 1.7.2: http://jsfiddle.net/us9Kz/1/
jQuery 1.8.3: http://jsfiddle.net/us9Kz/3/
jQuery 1.9.1: http://jsfiddle.net/us9Kz/4/
jQuery 2.0.0b1: http://jsfiddle.net/us9Kz/5/
Code working with document.body (on jQuery 1.9.1): http://jsfiddle.net/us9Kz/6/
Inside the jQuery code it has this line:
jQuery.buildFragment( args, this[ 0 ].ownerDocument, false, this );
this is the jQuery object you selected. In your case, the document. The ownerDocument value of document is null and this is what is passed through as document to the call to document.createDocumentFragment();. Hence you get the error that document is null (Slightly bad naming of variables there as it makes you think the document object itself is somehow null)
As other people have said. Append to the body instead and it will work fine.
To answer your question i tried in JSfiddle all the available jQuery versions. It happened to give the same error.
Why it doesnt work: document becomes something like [object HTMLDocument] when cast to string, and there is of course no such id, it will return null.
The following works:
var test = "1.0"
$('body').append(test);
or doing it trough object notation like you did:
var test = {
version: '1.0'
}
$('body').append(test.version)

Simple jQuery code contains a syntax error that I can't find

I've got this (remarkably) simple JavaScript function that is called when a user clicks a "Cancel" link:
function hideNewUserPanel(){
$('#create_user_panel').slideUp('slow');
$('.right_interior_panel').slideDown('slow');
}
And the code to add the handler:
$(function(){
$('#cancel_create_user_btn').live('click',
function(){ hideNewUserPanel(); }
)
});
Functionally, everything works as expected. Trouble is, when I click the "Cancel" link, Firebug shows an error in the console:
uncaught exception: Syntax error, unrecognized expression: #
I've stepped through the code several times and the error appears at some point before the call to hideNewUserPanel(). At the risk of sounding like one of "those programmers" (the kind that claim to have found a bug in GCC and assume their own code is perfect), the exception is being thrown from somewhere within jQuery proper, so I assume the issue is in there. I'm using jQuery 1.3.2 (this is a legacy project using many jQuery plugins that will break if we update to 1.4.x).
Is there anything obviously wrong with my code that I'm simply not seeing? This code is, frankly, very simple and I don't really see what the issue could be.
Thanks!
This:
$(function(){
$('#cancel_create_user_btn').live('click',
function(){ hideNewUserPanel(); }
});
Needs a closing paren after the function, like this:
$(function(){
$('#cancel_create_user_btn').live('click',
function(){ hideNewUserPanel(); });
});
Also, you can write that a bit simpler :), try this:
$(function(){
$('#cancel_create_user_btn').live('click', hideNewUserPanel);
});
You seem to be msising the end of the live call:
$(function(){
$('#cancel_create_user_btn').live('click',
function(){ hideNewUserPanel(); }
); // <===
});
$(function() {
function hideNewUserPanel() {
$('#create_user_panel').slideUp('slow');
$('.right_interior_panel').slideDown('slow');
}
$('#cancel_create_user_btn').live('click', function() { hideNewUserPanel(); });
});

Categories

Resources