I am trying to get three different states for check box, one is tick mark, another is box and another is empty.
in the code pen its working fine with horizontal line but how to get box instead of horizontal line.
https://codepen.io/chriscoyier/pen/avyNOd
but in fiddle I am getting an error
(index):418 Uncaught ReferenceError: ts is not defined
at HTMLInputElement.onclick
can you tell me how to fix it.
providing my code below
http://jsfiddle.net/11sp1n7t/
function ts(cb) {
if (cb.readOnly) cb.checked=cb.readOnly=false;
else if (!cb.checked) cb.readOnly=cb.indeterminate=true;
}
In jsFiddle, the javascript is implicitly wrapped in an event handler. It is not in the global scope.
Solution is to attach your onclick event handler in javascript, not in the HTML. You should do this anyway, jsfiddle or not.
Related
I've created a website that has index.html and quiz.html, one style.CSS and one app.JavaScript.
I have added some functions in the JS that refer to both pages. Lets say:
Page 1 index.html: the app.js has an event listener to show a box on click. That box then has a button to move to quiz.html (all works fine).
Page 2 quiz.html: on JavaScript I have functions to make the quiz run. The problem is that the code breaks before it gets to the functions for the quiz, with a line referring to the first page.
Error: app.js:14 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') at app.js:14:35
Line 14 is document.getElementById('btnPlay').addEventListener('click', openBox), that refers to an element within index.html, not the page I am now quiz.html.
I understand why, because on this current page we don't have a reference to it. But I have read in many places that is usually better to use one app.js file and not one per html page. How do we make this work? Any suggestions?
On some page B you don't have that #btnPlay Element therefore document.getElementById('btnPlay') equals undefined. And you cannot assign an event listner to it: undefined.addEventListener.
To make sure that element exists — before moving forward
use Optional Chaining ?..
document.getElementById('btnPlay')?.addEventListener('click', openBox)
otherwise on page B the "#btnPlay" is not found and your JavaScript will break.
Another "old" way to tackle that issue would've been using a statement:
const EL_btnPlay = document.querySelector("#btnPlay");
if (EL_btnPlay) EL_btnPlay.addEventListener("click", openBox);
where the aforementioned is just a shorthand to do the same.
I'm trying to get the value of a textarea with Shopify Product Options by Bold and it is currently not working. I am able to get the value of a textarea locally, but I can not get the value when I move the code over to Shopify. I have looked here and here to no avail.
Here's the relevant code:
document.getElementById("248832").onkeyup=function(){getVal()};
var textbox = document.getElementsByName("properties[Message Body]")[0].value;
and here's the textarea I'm trying to get the value of
<textarea data-option-key="ta_248832" id="248832" class="bold_option_child shapp_full_width " name="properties[Message Body]"></textarea>
When I try to run this on Shopify, I get an error saying "Uncaught TypeError: Cannot set property 'onkeyup' of null", although I did notice that at one point shopify runs the following jQuery code, which might be what's causing my problem:
<script>
jQuery('#248832').change(function (){conditional_rules(7437760391);})
</script>
I am trying to get the value of the textarea so I can run get the amount of words in said textarea.
Any help would be greatly appreciated!
Look to see if the element that is returned as null has loaded yet. Others in similar situations fixed this by loading the script last. Hope this is helpful :)
https://stackoverflow.com/a/25018299/1305878
https://stackoverflow.com/a/31333349/1305878
https://stackoverflow.com/a/23544789/1305878
Solution
You are trying to use something similar to jQuery methods without jQuery:
document.getElementById("248832").onkeyup=function(){getVal()};
while DOM elements don't have the onkeyup method. It should be
jQuery("#248832").on("keyup",function(){getVal()});
Extra notes
even without using the recommended '.on' method, you have to write it as
jQuery("#248832").keyup(function(){getVal()});
(docs), not as
jQuery("#248832").onkeyup(function(){getVal()});
If you'd like to use DOM methods, that would be
document.getElementById("248832").addEventListener("keyup",function(){getVal()});
Also, may be you have wrote this as a minimal example, but the fact that you only call getVal() and don't pass the value somewhere sounds strange, although I don't know if what getVal() does exactly.
I am trying to drag an object and then connect it to 1 of 4 sortable divs. The issue is that since i dont know what the div is, i wrote a script that will, in the drag check to see if the item is in the bounds of a valid option. When it is, it sets the connectToSortable accordingly, but then it crashes.
It when it sets $(this).draggable("option", "connectToSortable", "#"+$(tar).attr("id")); it fails. I was thinking that somehow the draggable object was destroyed, but the big issue is that i cant see where it is broken. The Console is giving me solid logic.
http://jsfiddle.net/mjYt2/
has my example where an error says:
Uncaught TypeError: Cannot read property 'length' of undefined
Maybe i am just doing this horrendously wrong? My goal is to drag an object into a lsit of sortablables. So it will go into the first div, and sort around with "hello" and "World" or it will go to the second and sort about that "hello" and "world".
EDIT: It seems that in my example, the error does not occur if i comment out the inline code as stated above. Something errors there causing the "length" of undefined.
The answer is:
If you assign all the items a class that are sortable, you can then just say:
$(item).draggable({
helper:'clone',
connectToSortable:'.comma,.delimited,#list,#of > .selectors'
});
it seems that i was overthinking it.
So, I have this pretty complex ajax thing going.
It loads new html (including div tags and all) to show up on the page.
I included a 'more' link to load additional data.
This more link links to my javascript function. The 'more' link is located in a div, which I gave a unique id. The next time the load function is called, I use document.getElementById(the id).style.display="none"; to "remove" this div from the look of the page.
I set error traps for this, the div with that id is found without problems, but javascript fails to change my style property.
I tested alert(document.getElementById(the id).innerHTML); and that worked without problems - hence the title of the question.
So, does anyone have any ideas/do I need to offer more information? The main problem is that it doesn't throw any errors anywhere, yet it fails to complete the task I asked...
Here's a bit of code to go with it -
try
{
var myidthing = "morelink" + ContentStart.toString(); //the id is correct
var div = document.getElementById(myidthing);
if (!div)
{
}
else
{
div.style.display="none"; //this doesn't work, but doesn't raise an error
alert(div.innerHTML); //this works without problem
}
}
catch(theerr)
{
alert(theerr);
}
------------------------->EDIT<-------------------------
I'm incredibly sorry if I upset any people.
I'm also angry at myself, for it was a stupid thing in my code. Basically, I had a variable that stored the contents of a parent div. Then I (succesfully) removed the div using the removeChild() method. Then my code pasted the contents of that vaiable (including the div I wanted gone) back into the parent div.
I switched around the order and it works fine now.
Again, excuse me for this.
Throwing out a few ideas of things to look for:
You said the div is generated by javascript. Is it possible the div you are targeting is not the one you think you are? It could be you are targeting another div, which is already hidden, or obstructed... or maybe the innerHTML you are displaying goes with a different element than the one you intend to target. Put an alert or script breakpoint in the if(!div) case, also, and see if it's going down that path.
If the above code is only a stripped-down version of your actual code, check your actual code for typos (for example: style.display = "none;";)
Using the FireBug plugin for FireFox, inspect the target element after the operation completes, and make sure that the display: none appears in the style information. If not, use FireBug's debugger to walk through your javascript, and see if you can figure out why.
Use FireBug to break on all script errors, in case there is another error causing this behavior.
Try empty quotes instead of 'none' and see if that works?:
document.getElementById('element_id').style.display="";
Failing that, don't change the style, just add a class which hides the element.
I'm hoping someone can point a relative jQuery/jqModal newbie in the right direction for debugging this error. I'm loading an html fragment into a div and then use jqModal to display that div as a modal dialog. The problem is that the div is displayed but not with my updated html.
I'm showing my jqModal dialog in the response from a jquery call, function foo is called from an onclick event:
function foo(url)
{
$.ajax({
type: "GET",
url: url,
success: function(msg)
{
$('#ajaxmodal').html(msg);
$('#ajaxmodal').jqmShow();
}
});
}
ajaxmodal is a simple div.
Initially I thought the problem must be in the html snippet (msg) I'm passing to the callback, but I don't think that's it, I get the err (see below) even when I comment out the $('#ajaxmodal').html(msg) line or pass it hardcode html. I think I have jqModal configured correctly, other calls using our ajaxmodal div work correctly, I'm able to display the modal, update the content based the server response, etc.
When I try to debug in firebug, I get the following error following the call to .jqmShow(). I have seen the err on occasion in other places when it seemed maybe the page hadn't loaded yet, and I confess I'm confused about that, since we've wrapped our jqModal selectors in a $(document).ready() call, so maybe I have a larger issue that this call just happens to trigger?
From the jquery.jqModal.js file, line 64: js err is $(':input:visible',h.w)[0] is undefined in the line:
f=function(h){try{$(':input:visible',h.w)[0].focus();}catch(_){}}
When I step through this in firefox, h.w[0] seems ok, it references our '#ajaxmodal' div.
Thanks in advance for any suggestions in tracking this down?
If you have no inputs that need focus, you can change in the jqModal.js from:
f=function(h){try{$(':input:visible',h.w)[0].focus();}catch(_){}},
to:
f=function(h){try{}catch(_){}},
That's what I did anyway ;)
I'm not familiar with jqModal, but you might want to try
append()
Rather than
html()
I'm not sure if that will help, but it's worth a shot
This question is a little on the old side, but this was one of the only results I could find on google for a similar situation so I thought I'd share my experience.
The line in question in jqModal is attempting to focus the first input element it finds within your pop-up form, and if there is none, an exception is thrown. This is why it is in the exception block - nothing bad happens if you disable firebug.
However, if you are like me and find errors bubbling up to be a bit on the annoying side, a workaround is to add a dummy input element to the element you are executing jqmShow on.
Found a soln to my problem, posting the result in case it helps someone else, though I don't quite understand it.
The issue (I think) has something to do with ajaxmodal not quite being initializel as a jqModal element when I make .html() call. Calling .jqmShow initializes the div with our default text. I had thought putting this in document ready function was sufficient to initialize the dialog:
$('#ajaxmodal').jqm({ajax: '#href', trigger: 'a[rel*=modal]', ajaxText: 'Loading...'});
but to solve my problem I had to reverse the calls:
$('#ajaxmodal').jqmShow();
$('#ajaxmodal').html(msg);