I am trying to grab data from an XML status file that is on VLC and I want to put it into an HTML so that when the status XML updates or is requested, the new information appears in the HTML.
Here is the XML information from the status.xml when its ran.
OMFG - I can't post images due to reputation yet. Here are the links to the images instead.
I want those fields in here:
I don't have any knowledge of any direct programming. I have run some batch files and I have some python scripts I use and I edit but nothing else. I understand tags, functions and lists to a degree.
I have tried using "scr" to path out my xml file with "type:text/xml. - failed
I have tried using a viewer.js file and editing that to point to the xml file I wanted. - failed. - I didn't understand how to put the xml data into a javascript file that can then be referenced inside the html.
This is the html file; I got it from the rig-developer kit from twitch as there first extension.
<!DOCTYPE html>
<html>
<head>
<title>Viewer Page</title>
</head>
<body style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">
<div id="app" class="full-height"></div>
<script src="https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="viewer.js" type="text/javascript"></script>
<script type="http://192.168.0.22:8080/requests/status.xml">{
</script>
<h2>Video Game Music playlist</h2>
<p>Here is what is playing currently</p>
<div>
<input type="button" value="Refresh what's playing" />
</div>
<div id="list">
</div>
</body>
</html>
Here is the xml file:
]]?>
<?vlc
--package.loaded.httprequests = nil --uncomment to debug changes
require "httprequests"
httprequests.processcommands()
local statusTable=httprequests.getstatus(false)
print('<root>\n')
local item = vlc.input.item()
--data in the information section is presented in a non-standard way to keep compatibility.
?>
<information>
<category name="meta">
<?vlc
if item then
local metas = item:metas()
for k,v in pairs(metas) do
local metadataContent = vlc.strings.convert_xml_special_chars( httprequests.xmlString(v) )
print("<info name='"..httprequests.xmlString(k).."'>"..metadataContent.."</info>")
end
end
?>
</category>
</information>
</root>
I excepted that I can find a way to put the data from the xml into the html or any html file. Infact if someone can just show me how to put the xml data I have into an html file where it can be updated that would be amazing.
I have been trying to look up the easiest way to do this on youtube but I keep coming accross videos that show how to get images from xml to html; which I don't need.
Infact, to be honest; I think I need the xml file to be in Javascript first or something? I think the html has to be an inline html and thus the xml data has to be referenced from a .JS file?
I don't know what I am talking about. lol
Mixing XML and HTML is tricky. There's a W3C task group report here which analyzes what works and what doesn't:
https://www.w3.org/2010/html-xml/snapshot/report.html
and an overview talk by Norm Walsh:
https://norman.walsh.name/2011/03/26/HTML-XML-Prague
This work was done some years ago but I don't think the situation has fundamentally changed.
Related
I would like to include in an html file, an external file that has math content that should be processed by MathJax. I tried a few ways to do this, and while the external file is being included in the html file, the math content in it is not processed. A minimal example to demonstrate this:
tst.html:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-chtml.js"></script>
</head>
<body>
This displays correctly: \(\phi\).
<inc></inc>
<script>
fetch("./tst.txt")
.then(response => {
return response.text()
})
.then(data => {
document.querySelector("inc").innerHTML = data;
});
</script>
<div id="abc"></div>
<div id="def">
<script>$("#def").load("tst.txt");</script>
</div>
<script>
$(function(){
$('#abc').load('tst.txt');
});
</script>
</body>
</html>
tst.txt:
\(\phi = 0\)
In the browser, the math content in the html file displays correctly, but not in the text from the included file . Is there a way to have the math content in the external file to be processed correctly?
Perhaps the issue is that the file is being pulled into the page only after MathJax has rendered the Maths. Therefore you would need to 'ask' MathJax to search through the page for any more Maths and render the new maths.
From MathJax documentation:
If you are writing a dynamic web page where content containing mathematics may appear after MathJax has already typeset the rest of the page, then you will need to tell MathJax to look for mathematics in the page again when that new content is produced. To do that, you need to use the MathJax.typeset() method. This will cause MathJax to look for unprocessed mathematics on the page and typeset it, leaving unchanged any math that has already been typeset.
I am trying to load an external HTML page (common navigation) into my current HTML page. I tried the load function but it is deprecated. Can you tell me another way to include it? I am not using any server.
Here's my code
<!DOCTYPE html>
<html>
<head>
<script src="ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#content').load(" nav.html ");
});
</script>
</head>
<body>
<div id="content "></div>
</body>
</html>
Try this
<script>
function loadPage(href) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", href, false);
xmlhttp.send();
return xmlhttp.responseText;
};
document.getElementById('content').innerHTML =
loadPage('your_html_file.html');
</script>
<div id="content">
</div>
Take both file pages in same directory then you can use simple button on link to use external file. for example
<button> External file </button>
Button is your choice it's just example for understanding you can simple use html link.
You should use the SSI-function.
There is several ways but this can solve your problem.
<!--#include virtual="PathToYourFile/YourFile.html" -->
This can be inserted into a <div> for further styling in CSS.
REMEMBER! Due to some limitations in html-doctypes you cannot inlude a .html-file into an .html-file. You have to use another format as .shtml where you can inlude your .html-files. You can include .html into your .shtmlfile. This was also what .shtml was originally created for.
This is because it is part of the XHTML (Dynamic XML HTML)...
To change a file
Your approach on the HTML is correct and also your JS. I include a lot of html-files containing texts there.
My approach is that when a page is loaded some text will be loaded with the <!--#include virtual="" --> inside a <div>. Below JS is used to change the content in the <div>. As Daniel Beck stated below: "...at least in Apache the server needs to be configured to check particular file extensions...".
You configure your file in your .htaccess-file. But ONLY do this if you know what you are doing.
Some (newer?) servers have a default setup of which you don't need to alter the .htaccess-file if you want to be able to include .html-files. At least you are able to include .html-files into .shtml-files.
I have included a Mimetype converter which tells the browser how it should read the file. For txt/html I have told the script that it should use the character encoding ISO-8859-1. Others as UTF-8 could also be used. This depends on your and your receivers native language.
Take into consideration to use the e.preventDefault();. With this i tells the browser NOT to see this as navigation link and will therefore only load the content in the <div>.
$(function() {
$('#ButtonsID').click(function(e) {
$('.DivClass').load('PathToFile/File.shtml');
e.preventDefault();
});
});
$.ajaxSetup({
'beforeSend': function(xhr) {
xhr.overrideMimeType('text/html; charset=ISO-8859-1');
}
});
I know this stuff has been asked before...but I am a bit confused about this still. I have my index.html file and I have a script tag linking to my external JS file. If I only have that script tag the JS does nothing, but if I copy the JS and paste it into it's own script tag in the HTML header it works just fine. There's gotta be something I'm missing with Jquery.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="jquery-3.2.0.js"></script>
<link rel="stylesheet" href="FinalProjectCss.css">
<title>Dustin Naylor - Final Project</title>
<script src="FinalProjectJS.js"></script>
<script>
$(document).ready(function(){
$(".section").click(function(){
if($(this).next().is(":hidden")) {
$(this).next().slideDown("fast");
} else{
$(this).next().hide();
}
});
});
</script>
</head>
<body>
<span class="section">Click Me</span>
<div class = "hiddenDiv">
Oh hey there.
</div>
</body>
</html>
So the code in the last script tag that is Jquery stuff is exactly copied into a separate JS file named FinalProjectJS.js. In the current state this code is in it works as desired, but when I remove that chunk of code from the html file it doesn't work....Sorry for my nubishness, I'm rather new and any help would be great! thanks!
Can you write the contents of your jquery file: FinalProjectJS.js? The syntax for calling the external file seems to be correct. So I'm thinking it might be something about the path or the jquery external file contents itself. Make sure you don't include <script> tags on that file. Here's a sample.
Another thing, last time I've worked with jquery, I can't directly see it take effect when both my files are stored locally. It had to be stored in a server first, then accessed by my PC. Only then did my jquery took effect. A dev I worked with added some text to my Google Chrome's properties (target) so that even if my file is not stored in a server, I can see jquery take effect even if both my HTML and jquery files are stored locally.
...sorry, I'm not allowed to comment yet to clarify your post.
You must add the jQuery script tag before FinalProjectJS.js for the jQuery snippet to work.
<script src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous">
I am using laravel-dompdf to generate a PDF with a summary of results, consisting of tables and a few images, nothing to spectacular. I would like to print highcharts in the generated PDF as well. So first, I want to try a simple javascript code to see if it was working... but it isn't. I have enabled the "DOMPDF_ENABLE_JAVASCRIPT" => true, but so far no luck yet. The simple code which I want to print:
<div>foo</div>
<span id="insertHere"></span>
<div>bar</div>
<script>
var el = document.getElementById('insertHere');
el.innerHTML = '<div>Print this after the script tag</div>';
</script>
This only prints the foo and bar.. Could someone please help me out?
Dompdf (or more specifically Back-end that it uses for PDF rendering) doesn't really render javascript. What it does is - it parse everything inside <script type="text/javascript"></script> tag and adds it in the special section of the pdf file.
I'm not sure if this javascript is what you need, since you can work with the dom tree outside of the <script> tag. What you can do is write simple scenarios, for example like this one:
<div>foo</div>
<span id="insertHere"></span>
<div>bar</div>
<script type="text/javascript">
app.alert({cMsg:"Message", cTitle: "Title"});
</script>
Try to open generated file and you will see alert.
Here more complete guide on what you can do inside javascript section: Acrobat JavaScript Scripting Guide
A simple script tag inside the body tag doesn't seem to work. The alert doesn't get triggered in the code below:
<body>
<script type="text/javascript">
alert('Hello');
</script>
{{>main}}
</body>
Any idea why?
Edit:
Just tried it with a fresh meteor app, no alert tag still:
<head>
<title>test</title>
</head>
<body>
<script type="text/javascript">
alert('Hello');
</script>
{{> hello}}
</body>
<template name="hello">
<h1>Hello World!</h1>
{{greeting}}
<input type="button" value="Click" />
</template>
Weird thing is when I copy paste the source of the html, made a new html page, and the alert will work.
Edit3: I deployed this app here: http://alert-in-body-test.meteor.com/
Do you get an alert box?
This question is still relevant in the current version of Meteor (version 0.5.4) so I wanted to describe how to include script at the end of the body.
To execute javascript at the end of the body, register a Handlebars helper and put the relevant code there, like this:
In client.html:
<body>
{{renderPage}}
{{afterBody}}
</body>
...
In client.js:
if (typeof Handlebars !== 'undefined') {
Handlebars.registerHelper('afterBody', function(name, options) {
$('body').append('AFTER BODY');
});
}
(For a great description of why this is required, see Rahul's answer to a similar question here: https://stackoverflow.com/a/14002991/219238 )
Its working for me
in onrender call this jquery
$.getScript('yours url')
It should work.
I have just pasted this inside one of my projects and it worked.
Your {{>main}} is strange for me tough. Also make sure that <body> is inside <html> tag.
Meteor is constructing the entire DOM from Javascript by rendering your page as a template -- the 'source' for your page as seen by the browser is basically:
<script type="text/javascript" src="/5a8a37bef5095c69bcd3844caf3532e1ba6d49bf.js"></script>
I can't find a definitive page stating that embedding a script tag in a template like this won't cause it to be executed, but it definitely feels against the spirit of what the framework is trying to achieve.
If the point is to achieve a clean separation of your markup and logic then why put it in the template. A better solution would be to use the meteor.startup call
Instead of looking the rendered html at developer tools, try looking the real downloaded html.
You will find a (probably) empty tag, with tons of script tags inside the .
In other words, the body of your meteor application is not the body of the final html, it's just your main template.
Instead, this ton on scripts shipped by Meteor, will load your templates.
So, your code will not run, cause it's been placed there. It's like when you manipulate DOM (with jQuery, for exemple), placing a script tag in DOM, after it's loaded. This script tag will not run.