I need a button click instead of setInterval - javascript

I found this code but for my site I need a button instad of setInterval. I tried jquery("#btn").click(function(){}) but can't get it working.
<script>
jQuery().ready(function(){
setInterval("getResult()",1000); //set theinterval for the update
});
function getResult(){
jQuery.post("update.php", function(data) {
jQuery("#readings").html(data);
});
}
</script>
<div id="readings"></div>

You need to add a click event listener to a button. The jsfiddle below should help you. This can be done using pure JavaScript but as you suggested jQuery.
<button id="test">Test</button>
$("#test").click(function() {
alert("Click event!");
});
http://jsfiddle.net/89987ps1/

You can call your function like this:
<button onclick="getResult()" >Get result</button>

Related

How to call a function when a div is dynamically generated using jQuery

The scenario I want to achieve is as follow:
$("#parentDiv").on("load",'#childDiv', function () {
// do something...
});
I would like to call a function when a child div is dynamically generated and shown on the page, but there is no suitable event that can achieve this. Any hint or help would be appreciated.
Instead of load, you can make use of a custom event which gets triggered with .trigger():
$(document).ready(function() {
$("button").on("click", function() {
$("body").append("<div id='new'>Created</div>").trigger('custom-event');
});
});
$(document).on("custom-event", function() {
console.log('DIV created!');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<button>Create element</button>
</body>

JS .click() trigger not working

I'm using dropzone.js to upload files.
I have a dropzone button #btn and input field #input.
This code is working:
$('#input').on('input', function() {
$("#btn").click();
});
But when I use $("#btn").click(); in other part, for example below, it's not working and I have no errors:
$(document).ready(function(){
$("#btn").click();
});
What is wrong?
You are trying to simulate the click event so you need to use trigger() with click event like
$("#btn").trigger("click")
Change your code to:
$(document).ready(function(){
$("#btn").trigger("click");
});
click() its vanila javascript function that mean trigger type.
element.on.click(){
doSomthing;
}
Dropzone is probably taking some time to initialize by the same document.ready event. So give it a time. I would try:
$(document).ready(function(){
setTimeout(function(){
$("#btn").trigger("click");
}, 100);
});
Try this
$(document).ready(function(){
$("button").click(function(){
alert("The paragraph was clicked.");
});
});
or instead of id give class name
$(document).ready(function(){
$(".btn-primary").click(function(){
alert("The paragraph was clicked.");
});
});
$('#btn').click( function() {
console.log('success');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button value='upload' id='btn'>
Upload
</button>

How do i target a unique id of a button

My goal is to target unique id of a button using jquery.
For example
<button id="5412313">Remove</button>
<button id="9882813">Remove</button>
<button id="123123123">Remove</button>
<button id="214343">Remove</button>
<button id="3434343">Remove</button>
<button id="4343434">Remove</button>
Jquery
$("#WhatshouldIputInHere?").on("click", function(){
console.log($(this));
});
You can try with remove().
$("button").on("click", function(){
$(this).remove();
//$(this).attr('id');
});
Based on your button label i came to know this.you can do anything with your id which i have commanded .
You can use event object in the handler function, the code is like this:
$('button').on('click', function(event) {
alert(event.target.id);
})
Here's the effect of the code above
$('button').on('click',function(){
console.log($(this));
if($(this).attr('id')=='9882813'){
console.log('button with id '+$(this).attr('id')+'clicked');
}
});

Click a button element on page load

I'm trying to auto-click a button to initiate a function when the html page loads. I've tried document.getElementById('watchButton').click and it doesn't seem to work, the button is not clicked. Any suggestions?
<div class="content">
<div class="action-area ch30">
<button class="button dh" id="watchButton">Start Geolocation Watch</button>
<button class="button dh" id="refreshButton" >Refresh Geolocation</button>
</div>
The javascript:
run:function() {
var that = this;
document.getElementById("watchButton").addEventListener("click", function() {
that._handleWatch.apply(that, arguments);
}, false);
document.getElementById("refreshButton").addEventListener("click", function() {
that._handleRefresh.apply(that, arguments);
}, false);
},
Thanks!
I'd put it inside document.ready (so it doesn't fire until the DOM loads) and use jQuery syntax:
$(function() {
$('#watchButton').click();
});
http://jsfiddle.net/isherwood/kVJVe/
Here's the same fiddle using jQuery syntax: http://jsfiddle.net/isherwood/kVJVe/4
That said, why not just name your function and call it directly?
It would be click() not click
document.getElementById("watchButton").click();
You would need to call it onload or after the function has run
window.onload = function () {
document.getElementById("watchButton").click(); };
Try this ^^
try trigger
<script>
$(document).ready(function() {
$("#watchButton").trigger('click');
});
</script>
document.getElementById("studyOne").click();
$("#studyOne").trigger('click');
Put this in onload function. It worked for me.

button action after insert with jquery not working

i have an button "add" i click it then a save button will append to my div. this is working, but i cant trigger the function of the "save" button. if i paste the "save"- button in the code directly it is working. i cant find my error...
<a class="save" href="#"><img src="images/save.png" alt="save_working" /></a>
<a class="add_row" href="#"><img src="images/icon_add_light.png" alt="add" /></a><br>
<div id="hinzu"></div>
$(".save").click(function() {
alert("saveworking");
});
$(".add_row").click(function() {
$("#hinzu").append(' <a class="save" href="#"><img src="images/save.png" alt="savenotworking" /></a>');
});
Here is an fiddle with it: http://jsfiddle.net/MgcDU/321/
Why isnt this working with the js append method?
It's dynamic, so it does not exist when you're binding the event. For that you would need to delegate the event to an element that actually exists at the time of attaching the event handler :
$("#hinzu").on('click', '.save', function() {
alert("saveworking");
});
Use it like:
$("#hinzu").on('click', ".save", function() {
alert("saveworking");
});
this is because when you try to do the $(".save") it does not exist.
You have to use the on() for monitoring if any new .save are in your doom and assign the event handler.
$("#hinzu").on('click', '.save', function()
{
alert("This Does work");
});
It is not working because the $(".save").click() call binds the onclick handler to all elements with class save which already existed at the point of the call.
To bind the event handler also to elements which did not exist at the time of the binding, you must use $(document).on('click', '.save', function() { [...] })
If you want to save you code, use this:
<script type="text/javascript">
$(function() {
$('.save').click(function() {
alert('saveworking');
});
});
$(function() {
$('.add_row').click(function() {
alert('add_row');
});
});
</script>
One more way to do this:
<script type="text/javascript">
$(document).ready(function () {
$('.save').click(function () {
alert('saveworking');
});
$('.add_row').click(function () {
alert('add_row');
});
});
</script>

Categories