We Keep Coding

Auto Click Button Javascript

I cannot call & click a button using their ClassName or ID. I get an error
.click is not a function
What is wrong in my code?
I want to autoclick the download button using their ClassName or ID and tried the two code below but it is not working.
window.addEventListener("load", function() {
document.getElementById("toolbar_download_button").click();
});
<div id="toolbarNew" class="toolbar">
<div id="toolbarContainer">
<div id="toolbarViewer">
<div id="toolbarViewerRight">
<button id="toolbar_download_button" type="button" class="toolbarButton" style="float: left;" data-cha-target-name="download_doc_btn" data-cha-location="doc_viewer" data-cha-action-type="download" data-cha-action-target-id="50272799" data-testid="toolbar-download-btn">
<div class="toolbarButton_tooltip" data-testid="toolbar-download-btn-tooltip">Download</div></button>
</div>
</div>
</div>
</div>

It looks like you're mixing up the jQuery click handler with Vanilla JavaScript. That's why it's throwing the error you mentioned.
If you want to add a click event handler you could do in several ways:
With the native click event handler
With the native onclick global event handler
With jQuery's click
With jQuery's on
window.addEventListener("load", function() {
// Vanilla JavaScript 'click'
document.getElementById("toolbar_download_button").addEventListener('click', function() {
console.log("Fire one");
});
// Vanilla JavaScript 'onclick'
document.getElementById("toolbar_download_button").onclick = function() {
console.log("Fire two");
};
// With jQuery's 'click'
$("#toolbar_download_button").click(function() {
console.log("Fire three");
});
// With jQuery's 'on'
$("#toolbar_download_button").on('click', function() {
console.log("Fire four");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="toolbarNew" class="toolbar">
<div id="toolbarContainer">
<div id="toolbarViewer">
<div id="toolbarViewerRight">
<button id="toolbar_download_button" type="button" class="toolbarButton" style="float: left;" data-cha-target-name="download_doc_btn" data-cha-location="doc_viewer" data-cha-action-type="download" data-cha-action-target-id="50272799" data-testid="toolbar-download-btn">
<div class="toolbarButton_tooltip" data-testid="toolbar-download-btn-tooltip">Download</div></button>
</div>
</div>
</div>
</div>
Tip: If decide to add jQuery to your project, then you might as well take advantage of it and use it to handle everything (capturing DOM elements, adding event handlers, etc.,). Otherwise use the native JavaScript handlers instead.

Button Onclick only working on first element

When clicking button on elements, overlay box only works with first one, not the rest
I tried already to add 2 classes but not working as I read that that might be the issue, but I am not able to make it work properly.
<div class="container">
<input type="button" value="Contactar ahora" id="Overly" class="overly"
/>
</div>
<div id="ogrooModel" class="modalbox ogroobox" >
<div class="dialog">
<button title="Close" onClick="overlay()" class="closebutton" id="close">close</button>
<div style="min-height: 150px;">
</div>
</div>
</div>
<script>
//only javascript
document.getElementById("Overly").addEventListener("click", function(){
var e =document.getElementsByClassName("modalbox");
e[0].style.display = 'block';
}) ;
document.getElementById("close").addEventListener("click", function(){
var e =document.getElementsByClassName("modalbox");
e[0].style.display= 'none';
});
</script>
What exactly to change in that code so the rest of elements display the box after clicking on button?

You don't need onClick="overlay()" for your close button, as you are already binding it with a click event listener in your script.

jQuery "on click" don't work on ios/safari

I know there's bunch of link here for my problem but none of them can solve my problem. I have code like this
$('[name=pie]').on('click change touchstart tap', function() {
$('#summary_pie').html($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-item">
<input type="radio" name="pie" id="pie-wheat" value="Tortilla pszenna">
<label for="pie-wheat" onclick=""><img src="img/pie-wheat.png"></label>
<p class="description">Tortilla pszenna</p>
</div>
<p>Tortilla: <span id="summary_pie"></span></p>
and it works on chrome etc. but don't work on ios. I tried:
- adding cursor: pointer
- adding empty onclick
- adding touchend event
but nothing work. In my php I have only 2 css (reset.css and my own). Deleting them don't work. Please help me.

I have just modified click event calling code and also tested the same on ios device.so it may solve your issue.try this
$(document).on('click change touchstart tap','[name=pie]', function() {
$('#summary_pie').html($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-item">
<input type="radio" name="pie" id="pie-wheat" value="Tortilla pszenna">
<label for="pie-wheat" onclick=""><img src="img/pie-wheat.png"></label>
<p class="description">Tortilla pszenna</p>
</div>
<p>Tortilla: <span id="summary_pie"></span></p>

try
$(document).ready(function(){
$('[name=pie]').on('click change touchstart tap', function() {
$('#summary_pie').html($(this).val());
});
})

delegate jQuery toggle event to the rest of the document

I have a dropdown menu activated on click.
I use toggle to activate it when you click on the .hello_panel
HTML
<div class="container">
<div class="login_panel">
<div class="hello_panel">
<div class="hello_label">Hello </div>
<div class="hello_value">foofoo</div>
</div>
</div>
</div>
jQuery
$('.hello_panel').bind('click', function(){
$('.menu_popup').toggle();
})
if I click it it works fine, it does the show and hide effect when the .hello_panel
is clicked.
what I want is it to be shown if the .hello_panel is clicked and hidden back if when clicking anything else on the page except the .menu_popup

You can hide it whenever you click on the document
JavaScript
$(document).click(function () {
$('.menu_popup:visible').hide();
});
$('.hello_panel').bind('click', function (e) {
$('.menu_popup').toggle();
e.stopPropagation();
});
HTML
<div class="container">
<div class="login_panel">
<div class="hello_panel">
<div class="hello_label">Hello</div>
<div class="hello_value">foofoo</div>
</div>
</div>
</div>
<div style="display:none" class="menu_popup">menu_popup</div>
Demo
http://jsfiddle.net/6bo1rjrt/16/
Another way if you don't want to stopPropagation is passing a call back function that registers a once time click listener to that document to hide the menu
$('.hello_panel').bind('click', function () {
$('.menu_popup').show(function () {
$(document).one('click', function () {
$('.menu_popup:visible').hide();
});
});
});
Demo
http://jsfiddle.net/6bo1rjrt/17/

Twitter bootstrap - Focus on textarea inside a modal on click

Just starting to play around with bootstrap and it's amazing.
I'm trying to figure this out. I have a textarea for feedback inside a modal window. It works great. But I want the focus to go on the textarea when you click on the button to activate the modal. And I can't seem to get it working.
Here is a fiddle: http://jsfiddle.net/denislexic/5JN9A/4/
Here is the code:
<a class="btn testBtn" data-toggle="modal" href="#myModal" >Launch Modal</a>
<div class="modal hide" id="myModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<textarea id="textareaID"></textarea>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>​
Here is the JS
$('.testBtn').on('click',function(){
$('#textareaID').focus();
});​
To resume
When I click on "Launch modal" I want the modal to show up and the focus to go on the textarea.
Thanks for any help.

It doesn't work because when you click the button the modal is not loaded yet. You need to hook the focus to an event, and going to the bootstrap's modals page we see the event shown, that is fired when the modal has been made visible to the user (will wait for css transitions to complete). And that's exactly what we want.
Try this:
$('#myModal').on('shown', function () {
$('#textareaID').focus();
})
​
Here's your fiddle updated: http://jsfiddle.net/5JN9A/5/
Update:
As #MrDBA notes, in Bootstrap 3 the event name is changed to shown.bs.modal. So, for Bootstrap 3 use:
$('#myModal').on('shown.bs.modal', function () {
$('#textareaID').focus();
})
New fiddle for Bootstrap 3: http://jsfiddle.net/WV5e7/

I wanted to have a declarative version of this, so I went with the following :
$(document).ready(function() {
$(".modal").on('shown.bs.modal', function () {
$("[data-modalfocus]", this).focus();
});
});
You can then simply add a data-modalfocus property to your field, like so :
<input type="text" data-modalfocus />
And when the modal pops-up, your field will get focus.

Bootstrap3
$(window.document).on('shown.bs.modal', '.modal', function() {
window.setTimeout(function() {
$('[autofocus]', this).focus();
}.bind(this), 100);
});
Bootstrap 2
$(window.document).on('shown', '.modal', function() {
window.setTimeout(function() {
$('[autofocus]', this).focus();
}.bind(this), 100);
});

You can use the autofocus html element to set the autofocus.
<textarea id="textareaID" autofocus="" ></textarea>
Fiddle here (Click)

If your modal has the 'fade' property:
This will work but you might have to adjust the duration of the timeout and obviously the IDs where needed:
$("#ID-of-modal").on('show', function(event){
window.setTimeout(function(){
$(event.currentTarget).find('input#ID-of-input').first().focus()
}, 0175);
});

I was having major issues in chrome... I hope this helps someone.
//When user clicks link
$('#login-modal-link').on('click',function() {
setTimeout(function(){
//If modal has class
if ($('#login-modal').hasClass('modal')) {
//Whatever input you want to focus in
$('#user_login_modal').focus();
}
},100);
});

As mentioned in one of the comments you need to remove fade from your modal.
So this works for me:
<div id="myModal" class="modal">
...
<textarea class="form-control" rows="5" id="note"></textarea>
</div>
<script>
$('#myModal').on('shown.bs.modal', function () {
$('#note').focus();
})
</script>

I wanted something a bit more generic
$(window.document).on('shown.bs.modal', '.modal', function () {
var timer = window.setTimeout(function () {
$('.firstInput', this).focus();
typeof timer !== 'undefined' && window.clearTimeout(timer);
}.bind(this), 100);
});
With this, I give whatever control I want the CSS class firstInput.
There is a slight delay in setting focus that gives it a certain flair.

I don't know why, but the choosed solution doesn't work for me..
I use the following code snippet instead:
$('#annul-modal').on('show', function() {
setTimeout(function() {$('textarea:first', '#annul-form').focus();}, 400);
});
I know it isn't so pretty but at least it works.. Bootstrap v2.3.0

If you are using bootstrap v3 and you are using both modal dialog and wysihtml5 text editor the following works (assuming #basic is the ID of your modal form):
$('#basic').on('shown.bs.modal', function () {
editor.composer.element.focus()
})

Attaching the event directly to the modal screen didn't work for me. I'm using this code instead:
$('body').on('shown.bs.modal', '.modal', function () {
$('[id$=myField]').focus();
})
With this code I only need to change myField for the id of the control I want to have the focus, it also allows me to define the focus for multiple modal screens, I have something like:
$('body').on('shown.bs.modal', '.modal', function () {
$('[id$=YesCancel]').focus();
$('[id$=YesInverted]').focus();
$('[id$=cancelAddCustomer]').focus();
$('[id$=closeHistoryModal]').focus();
});
Source http://xcellerant.net/2014/08/06/set-focus-on-a-field-when-showing-a-bootstrap-3-modal/

Found doing:
$(document).on('shown.bs.modal', function () {
$(this).find('.form-control:visible:first').focus();
});
Worked well as it just finds the first form-control rather than needing a specific id etc. Be just what is needed most of the time.

Mover para a raiz...
<script>
$(function(){
$("#btnmoverCategoriaRaiz").click(function(){
$("#novoPlaylist").modal();
return false;
});
});
</script>
<div id="novoPlaylist" class= "modal hide">
<div class="modal-header">
<h3>Novo Playlist</h3>
</div>
<div class="modal-body">
<form class="form-horizontal">
<?echo $form->input("Playlist.nome", array("label"=>"Nome:")) ?>
</form>
</div>
<div class="modal-footer">
Cancelar
Savar
</div>
</div>