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.
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 ?
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.
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.
$.ajax({
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');
break;
}
echo json_encode($data_result);
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.
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.
