Loading external text

(Paul ) #1

Hi, I need to load some external text into text boxes in hype. There were some examples on the old forum but I cant seem to access them any more?

http://hype.desk.com/customer/portal/questions/126725-import-text-from-txt-file (this link had instructions and a working example which is still up at - http://www.erinleemusic.com/cloudTest2.html)

Anyone got any examples or best practice ways of doing this? I am working with a back end developer who will be generating the copy via a CMS.

Thanks in advance for any ideas!

Connect Hype to Drupal Database

perhaps you can try a html widget on your scene and load the text into it externally from a url

(Andrew) #3

Is it a file, or as you speak of a CMS, are you using a database too fill the box ?

(Paul ) #4

Yes I have the HTML widget as a back up idea but thought there maybe a better way of doing this. I could load the text from an HTML file if that was the case and the HTML can be generated from the CMS.

I thought it would be neater if the text boxes had variables assigned to each one and could load from an xml file or similar that sat on the server and was updated by the CMS? The CMS is run off a database too.

I have found an example loading from the .js file - \n\ncustomTextElement.innerHTML = "This text was set by Javascript!\”

Do you think that would be easy to write to a .js file from a CMS?

Not really a backend developer so just trying to figure out the simplest way for connecting this up.

(Andrew) #5

Is the CMS not always accessible, just wondering why not just grab it direct from the database, so whatever is live on the CMS is also live in the app. Seems an effort to save it to a file, and then collect the file and decode it ?

(Paul ) #6

yes that certainly sounds like a better way of doing it, how would I achieve that?

(Andrew) #7

I would speak to the back end dev, and ask them to create the php, or RESTful, functions required to pull the needed information. And then pass to you the Javascript code, which would only be about 7/8, short, lines of code. You would then put into a function in Hype. When you need a box filled, you just trigger that function.

(Paul ) #8

that sounds great, would you have any examples of the function I would need to put into hype? Sorry javascript is not my thing!

(Andrew) #9

Sure, okay,

Here is the call from Hype, in javascript, to a .php file on a server.

What this does is collect the son data, which is in parts, and each row contains a element ID, so if you have 4 boxes on a scene, and you have static text, you would have records in the database, and thus the JSON. This makes sure the layout of each element is right for the text. But this also does images, so you have change images without having to change any code.

        url: 'http://domain.com/content.php',
        type: 'POST',
        dataType: 'JSON',
        data: {
            action: 'content',
            page: page

        success: function (res) {  

            //Load Saved Static Text
            if(res) {   
                if (res.st) {
                    $.each(res.st, function (key, tex) {    
                        if ($('#' + tex.stPosition).length > 0) {
                            console.log('Static Text element exists');
                            $('#' + tex.stPosition).html('<article>' + tex.stText + '</article>');
                //Load News
                if (res.n) {
                    $.each(res.n, function (key, news) {    
                        if ($('#' + news.nPosition).length > 0) {
                            console.log('News element exists');
                            $('#' + news.nPosition).html('<article><header>' + news.nTitle + '</header>' + news.nText + '</article>');

                //Load Images
                if (res.i) {
                    $.each(res.i, function (key, img) {
                        if ($('#' + img.iPosition).length > 0) {
                            console.log('Image element exists');
                            $('#' + img.iPosition).html('<img src="' + img.iUrl + '" />');
            } else {
                console.log('Error loading content, OR there is NO content');


Here is a php function, and its aim is to collect text for a certain scene, this is the PHP:

    $action = $_POST['action'];
    $page = $_POST['page'];

    switch ($action) {

    case 'content':   

    // get Static Text

        $stsql = "SELECT * FROM aw_staticText WHERE stPage = '" . $page . "'";
        $stres = $mysqli->query($stsql);

        while ($strow = $stres->fetch_array(MYSQLI_ASSOC)) {

            //echo $row['added'];

            $data_result["st"][] = $strow;

    // Get News List

        $nsql = "SELECT * FROM aw_news ORDER BY nid DESC";
        $nres = $mysqli->query($nsql);

        while ($nrow = $nres->fetch_array(MYSQLI_ASSOC)) {

            //echo $row['added'];

            $data_result["n"][] = $nrow;

    // Get IMages

        $isql = "SELECT * FROM aw_images WHERE iPage = '" . $page . "'";
        $ires = $mysqli->query($isql);

        while ($irow = $ires->fetch_array(MYSQLI_ASSOC)) {

            //echo $row['added'];

            $data_result["i"][] = $irow;

        echo json_encode($data_result);

        addlog(0, 'ContentLoaded');


     echo json_encode($data_result);

(Paul ) #10

Thanks so much!! this looks perfect, I will have a play and let you know how I get on :smiley:

(Paul ) #11

one question! where are the element id’s in the function? are they tex, news, and img? I can see where to add unique element id’s in hype so just wanted to check I was editing the correct part of the script.


I reposted that example here: Importing content from a text file (.txt)

(Andrew) #13

On the assumption, as my example, the data is coming back in JSON form, the element id is added within the database. So each row has, in my example, the page name, element id, and then either an image url, or text.

So the element id would be already played in the database. You do not need to add anything to the database, find a unique detail, such as the rowid. Depends what you are looking to show. Text, HTML, Image, Video, Audio, within the element itself.