I have this line of code
$("#ir-area-name").html(list);
That works just fine, but I need to move this into a function that can be called for any id, and every answer I have seen says I can run it like this:
$("#"+variable_name).html(list);
where variable_name is a string containing the id. But, this isn't working for me, it doesnt find any element and no error message is printed. When printing the contents of the selector to console they both print the value [object Object]. However, when running it with the variable the element dissapears from screen (as it apparently didn't find the element so it never ran html()). For testing purposes I tried it like this as well:
$("#"+"ir-area-name").html(list);
But this still didn't find the element. So the question is how can I use a variable in a jquery selector (using jquery 1.7.1, testing on firefox).
You should use string concatenation.
$("#" + ir-area-name).html(list)
Or using ES6 string substitution syntax (docs)
$(`#${ir-area-name}`).html(list)
If the element is found, the html of the element will be replaced with the contents of list.
Related
Actually, it seems to work in JSFiddle without much problem.
https://jsfiddle.net/3zjqwbgy/5/
However, when I try to run it locally using Notepad++, I get the following error:
Cannot read property 'appendChild' of null
What could be the reason for this? How can I make it work locally?
Make sure you have the HTML available when you run the appendChild method.
That means you'll wrap everything into an load handler:
window.addEventListener("load", function () {
/* your actual code */
...
showElmntProperty("myDeck", "cardName", "first");
});
It's working in JSFiddle because JSFiddle is doing that for you automagically (by default)–you can change it, though:
Since your code works on JSFiddle, the only thing I can think of off the top of my head is you've misplaced your <script></script> tags. Try moving them down below the Table, so that they can be "seen" by JavaScript.
Whenever you get a "Cannot read property "some property name" of null, it simply means that the object that you are calling the method on doesn't actually refer to the object you think it is - it's not pointing to any object at all.
Now, in your code, you didn't say where (exactly) you are getting the error, but take these two lines:
node.appendChild(textnode);
document.getElementById(id).appendChild(node);
If you are getting the error on the first line, then the node variable does not, in fact, refer to anything. If it's the second line you are getting the error on, then document.getElementById(id) isn't returning an actual object, in which case, you'd need to check to see that the id variable you are using there actually matches an id of an HTML element.
And, of course, knowing when your code runs is vital. It may be that:
document.getElementById(id)
Is attempting to locate an element before that element has been parsed into the DOM.
I am using jQuery and would like to retrieve the 'id' attribute
of a clicked element, which in this case is a element.
Kindly check the image below. Notice that the returned string whenever
I use the attr() method in jQuery is somekind of an object (or array perhaps).
The expected value is printed below the next line. It returns the right value when
I use this:
$(this)[0].id
When an element is clicked, Isn't it the element is the one being reference in 'this'?
Why does attr() return an array?
I isolated the code and figured out that the tinymce plugin for jquery is making a conflict. Check out the static.html
https://www.dropbox.com/s/wbk8hxqjw34hzn1/jquery-attr-not-working.7z
Sorry for the archive, Dropbox won't let me upload 9mb and above so I have to compress.
On Firefox, when hovering the mouse over a certain table in my webpage a strange [object HTMLTableCellElement] tooltip appears:
What needs to happen for this to occur? I am having a hard time narrowing what part of my code is the culprit because I don't even know what to look for.
Edit, solved the problem:
This table belongs to a Dojo Dijit template. I accidentaly gave one of the template's nodes the dojo-attach-point "title", causing Dojo to, during the rendering of the Widget, do a
this.title = the_node_with_the_bad_attach_point
The node is then converted to a string and that is where the "[object HTMLTableElement]" comes from.
Probably this:
cell.title = cell;
which can be described as a failed attempt to store the reference to the cell inside its own title property (which holds the string that is shown inside the tooltip on mouse-over).
Live demo: http://jsfiddle.net/VwYRP/
Object references - when coerced to strings - usually look like so: '[object Constructor]', where Constructor is the constructor function which the browser uses to instantiate that object.
Install Firebug and inspect the element. Do you see a title in the text? Check the DOM attributes. Maybe you can spot it there? Or maybe some JavaScript does not work properly. You'll get that message if you do an alert(document.createElement('th'));.
I'm using the .replace()-Method to replace HTML content. I need the previous element that gets replaced so I'm using the return value of this function. In IE8 this returns an empty string in a specific case (I can't provide an example, because the script is not standalone).
I did some research and found out that IE8 calls Element.Methods.replace in line 2770 (Prototype 1.7), where Mozilla does call "replace" in line 2059.
Element.Methods.replace does some stuff and finally replaces the original elements outerHTML with the new content which gets stripped somehow (line 2791).
Finally it seems to me it returns the orginal element that should be replaced, but already modified with the new content in line 2791, where it becomes an empty string.
So I basically have two questions:
To dig a little bit further why this happens, can someone explain when exactly this method is called? IE doesn't seem to fire it on every replace() call.
It seems wrong to me that this function returns the modified original element instead of just returning the original element. Is this expected behaviour here?
Is anyone familiar with Native Code in OS X Safari (Version 3 and WebKit)? I'm using Javascript to parse some information in a form and one of my inputs is named "tags". When trying to get the value of that element using:
// button is being passed through a function as a DOM object
var tags = button.form.elements["tags"].value;
Safari returns some kind of function. I've gotten it to alert values like "function tags() { [native code] }" and Node Trees but I just can't understand why I would be having trouble. If anyone has a clue, please let me know. I've gotten it to work by changing the name of the input to something else and also by iterating through all elements and using if () statements to determine whether it's the element I want, but I'm awfully curious as to why Apple would restrict the use of any form element named "tags"...
P.S. - It's test and works fine in firefox.
[native code] just means that it's a function that is built in to the browser, rather than written in JavaScript. tags appears to be a WebKit extension to the DOM to allow you to get a list of elements in the form by tag name. For instance, if I run this on the StackOverflow page, I get the answer text area:
document.getElementById('submit-button').form.elements.tags("textarea")[0]
The issue is that an index into a collection in JavaScript also access any object properties (including methods), so when you try to access your named element tags, you get instead the method on the elements object that WebKit defines. Luckily, there is a workaround; you can call namedItem on the elements list to get an item by id or name:
var tags = button.form.elements.namedItem("tags").value;
edit: Note that its probably better to use namedItem in general even in other browsers, in case you need to retrieve an element named item or length or something like that; otherwise, if you use them as an index with the [] operator, you'll get the built in method item or length instead of your element.