http://jsfiddle.net/xEpGg/740/
If I call it directly right after my script using:
$.custom.test();
It works as expected. However, if I put it anywhere in the HTML, it won't fire. I defined my object in jQuery, shouldn't that be accessible everywhere within the page?
In case you cannot define the function in the way #frenchie suggested try:
setTimeout(function(){$.custom.test();}, 0);
Why is setTimeout(fn, 0) sometimes useful?
And why the heck would you want to assign anything to the jQuery global?
See the solution here: you need to define the custom function before you can use it.
Like this:
<script>
$.custom = {
test : function() { alert("wtf"); }
};
</script>
<div id="helloworld" style="border:solid; border-width:5px;">
BLAH
</div>
<script>
$.custom.test();
</script>
You are adding your script to the page after it's loaded, but invoce $.custom.test() before it's loaded..
Change this option to no wrap (head) and it will work fine..
Related
I am trying to get myself started with jsFiddle. So I tried to run a simple code snippet which includes all HTML, CSS and JavaScript code.
Javascript does not works If I select onLoad in Frameworks & Extensions dropdown
But it does work when I select No Wrap - in from the dropdown
Can you tell me what that means . I have already read this question on SO JavaScript not running on jsfiddle.net
But not able to understand the solution mentioned there.
When you select onLoad, your JavaScript is wrapped with an onload function. This means your code will run when the page has finished loading, but is no longer available in the global scope. It looks like this
window.onload=function(){
function myFunction() {
alert("Hello");
}
}
A workaround might be to assign variables to the window object so that they are accessible anywhere in the page.
For example:
function myFunction() {
alert("Hello");
}
window.myFunction = myFunction;
and
<button onclick="window.myFunction()" >Hi</button>
When using onLoad, the function won't become global one, so you can't invoke it directy from HTML. If it is global - like when using no-wrap - it works.
The onLoad generates something similar:
window.onload = function () {
function myFunction() {
}
}
So, myFunction() is only visible directly in the closure of the anonymous function.
HTML:
<img src="https://help.pace.edu/helpdesk/info_icon_small.gif?v=12_1_0_300.gif" onclick="plusButton_Click()">
js:
function plusButton_Click() {
alert('hi');
}
http://jsfiddle.net/uEypH/1/
I might be new to Javascript and all. But why does my Firefox console say
"ReferenceError: plusButton_Click is not defined"?
Because the function must be in global scope if you intend to call it in inline js.
jsfiddle creates a new closure, so it is not global. Use their --wrap it in head-- option.
Updated demo
Or change
function plusButton_Click() {
alert('hi');
}
to:
window.plusButton_Click = function(){
alert('hi');
}
You have javascript set to onLoad. In a normal page, you would have put it straight in the body most likely. Set it to NoWrap and it should work fine.
By default, jsFiddle places your Javascript code into an onLoad function. Your plusButton_Click will not be visible outside of this closure.
To fix, either:
Select "In <head>" from the dropdown (Example)
Define your function as window.plusButton_Click = function() { ... } (Example)
This simple piece of chode is not working in Chromium(Ubunto) and Chrome.
HTML
<input type="button" id="saveFavPunch" name="saveFavPunch" value="save" onClick="saveFavPunch()" >
SCRIPT
var req;
function saveFavPunch(){
alert('govind singh');
if(!req){
req=$.ajax({
type:"POST",
url:"edit?editType=saveFavPunch",
data: {"value":document.getElementById("punchId").value},
complete:function(){req=false},
success: function(data){
$.fancybox.close();
if(data==""){
alert("ERROR!");
}else{
if(data=="0"){
alert("Internal Error Occurs, please try after some time");
}else{
document.getElementById("favPunchline").innerHTML=data;
}
}
}//end success
});
}
}
Can't add a comment yet, nothing's wrong with the code, but to make it work in jsfiddle change onLoad to noWrap
Description of what each of the settings does: http://doc.jsfiddle.net/basic/introduction.html#frameworks-and-extensions
Basically you need it to be in a simple <script> tag, not in the onLoad event
Fiddle with the code you provided: http://jsfiddle.net/Sam88/YEPm3/12/
Since you mentioned jQuery in your tags, I thought I'd give a jQuery solution: Fiddle
Html:
<input type="button" id="saveFavPunch" name="saveFavPunch" value="save" />
Javascript:
$("#saveFavPunch").on("click", function () {
alert('hello2');
});
:)
Edit
Javascript Not Running On JSFiddle is a possible duplicate of your question. I am quoting the selected answer:
The functions you define are defined in an onload function, so whereas before they were referenceable, because they are defined in that function they can only be referenced from within that function. You reference them as globals in your HTML. You have three options
a) ( easiest, quickest, not ideal ) - change function blah(){} to window.blah = function(){}; making the functions global.
b) ( ideal way ) - use unobtrusive Javascript to attach behaviour to DOM elements from within the JS solely, meaning separate HTML from JS.
c) Make the jsfiddle not wrap the stuff onload. Change onLoad to no wrap ( body or head ).
So instead of you'd do var e = document.getElementById('foo'); e.onclick = lol; in the JS only.
I recommend b as it encourages best practices.
Just one change — JSFiddle setting from "onLoad" to "No wrap - in " and it works:
http://jsfiddle.net/3f7PT/
The problem with the onLoad option is that this is what it outputs in the results:
//<![CDATA[
window.onload=function(){
function saveFavPunch(){
alert('hello2');
}
}//]]>
So your function gets unintentionally wrapped in another function which stops it being found from that onclick call.
Hope this helps.
The following entire script works properly in Chrome for me.
<html>
<head>
<script>
function saveFavPunch(){
alert('hello2');
}
</script>
</head>
<body>
<input type="button" id="saveFavPunch" name="saveFavPunch" value="save" onClick="saveFavPunch()" >
</body>
This works
document.getElementById("saveFavPunch").addEventListener("click", saveFavPunch);
function saveFavPunch(){
alert('hello2');
}
http://jsfiddle.net/6sg9R/
Ye JSFiddle is very finicky about Alerts. It works no problem as Spassvogel shows but your way should work as well from file as opposed to on JSfiddle.
Even those you having this type of problem then use div tag
<div id="saveFavPunch" style="height:30px; widht:100px; display:block;" onClick="saveFavPunch()">Save</div>
I think Using this code Your problem will solve.
I'd like to build onmouseover directly into a javascript block. I can do it within a hyperlink but I need to do it in the actual script section for the code im writing. Can I do object.onMouseOver()? Or is there another way to do it?
So for example I'd like
<script>
something i can put in here that will make on mouseover work on a specific object
</script>
Yes. :)
<span onmouseover="alert('Hi there')">Hi there</span>
Do you mean like that?
edited to add:
Ah I see so like this?
<span id="span1">Hi there</span>
<script>
document.getElementById('span1').onmouseover = function() {
alert('Hi there');
}
</script>
You bind events to HTML elements not javascript blocks. If you are talking about binding events to elements using script, yes you can do it. You can use addEventListener to bind events.
document.getElementById("eleid").addEventListener("mouseOver", myEventMethod, false);
Yes you can so if you have a link somewhere in the page that you want to fire the hover for you can use the following.
http://jsbin.com/asoma4/edit
EDIT: I should add that the attached is just an ugly example to demonstrate that what you want to do can be done. I would look into popular js libraries (jquery, prototype, etc..) to clean this up a lot and make it easier.
You can use addEventListener in Firefox/Chrome/etc. and attachEvent in IE. See this page.
For example,
<div id="cool">Click here!</div>
<script>
function divClicked()
{
// Do some stuff
}
var theDiv = document.getElementById("cool");
if(theDiv.attachEvent)
{
// IE
theDiv.attachEvent('onclick', divClicked);
}
else
{
// Other browsers
theDiv.addEventListener('click', divClicked, false);
}
</script>
If you want to avoid having to write all that code, you can use a JavaScript library (jQuery, Prototype, etc.) to simply your code.
I need to basically add this to my page:
<body onload="document.getElementById('WeddingBandBuilder').focus()">
However due to my template I cannot change the tag. So is there a way to do the equivalent with a script in the < head > tag or something?
Thanks!
<script>
window.onload = function() {document.getElementById('WeddingBandBuilder').focus()};
</script>
You should always be careful there isn't already a window.onload defined. I've been burned a number of times by assuming I would be the only one attaching things to <body onload="..."> or window.onload.
See this answer and comments for a solution to this issue.
Use a JS library like jQuery or Prototype and create an external script file with something like this:
for jQuery:
$(function() { $('#WeddingBandBuilder').focus(); });
for Prototype:
Event.observe(window, 'load', function() { $('WeddingBandBuilder').focus(); });
I might check if that page has already included jQuery? If so, you can do something like this:
$(document).ready(function() {
$('#WeddingBandBuilder').focus();
});