I have the following code
http://jsfiddle.net/6xcn6gzj/, I need to remove an element off the page using its attribute, so I opted for jQuery's remove. My problem is that once I click on the image, nothing happens. I tried calling the function from javascript itself and it was working perfectly. For some reason, the event is just not happening.
HTML:
<div>
<img src="whatever" alt="test" onclick="close('test')">
</div>
Javascript:
console.log('hi');
function close(template) {
console.log(template);
$('body').find('img[alt="'+template+'"]').remove();
}
The console is logging "hi" which indicates that javascript is running fine but it never logs the template name. Any help is appreciated.
Two problems:
Don't name your function close, that will conflict with window.close
Your fiddle was set to load your code in the onload handler, so your function was local to that function. Change your fiddle to load the script in the <head> http://jsfiddle.net/6xcn6gzj/7/
function doClose(template) {
console.log(template);
$('body').find('img[alt="' + template + '"]').remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<img src="whatever" alt="test" onclick="doClose('test')" />
</div>
Maybe you should just call this.remove()?
<div>
<img src="whatever" alt="test" onclick="this.remove()">
</div>
http://jsfiddle.net/6xcn6gzj/2/
Related
I'm trying to make some changes in DOM after an image is selected with an "input file" HTML5 element. So, I added a handler to the "onchange" event, but it is not working!
<span class="btn-file" >
Load and show alert
<input type="file" onchange="performSomeActions()"/>
</span>
And supose this is the function:
function performSomeActions(){
alert("lalala");
}
The error I get when I execute the code and after choosing a file is:
Uncaught ReferenceError: performSomeActions is not defined
I thought maybe I was wrong with the event name, but if you replace the input definition with the following line, it is working!
<input type="file" onchange="alert('alo');"/>
THE FIDDLE: http://jsfiddle.net/pvhaggrv/5/
Thanks in advance!
JSFiddle doesn't like calls to javascript embedded in your html. In the interest of keeping your code clean event handlers are assigned via javascript instead.
Change your html to:
<input type="file" id='fileInput'/>
and then in your JS
document.getElementById('fileInput').onchange = function() {
performSomeActions();
}
working fiddle: http://jsfiddle.net/bmartinelle/rhbphvhu/
just put javascript function in body tag just before ending of body tag like this
<span class="btn-file" >
Load and show alert
<input type="file" id="file" onchange="performSomeActions();"/>
</span>
<br/>
<img id="img"> </img>
<script>
var performSomeActions=function(){
alert("yyy");
}
</script>
see fiddle
Your fiddle doesn't work because fiddle executes all your javascript in the a anonymous function:
//<![CDATA[
window.onload=function(){
function performSomeActions(){
alert("yyy");
}
}//]]>
So your function isn't in the global scope and your HTML can't see it.
To your code works you need to include your function directly at the HEAD, you can do this in fiddle changing the checkbox at the left side: http://jsfiddle.net/pvhaggrv/12/
HOWEVER, you should not add event listeners this way, you should use addEventListener like kougiland said in his answer.
DEMO
HTML:
<span class="btn-file" >
Load and show alert
<input type="file" id="input">
</span>
<br/>
<img id="img"> </img>
SCRIPT:
function handleFiles() {
alert("lol");
var fileList = this.files; /* now you can work with the file list */
}
var inputElement = document.getElementById("input");
inputElement.addEventListener("change", handleFiles, false);
SOURCE:
Dynamically adding a change listener
hello I'm having trouble using level 2 DOM to handle events, i've looked around but just don't quite understand how it works, and allways end up doing simple code like:
<element onClick = " some code" > </element>
instead of reaching the element from outside of html code, please help, I know this is an easy topic but just can't make it work...
there is also some css code but its not relevant to my question so here's my code:
<script type="text/javascript">
function rotate( xy , deegrees){
document.getElementById("cube").style.WebkitTransform = " rotate"+xy+"("+deegrees+"deg)";
}
// so this is where its supposed to be but not working
// whats wrong ?
document.getElementById("upp").addEventListener("click", rotate('X', 540), true);
myFunction();
</script>
</head>
<body>
document.getElementById('cube').style.WebkitTransform = 'rotateX(90deg)';
<div id="button_container">
<button id="upp" onMouseOver=" rotate('X',90); "> UP</button>
<button id="downn" onMouseOver = " rotate('X',-90); "> DOWN</button>
<button id="leftt" onMouseOver = " rotate('Y',00); "> LEFT</button>
<button id="rightt" onMouseOver = " rotate('Y',-90); "> RIGHT</button>
</div>
<section class="container">
<div id="cube">
<figure class="front">front</figure>
<figure class="back">back</figure>
<figure class="right">right</figure>
<figure class="left">left</figure>
<figure class="top">top</figure>
<figure class="bottom">bottom</figure>
</div>
</section>
This is a function call:
rotate('X', 540)
It's a function call no matter where it appears, like when you call addEventListener:
document.getElementById("upp").addEventListener("click", rotate('X', 540), true);
Thus, you're passing the result of calling your "rotate" function instead of the function itself:
document.getElementById("upp").addEventListener("click", function() { rotate('X', 540) }, true);
By wrapping the function call in another function, you correctly supply addEventListener() with an event handler to be called when the "click" happens.
In addition to that, you're trying to add the event handler in a script block that appears before the DOM element you're trying to affect. When the script runs, there won't be an element in the DOM with the id you're looking for. Either wrap your event handler setup in a "load" event handler, or move the script block to the end of the <body>.
Your code likely is running before your DOM is applied. Move script tag to bottom of page or use onload function to execute your code after the DOM has completed its load phase.
http://api.jquery.com/ready/
Validate this by ensuring you can log a element you are attempting to get a reference to...
console.log(document.getElementById("upp"));
Should return a DOM element.
I need an image click to execute a js function. I have it working in my project, but I have other code to develop so I'm trying to use jsfiddle. But I can't get this simple code to work in jsfiddle. when I use jsfiddle and I click the image, nothing happens.
What am I missing in my efforts to use jsfiddle?
My HTML
<div>
<img id="additem" Title="Add Item" onclick="myfunc()" OnMouseOver="this.style.cursor='pointer';" OnMouseOut="this.style.cursor='default';" src="~/images/Sign_Add_Icon_32.png" />
</div>
My JS
function myfunc() {
alert("hello");
}
Remove onload in framework and extensions, set it to in head or in body.
DEMO
This works! But what was the problem?
You can't wait for the document to load in that case, because myfunc isn't defined before the Javascript is executed after the HTML loads.
i have jquery, but it is not going to next page, it always display images and waits, never proceed to next page.
HTML code:
<div id="toHide" class="pb-text-align-center">
<img style="display: inline" src="img/load.gif" />
<form wicket:id="safeForm" class="clearfix">
<input type="hidden" wicket:id="submitted" value="false" />
</form>
</div>
HTML view source:
<SCRIPT type="text/javascript">
var $ = jQuery.noConflict();
$('.toHide').show().doTimeout(100,function() {
$('.toHide').find('safeForma3').submit();});
</SCRIPT>
wicket code:
static private class SafeSubmitBehaviour extends AbstractBehavior{
public void onRendered( Component component ) {
super.onRendered( component );
StringBuffer buffer = new StringBuffer(200);
buffer.append("<script type=\"text/javascript\" >\n");
buffer.append("var $ = jQuery.noConflict();\n ");
buffer.append(" $('.toHide').show().doTimeout(100,function() { $('.toHide').find('");
buffer.append(component.getMarkupId()).append("').submit();});\n</script>");
component.getResponse().write(buffer);
}
}
buffer.append(component.getMarkupId()).append("').submit();});\n</script>");
i have tried with: $('.toHide').find('form').submit();});. But still no use.
After chaging $('.toHide') to $('#toHide'), page is going ot next page, but animation is not happening in IE6/7, it works fine in FF.
The "toHide" <div> has that string as it's id value, not it's class, so you need:
$('#toHide')
The selector ".toHide" looks for an element with "toHide" as part of the class, so that wouldn't find your <div> at all.
To find the form, you'd use
$('#toHide form').submit();
I think you should try this:
$('#toHide').find('form').submit();
Or if the form has an ID on it (I'm not familiar with Wicket) you can just use:
$('#safeForm').submit();
The ID selector uses a '#' charactor, not a '.', which is the class selector prefix.
There is no id named 'safeForm15' in your HTML, which is what your setTimeout is trying to select. In fact, the form has ID namespaced, which I believe is illegal to begin with.
Regardless, the quick fix is to cue off of 'toHide', and get rid of the component.getMarkupId bit.
$('#toHide').find('form').submit();
Added:
You need to change this:
buffer.append(" setTimeout(function(){ $(\"#").append(component.getMarkupId()).append("\").submit()}, 100);\n");
to this:
buffer.append(" setTimeout(function(){$('#toHide').find('form').submit();}, 100);\n");
This is a problem with IE, if you have a GIF that is not visible and then set it to visible the animation doesn't work.
Best thing to do is just used an empty image tag like this <img src='' /> and then when you want it to become visible set the src to the correct path i.e. <img src='AnimatingImg.gif' />.
It should work if you do it this way.
EDIT
You can do it like this:
<SCRIPT type="text/javascript">
var $ = jQuery.noConflict();
$('#toHide').show();
$('#loadingImg').attr('src', 'img/load.gif');
setTimeout(function() {
$('#toHide').find('safeForma3').submit();
}, 100);
</SCRIPT>
html code:
<div id="toHide" class="pb-text-align-center">
<img id="loadingImg" style="display:inline" src="" />
<form wicket:id="safeForm" class="clearfix">
<input type="hidden" wicket:id="submitted" value="false" />
</form>
</div>
Try that, might want a bit of fiddling though.
Others have mentioned the problem with your selector.
However, this code also appears naked between two script tags. This means that they will be executed as soon as they are parsed. This means that they could be executed before the whole DOM is loaded, rendering them ineffective.
You need to use something like this:
<SCRIPT type="text/javascript">
var $ = jQuery.noConflict();
$(document).ready(function(){
$('#toHide').show().doTimeout(100,function() {
$('#safeForma3').submit();
});
});
</SCRIPT>
I have a need to dynamically include and run a script in a page. I am using an image onload event for this:
<img src="blank.gif" onload="DoIt" />
The DoIt function looks like this (just made up this example):
this.onload=' ';this.src='image.jpg';
I have no control on the page itself (I only control the HTML string that the page will call), so I need to include the DoIt function explicitly in the markup.
I tried using an anonymous function, but it didn't work:
<img src="blank.gif" onload="function(){this.onload=' ';this.src='image.jpg';}" />
Should I just write the script inline, like this:
<img src="blank.gif" onload="this.onload=' ';this.src='image.jpg';" />
And in this case are there any limitations (e.g. script length)?
Thanks for your help!
The this won't work inside the function since the function is called by the window object, therefore the this will refer to window.
If you want to wrap your code inside a function you must wrap that function, call it with the this set to the element or pass the this as a parameter:
<html>
<body>
<!-- call the function and set the this accordingly-->
<img src="foo.png" onload="(function(){...}).call(this)" />
<!-- pass the this as a parameter -->
<img src="foo.png" onload="(function(e){....})(this)" />
</body>
</html>
Yet this doesn't really make sense to me:
I have no control on the page itself (I only control the HTML string that the page will call),
Do you only have control over the img tags? If you can output abritary HTML, then why not just put something in a `script' tag?
Update
With a script block you could declare your function in there and then simply call it in the onload event.
<script>
function doIt(el) {
// code in here
console.log(el.id); // you could do stuff depending on the id
}
</script>
<img id="img1" src="foo.png" onload="doIt(this)" />
<img id="img2" src="foo.png" onload="doIt(this)" />
Now you need only one function for many images.
And if you need to get really fancy, you can setup your script tag to pull in jQuery or any other library.
<script src="somepathtojquery"></script>
<script>
// do jquery stuff in herep
If you need a lot of these handlers jQuery could do the job.
Still I'm asking my self when you have full control over the HTML why don't you use a library in the first place? :)
Try:
<img src="blank.gif" onload="(function(el){el.onload=' ';el.src='image.jpg';})(this)" />