jQuery or JavaScript auto click - javascript

How can I auto click on the link on page load? I have been trying for ages but id does not work.
<link rel="stylesheet" type="text/css" href="leightbox.css" />
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="leightbox.js"></script>
</head>
<body>
<div class="content">
<p> Click here to activate leightbox popup.</p>
</div>
<!----------// POPUP (ON CLICK) //---------->
<div id="pop02" class="leightbox">
×
<div class="scrollbox">
<h1>This popup loads upon clicking a trigger link.</h1>
text</div>
</div>
</body>

You haven't provided your javascript code, but the usual cause of this type of issue is not waiting till the page is loaded. Remember that most javascript is executed before the DOM is loaded, so code trying to manipulate it won't work.
To run code after the page has finished loading, use the $(document).ready callback:
$(document).ready(function(){
$('#some-id').trigger('click');
});

First i tried with this sample code:
$(document).ready(function(){
$('#upload-file').click();
});
It didn't work for me. Then after, tried with this
$(document).ready(function(){
$('#upload-file')[0].click();
});
No change. At last, tried with this
$(document).ready(function(){
$('#upload-file')[0].click(function(){
});
});
Solved my problem. Helpful for anyone.

$(document).ready(function(){
$('#some-id').trigger('click');
});
did the trick.

$(document).ready(function(){
$('.lbOn').click();
});
Suppose this would work too.

In jQuery you can trigger a click like this:
$('#foo').trigger('click');
More here:
http://api.jquery.com/trigger/
If you want to do the same using prototype, it looks like this:
$('foo').simulate('click');

You are trying to make a popup work maybe? I don't know how to emulate click, maybe you can try to fire click event somehow, but I don't know if it is possible. More than likely such functionality is not implemented, because of security and privacy concerns.
You can use div with position:absolute to emulate popup at the same page. If you insist creating another page, I cannot help you. Maybe somebody else with more experience will add his 15 cents.

Related

Removing elements just won't work with jQuery

I have an autogenerated layout looking like this created by the jQuery.PrettyTextDiff-plugin:
<head>
<script type="text/jaascript" src="the jquery library"></script>
</head>
<body>
<div class="diff">
<span>
<br/>
</span>
Continuing layout...
</div>
<script type="text/javascript" src="diff_match_patch.js"></script>
<script type="text/javascript" src="jquery.pretty-text-diff.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.diff span:first-child').remove(); // As of my last try
});
</script>
</body>
I wish to remove the first span inside the 'diff'-layout in runtime but I can't get it to work. I've tried several solutions found here at SO after a thorough research.
$('.diff').closest('span').remove();
$('.diff span').first().remove(); //recommended solution by the jQuery Foundation - yet it won't work
$('.diff span').remove();
$('.diff').find('span:gt(0)').remove();
Nothing seems to remove the span. How should I do to remove it?
Try like this…
$('.diff').each(function(){
$(this).find('span').eq(0).remove();
});
The statements you have provided should work:
$(".diff").remove("span");
fiddle
I believe that the code you're talking about is generated dynamically. You need to wait until is rendered and remove the span tags after it.
You could also fix the problem in the plugin itself, or ask the author of the library to fix the issue for you.
Did you wrapp your jQuery code like:
$(document).ready(function () {
$('.diff span').remove();
});
this should work.
UPDATE:
To remove only the first child do:
$('.diff span:first-child').remove();
Fiddle
try with this$(".diff").find("span").html("");
Click here.
Somewhere I saw a rapid comment suggesting that I could use CSS to solve this - so I did. It works as a charm.
.diff span {
display: none;
}

Loading modal during the transition between two pages

I've got a login page that redirects you to an index page, the index page has this code:
<script type="text/javascript">
<div id="overlay">
<img src="loading.gif" alt="Loading" />
Loading...
</div>
jQuery:
$(window).load(function(){
$('#overlay').fadeOut();
});
</script>
It loads just a simple modal.
The issue is that the it shows the modal after a few seconds of delay. No just when the page is loading. The index page is heavy in content.
What I want is that just when for example chrome is loading (it's show a little circle spinning) my page show the modal.
The seconds of delay I think is why index its heavy.
When you add a function to the $(window).load() you are saying: call me when the page is finished loading. It sounds like you want to hide the spinner while the page is loading, not after. The problem is that jQuery might not be ready either, but if you don't have to support too many browsers, you can try it in a simple function instead of in load().
<script type="text/javascript">
$('#overlay').fadeOut()
</script>
Otherwise, if jQuery doesn't work because it isn't ready yet, then you may have to write the fadeOut logic yourself.
Your example is a little odd. Maybe just some reformatting of your code?
<div id="overlay">
<img src="loading.gif" alt="Loading" />
Loading...
</div>
<script type="text/javascript">
// Using the shorthand jQuery ready code. Basically
// this will add an anonymous function to a stack
// and when the document's ready event fires, it
// goes through the stack and runs anything you've
// added. So, document is ready, no run:
$(function(){
$('#overlay').fadeOut();
});
</script>
Or maybe your question is more about the difference between load event in window and document's ready event. See this for more window.onload vs $(document).ready()

JavaScript not displaying (PHP)

I think there is a problem with my JavaScript. It's basically not working, no matter anything i try.
I have this VERY simple script:
<div id="simplediv" style="background-color:yellow;border:1px solid black;display:none;width:200px;height:200px;">Click anywhere in the document to auto-close me</div>
Click Here
And on this website it works:
http://www.javascripttoolbox.com/lib/popup/example.php
But when i add it to my own page:
<head>
<title>Script</title>
</head>
<body>
<div id="simplediv" style="background-color:yellow;border:1px solid black;display:none;width:200px;height:200px;">Click anywhere in the document to auto-close me</div>
Click Here To Show DIV
</body>
It won't work. i've also tried with other javascript codes inside the tags, and they all worked exactly on the website where I took it from, and I don't know why it doesn't work now.
Does anyone know why it's behaving like this?
As stated, the onclick="" Popup function is not defined; your browser doesn't know what this function is supposed to do.
Edit as you need, but putting something like this in your header would define your function:
<script type="text/javascript">
function showDiv(div_id){
document.getElementById(div_id).style.visibility="visible";
}
function hideDiv(div_id){
document.getElementById(div_id).style.visibility="hidden";
}
</script>
Then you would call these functions in your onclick="" event with the needed parameters. Similar to the following:
Click Here To Hide DIV
Click Here To Show DIV

Why is this jQuery click function not working?

Code:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$("#clicker").click(function () {
alert("Hello!");
$(".hide_div").hide();
});
</script>
The above code doesn't work. When I click on #clicker, it doesn't alert and and it doesn't hide. I checked the console and I get no errors. I also checked to see if JQuery was loading and indeed it is. So not sure what the issue is. I also did a document ready function with an alert and that worked so not sure what I am doing wrong. Please help. Thanks!
You are supposed to add the javascript code in a $(document).ready(function() {}); block.
i.e.
$(document).ready(function() {
$("#clicker").click(function () {
alert("Hello!");
$(".hide_div").hide();
});
});
As jQuery documentation states: "A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute"
I found the best solution for this problem by using ON with $(document).
$(document).on('click', '#yourid', function() { alert("hello"); });
for id start with see below:
$(document).on('click', 'div[id^="start"]', function() {
alert ('hello'); });
finally after 1 week I not need to add onclick triger.
I hope this will help many people
Your code may work without document.ready() just be sure that your script is after the #clicker. Checkout this demo: http://jsbin.com/aPAsaZo/1/
The idea in the ready concept. If you sure that your script is the latest thing in your page or it is after the affected element, it will work.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<a href="#" id="clicker" value="Click Me!" >Click Me</a>
<script type="text/javascript">
$("#clicker").click(function () {
alert("Hello!");
$(".hide_div").hide();
});
</script>
</body>
</html>
Notice:
In the jsbin demo replace http with https there in the code, or use this variant Demo
Try adding $(document).ready(function(){ to the beginning of your script, and then });. Also, does the div have the id in it properly, i.e., as an id, not a class, etc.?
You have to wrap your Javascript-Code with $(document).ready(function(){});Look this JSfiddle.
JS Code:
$(document).ready(function() {
$("#clicker").click(function () {
alert("Hello!");
$(".hide_div").hide();
});
});
Be sure there is nothing on your button (such a div or a trasparent img) that keeps from clicking the button.
It sounds stupid, but sometimes we think that jQuery is not working and all that stuffs and the problem is on the positioning of DOM elements.
You can use $(function(){ // code }); which is executed when the document is ready to execute the code inside that block.
$(function(){
$('#clicker').click(function(){
alert('hey');
$('.hide_div').hide();
});
});
Just a quick check, if you are using client-side templating engine such as handlebars, your js will load after document.ready, hence there will be no element to bind the event to, therefore either use onclick handler or use it on the body and check for current target
Proper Browser Reload
Just a quick check as well if you keep your js files separately: make sure to reload your resources properly. Browsers will usually cache files, so just assure that i.e. a former typo is corrected in your loaded resources.
See this answer for permanent cache disabling in Chrome/Chromium. Otherwise you can generally force a full reload with Ctrl+F5 or Shift+F5 as mentioned in this answer.

Why doesn't the following jquery script work?

I have a simple single page setup. Under a root folder, I have 3 subfolders (js, css, and images). In the root folder, I have an index.html page with the following content:
<html>
<head>
<title></title>
<script language="javascript" src="js/jquery-1.3.2.min.js"></script>
<script language="javascript" src="js/myscript.js"></script>
</head>
<body>
<a onclick="doSomething()" href="#" class="doSomething">Click!</a>
</body>
<html>
myscript.js contains the following code:
$('a.doSomething').click(function(){
//Do Something here!
alert('You did sometihng, woo hoo!');
});
When I click the link, nothing happens. What am I missing?
Wrap document.ready around the code:
$(document).ready(function() {
$('a.doSomething').click(function(){
//Do Something here!
alert('You did sometihng, woo hoo!');
return false; // return false to prevent default action
});
});
As it is right now, you are trying to bind an event to an element that does not yet exist in the DOM.
Also, not sure why you have the onclick on the link itself, as the whole point of jQuery is to be able to take those ugly inline events out of there and bind them cleanly in the javascript. If you do this:
yay click me
And then use the code above, it should work fine.
At first I thought you were just missing a function named "doSomething". Then I realized you where expecting your selector to find the anchor tag anyway. However, that won't happen. At the time your script runs, the anchor hasn't been added to the DOM yet.

Categories

Resources