I have this code:
<script language="javascript" src="http://www.google.com/jsapi"></script>
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.js"></script>
<script language="javascript">
$(document).ready(function() {
} );
</script>
</head>
<body>
<form onsubmit="return false">
<input type="button" value="Translate" onclick="gtrans(this.form)" />
<p id="translation" style="border:1px solid #00f;padding:5px;width:400px">-</p>
</form>
</body>
When I add inside ready(){} the line google.load ("language", "1"); the form is not showed, why?
Regards
Javi
The $(document).ready() function is executed before the window loads, as soon as the DOM is registered by the browser. So, as Dalen suggests, you should put your code outside the function.
Related
Below is my code, i just want to alert the "hi" and "hello" so that i can put my actual codes there.
<html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='jquery-1.11.1.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<script src="jquery-ui.js"></script>
<link rel="stylesheet" href="jquery-ui.css">
</head>
<script>
$(document).ready(function(){
alert("hi");
$('form[name="lgform"]').submit(function(evnt){
evnt.preventDefault();
});
$("#btn_login").click(function(){
alert("hello");
});
});
</script>
<body>
<form name="lgform">
<div>
<table id="table" >
<tr>
<td width="35px"><input id="mob" type="text" name="mob_nu"></td>
<td width="35px"><input id="pswd" type="password" name="pswd_vl"></td>
<td width="100px"><input type="button" name="login_btn" id="btn_login" value="Login"></td>
</tr>
</table>
</div>
</form>
</body>
</html>
button click event is not working, i am using the same jquery library in some other places which is working fine. I have to call ajax in this page i need to call the button click without submitting the page, as i have few more buttons to add. Any piece of code is appreciated and thanks in advance.
when i tried your code i got this error
Ignored call to 'alert()'. The document is sandboxed, and the 'allow-modals' keyword is not set
and when i tried after replacing alert's with console.log then it is working fine.
Your code is working fine, replace alert's with console.log()
It could be because its late, but I've been at this for a good while now and still getting no further and running out of time.
Basically when I move the following code:
var test = "hell";
$('#qrcodeCanvas').qrcode({ text: test });
out from the function method and into the script it works fine, but if I put it within the button click function I get the following error:
Uncaught TypeError: undefined is not a function
I need it to work on button click, Here is the main code involved:
<script type="text/javascript" src="~/js/lib/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.qrcode.js"></script>
<script type="text/javascript" src="~/Scripts/qrcode.js"></script>
<div id="first">
<p>hello</p>
<input type="text" id="qr-text" value="" placeholder="Enter QR Data..."/>
<br />
<br />
<button id="button">Click on button</button>
</div>
<div id="qrcodeCanvas"></div>
<script>
$(document).ready(function () {
$('#button').click(function () {
var test = "hell";
$('#qrcodeCanvas').qrcode({ text: test });
});
});
</script>
UPDATE:
Here is the js file in question: http://jquer.in/javascript-and-jquery-solutions-for-fantastic-mobile-websites/qr-code/
If you're trying to use the "un-minified" version, you need to load qrcode.js first. If you use the jquery.qrcode.min.js version, it packs the qrcode.js code into the same file.
So instead of
<script type="text/javascript" src="~/Scripts/jquery.qrcode.js"></script>
<script type="text/javascript" src="~/Scripts/qrcode.js"></script>
use
<script type="text/javascript" src="~/Scripts/qrcode.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.qrcode.js"></script>
or
<script type="text/javascript" src="~/Scripts/jquery.qrcode.min.js"></script>
Hi I was wondering how to format a javascript function as simple as:
function calculate()
{
alert('calculate Cost');
}
so that it can be placed into the assets/javascripts/application.js and be called from the view.
On my view I am calling the function by:
<input type="button" onclick="calculate();" value="calculate">
For some reason the function is not being called but it works if I put the alert message via inline:
onclick="alert('calculate Cost');"
Application.js
function calculate() {
alert('calculate Cost');
}
HTML Page
<html>
<head>
<script type="text/javascript" language="javascript" src="external.js"></script>
</head>
<body>
<input type="button" onClick="calculate();" value="calculate">
</body>
</html>
That code will alert calculate cost when you click on the button.
Is it possible to load js file on some event like mouseover or click?
I try to load a whole js file not a specific function.
This example loads the specified js file on onClick() event of button
<button onclick="myFunction()">Click me</button>
<script type="text/javascript">
function myFunction(){
var file = document.createElement("script");
file.setAttribute("type", "text/javascript");
file.setAttribute("src", "js/js_file.js");
document.getElementsByTagName("head")[0].appendChild(file);
}
</script>
Similarly, you can also load the js on onMouseOver() event of the button or any other HTML element.
Example using jQuery
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myButton').mouseenter(function() {
$("head").append($("<script />").prop("type", "text/javascript").prop("src", "http://code.jquery.com/jquery.mobile-1.2.0.js"));
});
});
</script>
</head>
<body>
<input type="button" id="myButton" value="CLICK" />
</body>
</html>
I just started learning JavaScript and am wondering why this simple snippet hangs when I click on the "Call function" button. What am I missing?
<html>
<head>
<script type="text/javascript">
function myfunction()
{
document.write("hello");
}
</script>
</head>
<body>
<form>
<input type="button"
onclick="myfunction()"
value="Call function">
</form>
</body>
</html>
You need to write inside an element or give an element a value, or you should use document write like that :
<html>
<head>
<script type="text/javascript">
function myfunction()
{
document.getElementById("lblMessage").innerText = "hello";
document.getElementById("txtMessage").value = "hello";
//document.write("hello");
}
</script>
</head>
<body>
<form>
<script type="text/javascript">
document.write("This is written while page processed by browser !<br />");
</script>
<input type="text" id="txtMessage" /><br />
<span id="lblMessage"></span><br />
<input type="button"
onclick="myfunction()"
value="Call function">
</form>
</body>
</html>
If you simply want to see your button doing something then try:
alert("Hello");
instead of the document.write.
Where do you expect the function to output its "hello"? Right into the button's source code? That makes no sense. The browser is confused and hangs.
Document.write doesn't magically insert something at the end of your document. It writes its stuff out right there where it is called.
Not too sure what you mean by "hang"... Try this out... The alerts can be removed, but will inform you of where it is at in execution...
<html>
<head>
<script type="text/javascript">
function myFunction() {
//for debugging
alert('Made it into function');
document.getElementById('MyOutputDiv').innerHTML = 'Word To Your Mom...';
//for debugging
alert('function complete');
}
</script>
</head>
<body>
<input type='button' onclick='myFunction();' value='Call Function'>
<br>
<div id='MyOutputDiv'></div>
</body>
</html>
document.write, but where? You have to specify this.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello</title>
</head>
<body>
<pre><script type="text/javascript">
function myfunction() {
d = document.getElementById('hello');
d.style.display = "block";
d = document.getElementById('callme');
d.style.display = "none";
}
</script>
</pre>
<div id="hello" style="display:none">
Hello
</div>
<div id="callme">
<input type="button"
onclick="myfunction()"
value="Call function">
</input>
</div>
</body>
</html>
I can't explain the "hang" but please take a look at this page for a primer on document.write: http://javascript.about.com/library/blwrite.htm I would also like to second that you probably want to write to a specific element in the page rather than just overwriting the entire page.