Click a button element on page load - javascript

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.

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>

I need a button click instead of setInterval

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>

Calling Javascript method defined above on page load

I am brand new to JavaScript so bear with me. I have a JavaScript function that is on my page:
<script type="text/javascript">
Sys.debug = true;
var popup;
Sys.require(Sys.components.popup, function () {
popup = Sys.create.popup("#popup", {
parentElementID: "target",
});
});
</script>
It works perfectly when I use it as an event:
<input type="button" onclick="popup.show()" value="Edit Theme" style="float: right; margin-right: 7.25em;" />
I want to call it on page load, inside the body tag I have the following code:
<script>
window.onload = popup.show;
</script>
The method does not appear to get called. What am I doing wrong?
Based on the documentation on Sys.Require, it seems that Sys.Require is called on load, which means that based on the ASP.Net page lifetime the script hasn't loaded when the onload event fires.
It looks like you can use Sys.onReady() instead:
Sys.onReady(function(){
popup.show();
})
You should write:
window.onload = popup.show;

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>

jQuery .slideToggle() function isnt working

I have found some jQuery codes for show content with slide effect, but none of them works.
the Javasccript code:
$('#clickme').click(function() {
$('#pic').slideToggle('slow', function() {
});
});
the HTML:
<div id="clickme">
click here</div>
<img id="pic" src="Img/Gallery/123.jpg" />
When i click the "click me" div, nothing happens. I have also tried this :
$("div").click(function () {
$(this).hide("slide", { direction: "down" }, 1000);
});
But again, nothing happens. What is the problem?
Thanks!
There are two ways that it works:
1) Add the following code in the header
$(document).ready(function () {
$("div").click(function () {
$('#pic').slideToggle('slow', function() {
});
});
});
2) Place your code after your last div!
And obviously you have to include a jquery file!
For example:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
Put your code in
$(document).ready(function(){
// Your code here
});
you shlould load jQuery by adding this line at the head:
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
You may also want to change your code to this:
$("div").on("click", function () {
$(this).hide("slide", { direction: "down" }, 1000);
});
Check this jsfiddle to see the working example. ) Btw, it's not necessary to pass the empty function to slideToggle, I suppose.
I guess the only difference is that you try to run your javascript not as onload function; it doesn't find any 'clickme' elements, that's why event handler function is not called.

Categories