HTML doesn't accept colon(:) inside json [duplicate] - html

This question already has answers here:
HTML/Javascript: how to access JSON data loaded in a script tag with src set
(10 answers)
Closed 1 year ago.
My json file looks like this:
{
"data": {
"test":"0123"
}
}
And I get this error: Uncaught SyntaxError: Unexpected token ':'
Why does this happen and how can I fix the problem?
Edit: the HTML code
<html>
<body>
<button id="clickThis" onclick="change()">
Text here
</button>
<script type="text/javascript" src="./lista.json">
function change() {
var mydata = JSON.parse(data)
document.getElementById("clickThis").innerHTML = "this"
}
</script>
</body>
</html>
<html>
<body>
<button id="clickThis">
Text here
</button>
<script src="./lista.json">
</script>
</body>
</html>

You can try use src= on older versions of html, but HTML5 doesn't load json content into html.
From the HTML5 specification:
When used to include data blocks (as opposed to scripts), the data must be embedded inline, the format of the data must be given using the type attribute, the src attribute must not be specified, and the contents of the script element must conform to the requirements defined for the format used.
So I recommend to use this code. It was tested in Visual Studio and working properly (you maybe need to correct json path, since I don't know where it is in your web application)
<script type="text/javascript">
$.getJSON('content/lista.json', function(json) {
var test= JSON.stringify(json.data.test);
alert(test);
});
</script>
it is using ajax to get json from server. But src= also send request to the server or to another website even to get resource and it works slower then ajax.

Related

Parsing JSON from HTML

Using NodeJS I would like to parse a variable defined in JSON, which is embeded in HTML of 3rd party website. What is the easiest way to get mentioned variable from HTML?
Chunk of HTML from which I would like to extract mentioned JS can be seen bellow:
...
<footer>
<div>
<script type="application/ld+json">
{"#context":"http:\/\/schema.org","#type":"BreadcrumbList","itemListElement":[{"#type":"ListItem","position":1,"item":{"#id":"https:\/\/www.domain.com\/","image":"https:\/\/assets.domain.com\/img\/facebook\/stuf.png","name":"Home"}}]}
</script>
<script>
var API_URL = ["https:\/\/api1.domain.com\/api","https:\/\/api2.domain.com\/api","https:\/\/api3.domain.com\/api"],
</script>
</div>
</footer>
...
The following HTML is parsed from XY website using NodeJS. I would like to avoid using eval().
I tried with JSDOM, but I didn't know how to select mentioned <script>. Is regex the only solution?
In case you provided, the selector will be: footer>div>script:nth-child(2).
Is this what you're asking for?

Is there a way to embed text on a limited page?

The web page I am putting together has a character limit of 10,000, which is definitely not enough for me.
The page I am editing on has it's tabs divided with div ID. On the different tabs, all of the writing I have done takes up 80% of my character limit and I want to know if there is a website (something like Pastebin) where I can type all of the information I need on my tabs and embed the text into the Div ID pages. This would save a TREMENDOUS amount of characters I can use to continue coding.
If I can do this with Pastebin, could someone tell me how? I cannot use the embed option on the Pastebin website since it doesn't appear to work.
<script src=""></script>
Script src also wouldn't work since I am not embedding any code from the Pastebin file, it's just text. It's very important that I get this done... I'm stumped...
Use jQuery to make an AJAX request to the file.txt, and the result text will be placed inside the selected element.
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<div id="content">
<p>Content loading...</p>
</div>
<script type="text/javascript">
$( document ).ready(function() {
$.ajax({
context: this,
dataType : "text",
url : "file.txt",
success : function(results) {
$("#content").html(results);
}
});
});
</script>

How to use Groovy XML MarkupBuilder to create valid HTML script tags?

I am using Groovy 1.8 XML MarkupBuilder to build an HTML page which includes a <script> tag.
When I load the page in Firefox 18 I see a blank page instead of the expected results.
This seems to be due to the generated <script> tag not having a complementary </script> tag,
even though there is no content to warrant the </script> tag.
(See: https://stackoverflow.com/questions/69913/why-dont-self-closing-script-tags-work )
Sample Groovy code:
def builder = new groovy.xml.MarkupBuilder( out )
builder.html {
head {
script( type:'text/javascript', src:'//example.com/example.js' )
}
body {
p("Hello...Newman.")
}
}
If I examine the (blank) rendered page's HTML using Firefox's "View Page Source" (Ctrl-U), I see:
<html>
<head>
<script type='text/javascript' src='//example.com/example.js />
</head>
<body>
<p>Hello...Newman.</p>
</body>
</html>
Looking closely, I see the '/' on the <script ... /> tag is rendered in red,
and the hover-over text on the '/' says "Self-closing syntax ("/>") used on a non-void HTML element. Ignoring the slash and treating as a start tag."
So, how do I generate valid HTML <script> tags using Groovy XML MarkupBuilder ?
If you define some empty content, then the script tag will have a separate closing tag:
script( '', type:'text/javascript', src:'//example.com/example.js' )
Alternatively you could use
script(type:'text/javascript', src:'//example.com/example.js){mkp.yield("")}

Get user Locale on script

I´m having a little problem. I am using gmap in primefaces and we need to load the script
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"/>
However I need to load the script according to the language of the user Locale.
How can I manage to do that without "hardcoding" the string?
I tried something like this :
<script src="http://maps.google.com/maps/api/js?sensor=true&language="#{template.userLocale} type="text/javascript"/>
// {template.userLocale} has a string o the locale
Can you help please?
You've there a HTML syntax error. What you end up getting would look like this given a language of en:
<script src="http://maps.google.com/maps/api/js?sensor=true&language="en type="text/javascript"/>
(rightclick page in browser and do View Source to see it yourself)
You need to move the doublequote to the end of the attribute value:
<script src="http://maps.google.com/maps/api/js?sensor=true&language=#{template.userLocale}" type="text/javascript"/>
So that the HTML will end up to be:
<script src="http://maps.google.com/maps/api/js?sensor=true&language=en" type="text/javascript"/>
EL can just be used in template text. You need to realize that JSF basically produces HTML code. The HTML <script src> attribute and the EL #{} doesn't run in sync. Instead, JSF/EL procuces it and you just need to make sure that the resulting HTML is syntactically valid.

"Uncaught SyntaxError: Unexpected token <" for my code but existing code work fine in javascript?

I am using underscore.js to template my code.Their is some html code written in file that is worked already fine.
when I write this code then javascript refuse to run it.
<script type="text/javascript" id='tmpl_experiment_schdule'>
<div>
</div>
</script>
can someone explain me how other people code work and mine just open closed div break to run.
Because you're not allowed to use HTML code outside of a string inside of a <script type="text/javascript"> element. The symbol < is used as a comparison operator, not as a tag starting token.
Since you didn't provide a left hand side < is unexpected. The parser expects something like
<script type="text/javascript">
2 < 4;
</script>