Javascript autoclick not working - javascript

I am using a script to make tables in html sortable. The script is here- http://www.kryogenix.org/code/browser/sorttable/. I want the text which sorts the html table to be clicked automatically when the i loaded. The autoclick script i am using is this-
<head>
<script LANGUAGE='javascript'>
function autoClick(){
document.getElementById('sort').click();
}
</script>
</head>
<body onload="autoClick();">
<table><tr><th><p id="sort">Click here to sort the table</p></th>...
The problem is that this is not working and i am confused that why this isnt working.
--------------------EDIT------------------
Sorry for this but actually i was typing something wrong in the body onload statement. Thus the script i was using was correct.

Where have you defined your event?
Because I see juste one function in your onload.
Below, a little example which work fine:
<html>
<head>
<script type='text/javascript'>
var init = function()
{
document.getElementById('test').addEventListener('click', function() {
alert('Auto test is ok');
}, false);
};
function autoClick(){
document.getElementById('test').click();
}
</script>
</head>
<body onload="init(); autoClick();">
<button id="test">Test</button>
</body>
</html>

It's always safer to use Jquery library. Just include the latest Jquery library on your header section of the page:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
and this function Should solve your issue:
$("#sort").live('click');

I think you missed the class name in the table
Please add your table tag with class name called "sortable".

Related

HTML - Alert Box when loading page

i'm using HTML code and i wan't to show un Alert Message or alert box, i don't know what it is called, but a message with a "OK" button.
i want to show this alert when the page is loaded.
How do i do this?
And how to do this with a title in the Alert box?
Do I need JavaScript? if no, How to do this without javascript?
Jonathan
Yes you need javascript. The simplest way is to just put this at the bottom of your HTML page:
<script type="text/javascript">
alert("Hello world");
</script>
There are more preferred methods, like using jQuery's ready function, but this method will work.
You can use a variety of methods, one uses Javascript window.onload function in a simple function call from a script or from the body as in the solutions above, you can also use jQuery to do this but its just a modification of Javascript...Just add Jquery to your header by pasting
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
to your head section and open another script tag where you display the alert when the DOM is ready i.e. `
<script>
$("document").ready( function () {
alert("Hello, world");
});
</script>
`
This uses Jquery to run the function but since jQuery is a Javascript framework it contains Javascript code hence the Javascript alert function..hope this helps...
you need a tiny bit of Javascript.
<script type="text/javascript">
window.onload = function(){
alert("Hi there");
}
</script>
This is only slightly different from Adam's answer. The effective difference is that this one alerts when the browser considers the page fully loaded, while Adam's alerts when the browser scans part the <script> tag in the text. The difference is with, for example, images, which may continue loading in parallel for a while.
If you use jqueryui (or another toolset) this is the way you do it
http://codepen.io/anon/pen/jeLhJ
html
<div id="hw" title="Empty the recycle bin?">The new way</div>
javascript
$('#hw').dialog({
close:function(){
alert('the old way')
}
})
UPDATE : how to include jqueryui by pointing to cdn
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
For making alert just put below javascript code in footer.
<script>
$(document).ready(function(){
alert('Hi');
});
</script>
You need to also load jquery min file.
Please insert this script in header.
<script type='text/javascript' src='https://code.jquery.com/jquery-1.12.0.min.js'></script>
<script type="text/javascript">
window.alert("My name is George. Welcome!")
</script>
<script>
$(document).ready(function(){
alert('Hi');
});
</script>
You can try this.
$(document).ready(function(){
alert();
$('#rep‌​ortVariablesTable tbody').append( '<tr><td>lll</td><td>lll</td></tr>');
});

javascript tag trigger - code position on page

i use that tag to alert me when a tag has been shows up
<html>
<head>
</head>
<body>
<script type="text/javascript">
document.getElementsByTagName('iframe')[0].onload = function() {
alert('loaded');
}
</script>
<iframe></iframe>
</body>
</html>
strange , since this code working :
<html>
<head>
</head>
<body>
<iframe></iframe>
<script type="text/javascript">
document.getElementsByTagName('iframe')[0].onload = function() {
alert('loaded');
}
</script>
</body>
</html>
why the Js need to under the tag to work?
what's the problem here?
Because the code in a script tag is executed immediately. And in the first example the iframe doesn't exist at that time. But what you can do is to wrap you code into an onload (for the main page) event. E.g.:
window.onload = function() {
//your code
}
Then it doesn't matter where the code is placed.
Iframe tag does not exist at the moment you are trying to access it.
You may check that by simply alerting array length, like
alert(document.getElementsByTagName('iframe'));
Have you thought about executing your javascript after the page is loaded? You may use some frameworks like jQuery to facilitate crossbrowser issues. Or just put all your javascript code to the very bottom of body.

How to run JavaScript code before page load?

I have working in asp.net web application. Here I need to run JavaScript before page load.
I have tried:
<body oninit="funinit();" onprerender="funRender();" onload="funload();">
</body>
<script type="text/javascript" language="javascript">
function funinit() {
alert("funinit");
}
function funload() {
alert("funload");
}
function funRender() {
alert("funRender");
}
</script>
here only funload() is working.
You can use window.onpaint for such purpose like :
<script type="text/javascript">
function preloadFunc()
{
alert("PreLoad");
}
window.onpaint = preloadFunc();
</script>
I hope it helps you....
Just inline it?
<script type='text/javascript'>
alert("funload");
</script>
Or put it in a function and call it immediately. Try to put it to the topmost of your page, however since the DOM isnt loaded yet you cant get any other elements.
What is it you want to do?
just insert a <script> tag wherever inside the body you want it to run. it will be executed as soon as the parser reads it, as long as it doesn't reference an element not yet created
try to put your script in head section of the page:
<head>
<script type="text/javascript" language="javascript">
alert("funinit");
alert("funRender");
</script>
</head>
Why not Use the ClientScriptManager.RegisterClientScriptBlock Method
http://msdn.microsoft.com/en-us/library/btf44dc9.aspx

Get an alert box to popup at the jquery event $(document).ready in smarty template

I'm juuuuuust trying to get an pop up displaying test when the document is ready. I've managed to get google maps working on another page but somehow this is a lot of pain.
Here's the code:
<html>
<head>
[...]
<script type="text/javascript" href="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
{literal}
<script type="text/javascript">
$(document).ready(function () {
alert ("test");
});
</script>
{/literal}
</head>
[...]
</html>
What should I do to get that popup message? I also tried copy pasting from my working jquery page without much success.
Changing <script href=...> to <script src=...> works like a charm for me.
Does you javascript is enabled in your browser ?
You can type this:
$(function() {
alert("test");
});

$(document).ready in javascript

I am new to javascript and jquery. I want to use $(document).ready to register some event handlers. For example, code like this, and my question is what javascript libraries do I need to refer to at the head of the page in order to use $(document).ready? Appreciate if anyone could provide me a simple easy to use sample to learn $(document).ready.
<script>$(document).ready(function()
{
// function implementation internals
});
</script>
thanks in advance,
George
All you need is the jQuery library.
http://www.jquery.com
You can either download the library and include it from your own server or you could use one of the many CDN's which provide the library. For instance:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// do something useful
});
</script>
Google keeps copies of a bunch of libraries on their servers, which are pretty reliable.
Just add the following to your <head> section, and place your snippet somewhere below.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
In summary,
Put the <script> tag provided by sje397 in the <head> section of the page, which provides the only library you need... jQuery.
(Alternatively: <script src="http://code.jquery.com/jquery-1.4.4.js" type="text/javascript"></script>)
Read http://docs.jquery.com/Tutorials:How_jQuery_Works
And you should be good to go.
<html>
<head>
</head>
<body>
<div id="someElement">Click Me</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function($) {
$(document).ready(function() {
$('#someElement').bind('click', function(event) {
// event.preventDefault(); // you might want to do this if your event handler has a default action associated with it (e.g. a link that gets clicked with an href)
// do stuff on your event (change click to whatever you need)
});
});
})(jQuery);
</script>
</body>
</html>

Categories