Is append and appendChild getting overwritten? - javascript

I am using jspmBundleSFX.
In one of my index.html in one of my directories, when I type, $("#sfsdfasfsdaf").append in console.
I get function(){return x(this,arguments,function(a){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var b=s(this,a);b.appendChild(a)}})} Chrome says it belongs to main.js which is the bundled and uglified js.
$("#sfsdfasfsdaf") Does not even exist, what is hapenning?
This also happens with ids that exist $("#canvas").append I get the same result.
appendChild however returns undefined
In another index.html in another directory everything works absolutely fine. I have no idea how to fix this problem. Both index.html include the main.js uglified file.
EDIT: I replaced $("#canvas"); with document.getElementById('canvas'); It works fine now. However I still have no idea why this problem was happening. Did some script overwrite or have conflicts with jQuery?

$("#sfsdfasfsdaf") Does not even exist, what is hapenning
The reason is $(selector) will always return a jQuery object regardless whether there are matching elements existing or not. That object will always include a property append which is a function. There is no jQuery method appendChild which is why you see undefined.
Beyond that it is not clear at all what you aare trying to do or what higher level problem you have

You are creating a jQuery object. It may be an empty jQuery object (if the element doesn't exist or, more accurately, if no elements match the selector) but it is still a jQuery object.
As such, it still has all the jQuery methods, such as .append. It just won't do anything if you call it.
Vanilla JavaScript, however, gives null if the element doesn't exist (eg. document.getElementById('herpaderp') will be null), and null doesn't have the methods that an element would have such as appendChild.
Personally I consider this a good thing in general - if I say I want an element and it doesn't exist, chances are there are bigger problems and an error should be thrown, but jQuery will continue happily along.

Related

How do I troubleshoot a jQuery object?

Code:
const elements = $(".container .element").first().nextAll().addBack();
Here's my HTML:
The code is supposed to grab the first element and all the content after it. Depending on the HTML, this could return at a lot of different things, including nothing if I have a typo in my jQuery code. If the code that follows doesn't function correctly, how do I see what's inside elements for troubleshooting purposes?
I tried logging elements.html(), but that only printed the contents of the first element.
I tried using the Firefox debugger on elements, but the object is very complex, contains a lot of irrelevant troubleshooting information, and I couldn't figure out how to find what the jQuery object actually represents.
The only way I could figure out my code was correct was by logging elements.text(). That printed the text inside every element, and by doing that, I knew I had grabbed each one. It didn't tell me I grabbed the BR tags, but the documentation for nextAll said it would, so the gave me another faith it was doing what I wanted (I don't like relying on faith). The other problem with this solution is that it's highly contextual and won't work in all situations. There won't always be text in the HTML.
I'm out of ideas. How do I see what's inside a jQuery object for troubleshooting purposes?
Use
console.log(elements.get())
The jQuery get() method with no arguments returns the contained DOM elements as an array.

How can I locate the correct element using querySelector

In chrome console, i am able to inject a js like below
$("#pageForm").window('open');
And then the DIV form will pop up, however, if i change it to below
document.querySelector("div#pageForm").window('open');
It will return error: Uncaught TypeError: document.querySelector(...).window is not a function
at :1:41
Am I doing wrong in locating an element ?
Thanks
The window method you're calling - whatever that is - is a method that is provided to jQuery by a plugin you're using. It doesn't seem as though jQuery has a window method out of the box. Because you're using a jQuery plugin you need to locate your element using jQuery instead of a query selector.
that $ (dollar sign) you use is jQuery. (It may not be exactly every-day jQuery, it might be something chrome made up for pages that have not jQuery)
there is a difference between the result of $('<some_selector>') & document.querySelector('<some_selector>'); the first one returns a javascript object, which is a wrapper around the DOM Node found in the HTML. this wrapper object has some methods on it (including height(), width(), show(), window(), etc...) which may be added by jQuery or it's plugins (as suggested by Dwight). But the second way (document.querySelector) returns a DOMNode. it is a regular DOM Node and no! it has not a window() method on it
Yes, I agree with answer above. It seems you correctly select the element. However, window property does not belong js out of the box. Its gotta be a jquery plugin so that you can use with jquery. Another function made available to jquery.
You could simply wrap the queryselctor with $
$(document.querySelector("div#pageForm")).window('open');

JS GetElementByClassName[0] return undefined

I am following a tutorial on W3Schools to make a JS slideshow. While this seems simple enough, even after directly copying their code, my JavaScript is having some VERY nonsensical and frustrating errors. The issue seems to be that, when my function accesses document.getElementsByClassName("slides")[some_index_here], it returns undefined, despite that, when I access the SAME element in the exact same way through inspect element console, what I am looking for shows up. What is going on?
I found that I needed to wrap what I did in a window.onload function, because the code was executing before elements existed.

jQuery in Opera User JS Doesn't Work

). I'm playing with some Opera User JS. I included "1jquery.min.js" in my User JS folder (1 in front because Opera loads them alphabetically). Unfortunately, it doesn't appear to be working.
window.onload = OnWindowLoad;
$(document).ready(function()
{
alert ($('#area_19'));
});
function OnWindowLoad ()
{
alert ($('#area_19'));
alert(document.getElementById("area_19"));
}
What's interesting about this code is that the first two alerts come back in NULL, but the last one does find the object! So the element definitely exists in the page, but my jQuery seems unable to get it. What's even stranger is that the jQuery "ready" function works, indicating that I do have jQuery capability.
I'm quite puzzled about all this ::- /. Hopefully somebody can give me a clue ::- ).
I suspect you are running the script on a page that uses another JS framework, probably Prototype.js.
If Prototype were included by the target page it would overwrite your jQuery copy of $ with its own that gets an element by ID, not selector. Since there is no element with ID #area_19 (# not being a valid character in an ID), it would return null. jQuery would never return null for a non-existant element, you'd only get an empty wrapper object.
(The $(document).ready() code would still execute because the $ was called before Prototype was included and changed the behaviour of $.)
Try using the explicit jQuery function rather than the $ shortcut.
These sorts of interferences are common when mixing multiple frameworks, or even mixing two copies/versions of the same framework. From jQuery's side its interactions can be reduced, but not eliminated, with noConflict. Personally for code like user scripts that might have to live in a wide range of contexts not controlled by myself, I would avoid using wide-ranging frameworks like jQuery.

document.getElementById() VS. getElementById()

It is common for me to register javascript functions for certain events by doing something like:
myBtn.Attributes.Add("onClick", "Validate(getElementById('"+txtFirstName.ClientID + "'));");
I've always used getElementById by itself, or in other words, sans document being prepended to it. But I'm having pages break on me lately when I try to use getElementById instead of document.getElementById. Why is this? Oddly, I have a website where one page allows me to use just getElementById, but another other page throws a javascript error because it can't find the element if I do just getElementById, and it'll only work if I do document.getElementById.
Anyone know why this is? Should I be using document.getElementById everywhere, regardless of whether it works without the document prefix?
EDIT:
Could it have anything to do with the fact that one page is using AJAX and the other isn't?
When you use getElementById() and it works that mean that the function where it's called is running on the context of the document, that's is this == document.
So, you should ALWAYS use document.getElementById to avoid that kind of errors.
Anyway, I would even stop using getElementById altogether and start using JQuery, i'm sure you'll never regret it.
Your code would look something like this if you used JQuery:
$("#myBtnID").click(function () { Validate($("#myTextboxID"))});
Any function or variable you access without an owning object (ex: document.getElementById) will access the property from window.
So getElementById is actually window.getElementById, which isn't natively defined (unless you defined it before (ex: getElementById = document.getElementById).
You should use the full document.getElementById(). If you find that too verbose, you could use jQuery:
$('#' + id)
or you could create an alias at the top of your script:
var byID = document.getElementById;
You should only use document.getElementById (even if I'd recommend using libraries like prototype or jquery to be able to use the $ sign).
If you are able to use getElementById on its own, it's just because the browser you're using is doing some kind of trick to get it to work, but the correct way is to use the document variable.
I dont really know how to explain it but its because the getElementById() finds an element in the html structure of a page. Some browsers know that by default you want to search the document, but other browsers need that extra guidance hence document.
The correct way is indeed document.getElementById().
The reason (speculation) it might work by itself is that depending on where you use it the current context may in fact be the document object, thus inexplicitly resulting in document.getElementById().

Categories