function myfunction(id){
//code
$("#mydiv").hide();
};
But 'mydiv' is dynamically added , and the function is not working .
Since the part of the code you shared seems to be fine, I suspect that there is something else wrong with your code.
Try to debug it. It is not that hard and let's you figure out errors on your own much faster than looking at your code really hard.
First if would be good to know if you reach that line of code in question. You can open the developer console and add a breakpoint to the line in question, or you can add alert("this line is reached and executed") in your code, and then you will know if that line is reached and executed.
If you reached the line in question, it would be good to know things about what is happening there:
For example it would be good to know if $("#mydiv") matches anything. If you are afraid of the developer console, you can always try: alert($("#mydiv").length). If it's 0, there is nothing matched, if it's 1, you have matched an element that will be hidden if you call $("#mydiv").hide(). If it's 0, you haven't been able to match an element. That means that there is currently no elements in your DOM with the id of mydiv. It does not matter if it should have been added dinamically or should be there from the start, it's not there. You might have made a spelling mistake in the id.
Since you are matching something added dynamically by it's id, it is possible that you already have an element with the ID mydiv. If there is more elements with the same ID, only the first one will be matched! More than one elements with the same ID is not just bad practice, it's invalid, and will possibly lead to more bugs and headaches later.
If you are sure that you match the correct element and it's not hidden when you call $("#mydiv").hide(), than there is always ways to look for the problem: for example if you open the javascript developer console, the javascript errors will be listed there. Be sure to check them if they are related to this problem.
Happy bug hunting!
Make sure that you're calling $("#mydiv").hide(); after you've added #mydiv. The code itself will work absolutely fine, provided you've already added #mydiv.
Related
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.
Imagine this: You want to make some things with a XML element you receive in a method. So you try this:
function makeNiceThings(XMLDOM){
if(XMLDOM.getElementsByTagName("err")){
makeReallyNiceThings(XMLDOM.getElementsByTagName("err")[0].childNodes[0].nodeValue);
}
}
So, Javascript tells you you're trying to call childNodes[0] from a null reference. But if you try:
function makeNiceThings(XMLDOM){
if(XMLDOM.getElementsByTagName("err")[0]){
makeReallyNiceThings(XMLDOM.getElementsByTagName("err")[0].childNodes[0].nodeValue);
}
}
It works flawlessly.
However, you update the page sometimes, and both are working again, no problems at all.
I have already faces so many situations like this, that I really want to know if there is a place I can show these bizarre errors in order to make javascript even better. Google returned me nothing but places to discover programmer errors. Ideas?
Well, I don't see an issue there. In the first example you may get and empty array which is not nothing. So the condition becomes true. Whereas in the second example you do what you really meant to do — check if there's an element with index 0.
Or, if you are really convinced that this is not your fault, you should do what Rocket Hazmat said:
Bugs with JavaScript itself should be reported to the bug tracker of
the browser. Though, chances are this is not a bug with JavaScript.
But most probably this is a mistake in the code. If there's no err elements, you'll get an empty array and the condition will be evaluated to true; but there's no 0th element — that's why you get an exeption.
Hope that was clear.
I am new to javascript and have problems placing this element.
I can open terminals and write to them no problem. However everytime I create one it is just appended to my body at the very end.
according to this example:
https://gist.github.com/steinwaywhw/9920493
I could set a parent during the open method but I use this and it just still appends to the end of the body.
This is the method I use:
term.open($("#myterm").find("div")[0])
I might be overlooking really simple but I cannot seem to find it :/
There is a bug with term.js and jquery selectors, please test with getElementById like :
<div id="term"></div>
term.open(document.getElementById("term"));
it work for me.
Pascal
I am currently working on a project where most of the code has been written by someone else . I was supposed to do some slight modifications in the existing script to incorporate changes in a new file. I came across a situation where it was very confusing . The scenario is as cited below:
I have an element named as complextabs and it is being used for almost all the pages, except for the one which is being created newly. The situation is there is a code snippet that is written as $('.complextabs').hasClass('.hide'). this incredibly returns the same as when the element complextabs is not even present in the page. Can someone please throw some light on this
And yeah, I am working on Backbone.js . Has this got something to do with the use of Backbone.js
Any suggestion and advice is highly appreciated
Nope, that has nothing to do with the use of Backbone.
Consider the following:
$('.asdasda').hasClass('hide')
This will return false, and it should return false because $('.asdasda') does not return any results. Just running that will yield a JQuery wrapper over an empty list and since there are no elements then obviously there's nothing in there with the css class hide.
If you want to check that there is an element with both the complextabs and the hide class then use $('.complextabs.hide').length.
I have an editable div. The content of that div looks e.g. like that:
This is a <ins>new</ins> chapter.
(The tags are not visible, they are for styling)
If you set the text cursor in front of the "new" everything is fine. But if you set the text cursor behind the "new", the cursor is inside the < ins >-tag and new typed text is also inside the tag:
This is a <ins>new and very interesting</ins> chapter.
But it should look like that:
This is a <ins>new</ins> and very interesting chapter.
How can I set the text cursor behind the tag and prevent that new text is written inside the tag?
OK. The first idea was to made the
<ins contenteditable="false">new</ins>
Inside the contenteditable="true" element. Further reading (contenteditable=false inside contenteditable=true block is still editable in IE8) tells that this is not as always interpreted good in IE. In this post there is a hack answer (https://stackoverflow.com/a/7522910/1125465) but I really do not agree. It is just a mistake which will probably be repaired in the next versions of browsers.
Next I followed this link (HTML contenteditable with non-editable islands) and I haven;t got good news. There is no way of blocking the ins tag from editing so simple. First of all a little note:
If this isn't an additional functionality You must be sure it works as it should. As You wrote The user isn't allowed to write inside the -tag, so all the options:
working in almost every browser...
working with a little bug...
working but if someone...
must be rejected. So if someone turns the javascript off, it should work too. In that case I've come to the first conclusion (as always): server side verification MUST BE DONE.
This will prevent the user from destroying Your database and doing things he can't.
After server side verifying (and showing notification if something is wrong of course) it is going to be additional functionality. So we should do all we can now, to make it work (but now there is no obligation).
NICE LECTURE :)
https://stackoverflow.com/a/7232871/1125465
http://jsfiddle.net/X6Ab8/
**SOLUTION **
I propose something like... I know this sounds a little bit more like old days with milion tags, but really this will work and will be great.
Make an additional span element between the ins elements (for example using php:
$text = '<span contenteditable="true">'.$text.'</span>';
str_replace('<ins>', '</span><ins>', $text);
str_replace('</ins>', '</ins><span contenteditable="true">', $text);
Make this span editable, and only this span editable (not the block container). That's all. Solution is simple, clean, much more efficient and almost 100% safe. And nice...
ADDITIONAL SAFETY when using javascript hacks
If You need it to be done fully with javascript (maybe someone has idea how?), for total safety I would propose additionaly something like this:
Add data-noneditable-id="id" to each non editable element inside the main block editable container. Now every non editable element has it own unique id (can be done using jQuery for example using selector $("div#editable ins")).
Run a javascript that will run through all the objects that has attribute "data-noneditable-id" and save their innerHTML in array (for example: 1 => 'new', 2=> 'added', 3=> 'inserted', ...).
Now if someone edit any of them, You can easily repair them.
PS. This should also help a little... (https://stackoverflow.com/a/4979828/1125465).
Hope it helps! Best regards.