We Keep Coding

Using variables in Javascript Open Function

I'm new to Javascript and I have what is probably a pretty basic question. I have some tools tips and want to open them with a click. I create a Javascript call on the click. I can pas the element ID I want to open, but I don't know how to get it to work in the Open call.
<script type="text/javascript">
function opentip(tipID) {
//alert(tipID);
$(#tipID).tooltipster('open');
}
</script>

It's not necessary the function opentip(tipID) to bind the mouse click. I will give you an genereic exemple. You have to import Tooltipster's CSS and JS, and jQuery, so the code will be:
<span class="tooltip" title="Tooltip content!">Target tag</span>
<script>
$(document).ready(function() {
$('.tooltip').tooltipster({
trigger: 'click'
});
});
</script>
When clicl on "Target tag" will appear an tooltip with "Tooltip content!" inside.
The $(document).ready(function() {}); is important to be sure that when the script runs, the browser have already the DOM ready, so the script can find the HTML elements.

You are using JQuery syntax. Insert JQuery plugin and add single quotes in your syntax $('#'+tipID).tooltipster('open'); and add inside document.ready
<script>
$(document).ready(function(){
function opentip(tipID) {
//alert(tipID);
$('#'+tipID).tooltipster('open');
}
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Run Javascript based on HTML class clicked

I have a tiny script I'm working on :)
The idea is if the span tag just contains autocompleteitem and not autocompleteitem autocompleteitemwithcontainer then it'll display the word hello. Right now it displays hello for both :(
Demo: https://jsfiddle.net/L33mqqtp/
$(document).ready(function() {
$(document).on('click','.autocompleteitem',function(){
$("div").show();
});
});
How do I update my code to do this?

Try this
'click','.autocompleteitem:not(.autocompleteitemwithcontainer)'

They both have .autocompleteitem class! To obtain what you want, use a different selector, which only applies to first one:
$(document).ready(function() {
$(document).on('click','.autocompleteitem:not(".autocompleteitemwithcontainer")',function(){
$("div").show();
});
});

try this
$(document).ready(function() {
$("span").on('click', function(){
if(this.className == "autocompleteitem")
$("div").show();
});
});

Use the attribute selector syntax. That will allow you to directly match an entire attribute. This way you don't have to make a bunch of different combinations for each thing that you don't want to be selected.
Example selector: jQuery('[class="autocompleteitem"]')
Working Example:
$(document).ready(function() {
$(document).on('click','[class="autocompleteitem"]',function(){
$("div.containertoshow").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Should work<br>
Should not work
<div class="containertoshow" style="display:none;">That button does toggle me on/off!</div>

jQuery document.ready not prepending

I have noticed that document.ready not prepending <div> tag.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
var shadow = $('<div id="shadowElem"></div>');
var speed = 1000;
$(document).ready(function() {
$('body').prepend(shadow);
}(jQuery));
</script>
- In console, There are no errors.
This is truly frustrating now and any help will be really appreciated.
~ Dipak G.

try this:-
var shadow = jQuery('<div id="shadowElem"></div>');
jQuery(document).ready(function() {
jQuery('body').prepend(shadow);
});
for more information check This link

I suppose that problem is in document.ready().
Try this instead:
$(function() {
$('body').prepend('<div id="shadowElem">Test</div>');
});

I would look into a conflict with prototype.js and jQuery. You may need to try jQuery.noConflict();
I would suggest using one library instead of both. Of course you will need to use a jquery lightbox instead, from what I see on your link.

Auto click a link by class name using javascript or jquery?

I am trying to auto click a link using a class name instead of the ID name.
however my approach doesn't do anything!
Here is what I have done:
<script type="text/javascript">
$(document).ready(function(){
document.getElementsByClassName("some-iclass").click();
});
</script>
Could someone point me in the right direction please?
EDIT:
I've used the following code and still doesn't work:
<script type="text/javascript">
$(document).ready(function(){
$(".myLink").click();
});
</script>
<a class="myLink" href="http://yahoo.com"> CLICK HERE NOW </a>
and I have this right at the top of my page header:
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
EIDT:
i've tried this as well and still doesn't work:
<script type="text/javascript">
$(document).ready(function(){
$('.myLink').trigger('click');
});
</script>

here you go:
<script type="text/javascript">
$(function(){
$('.className').trigger('click');
});
</script>
hope that helps.
UPDATE:
try:
<script type="text/javascript">
$(function(){
window.location.href = $('.className').attr('href');
});
</script>
after your edit, i think this is what you need.

getElementsByClassName doesn't return an element but a NodeList which may contain more than one element.
You may do this :
document.getElementsByClassName("some-iclass")[0].click();
or if you want to click all elements :
var list = document.getElementsByClassName("some-iclass");
for (var i=0; i<list.length; i++) list[i].click();
But as you use jQuery, it would be simpler to do
$('.some-iclass').click();
but only when the click event handler was added with jQuery (in other cases, like for example in case of an href attribute, use the standard dom functions).

$(document).ready(function(){
$(".some-iclass").trigger('click');
});

Simple with jquery $(".some-iclass").click();
if you have a lot of elements with this class - point to the wanted element:
i.e. $($(".some-iclass")[0]).click();

for auto-clicking a button or a link
"<"body onload="document.getElementById('some-class')[0].click()" ">"
this works...:)

if you want to autoclick a link and you are using jQuery, you could use
$('.yourClass').click();
if you need this to be one link in a collection of multiple links, you could do this:
$($('.yourClass')[0]).click();
Where 0 is the index of the element in the jQuery object.
document.getElementsByClassName('yourClass'); does not work in older browsers so it's best to use jQuery here for cross-browser compatibility.

For me, I managed to make it work that way. I deployed the automatic click in 5000 milliseconds and then closed the loop after 1000 milliseconds. Then there was only 1 automatic click.
<script>
var myVar = setInterval(function ({document.getElementById("test").click();}, 500);
setInterval(function () {clearInterval(myVar)}, 1000);
</script>

JS: body tag onload equivalent?

I need to basically add this to my page:
<body onload="document.getElementById('WeddingBandBuilder').focus()">
However due to my template I cannot change the tag. So is there a way to do the equivalent with a script in the < head > tag or something?
Thanks!

<script>
window.onload = function() {document.getElementById('WeddingBandBuilder').focus()};
</script>

You should always be careful there isn't already a window.onload defined. I've been burned a number of times by assuming I would be the only one attaching things to <body onload="..."> or window.onload.
See this answer and comments for a solution to this issue.

Use a JS library like jQuery or Prototype and create an external script file with something like this:
for jQuery:
$(function() { $('#WeddingBandBuilder').focus(); });
for Prototype:
Event.observe(window, 'load', function() { $('WeddingBandBuilder').focus(); });

I might check if that page has already included jQuery? If so, you can do something like this:
$(document).ready(function() {
$('#WeddingBandBuilder').focus();
});