I have the following coffeescript code to generate and alert box:
show_alert = () ->
alert("Hello! I am an alert box!")
which compiles to:
(function() {
var show_alert;
show_alert = function() {
return alert("Hello! I am an alert box!");
};
}).call(this);
in my html I have the following
<input onclick='show_alert()' type='button' value='Show alert box' />
However, no alert box shows? The following is the html copied from the browser:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test Rails Application</title>
<style type='text/css'>.application h1 {
color: lime; }
</style>
<script type='text/javascript'>(function() {
var show_alert;
show_alert = function() {
return alert("Hello! I am an alert box!");
};
}).call(this);
</script>
</head>
<body>
<h1>Hello from applicaiton.html.haml</h1>
<div class='application'><h1>Hello World</h1>
<input onclick='show_alert()' type='button' value='Show alert box' />
</div>
</body>
</html>
Why am I not able to get an alert box to show up?
Your problem is that the generated javascript code is in another scope. You have to solve this
by either adding the -b parameter to the coffeescript compiler or export your function
explicitly via
root = exports ? this
root.show_alert = () -> alert("Hello! I am an alert box!")
For more information about the exporting and scope issue have a look at https://stackoverflow.com/a/4215132/832273
I created a working jsfiddle with the above coffeescript code
I found two ways to solve this issue
FIRST add # before function name
#say_hi = () ->
$(alert('Hello!!!'))
SECOND at the end of coffee file add
window["say_hi"] = say_hi
in your coffeescrpt code, try to save the function to window: window["show_alert"] = show_alert
Related
I have the following code that works in chrome however does not work in FF or IE.
The code allows a user to select a text file and re-reads the contents every 10 seconds and updates the PRE tag with the contents of the text file.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Read text file every 10 seconds</title>
<script type="text/javascript">
var currentIntervalId = undefined;
var startOrRestart = function(that) {
if (currentIntervalId !== undefined) clearInterval(currentIntervalId);
readText(that); // For executing immediately
currentIntervalId = setInterval(function() { readText(that); }, 10000);
};
function readText(that){
if(that.files && that.files[0]){
//alert("hello");
var reader = new FileReader();
reader.onload = function (e) {
var contents = e.target.result;//.replace("\r\n","<br/>");
contents = contents.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
document.getElementById('board').innerHTML= contents;
};//end onload()
reader.readAsText(that.files[0]);
}//end if html5 filelist support
}
</script>
</head>
<body>
<input type="file" onchange='startOrRestart(this)' /> <hr />
<pre id="board" contenteditable = "true">
This is where the text from the chosen text file will be loaded.
</pre>
</body>
</html>
Can someone help get this to work in other browsers?
Thanks in advance.
When a file is selected the input has a snapshot of the contents at that point. Local changes on disk don't update the snapshot.
Chrome's implementation appears to break the spec so an example will work only in Chrome.
You can see another question with explanation here
I have a javascript function and I want to call the same function twice.
Once on page load and once on a button click.
I want the output as the function on page load will keep on running in backend and
display output and when button is clicked again function is called and its output
gets displayed.
Finally both functions output should be displayed.
This is what I have written but am not getting the output.
For e.g.
Javascript file: n.js
function webservice{
for(i=0;i<10;i++)
{
alert("some msg");
`enter code here`
}
html file n.html
<html>
<head>
<script type = "text/javascript" src="n.js"></script>
<script type="text/javascript">
window.onload=function() {
webservice();
}
</script>
</head>
<body>
<input id="button" type = "button" name = "webservice" value = "Call Webservice"
onClick="webservice()" />
</body>
</html>
Following code is working on my machine. I think you are missing () for function webservice(). so instead of webservice use webservice()
<html>
<head>
<script>
function webservice()
{
for(i=0;i<10;i++)
{
alert("some msg");
}
}
window.onload=function()
{
webservice();
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<input id="webservice" type = "button" name = "webservice" value = "Call Webservice" onClick="webservice()" />
</body>
</html>
Update:
if you write your onload function like this then you will be able to execute call 1 and call 2, butcall 2 will begin when call 1 loop is completed.
window.onload=function()
{
webservice('onload'); //call 1
document.getElementById("webservice").click(); //call 2
}
I think you code may be in wrong format.
function webservice{
for(i=0;i<10;i++)
{
alert("some msg");
`enter code here`
}
change to
function webservice(){
for(i=0;i<10;i++)
{
alert("some msg");
//enter code here
}
just add () after webservice. like webservice().
i'm using CamanJS to do some images manipulation with javascript, and I have two similar really simple scripts, the first works well, the second not (and this is the script i need working).
This is the first working:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CamanJS Testing Playground</title>
<script type="text/javascript" src="caman.full.min.js"></script>
</head>
<body>
<button onclick="filtraPhoto();">MODIFICA</button><br />
<img id="smallImage" />
<script>
var immagine;
var smallImage = document.getElementById('smallImage');
smallImage.src = "test1_600.jpg";
immagine = Caman("#smallImage", function () {});
function filtraPhoto() {
immagine.brightness(10).contrast(500).render(function () {
alert("Done!");
});
}
</script>
</body>
</html>
This is the second not working, it return in firebug the error: TypeError: this.c.pixelData is undefined
<!DOCTYPE html>
<html lang="en">
<head>
<title>CamanJS Testing Playground</title>
<script type="text/javascript" src="caman.full.min.js"></script>
<script>
var immagine;
function carica()
{
var smallImage = document.getElementById('smallImage');
smallImage.src = "test1_600.jpg";
immagine = Caman("#smallImage", function () {});
}
function filtraPhoto() {
immagine.brightness(10).contrast(500).render(function () {
alert("Done!");
});
}
</script>
</head>
<body>
<button onclick="carica();">carica immagine</button><br />
<button onclick="filtraPhoto();">MODIFICA</button><br />
<img id="smallImage" />
</body>
</html>
Any help please?
It runs just fine in both Firefox and Chrome for me. In my limited experience, this.c.pixelData typically comes when your conversion to a CamanInstance was not successfully created.
This can be because of many things, but one that isn't expected is that CamanJS won't let you use the same html identifier (class or id) for more than one object, even if you've swapped them out. So if you're running the two scripts above on the same page, it will cause errors.
Sorry, without being able to reproduce your error, it's hard to help more than that.
Look at the below code, this JavaScript is used to take a string (in a language other than English) and convert it into English.
<script type="text/javascript">
google.load("language", "1");
function initialize() {
var content = document.getElementById('translation');
// Setting the text in the div.
content.innerHTML = '<div id="text">HELLO WORLD<\/div>
<div id="translation"/>';
// Grabbing the text to translate
var text = document.getElementById("text").innerHTML;
// Translate from Spanish to English, and have the callback of
// the request put the resulting translation in the
// "translation" div. Note: by putting in an empty string for
// the source language ('es') then the translation will
// auto-detect the source language.
google.language.translate(text, '', 'en', function(result) {
var translated = document.getElementById("translation");
if (result.translation) {
translated.innerHTML = result.translation;
}
});
}
google.setOnLoadCallback(initialize);
</script>
I want that the string "HELLO WORLD" must be entered by user at run time in a text field and then that string is passed to the div id text. So is this possible?
Hope you are referring to the document below:
http://code.google.com/apis/language/translate/v1/getting_started.html
Please refer to the section "Getting Started" where it says about "Signing up for an API key". This needs to be done before you could implement the code in your page.
Once done, make the modification to the script file which you include in the html page with your key.
Here, replace your key with "MY_KEY_STRING" in the bottom code and get started.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google AJAX Language API Sample</title>
<script src="https://www.google.com/jsapi?key=MY_KEY_STRING"></script>
<script type="text/javascript">
google.load("language", "1");
function initialize() {
//Show the translate button
document.getElementById("translateButton").style.display = "";
}
google.setOnLoadCallback(initialize);
function translate() {
var text = document.getElementById("fromText").value;
google.language.translate(text, 'es', 'en', function(result) {
var translated = document.getElementById("toText");
if (result.translation) {
translated.innerHTML = result.translation;
}
});
}
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
From:<input type="text" id="fromText"/>
To:<span id="toText"></span>
<input type="button" value="Translate" onclick="translate()" style="display: none;" id="translateButton">
</body>
</html>
HTML:
<form id="translate">
<textarea id="translate-me"></textarea>
<input type="submit" />
</form>
JavaScript:
var form = document.getElementById('translate')
var textarea = document.getElementById('translate-me')
form.onsubmit = function () {
google.language.translate(textarea.value, ...)
return false; // prevent default action (form submission)
}
Using jQuery or something similar would make this easier, of course.
Why does IE8 fail to change the documents title with document.title="test title";
Following works on IE8 for me. But I did get the ActiveX security popup, so perhaps your IE8 is not set to prompt for these issues and just deny scripting.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<script type="text/javascript">
function changeTitle() {
document.title = 'Foobar';
}
</script>
</head>
<body onload="changeTitle()">
</body>
</html>
Really? Using document.title = 'Foo Bar'; has always worked for me. Is your script even executing?
Try shoving this right before the document.title = ...:
alert('I work.');
If you don't get an alert box, your script isn't even running.
found this:
http://support.microsoft.com/kb/296113
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JAVASCRIPT">
function runTest()
{
var s ="We should set this as the new title"
var mytitle = document.createElement("TITLE");
mytitle.innerHTML = s;
alert(s);
document.documentElement.childNodes[0].appendChild(mytitle);
}
function fix()
{
var s = "Now we change the title";
alert(s);
document.title = s;
}
</SCRIPT>
</HEAD>
<BODY>
<input type="button" value="Problem" onclick="runTest()"/>
<input type="button" value="Workaround" onclick="fix()"/>
</BODY>
for me this is works in IE 9,8,7
maybe you dont call your function, or there is something which not works.
the document.title must work!