I have a strange error after I've included Platform.js (v0.3.4) (Polymer), jQuery (v2.x.x) and Bootstrap.js (v3.2.0) on an empty page.
With Safari and Firefox, on some events, such as click or keyup, on the (empty) page, it throws an error :
TypeError: 'undefined' is not a function (evaluating 'elem.getAttribute( name )')
There is no problem with jQuery v1.11.1, and I didn't try other versions of Platform. Neither with Chrome or Opera.
If I replace all the 'click' by 'dblclick' in Bootstrap, there is no more error on click (it occurs on dblclick of course).
Well, it's no big deal but it is surprising.
Here is the code to test:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PJB</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js"></script>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
</body>
</html>
If anyone have any idea of how to avoid this error without breaking Bootstrap, jQuery of Platform, I'ld be glad to know.
Thanks.
I believe the problem is related to this issue: https://github.com/Polymer/platform/issues/69
The fix seems to be to wrap document and/or document.body. ex:
(function(document) {
// add your jquery handlers here...
$(document).on('click', ...);
})(wrap(document));
More explanation here: http://www.polymer-project.org/platform/shadow-dom.html#wrappers
Related
I have some dynamic javascript that creates elements, with a click event element handler... the script is included from another domain.
However with Firefox at runtime it gives a security warning and does not process the click event (Chrome works fine).
A simplified version below
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"></head>
<body>
<h2 id="headertitle">TEST</h2>
<br/>
<script type="text/javascript" src="somewhereelse.com/script.js">
</script>
</body>
</html>
Javascript include:
document.getElementById("headertitle").insertAdjacentHTML('beforeBegin',
"<button value='TEST' onclick='clickHandler(this)' >Button</button>");
function clickHandler(evt){
alert("clicked");
}
Warning Message:
Security wrapper denied access to property undefined on privileged
Javascript object. Support for exposing privileged objects to
untrusted content via exposedProps is being gradually removed -
use WebIDL bindings or Components.utils.cloneInto instead. Note that
only the first denied property access from a given global object will
be reported.
I tried your code here and it worked fine for me on Firefox 50.1.0. =/
However, I strongly recommend you use JQuery to deal with events triggered by dynamically created elements. JQuery handles the DOM differently, it's cross-browser and it's just made for this kind of situation. It may solve your problem. =D
Try and change your html to
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"></head>
<body>
<h2 id="headertitle">TEST</h2>
<br/>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="somewhereelse.com/script.js">
</script>
</body>
</html>
and your JS code to
document.getElementById("headertitle").insertAdjacentHTML('beforeBegin',
'<button value="TEST" class="clickable" id="btn1">Button</button>');
$('.clickable').on('click', function() {
alert($(this).attr('id') + ' was clicked');
});
That should make it work!
Cheers! =)
I use inline Ckeditor to edit content. I want to bind a keypress event to the div i edit. I mean, i need an event that will fire when i change the content of div.
Here is an example of how i do that
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.2/ckeditor.js"></script>
</head>
<body>
<div id="ckediv" contenteditable="true">Editing with CKEDITOR</div>
<br>
<script type='text/javascript'>
$( "#ckediv" ).keypress(function() {
alert('cke key pressed');
});
</script>
</body>
</html>
The problem is that keypress is not fired in ie and chrome when i press enter ordelete keys. If i make a div with contenteditable="true" but without Ckeditor then the event works well.
Here is a jsfiddle with code that shows how it works now http://jsfiddle.net/uAc7c/4/ .I don't know why, but for some reason this jsfiddle(keypress event) doesn't work in ie. When i tested locally with above source, it worked.
And here is a jsfiddle without Ckeditor that shows how it should work http://jsfiddle.net/mPM4J/4/
JQuery Documentation says:
Note: as the keypress event isn't covered by any official specification, the actual behavior encountered when using it may differ across browsers, browser versions, and platforms.
So i guess IE and Chrome are two of the unsupported browsers.
Therefore try using the keyup event instead like this:
$( "#ckediv" ).keyup(function() {
alert('cke key pressed');
});
For more info, see here:
KeyUp Documentation in the JQuery API
I am using following code for my website:
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script src="js/jquery-migrate-1.2.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("img#logo").load(function() {
alert('Hello');
});
});
</script>
And this is not working in IE but works fine in Firefox, Chrome and Safari.
I can confirm that your code does work in IE 8 on windows 7 64 using unminified version:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script>
$(document).ready(function () {
console.log($.fn.jquery);
$("img#logo").load(function () {
console.log('Hello');
});
});
</script>
</head>
<body>
<img id="logo" src="somegig.gif" onload="console.log('load');"/>
</body>
</html>
This will log 1.10.1 then load and then Hello, maybe you have to validate your html and make sure your html is valid maybe that's a problem.
a quick review of http://api.jquery.com/load-event/ provides some caveats:
Caveats of the load event when used with images
A common challenge developers attempt to solve using the .load()
shortcut is to execute a function when an image (or collection of
images) have completely loaded. There are several known caveats with
this that should be noted. These are:
It doesn't work consistently nor reliably cross-browser
It doesn't fire correctly in WebKit if the image src is set to the same src as before
It doesn't correctly bubble up the DOM tree
Can cease to fire for images that already live in the browser's cache
Note the first and fourth caveats. Clear the cache and try again.
Also, do you need the jQuery migrate ? Lose it and see if it is glitching your IE
Nothing in jQuery appears to be working in Chrome for me. My version is 18.0.1025.151 m. The javascript is in the file test.js:
$('#paragraph').click(function() {
$('#paragraph').hide();
});
And the html is this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Example</title>
<script src="jquery-1.7.1.min.js"></script>
<script src="test.js"></script>
</head>
<body>
<p id="paragraph">This is my paragragh 401!</p>
</body>
</html>
I have triple-checked that the jQuery file is where it's supposed to be. Essentially, the code is supposed to make the paragraph disappear when clicked on. Seems simple enough and syntactically correct. I chose such a simple code because while regular javascript statements and code work fine (such as alert() and whatnot), absolutely nothing in jQuery has worked so far at all.
Here's the strange part though. When using the console in Chrome's developer tools, if I input the exact same jQuery stuff and hit enter, it actually works and functions how it's supposed to.
Does this have anything to do with Chrome's security structure or something?
Edit: Also, I should note that I have not yet uploaded these files on my server yet. This is on localhost (I'm using xammp for what it's worth), so perhaps that may help shed some light on the issue.
Wrap the code in a document ready, or put test.js before the end body tag.
It's executing before the DOM is ready. It should look like this:
$(function(){
$('#paragraph').click(function() {
$('#paragraph').hide();
});
});
To address the comment below:
http://api.jquery.com/ready/
The .ready() method is typically used with an anonymous function:
$(document).ready(function() {
// Handler for .ready() called.
});
Which is equivalent to calling:
$(function() {
// Handler for .ready() called.
});
You have to wrap it in document ready. That's probably your problem. Also you can use $(this) or cache the selector.
$(function () {
$('#paragraph').click(function () {
$(this).hide();
});
});
Why doesn't this JavaScript work in Internet Explorer 7-8? All I am trying to do is wire up the 'click' event for multiple DIVs by using jQuery to select the DIVs by class name.
It works in Firefox, Chrome, Safari. In IE, it will only work in Browser Mode: IE 9 / Document Mode: IE 9 standards". Can't get it to work in IE 7 or 8.
<!DOCTYPE html>
<head>
<title>IE Click Target Test</title>
</head>
<body>
<div class="ClickTarget">Button 1</div>
<div class="ClickTarget">Button 2</div>
<!-- load jQuery 1.6.4 from CDN -->
<script type="application/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="application/javascript">
// This works fine in all browsers except IE pre-9.
$(document).ready(function () {
$(".ClickTarget").click(function () {
alert("If you can see me, it worked!");
});
});
</script>
</body>
</html>
Normal disclaimers: I wouldn't HAVE to use jQuery for this example, but it illustrates a problem I am having with a larger solution that does use jQuery 1.6.4. IE is often quirky, I've had to deal with it many years, but that's life.
For some reason, maybe the impending holiday, I'm overlooking something. Any ideas why I can't register the click in IE?
I think it's the type="application/javascript" in your <script> tags -
"text/javascript" is the only type that is supported by all three
browsers. However, you don't actually need to put a type. The type
attribute of a script tag will default to "text/javascript" if it is
not otherwise specified. How that will affect validation, I'm not
sure. But does that really matter anyway?
From - Why doesn't IE8 recognize type="application/javascript" in a script tag?
Try changing script tag's type attribute to text/javascript it should work fine in all the browsers.
As Shankar said originally, it's your script type not being "text/javascript"
I tried this JSFiddle in IE8 and worked fine for me.
http://jsfiddle.net/Nna2T/
This is not an answer but comments can't format code, so just an FYI...
This:
$(document).ready(function () {
...
});
Can be shorted to just:
$(function() {
...
});