I have uploaded a js file to firebase cloud storage and made it public.
Also after uploading via google cloud console edited the metadata and set the content-language to unset , content-type to text/javascript and content-encoding to UTF-8. But still, the special characters such as äöå are shown corrupted
The usage of the JS file is like below ;
On a website, I have a script tag on <head/>
<head>
<script src="https://storage.googleapis.com/myapp.appspot.com/MyElement.js"
charset="UTF-8" or "iso-8859-1" <-- have tried both
type="text/javascript" />
</head>
...
<body>
...
<div id="locationForMyCustomEl"></div>
...
</body>
the content of the javascript file is something like
function setup(){
let element = document.querySelector("#locationForMyCustomEl");
element.innerHTML = "<h1> Köp för item </h1>"
/*
Have Also tried:
K\u00F6p f\u00F6r item
Köp för item
*/
}
setup();
But I always receive messed up characters like Köp för item in the resulting <h1/> tag.
If I open the javascript file in a browser (inserting the URL https://storage....lement.js)
the represented code also contains messed-up characters.
like
function setup(){
let element = document.querySelector("#locationForMyCustomEl");
element.innerHTML = "<h1> Köp för item </h1>"
}
It seems the uploaded file gets corrupted, and there is no way to restore it via charset.
How should I use special characters in an external javascript file?
I have successfully called the following JavaScript code to populate an image and description using parameters.
The image and description are in tags and are called imagePlaceHolder and descriptionPlaceHolder. As I say, this works perfectly.
function changeImage(imgName,descriptiveText)
{
image = document.getElementById('imagePlaceHolder');
image.src = imgName;
text = document.getElementById('descriptionPlaceHolder');
PlaceHolder.innerHTML=descriptiveText;
}
What I now require is to place the javascript in its own file and call it from the HTML page using <script src="xxxx.js"></script>
The problem is that the object in the <div> is not recognized. I need to amend the line
document.getElementById('imagePlaceHolder');
to point to the HTML file containing object to manipulate.
Can anyone advise me of the correct syntax please?
In the HTML file you need to link the javascript file in the header
E.g.
<head>
<script src="/scripts/yourjavascript.js" type="text/javascript"></script>
</head>
then do a onload function at the top of your javascript file
window.onload = function(){
changeImage("imgName", "descriptiveText");
}
function changeImage(imgName,descriptiveText)
{
image = document.getElementById('imagePlaceHolder');
image.src = imgName;
text = document.getElementById('descriptionPlaceHolder');
text.innerHTML=descriptiveText;
}
any javascript using document should reference the html document
UPDATE 1
Here is how I am currently loading text into my WT project.
wApp->require("ace.js");
//orignal XML, reads in incorrectly on one line
//std::string data = ReadFile("Q:\\settings.xml");
//XML after being formatted in notepad to look like xml, reads in correctly
//std::string data = ReadFile("Q:\\settings.txt");
//changed extension back to XML, edited in notepad++ to XML format, reads in correctly
std::string data = ReadFile("Q:\\settings_from_text.xml");
//test xml tag, reads in correctly
//std::string data = "<tag_1>some tag content</tag_1>";
//test xml tag with newline, reads in incorrectly on one line, doesnt read newline
//std::string data = "<tag_1>some tag content</tag_1>\n<tag_1>some tag content</tag_1>";
_ace_editor = new WText(data, Wt::PlainText);
//_ace_editor->setText(data);
_ace_editor->setInline(false);
// A WContainerWidget is rendered as a div
_ace_editor->resize(1000, 500);
std::string editor_ref = _ace_editor->jsRef(); // is a text string that will be the element when executed in JS
std::string command =
editor_ref + "._ace_editor = ace.edit(" + editor_ref + ");" +
editor_ref + "._ace_editor.setTheme(\"ace/theme/chrome\");" +
editor_ref + "._ace_editor.getSession().setMode(\"ace/mode/xml\");";// +
//editor_ref + "._ace_editor.setValue(\"" + data + "\");";
_ace_editor->doJavaScript(command);
Also, here is the ReadFile function
std::ifstream in(path, std::ios::in | std::ios::binary);
if(in)
{
std::string contents;
in.seekg(0, std::ios::end);
contents.resize(in.tellg());
in.seekg(0, std::ios::beg);
in.read(&contents[0], contents.size());
in.close();
return(contents);
}
throw(errno);
ORIGINAL POST
I am trying to load some XML files into an Ace (http://ajaxorg.github.io/ace/#nav=about) editor that I embedded in a WT (http://www.webtoolkit.eu/wt?wtd=rqBfShGlNupXgK3M1sWOxUk1Loz3BsW0) page. The problem is that XML files for whatever reason have all their tags omitted from the load. Example: An XML file with the following content
<?xml version="1.0"?>
<settings>
<tag_1>some tag content</tag_1>
<tag_2/>
</settings>
will be loaded as
some tag content
I need the entire XML file as is, not just the contents of the tags.
After doing a bit of research, I have found quite a few other people on different forums asking the same thing but everything I have tried so far has not been working, which brings me here.
This includes setting the Ace mode to XML, trying to load the text in a different container before setting it to the ace window, changing the color schemes, and parsing a file in a different manner.
I am using visual studio 2010, and from debugging I can see that the file does get read in fully into a string with all the tags, but after it is set to the Ace window they are omitted.
Regardless of whether you are putting it on a WT page or not, bottom line this is a javascript question as that is what the ACE editor is, a javascript tool. Since you have not shown anything at all about how you are loading the xml content, I can only speculate that you must be writing the contents of the xml file into the pages output source?? I'll bet if you view-source do you see the tags? Well if so you are going about it wrong. The xml file needs to be loaded via javascript/ajax as I will demonstrate with a fully working example below (edit the 'url' in the $.ajax call to location of an xml file on your server), which shows tags and all contents of the xml file. Added the jQuery library just for simplicity of the ajax request code. Enjoy!
<!DOCTYPE html>
<html lang="en">
<head>
<title>ACE in Action</title>
<style type="text/css" media="screen">
#editor {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div id="editor"></div>
<script src="http://rawgithub.com/ajaxorg/ace-builds/master/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
var callback = function (data, status, xhr) {
//data will be the xml returned from the server
if (status == 'success') {
var editor = ace.edit("editor");
//apparently, only modes supported are 'html', 'javascript' & 'text'
editor.getSession().setMode("ace/mode/html");
editor.setValue(data);
}
};
//using jQuery to fire off an ajax request to load the xml,
//using our callback as the success function
$.ajax(
{
url : '/testing/cd_catalog.xml',
dataType : 'text', //explicitly requesting the xml as text, rather than an xml document
success : callback
}
);
</script>
</body>
</html>
Actually, I take back some of what I said about the "must load via javascript/ajax", as I now realize you were just following ACE's example of putting the contents into the editor div beforehand. If you want to do that with html or xml content, the tags will be evaluated by the browser and not show up, unless you copy the editor div's innerHTML then instantiate the editor and then set it's value to the previously saved innerHTML. For example:
<div id="editor"><?xml version="1.0" encoding="ISO-8859-1">
<books>
<text>some text content</text>
<book/>
</books></div>
<script src="http://rawgithub.com/ajaxorg/ace-builds/master/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var txt = document.getElementById('editor').innerHTML;
var editor = ace.edit("editor");
//editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/html");
editor.setValue(txt);
</script>
XML fragments in XML... you can somehow expect that your browser will interpret them, unless properly escaped. Try this:
txt = new WText("<bla>something</bla>", Wt::PlainText);
which will escape all XML-ish characters in your text.
Wt's default (XHTMLText) will try to parse your input as XML, and if it succeeds filter possible XSS vectors from the XML before sending it as XML to the browser. If it can't parse the text as XML, it will escape XML-ish characters to avoid that a browser with a liberal parser would unintentionally execute attack vectors.
The third option (XHTMLUnsafeText) bypasses XSS filtering - dangerous, so only use it when you know that your text is safe and can not be influenced directly or indirectly by the user.
Very simple AJAX script that does the following:
inserts hidden iframe for buffering server side output
iframe loads my PHP content silently into a div
PHP output is copied from server side div, to parent page div.
The problem is, the first call throws : 'Uncaught TypeError: Cannot set property 'src' of null'. All subsequent calls work perfectly. It's driving me nuts. I love the simplicity of this function but I'm obviously missing something.
Javascript called from here:
<html>
<head>
<!-- ajax -->
<script src='ajax.js' type='text/javascript'></script>
</head>
<body>
get ajax data
<div id='show_result'></div>
<body>
</html>
'ajax.js' file :
function ajax_request(url,result_id)
{
var ajax_iframe_id = 'ajax_iframe_loader';
var ajax_iframe = document.getElementById(ajax_iframe_id);
// create hidden iframe transfer buffer if it's not created already.
if (ajax_iframe == null)
{
var element = document.createElement("iframe");
element.setAttribute('src',url);
element.setAttribute('id',ajax_iframe_id);
document.body.appendChild(element);
element.style.display='none';
element.style.width='1';
element.style.height='1';
element.style.border='0';
ajax_iframe = element;
}
// load server side page into iframe buffer
ajax_iframe.src = url;
// get the outputted result from inside our transfer div
var iframe_inner_doc = ajax_iframe.contentDocument || ajax_iframe.contentWindow.document;
var content_to_transfer = iframe_inner_doc.getElementById('to_transfer').innerHTML;
// paste result
document.getElementById(result_id).innerHTML = content_to_transfer;
}
'php.php' server script that outputs the result for transfer via AJAX (random number)
<html>
<body>
<div id='to_transfer'><?=mt_rand(5, 15);?></div>
</body>
</html>
you need to add this inside your if statement
ajax_iframe = element;
I meet some problem when locate the resources such as css js img in the page.
For example,I want to use a javascript lib:dtree,it contain some built-in images and css.
This is its structure:
img
dtree.css
dtree.js
example.html
The exmaple.html is a live demo to show how to use dtree. It use the dtree.js as:
<script type="text/javascript" src="dtree.js"></script>
Now I create a new folder,and copy the example.html here,and modify the src of the js:
<script type="text/javascript" src="../dtree.js"></script>
Now,this is the new structure:
img
dtree.css
dtree.js
example.html
chd
--example.html
When I browser the chd/example.html,some required imgs are missing.
And in the dtree.js,there are some codes like:
this.icon = {
root:'img/base.gif',
....
}
So I think the img here are not based on the dtree.js but the current page which call the js.
If so,I think I am fxxked.
I have to put all my pages to the same directory with the img(it contains the required imgs by dtree.js) if I want to use the dtree.js?
And solutions?
you need to adjust image root path by adding slash before img like:
this.icon = {
root:'/img/base.gif',
....
}