whether there is an example of such an implementation?
howto load/save context of msxml to/from edit or text control?
<html><head>
<script language="JavaScript">
function loadxml()
{
var fileName = document.getElementById("fileName");
var xmlData = new ActiveXObject("Msxml2.DOMDocument");
xmlData.load(fileName.value);
var editor = document.getElementById("editor");
editor.value = xmlData; // got [object]
}
function testxml()
{
var editor = document.getElementById("editor");
// editor.value load by msxml
}
</script>
</head>
<body>
<input type="file" id="fileName"/>
<input type="button" value="Load" onclick="loadxml();"/>
<input type="button" value="Test" onclick="testxml();"/><br>
<textarea id="editor" rows="25" cols="50">no data</textarea>
</body>
</html>
editor.value = xmlData.xml
And vice-versa only use loadXML instead of load method on ActiveX object
var xmlData = new ActiveXObject("Msxml2.DOMDocument");
xmlData.loadXML( editor.value );
see for ex. http://joncom.be/code/javascript-xml-conversion/
PS Originally misunderstood question, so there are irrelevant comments now
Related
I have a very basic input/output structure in HTML:
<textarea id="input" onkeyup="sendCode()">
Hello World!
</textarea>
<div id="output"></div>
And I have JS function that should pass everything from input to output:
var input = document.getElementById("input");
var output = document.getElementById("output");
function sendCode(){
output.innerHTML = input.innerHTML;
}
The sendCode() function works when I call it manually, but it seems that onkeyup event not firing in this textarea.
Here is jsfiddle: http://jsfiddle.net/mudroljub/y5a2n8ab/
Any help?
UPDATE: jsfiddle is updated and working now.
Use value since it's not a content text but a value property
var input = document.getElementById("input");
var output = document.getElementById("output");
function sendCode(){
output.innerHTML = input.value;
}
And a working demo here
I would first like to point out that this will not run because the code runs before the HTML exists, so first off, put these lines inside a function:
window.onload= function anyname() {
var input = document.getElementById("input");
var output = document.getElementById("output");
}
Secondly, try using either:
editor.onkeyup = "sendCode()"
in your script area or at the top of the new function i created:
editor.addEventListener(keyup,sendCode,false)
Basically when a key goes up in that area it calls the sendCode() function. The false is if you don't want to use capture which I think is default anyway but just to be safe.
Basically java script is not that dynamic.So a better option is to
use jQuery.
[Note:- "jquery-2.2.2.min.js" given in src, in script tag,
is Jquery Library file codes can be copied from following link :http://code.jquery.com/jquery-2.2.2.min.js]
Just copy the contents from above link,into a textfile , save it by the name "jquery-2.2.2.min.js"
or any other name as you wish.The src of script should contain the same.
The "jquery-2.2.2.min.js" should be in the same directory where
you have the html file. Otherwise full path to be mentioned.
Here is the answer to your question.
<html>
<head>
<title>Dynamic TextArea</title>
<script type="text/javascript" src="jquery-2.2.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("textarea").keyup(function(){
sendCode();
});
});
function sendCode(){
document.getElementById("output").innerHTML =
document.getElementById("input").value;
}
</script>
</head>
<body>
<form>
<textarea id="input">
Hello World!
</textarea>
</form>
<span id="output"></span>
</body>
</html>
If you have any doubts please ask.
I am sure once you learn to use jQuery you would forget javascript.
Where do you define the sendCode() function? It might not exist at the point where you create your text area.
This snippet should work:
<textarea id="editor">
Hello World!
</textarea>
<div id="output"></div>
<script type="text/javascript">
var editor = document.getElementById("editor");
var output = document.getElementById("output");
function sendCode(){
output.innerHTML = editor.value;
}
editor.addEventListener('keyup',sendCode);
</script>
I need to create folder,copy it and delete.
So I've created several javascript functions - to get path to the folder, delete folder,create and copy folder.
But when I try to run it in google chrome I've got an exception
I thought it was problem with ActiveX. But in IE it doesn't work either.
<html>
<head>
<meta charset="utf-8">
<script type="text/javasript">
function onFolder(){
var ob = new ActiveXObject("Scripting.FileSystemObject");
var name = document.getElementById("idtextbox1").value;
var path = document.getElementById("idtextbox2").value;
var x = path + "\\" + name;
return x;
}
function onCreate(){
var ob = new ActiveXObject("Scripting.FileSystemObject");
var path = onFolder();
var x = ob.CreateFolder(path);
}
function onCopy(){
var ob = new ActiveXObject("Scripting.FileSystemObject");
var source = onFolder();
var dest = document.getElementById("idtextbox3").value;
ob.CopyFolder(source,dest + "\\");
}
function onDelete(){
var ob = new ActiveXObject("Scripting.FileSystemObject");
var folder = onFolder();
ob.DeleteFolder(folder);
}
</script>
</head>
<body>
Folder name<input type="text" id="idtextbox1">
<br>
Destination<input type="text" id="idtextbox2">
<br>
Copy destination<input type="text" id="idtextbox3">
<br>
<input type="button" id="idbutton1" value="Create" onClick="onCreate()">
<input type="button" id="idbutton2" value="Copy" onClick="onCopy()">
<input type="button" id="idbutton3" value="Delete" onClick="onDelete()">
</body>
</html>
What's the problem? Is it ActiveX? Because I think javascript functions are correct.
The big problem is that you are using chrome Chrome. ActiveX only works in IE because it is a non-standard function. And for what you are trying to do, the security level has to be on low which is very unconventional. JavaScript is just not a good language to be trying to access or update a computers file system.
I have my website
www.aplicatii-iphone.ro
and another
page.html on localhost
<html>
<head>
<title>Object References across Iframes</title>
<script type="text/javascript">
window.onload = function(){
var form = document.getElementById('testForm');
form.testBtn.onclick = sendData;
}
function notify() {
//alert('iframe loaded');
var iframeEl = document.getElementById('ifrm');
if ( iframeEl && iframeEl.parentNode && document.createElement ) {
var newTxt = document.createTextNode('The iframe has loaded and your browser supports it\'s onload attribute.');
var newPara = document.createElement("p");
newPara.className = 'demo';
newPara.appendChild(newTxt);
iframeEl.parentNode.insertBefore(newPara, iframeEl);
}
}
function sendData() { // to form inside iframed document
// frames array method:
// window.frames['ifrm'].document.forms['ifrmTest'].elements['display'].value = this.form.testEntry.value;
var ifrm = document.getElementById('ifrm');
var doc = ifrm.contentDocument? ifrm.contentDocument: ifrm.contentWindow.document;
var form = doc.getElementById('search-input'); // <------<< search input
form.display.value = this.form.testEntry.value;
form.submit();
}
// test in iframed doc
var counter = 0;
</script>
</head>
<body>
<form id="testForm" action="#">
<p><input type="text" name="testEntry" size="30" value="[enter something]" /> <input name="testBtn" type="button" value="Click Me" /></p>
</form>
<iframe name="ifrm" id="ifrm" src="http://www.aplicatii-iphone.ro" onload="notify()" width="900">Sorry, your browser doesn't support iframes.</iframe>
</body>
</html>
And every time I press the button Click Me, I want that the state of www.aplicatii-iphone.ro to be like a user searched for that value written in "testEntry" from outside of the iframe.
I tried something there ... but I can't figure it out ... any help please?
I took the example from here http://www.dyn-web.com/tutorials/iframes/refs.php
If you know you're using a modern browser, you could use postMessage to communicate between the frames. Here's a good write-up: http://ajaxian.com/archives/cross-window-messaging-with-html-5-postmessage
If you need to support legacy browsers, you could use Google Closure's CrossPageChannel object to communicate between frames.
Unfortunatly, this is not possible due to the Same orgin policy.
And changing the document.domain-value only helps if you try to connect a subdomain with the main-domain.
Edit
If you avoid the same-orgin-problem by using a page on the same website, this should work for you:
window.frames['ifrm'].document.getElementById("search-input").value = document.getElementsByName("testEntry")[0].value;
window.frames['ifrm'].document.getElementById("cse-search-box").submit();
I am struck with my language translation tool .
Here is the code that google translate API has .
I have to modify this code to receive input from the user in a text box and then identify the language it is typed in. Currently the code is picking up the values from id="sourceText" .
I need to put in a text box there to make it a simple dynamic tool . Please tell me what modifications should be made to add a text box and receive its input and detect the language ? Thanks...
<html>
<head>
<title>Translate API Example</title>
</head>
<body>
<div id="sourceText">Hello world</div>
<div id="translation"></div>
<script>
function translateText(response) {
document.getElementById("translation").innerHTML += "<br>" + response.data.translations[0].translatedText;
}
</script>
<script>
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
var sourceText = escape(document.getElementById("sourceText").innerHTML);
var source = 'https://www.googleapis.com/language/translate/v2/detect?key=INSERT-YOUR-KEY&source=en&target=de&callback=translateText&q=' + sourceText;
newScript.src = source;
// When we add this script to the head, the request is sent off.
document.getElementsByTagName('head')[0].appendChild(newScript);
</script>
</body>
</html>
Change
<div id="sourceText">Hello world</div>
to
<textarea id="sourceText">Hello World</textarea>
Also update this line:
var sourceText = escape(document.getElementById("sourceText").value);
<html>
<head>
<title>Translate API Example</title>
</head>
<body>
<textarea id="sourceText">Hello world</textarea>
<input type="button" value="Translate" onclick="submit()" />
<div id="translation"></div>
<script>
function translateText(response) {
document.getElementById("translation").innerHTML += "<br>" + response.data.translations[0].translatedText;
}
function submit() {
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
var sourceText = escape(document.getElementById("sourceText").innerHTML);
var source = 'https://www.googleapis.com/language/translate/v2/detect?key=INSERT-YOUR-KEY&source=en&target=de&callback=translateText&q=' + sourceText;
newScript.src = source;
// When we add this script to the head, the request is sent off.
document.getElementsByTagName('head')[0].appendChild(newScript);
}
</script>
</body>
</html>
How about changing
<div id='mySource'>
into
<textarea id='mySource'>
and put the code responsible for translation into function, and add a button "trasnalte", which onclick event would launch translating function?
I would like to use the HTML5 File API with unobtrusive JavaScript. But I can only get it working by calling JavaScript functions from the HTML. Is there any way to use the File API with unobtrusive JavaScript?
The File API is not supported by all browsers, but I have tried this in Google Chrome and in Firefox.
From the documentation this works:
<input type="file" id="input" onchange="handleFiles(this.files)">
And I have tried with this unobtrusive JavaScript that doesn't work:
window.onload = function() {
var input2 = document.getElementById('input2');
input2.addEventListener('onchange', handleFiles);
}
A complete example is below, and testable on jsFiddle.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script>
window.onload = function() {
var input2 = document.getElementById('input2');
input2.addEventListener('onchange', handleFiles);
}
function handleFiles(e) {
alert('got files');
}
</script>
</head>
<body>
<h1>Test</h1>
<input type="file" id="input1" onchange="handleFiles(this.files)"/>
<input type="file" id="input2"/>
</body>
</html>
Try:
window.onload = function() {
var input2 = document.getElementById('input2');
input2.addEventListener('change', handleFiles,false);
// ^not onchange ^older firefox needs this
}
jsfiddle here
not onchange but
input2.addEventListener('change', handleFiles);