Replace inner html with text from an external file

(Markus Bjerre) #1

Hello guys! I got a request from a client to be able to replace the text after I’ve finished their application.They don’t have any knowledge of javascript/html. Right now, everything is loaded within Hype and when I call for a text I do it from one scene to another. This is how the code looks right now for 1 of the 80 text loading javascripts:

var site = 2;
	
hypeDocument.getElementById('textHolder').innerHTML = hypeDocument.getElementById('Text' +  site).innerHTML;

This calls for the div id from a scene and the div’s id is Text2 (obviously).

So, anyone got an idea on how I can call a div’s ID from an external html, or even make the javascript external?
I tried to copy paste the hype code and save it as an external javascript but in Hype it won’t show up on add click event javascripts since the function is not created within Hype.

Any help is appreciated!

(Andrew) #2

This shows you how to do it :smile:

(Markus Bjerre) #3

Thanks MrAddy, however the application will be running locally and not on a server at all. There will be no internet connection and I have no time to set up a server for them.

(Andrew) #4

So you would still do the same, but the get the file locally. You still need to read it, and parse it :smile:

(Markus Bjerre) #5

Got it!

var txtFile = new XMLHttpRequest();
txtFile.open("GET", "${resourcesFolderName}/text.txt", true);
txtFile.onreadystatechange = function() {
  if (txtFile.readyState === 4) {  // Makes sure the document is ready to parse.
    if (txtFile.status === 200) {  // Makes sure it's found the file.
      allText = txtFile.responseText; 
      //lines = txtFile.responseText.split("\n"); // Will separate each line into an array
      var customTextElement = document.getElementById('textHolder');
customTextElement.innerHTML = txtFile.responseText;
    }
  }
}
txtFile.send(null);
(Andrew) #7

Excellent, and should help others looking to do local txt reading :smile:

(Markus Bjerre) #8

Ok, so after testing it out I’ve only been able to load one .txt file. I’ve tried to make several ones and load the script on click but it will load the same text each time. It also doesn’t load at first click. Any idea MrAddy? :confused:

EDIT: To be clear I’ve only changed the filename in each script.

EDIT2: Everything works again, sorry MrAddy. There was a bug that changed the name when I imported the .txt file. The name got changed back to it’s original name that I even deleted from the resourcesfolder.
I had to restart hype and now the new file name is correctly shown in resourcesfolder.

As always, huge thanks for your help MrAddy!

(Markus Bjerre) #9

Houston, we got a problem! This shows up only when I export my html and open it, not when I preview it:

XMLHttpRequest cannot load file:///Users/markus/Desktop/xxx/yyy/html/bbb.hyperesources/tb1.txt. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.(anonymous function) @ VM51:14(anonymous function) @ HYPE-466.thin.min.js:14f @ HYPE-466.thin.min.js:48
HYPE-466.thin.min.js:14 Error in tb1: NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///Users/markus/Desktop/xxx/yyy/html/bbb.hyperesources/tb1.txt'.

Does this mean that I need to host this on a server?

EDIT: Might be a solution here: http://stackoverflow.com/questions/4819060/allow-google-chrome-to-use-xmlhttprequest-to-load-a-url-from-a-local-file

EDIT2: Opened up chrome in terminal with the following command: open /Applications/Google\ Chrome.app/ --args --allow-file-access-from-files
I pasted my file path to Chrome and went to the scene with my div. Now, when I click on a button the div loads up and the timeline starts, no errors in the javascript console. However, the text doesn’t change. Within the Network I can see that it locates the file correctly but I have no idea why the text is not showing up.

(Andrew) #10

IF the text does not change, that could be because the browser has cached the information. Within the console, check the status code when the file loads, you need code 200, meaning the file has been read, if not, it means it’s reading from the cache, so no need too load ?

(Hans-Gerd Claßen) #11

it may be easier to store the text within a js-file. place it in resources. load it in the header. so you’ve got simple access …

(Markus Bjerre) #12

Hi h_classen and MrAddy! This might be a good solution I guess, right now I downloaded mamp. Tried to run the site without internet connection and it works so I might just install mamp on their computer. Not sure on how to set up an automatic start up on boot though but since it works right now I’ll stick with that. Thanks for your advice! I’ll check out the console log a bit more later today MrAddy!

(Mark Hunte) #13

This is how I do it on our local network.

Chrome and Safari will allow you to read a text file as a source similar to how the do with html. They are all basically plain text and it is the extension that determines how it is finally displayed.

The text files in this example are held in a directory the same area as the html file.

You cannot preview this in Hype. Only when you export it and view the exported html will you see it working.

Example2.zip (14.9 KB)

Client input needed
(Markus Bjerre) #14

Wow MarkHunte, awesome! This will probably be a much better way for me than the other script since this won’t be disabled on xmlhttprequest. Thanks a lot MarkHunte!

(dtowne) #15

h_classen, your suggestion re loading text sounds straightforward and is something I’d like to implement. However, I’m not seeing how to put text into a js-file; would it be like
var myText = " one gigantic string", or can I just call it a JS file and not really put JS code there?
Also, could you say a bit more about how to load that file into the header?
Many thanks.

(Hans-Gerd Claßen) #16

Hi,

store data in a external file that isn’t (is not!) updated dynamically.

extJS.hype.zip (11.8 KB)

(Markus Bjerre) #17

It’s getting better and better :slight_smile:

(dtowne) #18

Thanks for this. It shows the potential for user-end inputs to modify or extend content.