display values in XTemplate like textarea format - javascript

I am using the plugin rowexpander (grid) with the following template.
rowBodyTpl: new Ext.XTemplate('<div>'+
'<div>'+
'<b>Vegetables:</b>'+
'<ul><li>{vegetables_types}</li></ul>'+
'</div>'+
'</div>')
Displays vegetables types.
Items are sent to the server with a textarea field with each value separated by paragraph, creating a sort of list.
potatos
carrots
pumpkins
If I edit these values with a textarea, they are displayed in the textarea with the same format they were sent to the server (like a list).
However, with the XTemplate I just can display them on a single line.
potatos carrots pumpkins
I would appreciate suggestions to solve
EDIT:01-02-2016
FIDDLE: https://fiddle.sencha.com/#fiddle/14se
FIDDLE (solved): https://fiddle.sencha.com/#fiddle/14sf

The XTemplate creates HTML, while the text area uses formatted plain text.
HTML does show line breaks from the code as a single space only. HTML line breaks are made using <br> tag.
So you have to replace \n with <br> in your template for the line breaks to show up:
var rowBodyTpl = new Ext.XTemplate([
'<div>',
'<div style = "white-space: pre-wrap;">',
'<b>Vegetables:{[this.replaceBR(values.vegetables_types)]}</b>',
'</div>',
'</div>',
{
replaceBR:function(text) {
return text.replace(/\n/g,'<br>');
}
}
]);

I see two ways:
You can use tag <pre>. This tag shows preformatted text as is, with all spaces and new lines. (more see here: http://www.w3schools.com/tags/tag_pre.asp ). Here sample: https://fiddle.sencha.com/#fiddle/14il
You can make string array from vegetables_types string. It's best way I think. After it, you could use <tpl for="vegetables_type"> statement (look here: http://docs.sencha.com/extjs/5.1/5.1.1-apidocs/#!/api/Ext.XTemplate ). Here sample: https://fiddle.sencha.com/#fiddle/14sa

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)

HighCharts + xAxis label formatter

I'm running into this weird and wonderful issue with the xAxis.labels.formatter function within highcharts JS.
I wanted to add a lightbox icon to the xAxis labels of the chart as following:
return '<div class="label">'
+'<a class="lightbox" href="http://www.google.com" data-lightbox="iframe" data-plugin-options=\'{"type":"iframe"}\'>ICON</a>'
+'</div>';
However when rendering this chart the html code shows me the following output:
<div class="label">
<a class="lightbox" href="http://www.google.com" data-lightbox="iframe" data-plugin-options="{"type":"iframe"}">ICON</a>
</div>
The problem is with the single quotes being rendered into double quotes
data-plugin-options="{"type":"iframe"}"
instead of
data-plugin-options='{"type":"iframe"}'
No matter what I try, I can't seem to prevent this from happening.
Things I have tried:
use simple escaping with \'
created a var and passing it into the return string
used .replace(/['"]+/g, '')
Could someone please point me in the right direction as it's driving me slowly crazy, thanks all
UPDATE AFTER FEEDBACK
thank you for your reply, the problem is not the actually single quotes inside of the data-plugin-options attribute but around it, so for example it renders: data-plugin-options="{"type":"iframe"}" instead of data-plugin-options='{"type":"iframe"}', I have found out that even if I would add a fake html element e.g foo=bar, it will render this as foo="bar", so it automatically adds the double quotes, within the xAxis label formatter.
Please see my modified JSFiddle (http://jsfiddle.net/g6yehxeo/1/), and inspect the element of the icon label on the xAxis, you will find that it renders with quotes, even while there are none in the original code ? Any idea of how to prevent this, as the lightbox does not seem to work without these.
Thanks all
You need to properly escape the string that goes into the data-plugin-options attribute. More info: https://stackoverflow.com/a/9189067/1869660
formatter: function () {
function escapeAttr(str) {
var div = document.createElement('div');
div.setAttribute('data-dummy', str);
return /\"(.*)\"/.exec(div.outerHTML)[1];
}
var options = { type: 'iframe'},
optionsAttr = escapeAttr(JSON.stringify(options));
return '<div class="label">'
+ '<a class="lightbox" href="http://www.google.com" data-lightbox="iframe" data-plugin-options="' + optionsAttr + '">ICON</a>'
+ '</div>';
},
http://jsfiddle.net/g6yehxeo/
You can also use the built-in escape() method instead of our homemade escapeAttr(), but then whoever reads the attribute later needs to unescape() the value first to get valid JSON.

Escaped characters in text area but not in list

I had some help on here to create this:
http://jsfiddle.net/spadez/ZTuDJ/38/
My problem comes from the fact that html is stripped out when putting the value of the responsibility field into the text area, but when adding it to the list it still has the HTML on. That means that if someone types in this:
<b>Testing</b>
When I type this in, I get this in the text area when it is stripped:
Testing
But in the list it still has the html tags so it looks like this:
Testing
This is my code which puts it in the text are and the list:
$('#responsibilities').text($("<div>" + eachline + "</div>").text() ).before("<li>"+lines+"</li>");
My question: How do I put the same stripped value which goes into the text area also into the list.
$('#responsibilities').text($("<div>" + eachline + "</div>").text()).before("<li>"+$("<p>"+lines+"</p>").text()+"</li>");
Demo ---> http://jsfiddle.net/ZTuDJ/40/

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.

string search in body.html() not working

Hi here is my total work to search a string in HTML and highlight it if it is found in document:
The problem is here
var SearchItems = text.split(/\r\n|\r|\n/);
var replaced = body.html();
for(var i=0;i<SearchItems.length;i++)
{
var tempRep= '<span class="highlight" style="background-color: yellow">';
tempRep = tempRep + SearchItems[i];
tempRep = tempRep + '</span>';
replaced = replaced.replace(SearchItems[i],tempRep); // It is trying to match along with html tags...
// As the <b> tags will not be there in search text, it is not matching...
}
$("body").html(replaced);
The HTML I'm using is as follows;
<div>
The clipboardData object is reserved for editing actions performed through the Edit menu, shortcut menus, and shortcut keys. It transfers information using the system clipboard, and retains it until data from the next editing operation replace s it. This form of data transfer is particularly suited to multiple pastes of the same data.
<br><br>
This object is available in script as of <b>Microsoft Internet Explorer 5.</b>
</div>
<div class='b'></div>
If I search for a page which is pure or without any html tags it will match. However, if I have any tags in HTML this will not work.. Because I am taking body html() text as the target text. It is exactly trying to match along with html tags..
In fiddle second paragraph will not match.
First of all, to ignore the HTML tags of the element to look within, use the .text() method.
Secondly, in your fiddle, it wasn't working because you weren't calling the SearchQueue function on load.
Try this amended fiddle

Categories