I encountered a problem of declaring a variable "location" for extjs store where it runs without any problem in IE but browsers that has webkit like FireFox, Chrome..etc trying to redirected to unknown page with [object, object] in the end.
Was there any list of reserved variables like "location" we should not use it in extJS?
It has nothing to do with Ext. The browser window object has a location property:
https://developer.mozilla.org/en-US/docs/Web/API/window.location
This is caused by the different designs of 'Global' object in different browsers.
In Chrome/Firefox/Opera, it will add the 'Global' object as a property to 'window'(host object). Like,
"var test = 'test';alert(window.test);",
the result will be: test.
But, in IE, it doesn't add the global object to 'window'.
So, here, the statement var location = "Some value"; equals to window.location = "Some value";.
Related
Can you tell me how can I just get text who is copied in clipboard. I don't want to make a copy because data are copied from Excel.
In IE I use :
var clipText = window.clipboardData.getData('Text');
And it's work perfect.
Is it possible in chrome ? or maybe Firefox ?
Thanks for advance
The window.clipboardData object is only available in IE. It seems like a big security vulnerability to me for a website to be able to access your clipboard data, especially without you knowing. According to the specification, it's mostly deprecated as of Microsoft Edge.
Instead, you can access the data by listening to the paste event:
document.addEventListener('paste', function (event) {
var clipText = event.clipboardData.getData('Text');
});
If you're looking to use jQuery and bind an element to the 'paste' event then you can access the clipboard data by using the originalEvent property on the calling event.
Check the window object to see if the clipboardData is undefined. This will mean that you're not using IE or Edge.
this.bind('paste', function(e){
if (window.clipboardData === undefined)
clipText = e.originalEvent.clipboardData.getData('Text') // use this method in Chrome to get clipboard data.
else
clipText = window.clipboardData.getData('Text') // use this method in IE/Edge to get clipboard data.
});
I've earlier successfully used the JavaScriptAudioNode in the Web Audio API to synthesize and mix audio both in Chrome and Safari 6.0. However, the latest version of Safari no longer appears to work, because it does not call onaudioprocess to fill the source buffers.
This is a simplified example which plays only silence and appends text to the document body on each call to onaudioprocess:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
var context = new webkitAudioContext();
var mixerNode=context.createJavaScriptNode(2048, 0, 2);
mixerNode.onaudioprocess=function(ape) {
var buffer=ape.outputBuffer;
for(var s=0;s<buffer.length;s++)
{
buffer.getChannelData(0)[s]=0;
buffer.getChannelData(1)[s]=0;
}
$("body").append("buffering<br/>");
};
$("body").html("");
mixerNode.connect(context.destination);
return false;
});
});
</script>
</head>
<body>
start
</body>
</html>
The above example works in Chrome as expected, but not in desktop Safari. The iOS version of Safari does not work either, but it never did work for me in the first place.
Calling context.createJavaScriptNode does return a proper object of type JavaScriptAudioNode and connecting it to the destination node does not throw any exceptions. context.activeSourceCount remains at zero, but this is also the case in Chrome as it apparently only counts active nodes of type AudioBufferSourceNode. context.currentTime also increments as expected.
Am I doing something wrong here or is this an actual bug or a missing feature in Safari? The Apple documentation has no mention of JavaScriptAudioNode (nor the new name, ScriptProcessorNode) but it did work before on the first release of Safari 6. The iOS Safari requirement for user input doesn't seem to help, as the example above should take care of that.
The simple example can be found here and a more complex one is my Protracker module player which exhibits the same behaviour.
There are a couple bugs in Safari's implementation of the Web Audio API that you'll need to look out for. The first is in the createJavaScriptNode constructor... it seems to have problems with the "input channels" param being set to 0. Try changing it to this:
createJavaScriptNode(2048, 1, 2)
The second issue has to do with garbage collection (I think); once your mixerNode variable is out of scope, Safari seems to stop firing the onaudioprocess callback. One solution is to introduce mixerNode at the top-level scope (i.e. declaring var mixerNode; at the top of your script) and then store your JavaScriptNode in that top-level variable. If you plan on dynamically creating multiple mixerNodes, you can achieve the same effect by storing references to them in a top-level array variable.
If you make these two changes (input channel param set to 1, maintaining a reference to the mixerNode) then your script should work in Safari as expected.
I have a Maven Jetty project with JSPs using JavaScript. I want to be able to highlight parts of a canvas corresponding to the dragged image's size.
When I look at my JSP by simply opening it in the browser everything works as expected but when I start the Jetty Server with the goal jetty:run the ID of the dragged object is not being set or cannot be retrieved from the transferData of the event.
The relevant code: All draggable images have a unique ID. On drag start I set the ID of the dragged image on the event's transferData like this:
function dragShipFromTable(event) {
event.dataTransfer.setData("id",event.target.id);
}
When the image is dragged over the canvas I call the following function
function allowDrop(event) {
event.preventDefault();
var id = event.dataTransfer.getData("id");
var img = document.getElementById(id);
// Do the highlighting stuff
....
}
The problem is that when the server is started and I do the above action then in allowDrop(event) the ID of the dragged image is not being retrieved from the transferData. It is undefined and therefore the highlighting fails. This is not the case when simply opening the JSP as a File.
Well I kind of found the answer to my own question. First of all the setData method on the dataTransfer object only allows certain formats as first parameter. I interpreted it as an associative array but this is not the case. So it should be
event.dataTransfer.setData("text/plain", id);
event.dataTransfer.getData("text/plain");
to set and retrieve the id correctly.
But in the end everything failed due to chrome as there is a bug in Chrome which prevents me from using dataTransfer as intended (see How do you get the selected items from a dragstart event in Chrome? Is dataTransfer.getData broken? ).
I now use global variables to store the information I need. And still I am wondering why everything worked fine when the page was displayed as a file instead of as a response from the webserver.
I can't find any relevant information about "contenteditable" HTML5 parameter. I've found out, that Google Plus is using this for Chrome browsers:
<div contenteditable="plaintext-only"></div>
It seems that no other browsers support this and it's only Chrome proprietary value. I want to use it in my project. However, I need to detect the browser and find out if supports "plaintext-only" setting.
Of course, I could detect only Chrome, but there might be other browsers that support it (I don't know about any at this moment) or other main stream browsers might start supporting this feature in future.
So I would rather detect if the "plaintext-only" functionality is supported than detecting just Chrome browser.
Anyone can help me on this ?
Here's an alternative if you prefer not to rely on catching exceptions to detect features:
function supportsPlaintextEditables () {
var div = document.createElement('div');
div.setAttribute('contenteditable', 'PLAINTEXT-ONLY');
return div.contentEditable === 'plaintext-only';
}
console.log(supportsPlaintextEditables);
//-> true/false
This works because setting the value to the attribute instead of the property will not throw a SyntaxError exception if 'plaintext-only' is an invalid value, instead it will set the property value to the default, 'inherit'.
Getting the property after setting the attribute results in a lower-cased string, so setting the attribute value to 'PLAINTEXT-ONLY' will result in a property with the value 'plaintext-only' (supported/true) or 'inherit' (not supported/false).
It seems to be a webkit-only feature. The spec only allows "true", "false" and "inherit" as possible values for the attribute
A bug has been filed to add support for plaintext to the editing spec, but it's funny that the request is for "plaintext" instead of "plaintext-only".
Edit:
This code can be used to detect the support. Demo:
function supportsPlainText()
{
var d = document.createElement("div");
try {
d.contentEditable="PLAINtext-onLY";
} catch(e) {
return false;
}
return d.contentEditable=="plaintext-only";
}
alert(supportsPlainText());
But remember that doing browser-specific pages it's what leaded us to the IE6 problem.
var tagID = document.getElementByn("<%=ddlSectionHeaderID%>").value;
var tagIndex = document.getElementById("<%=ddlSectionHeaderID%>").selectedIndex;
var tagName = document.getElementById("<%=ddlSectionHeaderID%>").children(tagIndex).innerText;
var exportID = document.getElementById("<%=hdnExportID%>").value;
This gives me "Object doesn't support this property"
It would help to see the rendered output and what references resulted in the rendered script.
The "Object doesn't support this property" error means that you are trying to access a property that does not exist for that object. perhaps when this script is rendered, what you think should be a select element is actually a text input. If that is the case, the selectedIndex property wont exist (this is just one possibility - you will know more if you were able to see the resulting string).