auto click a link when page loads doesn't work - javascript

I have a page for redirect purpose, I want to redirect user to another page once it hits this page:
<!DOCTYPE html>
<html>
<head>
<title>Open App</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
alert("test"); //this shows up.
$('#openApp').click(); //this button is not clicked.
});
</script>
</head>
<body>
redirect
</body>
</html>
I want the redirect happen once this page is load. But the click function is not fired. I have to click the link by myself to redirect to google.com.

I normally wouldn't give you an alternative as an answer, but looking at your comments, it looks like you're just trying to redirect.
You can use window.location.replace('http://www.google.com'); for that.
$(document).ready(function () {
window.location.replace('http://www.google.com');
});
See also, this answer.

It's not possible to trigger a click event without any user interaction. In other words, if the function being called wasn't called from a user interaction, the click event will not get triggered.
In your case, simply update the window.location attribute:
window.location = 'http://www.google.com';

try this fiddle mate, added script is
$(document).ready(function () {
//this shows up.
$('#openApp')[0].click(); //this button is not clicked.
});

Related

How to disable the back button in the browser without going back?

How to disable the back button in the browser without going back? Below is the way that i have tried.
<html>
<head>
<script>
window.onload = function(){
window.history.forward();
};
</script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
the best thing you can do is:
window.onbeforeunload = function() { return "your message here"; };
A workaround to "disable" the back button is create a page that redirects you to the page you want to show after a little time.
For example with this code for the first page:
<html>
<head>
<script type="text/javascript">
setInterval(function(){
window.location.href='secondPage.html';
},50);
</script>
</head>
<body>
</body>
</html>
If the user press the back button, the previous page will reopen the desired page.
However, remember that users will hate you for that.

how to click an anchor tag from javascript or jquery

Have an anchor tag, trying to click it from the javascript but not responding, while loading the page it should go to next.php without click anchor tag manually.how can I archive this?
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery-2.0.3.js"></script>
<script type="text/javascript">
alert("hai");
$(document).ready(function() { $('#about').click(); });
</script>
</head>
<body>
<div>
click here
</div>
</body>
</html>
Use $('selector')[0], as $('selector') returns a jQuery object, so $('selector').click() will fire the click handler, while $('selector')[0].click() would fire the actual click.
$(document).ready(function () {
$('#about')[0].click(); //$('#about').get(0).click();
});
Demo
You can not use javascript to fire click event
It should use
<script type="text/javascript">
$(document).ready(function() {
document.location.href='/next.php'
});
</script>
Here is the code that can help you
$(document).ready(function() {
$(document).ready(function() {
$('a').trigger('click');
});
})
function abc() {
alert("");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
click me not
If you want the recommended way then use this inside $(document).ready
window.location="where ever you want to go";
If you want the page to go to next.php without clicking then place the window.location directly into $(document).ready(function() { });
Click() function is used when you want to trigger click event. ie. when you want to trigger some action when anchor tag is clicked.
<script>
alert("hai");
$(document).ready(function() {
window.location = 'next.php'; //If you wish the page to automatically go to next page on page load.
$('#about').click( // If you wish to do something clicking anchor
function(){
alert("Hello");
});
});
</script>
$(document).ready(function() { $('#about').trigger('click'); });
Updated:
$(document).ready(function() { $('#about')[0].click(); });

Javascript window.location.href onClick not working

So I have a basic html page and basic Javascript in the head. I'm trying to redirect using Javascript once the function is activated through onClick but window.location.href wont work. window.alert works and everything else.
HTML
<html>
<head>
<title>Testing Aff Links</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
function myfunc(){
window.location.href="http://youtube.com";
}
</script>
</head>
<body>
Link Link #1
</body>
</html>
You need to return false from the onclick attribute to prevent the default action:
Link Link #1
You are redirecting twice. Change it to:
Link Link #1

hide div when page load

I have jquery issue, Kindly see my jquery code:
$(document).ready(function(){
$(".toggle_container").show();
$("h2.trigger").toggle(function(){
$(this).addClass("active");
}, function () {
$(this).removeClass("active");
});
$("h2.trigger").click(function(){
$(this).next(".toggle_container").slideToggle("slow,");
});
});
My .toggle_container is shown always its good, But I want to close it first time, when page load. Can you please provide me any solution?
I dont want to use $(".toggle_container").hide(); function for this problem because when i click on href then .toggle_container should not hide, It should open.
Regards.
You can just add attribute
style="display:none"
to your element .toggle_container.
Then on first call of $(document).ready it will be shown.
The full test example:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("h2.trigger").click(function(){
$(this).next(".toggle_container").slideToggle("slow,");
});
});
</script>
</head>
<body>
<h2 class="trigger">Toggle</h2>
<div class="toggle_container" style="display:none">Container</div>
</body>
</html>
Note: there`s no $(".toggle_container").show(); on $(document).ready
remove the
$(".toggle_container").show();
from your $(document).ready function.
in html part add style="display:none" for the toggle_container div.
check the #HCK s reply. he is clearly mentioned it..
Once the document gets loaded, a alert box will be prompted "page loaded".
$(document).ready(function(){
alert('page loaded'); // alert to confirm the page is loaded
$('.divClassName').hide(); //enter the class or id of the particular html element which you wish to hide.
});

jquery toggle in a pop up modal form

I want to toggle between a div on a pop-up modal form. The problem i see is the document.ready() function on the modal page, which tries to load the parent form. It distorts the whole page and tries to show automatically if i load the main parent form. Is there something like div.ready()? how do i include this code on my pop up modal form?
Toggle code here
<html>
<head>
<title>jQuery test page</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#clickMe").click(function() {
$("#textBox").toggle();
});
});
</script>
</head>
<body>
<a id="clickMe">Toggle my text</a>
<br />
<div id="textBox">This text will be toggled</div>
</body>
Yes, such expressions like DOM_ELEMENT.ready() exists and very useful in scenarios like the one you are facing right now.
Update:
I found that this plugin is doing what you need :
jQuery.elementReady()
Examples:
1:
Change the source of a specific image as soon as it is loaded into the
DOM (before the whole DOM is loaded).
$.elementReady('powerpic', function(){
this.src = 'powered-by-jquery.png';
});
2:
If you want to have the jQuery object instead of the regular DOM
element, use the $(this) function.
$.elementReady('header', function(){
$(this).addClass('fancy');
});
3:
Chain multiple calls to $.elementReady().
$.elementReady('first', function(){ $(this).fancify(); })
.elementReady('second', function(){ $(this).fancify(); });
4:
Use the ‘$’ alias within your callback, even in noConflict mode.
jQuery.noConflict();
jQuery.elementReady('header', function($){
$(this).addClass('fancy');
});
5:
Change the polling interval to 100ms. This only works if $.elementReady() has not yet been called.
$.elementReady.interval_ms = 100;

Categories