appended html to the dom doesn't respect the charset - javascript

I have some HTML rendered by ajax, which works perfectly fine using the char-set utf-8 nevertheless some content it's appended to the dom by a JavaScript function using jquery. The problem is, the HTML rendered doesn't have the correct char-set.
Here's the example of the content added by JavaScript
var html = '<div class="right-item-container"><span style="font-size:24px;" class="item-friend-name">Mamá</span><br/><span class="clubName-container">school</span></div>';
$('.profile-container').empty().css({ 'padding-top' : '0'}).html(html);
It renders like this:

This works fine in a fiddle.
http://jsfiddle.net/HjCpp/
var html = '<div class="right-item-container"><span style="font-size:24px;" class="item-friend-name">Mamá</span><br/><span class="clubName-container">school</span></div>';
$('#test').html(html);
So it must be the way your original content is encoded.

Related

Does using innerHTML prevent clientside javascript from applying on new html?

I am using .innerhtml to take information from a form, and re-display a list(of dynamic data that displays in the form of a credit card. See following link for example. https://codepen.io/quinlo/pen/YONMEa) to the DOM. However, when I display that information back to the DOM, my client side Javascript does not seem to apply towards the new elements by re-reading their id's and class's.
Snippit of relevant code
var renderElement = document.querySelector(".cardbox");
const html = '<div class="card-container preload" id="target" >'+
'<div class="creditcardrender">'+
' <div class="front">'+
' <div id="ccsingle"></div>'+ ... etc
renderElement.innerHTML += html;
Is this a property of HTML/Javascript that is unavoidable or is there a work-around this issue?
thanks.
If I understood the question correctly,
Using renderElement.innerHTML += html; is equivalent to renderElement.innerHTML = renderElement.innerHTML + html;, which means its value is a new string resulted from the concatenation of the two strings. So, the existing HTML element will be refactored as if you're assigning it from scratch.
To add the HTML code you're hoping to be present, you can use insertAdjacentHTML() function to add the HTML code to the element without reforming the existing code.
renderElement.insertAdjacentHTML('beforeend', html)

How to copy HTML tags to clipboard without changes?

I am using this SO answer to copy page content using pure JavaScript on user click. However my content contains HTML tags:
<script>http://localhost:3000/widget/174b6b69bcf352803a00</script>
When pasted from the clipboard it turns into this:
<script>http://localhost:3000/widget/174b6b69bcf352803a00</script>
How can I revert it back?
Use innerText instead of innerHTML to get the plain text version without HTML tags in it.
Here is a way to parse HTML entities :
function parseHTMLEntities(htmlString) {
var e = document.createElement("div");
e.innerHTML = htmlString;
return e.innerText;
}
// use like this :
var text = parseHTMLEntities("<script>http://localhost:3000/widget/174b6b69bcf352803a00</script>");
alert(text);
I mistook URI ecoding with HTML entities...
That was a stupid mistake...
see this question:
How to convert characters to HTML entities using plain JavaScript

process html string before insertion

I want to load some html from server, I store the loaded html in a string then I want to modify the values of certain tags and elements within that string before appending it :
here is how I'm trying to do it :
script of test1.html :
<head>....</head>
<body> <div id="main"></div></body>
<script>
$(document).ready(function(){
$.get("test2.html").done(function(data){
$("#rf", data).val("new value");
$("#main").append(data);
});
});
</script>
test2.html
<p id="rf"> <b>old value</b></p>
The first problem is trying to target the val() method of a paragraph. That will not do anything as it has no val property to return. You need to use text or html to replace the content.
Second, convert the HTML string to a DOM tree first with $(data) (see notes below as to why I use a dummy div and html() instead), then find the element, change it etc then append the new tree to the target:
JSFiddle: http://jsfiddle.net/TrueBlueAussie/NWj62/1/
var html = '<p id="rf"> <b>old value</b></p>'
$(document).ready(function () {
var $html = $("<div>").html(html);
$html.find("#rf").html("new value");
$("#main").append($html);
//$.get("test2.html").done(function(data){
// $("#rf", data).val("new value");
// $("#main").append(data);
//});
});
You need to wrap the incoming HTML in a dummy div as find will not match the top element of the tree.
I substituted dummy data so you could see it working without the ajax call.
Note: $(htmlstring) will collapse html and body tags into a flatter structure than you might expect, but your example only has the paragraph so is fine.
Your code will be something like:
$(document).ready(function () {
$.get("test2.html").done(function(data){
var $html = $("<div>").html(data);
$html.find("#rf").html("new value");
$("#main").append($html);
});
});
You want some sort of template functionality, since getting HTML from server and transforming it into a DOM tree and then applying manipulations manually is a lot of code repetition for nothing. Also, it's relatively expensive to do dynamic tree manipalations.
Either the html is processed on the server or on the client side, is your choice.
Backend templates: depends on your backend framework (ie. Django has its own template module).
Fronted templates: You can use Underscore templates or Handlebars templates (more similar to Django templates).

Dynamic html is not getting rendered by jQuery.tmpl

I am using a jQuery template to render some dynamic data. A simplified version of what I am trying to do can be seen below:
var data = [{html:<i>html</i>}, {html:<b>html2</b>}];
var tmpl = $.tmpl(<div>${html}</div>, data);
$("#someContainer").html(tmpl);
I want to render HTML as HTML (HTML in bold) but somehow it renders as plain text (<.b>html<./b>). Can someone explain why?
try using the {{html}} marker:
var tmpl = $.tmpl('<div>{{html html}}</div>', data);
See docs here: html marker
_note: it's html html twice because your var is named that

Need Solution on NicEdit Insert HTML text into Instance

i am using this function to insert text into NicEdit,
function insertAtCursor(editor, value){
var editor = nicEditors.findEditor(editor);
var range = editor.getRng();
var editorField = editor.selElm();
editorField.nodeValue = editorField.nodeValue.substring(0, range.startOffset) +
value +
editorField.nodeValue.substring(range.endOffset, editorField.nodeValue.length);}
This code works fine for simple text but when i pass HTML content into it, it does not render the HTML output in div instead it dumps the HTML code as it is into the Instance Div.
Example:
<div class="one">Some text here</div>
This must show in the Instance as "Some text here"
and remaining code hidden in source code.
Can any one give me a solution to fix this problem?
After working whole night and trying different solutions I had finally got it working! :)
In case any one wants to know solution for this, I had to add a Replace function
replace()
for the content and made it support HTML.
See my answer HERE. It's a plugin I created to insert html at the cursor position.

Categories