WebView2 ExecuteScriptAsync with XML input - javascript

I want to run a C# function using ExecuteScriptAsync() with XML text as input.
Something like that:
var xml = "<?xml version=\"1.0\" encoding=\"UTF - 16\" standalone=\"no\" ?><values>42</values>";
webView2Control.CoreWebView2.Navigate("file:///C:/Users/erezf/AppData/Local/Temp/index.html");
var input = "func(" + xml + ")";
await webView2Control.CoreWebView2.ExecuteScriptAsync(input);
The HTML file includes the function func:
<script id="test" type="text/javascript">
function func(xml) { alert(xml); }
</script>
This code doesn't work, why?

Your XML string being passed to the Javascript function is missing single or double quotes.
If you look at the input variable in the debugger, it will look like:
func(<?xml version="1.0" encoding="UTF - 16" standalone="no" ?><values>42</values>)
Simply add single quotes like this:
var xml = "'<?xml version=\"1.0\" encoding=\"UTF - 16\" standalone=\"no\" ?><values>42</values>'";

In my case the solution was:
1. add ' ' in the " ".
2. replace the "\n" with "\\n".

Related

Parsing json from external url Html and JS only

<html>
<body>
<div id="output">hi</div>
</body>
<script>
var link="http://mywp.com/cilacap/api/get_posts/";
var jcontent= JSON.parse(link);
var output=document.getElementById('output');
output.innerHTML=jcontent.id' ';
</script>
</html>
It only shows "hi".
Can someone tell me how to show JSON items such as "id" and "postDate"
with looping but without PHP scripting?
Thanks
Few syntactical errors, below is the right one.
<html>
<body>
<div id="output">hi</div>
</body>
<script>
var link='{"url":"http://mywp.com/cilacap/api/get_posts/", "id":"url_id_01"}';
var jcontent= JSON.parse(link);
var output=document.getElementById('output');
output.innerHTML=jcontent.id + ' ';
</script>
</html>
JSON Data(var link), was not parsable.
JSON Data(var link), didnt contained any attribute called id.
String concatenation in last line(output.innerHTML), was wrong.
Try removing the quotes from:
output.innerHTML=jcontent.id' ';
and change it to:
output.innerHTML += jcontent.id;
Providing that the link is valid it should work now.
You can also write:
console.log(jcontent);
and check if the console displays the value, or any errors that have occurred.
That url is a string, not json.
Use Ajax to get the data ( using jquery)
var link;
$.ajax({
url: "test.html",
}).done(function(data) {
link = data;
});
Then, extract the data;
output.innerHTML=jcontent.id;
Is for the value. You get the key like this:
ES7
Object.entries(jcontent)
.forEach(keyValuePair =>
{
// Push to HTML
var t = document.createTextNode(keyValuePair[0] + ' : ' + keyValuePair[1]);     // Create a text node
output.appendChild(t);   
});
ES6
Object.keys(jcontent)
.map(key => [key, jcontent[key]])
.forEach(keyValuePair =>
{
// Push to HTML
var t = document.createTextNode(keyValuePair[0] + ' : ' + keyValuePair[1]);     // Create a text node
output.appendChild(t);   
});
ES5 (Most likely your case)
Use function instead of arrow functions for es5:
Object.keys(jcontent)
.map(function(key){ [key, jcontent[key]] })
.forEach(function(keyValuePair)
{
// Push to HTML
var t = document.createTextNode(keyValuePair[0] + ' : ' + keyValuePair[1]);     // Create a text node
output.appendChild(t);   
});
Access the value:
keyValuePair[0] // key
keyValuePair[1] // value
Ps
If you want to use the es7 or es6 method, have a look at babeljs

How to Reference XML File/Data to be Used with HTML and jQuery?

So I have an XML file, that I generated from an Excel file. Each item looks like this:
<item>
<partnum>pn0001</partnum>
<category>Parent Category</category>
<title>Item Name Here</title>
<type>T27</type>
<diameter>6"</diameter>
<width>0.045"</width>
<arbor>7/8"</arbor>
<material>Metal</material>
<maxrpm>13300</maxrpm>
<tool>Angle Grinder</tool>
<purpose>Cutting</purpose>
<brand>Brand Name Here</brand>
<imgsrc>localfolder\file.jpg</imgsrc>
</item>
I'd like to be able to reference this data, and create variables for each of the items. Obviously, I'll have to write a loop that will go through each item, and store the data. It will end up being something like pn0001.category, pn0001.title. etc, etc.
My question is: how do I begin to reference the XML file? I ran across this link: https://api.jquery.com/jQuery.parseXML/
Which is great, but in the code, you'll see that they have the XML data hard-coded as a string in the first variable.
Basically, how do I get the data from the XML into variables in either Javascript or jQuery?
Here is a jquery example
var xml = '<?xml version="1.0" encoding="UTF-8"?><items><item><partnum>pn0001</partnum><type>T27</type><material>Metal</material></item><item><partnum>pn0002</partnum><type>T28</type><material>plastic</material></item></items>';
var xmlDoc = $.parseXML(xml);
var $xml = $(xmlDoc);
$xml.find('item').each(function(index) {
var partnum = $(this).find('partnum').text();
var type = $(this).find('type').text();
var material = $(this).find('material').text();
$('<span>' + partnum + ' ' + type + ' ' + material + '</span><br>').appendTo('#output');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>

Trouble inserting JavaScript var (containing stmt that contains markup) into <script>

I'm building a script dynamically (which is why it ends up in a var) but I've simplified this example. The problem I'm having is that the browser interprets the span tags inside the script as actual spans, rather than as part of the script. I've looked at all kinds of resources on escaping characters and html encoding/decoding, but either those aren't relevant issues or I'm just not getting it.
How can I write the span inside the dynamically-generated script so that the browser interprets it as part of the script and not as a span tag that it should render?
page.html file
<script>
$(document).ready(function () {
var formScript = ' $(document).on("ready", function () {';
formScript += $().BuildScript();
$("script#dynamic-script").append(formScript + '});');
});
</script>
<script id="dynamic-script"></script>
functions.js file
(function ($) {
$.fn.BuildScript = function () {
var stmtsToAdd = '';
stmtsToAdd += '$("#X").on("change", function () {' +
' if ($(this).val() == "1" && !$("#label-and-control_Y").is(":visible")) {' +
' $("#label-and-control_Y").show("fast");' +
' $("#control_Y").addClass("required");' +
' $("#control_Y").closest("div.control").prev().empty.append("<span class="required-field-indicator">");' +
' }' +
'});';
return stmtsToAdd;
}
})(jQuery);
variations
I have also tried using a variety of special characters, both with and without escaping backslashes (just in case I was misunderstanding something), with always the same result
"\u003cspan class=\\u0022required-field-indicator\\u0022\u003eRequired\u003c\/span\u003e"
"\x3cspan class=\x22required-field-indicator\x22\x3eRequired\x3c/span\x3e"
I also read that jQuery's html() was decoding, which is why I've tried append(), text(), and appendChild().
result

Why is HTML elements is displayed as text?

I'm working on a form builder website. After a form is built it must be saved in database. When the user clicks on a form name from the list of saved forms the form information is restored from database. One of the variables I will restore is the structure of the form. In javascript I wrote these lines of code:
var prefix_content='<!DOCTYPE HTML>\n<html lang="en-US">\n<head>\n<meta charset="UTF-8">\n<title> </title>\n </head>\n<body>\n ';
var sufex_content=' \n</body></html>';
var dynamic_content=String(text_content);
document.write(prefix_content + dynamic_content + sufex_content );
The variable dynamic_content contains the dynamic structure.
The problem is that prefix_content and sufex_content is displayed as html but dynamic_content is written in the page as text. Any one knows why is that or knows how to solve this problem.
Note: when I write the text in dynamic content statically between single quotes it is displayed as html not text.
If you're seeing the content retrieved from your database as plaintext, instead of HTML, its HTML entities are probably getting escaped somewhere along the way. Check the contents of your text_content variable (e.g. use console.log(text_content) and if you're seeing stuff like <div> instead of <div>, go on and find out where your escaping happens and either remove it or manually unescape.
TRY THIS:
var prefix_content='<!DOCTYPE HTML>\n<html lang="en-US">\n<head>\n<meta charset="UTF-8">\n<title> </title>\n </head>\n<body>\n ';
var sufex_content=' \n</body></html>';
var dynamic_content=String(text_content);
var parser = new DOMParser();
var el = parser.parseFromString(dynamic_content, "text/html");
document.write(prefix_content + el + sufex_content );
Or you can try this too: Using jQuery
var dynamic_content=String(text_content);
var el = $.parseHTML( dynamic_content );
document.write(prefix_content + el + sufex_content );
var content = "<div style='color:red;'>TEST</div>";
var prefix ='<!DOCTYPE HTML>\n<html lang="en-US">\n<head>\n<meta charset="UTF-8">\n<title>TEST</title>\n</head>\n<body>\n';
var suffix ='\n</body></html>';
var all = prefix + content + suffix;
var parser = new DOMParser();
var doc = parser.parseFromString(all, "text/html");
console.log(doc.children[0].outerHTML);
Instead of children[0] you can also go for:
doc.documentElement.outerHTML
Results in:
<html lang="en-US"><head>
<meta charset="UTF-8">
<title>TEST</title>
</head>
<body>
<div style="color:red;">TEST</div>
</body></html>

XML parse to HTML with jQuery

I have some little problem with my scripts. I want to parse xml file with some data elements to my html file. So I try to use jQuery but it doesn't work. Can you help me?
This is my xlm file:
<?xml version="2.0"?>
<choices xml:lang="PL">
<complete>Wskazówka</complete>
<temperature>300 stopni celcjusza</temperature>
</choices>
This is my jQuery code:
$(document).ready(function () {
$.get('../data/content_data.xml', function(data) {
var complete = $(data).find('complete').text();
var temperature = $(data).find('temperature').text();
$('div.menu_circle').text(complete + "|" + temperature);
});
});
I haven't tried this myself, but maybe it helps:
http://www.switchonthecode.com/tutorials/xml-parsing-with-jquery
The issue is how try to output your variables. Try to append your variables to your element.
$(complete + "|" + temperature).appendTo('div.menu_circle');

Categories

Resources