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

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)

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.

jQuery isn't giving me jQuery objects

I'm working on a website that uses jQuery, and it works fine everywhere on the site except in one function. When I try to search the DOM with jQuery I don't receive jQuery objects back and I know what the result should be because it is different in my browser. For example, when I use
$cc = $('#cc_number');
console.log($cc);
I receive this:
[input#cc_number, context: input#cc_number, constructor: function, init: function, selector: "", jquery: "1.8.2"…]
0: input#cc_number
context: input#cc_number
length: 1
__proto__: Object[0]
But when I do it in the browser console I get:
$('#cc_number');
[<input id=​"cc_number" data-stripe=​"number" type=​"text" maxlength=​"16" tabindex=​"1" style="width:​220px;​" ph=​"Card Number">​]
If anyone knows what is going on, your help would be much appreciated.
That's expected. Try from your browser console running console.log( $( 'body' ) ), you'll get the former of your logs.
There are many ways to play with console, try console.log, console.dir on HTML elements, console.debug, etc.
Can you run jQuery functions on $cc? e.g. $cc.addClass( 'active' )

How to print value of .hasClass via console?

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).

variable assignments using jQuery failing in Safari?

I'm using jQuery 1.3.2 and it's breaking under Safari 4 for mysterious reasons.
All of my javascript references are made right before the tag, yet with the following code:
var status = $('#status');
status.change( function(){ /* ... */ } );
The following error is displayed in the Web Inspector:
TypeError: Result of expression 'status.change' [undefined] is not a function.
However the error is not encountered if I eliminate the variable assignment attach the change method directly like so:
$('#status').change( function(){ /* ... */ } );
Why? I need to use variables for this and several other findById references because they're used many times in the script and crawling the DOM for each element every time is regarded as bad practice. It shouldn't be failing to find the element, as the javascript is loaded after everything except and .
Try changing the variable to something other than "status."
It's confusing your variable with window.status (the status bar text). When I typed var status = $('#status') into the debugging console, the statusbar changed to [Object object]. Must be a bug in Safari.
If you put the code inside a function, so that status becomes a function-local variable, it should work.
It's standard practice in jQuery to wrap things in a
$.onready(function() {
});
This makes sure the DOM is loaded before you try to manipulate it.

Categories

Resources