Problem: I gave up on trying to send data from Saola to google sheets. So now i am going to try to use php and Mysql. Until i get there…i am learning/experimenting with php etc (I have a saola project in an i frame).
> button onclick="loadIFr()">Try it</button // i removed start and end signs
button onclick="getInf()">Get Info</button //i removed start and end signs
<script>
function loadIFr() {
var ifrm = document.createElement("IFRAME");
ifrm.setAttribute("src", "......Salo/index.html"); //removed full link here only
ifrm.setAttribute('id', 'sal');
ifrm.width = "800";
ifrm.height ="500"
document.body.appendChild(ifrm);
}
function getInf() {
var x = document.getElementById("sal");
var elmnt = x.contentWindow.AtomiSaola.topDocs[0];
//console.log(elmnt) this show many properties etc. so i think i did that right
//var data = elmnt.doc.getElement("tb_v").value; // does not work Uncaught Type error
var data = elmnt.document.getElementById("tb_v").value; // same problem
alert(data);
}
</script>
I have tried more variations with no luck (i commented a few in the code above)
In the help article i referenced above…it says
After getting the Saola Animate document, please use its public APIs to control it. For example, theDocument.pause(), theDocument.play() to pause, resume animations in the main timeline.
Should “doc.getElement(“tb_v”).value” not work??. Is it not the same as theDocument.play(). Or am I confusing “theDocument”??
Saola Animate version: 3
OS: win 10
Notes: Some of the code I pasted here does not show up properly. Is there something i should be doing to avoid that???
You’re confusing between Saola Animate document and HTML document, Saola Animate element and DOM element. Please share your project, or let me know how you create your text boxes in Saola so that I can help.
<html>
<head>
<meta charset="UTF-8">
<title>LearnPHP</title>
</head>
<body>
<br>
<button onclick="loadIFr()">Try it</button>
<br>
<button onclick="myFunction()">Get Info</button>
<?php
echo"ff";
?>
<script>
function loadIFr() {
var ifrm = document.createElement("IFRAME");
ifrm.setAttribute("src", "....pSalo/index.html"); //removed full link here only
ifrm.setAttribute('id', 'sal');
ifrm.width = "800";
ifrm.height ="500"
document.body.appendChild(ifrm);
}
function myFunction() {
var x = document.getElementById("sal");
var elmnt = x.contentWindow.AtomiSaola.topDocs[0];
console.log(elmnt) //this displays many properties etc. so i think i did that right
//var data = elmnt.doc.getElement("tb_v").value; // does not work Uncaught Type error
var data = elmnt.document.getElementById("tb_v").value; //same here.
//(i tried html syntax "document", bc the original way "doc." should have worked
//and getElement as opposed to getElementById". I tried a million things btw...ugh.
alert(data);
}
</script>
</body>
</html>
Wow, 3 ticks and what a difference.
I kept the html and Saola apart. Perhaps you are right though. Btw, the red write button does not save to the php yet…still learning about that (in the Saola Animate Project). The function that triggers it is called elementEventHandler_Save (is a mess, i was so tired last night , i forgot to comment out some code i was referring to etc).
No problem. I appreciate all that you do on here. Not too mention the software.
UPDATE: Since the example for referencing Saola externally involved a timeline, I added a simple timeline animation to the Saola Project (which is in the Iframe) and I used elmnt.pause(); on a html button outside the Iframe and it worked. So it has something to do with me trying to send text from external html button to the textbox called “tb” (in Saola Project).
UPDATE2: Finally got it to work.
function myFunction() {
var x = document.getElementById("sal"); // this gets the Iframe i put Saola in
var elmnt = x.contentWindow.AtomiSaola.topDocs[0]; //this gets you in Saola
var tb_sa =elmnt.getElement("tb"); // i am going to pass text to this box in Saola
tb_sa.setText("outside Iframe worked"); //external html button sends text
}
Whole point of this adventure is to get data from text box (and some day out to sql/php etc)
Why is there a setText() but no getText() in the JS API window or manual/???
I’m sure it is me, must be some common knowledge thing…but makes no sense to me
I thought i solved this yesterday by trying a “million” variations of getText or .value etc…but i am still stuck. I can’t find anything in manual or forum… How do i get the contents/value from a text box in Saola Animate???
I had tried variations like that, perhaps i was missing something, I will try what you posted and post my results. BIG THANKS mackavi !!!
Results: Not working. I checked the names and stupid things i do wrong…here is the projectSavingData.saolapack (3.6 KB)
Update (still not working): Below is what i tried after mackavi’s code did not work for me (not saying he is wrong, might be something i did in the project). Anyway, to help others learn from my mistakes, i am posting what i did in addition to the attached file.
function elementEventHandler_Save(doc, e) {
doc.getElement("tb").setText(" ");
//var data=doc.getElement('inputTB').value;
//var data= doc.getElement('inputTB').valueOf
var inputDom = doc.getElement('inputTB').textDom;
//var textInput = inputDom.innerText; // tried this too
doc.getElement("tb").setText(inputDom.innerText); // i tried with and with out .innerText
}
Getting/setting value for a text input box is different from getting/setting text for a div or shape element.
You use input tag for the text input element inputTB, so the script to get and set the text input value as follows:
var inputTB = doc.getElement('inputTB'); // Saola Animate element
var inputTBDom = inputTB.dom; // DOM element associated with Saola Animate element
var inputDom = inputTBDom.querySelector('input'); // input tag inside inputTBDom
if (inputDom) {
// get input value
var inputValue = inputDom.value;
// set value
inputDom.value = 'new text input here';
}
The script to get and set inner text (html) of an element as follows:
var tb = doc.getElement('tb');
// get inner text
var innerText = '';
if (tb.textDom) // textDom may not exist if element doesn't contain any text
innerText = tb.textDom.innerText;
// get inner html
var innerHTML = '';
if (tb.textDom)
innerHTML = tb.textDom.innerHTML;
// set text
tb.setText('new text');
A stupid question (no rush). I am trying to improve my understanding of terms. I was on W3 schools trying to see the difference between innerHtml and innerText. I was able to use both methods and run their example. Tryit Editor v3.6 (w3schools.com)
In Saola, i would imagine it matters which one is used, since you showed both. I probably will be needing that when i try getting the info from the Saola project (in the Iframe) to the main html page (or i could probably just send the data from within Saola in the iframe…i’ll figure it out once i get there). .
For sure an array will be better once i get there (but text boxes are important too). Anyway, this is how i learn a new program…just trying/learning the possibilities or limitations before i start the actual student test (with animations etc) project.
THE POTENTIAL OF SAOLA ANIMATE is incredible…once i get my coding improved. Perhaps in the future you could add more documentation about how things work under the hood and coding wise. IE. contentWindow.AtomiSaola.topDocs[0];, and the code you shared today. I would have NEVER figured that out. I do read the manual and search the help forums before i bug you or users on here. . I know your todo list is LONG too. hehe .
Basically, innerText is the plain text while innerHTML is the text in HTML format.
For example:
var divNode = document.getElementById('my_div');
divNode.innerHTML = '<b>bold text</b>'; // set text in bold
console.log(divNode.innerText); // print 'bold text' without the <b> formatting tag
“million” variations of getText or .value etc…but i am still stuck. I can’t find anything in manual or forum…
. I know your todo list is LONG too. hehe .