We Keep Coding

What's the best way to append html tags to existing text?

I want to use the currently selected text in the office document to be replaced by the same selected text but surrounded with html. Effectively adding a hyperlink to the current selection.
I first read the text property of the selection
var objRange = objContext.document.getSelection();
objRange.load('text');
followed by
return objContext.sync().then(function(){
var strSelection = objRange.text;
objRange.insertHtml(
"<a href='" + decodeURIComponent(strHyperlink) + "'>" + strSelection + "</a>",
Word.InsertLocation.replace
);
return objContext.sync().then(function(){
objDialog.close();
});
});
I need a sync to read the text and then another one to write the updated text back into the document after that I close a dialog. But this sometimes causes the html to get written into the document twice. Is there a better way of doing this instead of with double context syncs?

To answer your question, if you need to read the text and then write into a different context, you'll need two syncs.
But you might take a look at the Range.hyperlink property, which is writeable. I don't know if it'll give you a way to avoid two syncs, but is intended for what you seem to be using insertHtml to do.

display values in XTemplate like textarea format

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

Jquery, Escaping url with variable

trying to escape and html for appending in jquery with adding a dynamic variable that i am bringing in with ajax and I seem to not be able to get the escaping correct. Here is what I have -
$("<div><div class='presiImg' style='background: url(/\'/gleam\/public\/images\/itPrecedents\/" + keep.logo + "');'></div></div>").appendTo(".myDiv');
I am unsure how to escape this correctly so I can use the variable. Thanks.

You've got a couple issues here:
You're escaping the forward slashes in your URL and that is not necessary
You are using inconsistent quotes in your .appendTo()
As a suggestion, when I append raw HTML using JS/jQuery I try to use the single-quote and the JavaScript quote, and then use the double-quotes in the HTML. For me it is just easier to see that way. Also, the single-quote in the CSS url is not required, and is perhaps confusing the matter.
Anyway, if you change your line to the following it will work:
$('<div><div class="presiImg" style="background: url(\'/gleam/public/images/itPrecedents/' + keep.logo + '\');"></div></div>').appendTo('.myDiv');
There is a runnable example below if you want to see it in action:
$(function() {
var keep = { logo : "test.jpg" };
$('<div><div class="presiImg" style="background: url(\'/gleam/public/images/itPrecedents/' + keep.logo + '\');"></div></div>').appendTo('.myDiv');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="myDiv"></div>

try
$("<div />",{
"class":"presiImg",
"style":"background: url(/gleam/public/images/itPrecedents/"+keep.logo+")"
}).appendTo(".myDiv");

Single quotes inside single quotes cause error

I have this code:
<span onmouseout="tooltip.hide();" onmouseover="tooltip.show('Hello. This is a simple tooltip, I'm here if you need me, we've been away for some time.');" class="hotspot">test link</span>
the thing is that the SINGLE quote ' is causing the tooltip not to show... so I mean IF the text contains ' the tooltip will not show... because all the text is already inside single quotes...
Can someone please help me to fix this?

Try setting the tooltip text to a var and then doing a replace on the single quote with '
var tooltip = tooltip.replace(/'/g, "'");

Fixed this myself.
So I just replaced every instance of ' to \' in str_replace function :)
WAS:
$desc = str_replace('"', "", preg_replace('/(\s\s+|\t|\n)/', ' ', JFilterOutput::cleanText($regs[0])));
IS NOW:
$desc = str_replace("'", "\\'", preg_replace('/(\s\s+|\t|\n)/', ' ', JFilterOutput::cleanText($regs[0])));

Use ’ for Special Characters in HTML.
<span onmouseout="tooltip.hide();" onmouseover="tooltip.show('Hello. This is a simple tooltip, I’m here if you need me, we’ve been away for some time.');" class="hotspot">test link</span>
I created Working Demo with alert() you can run this code snippet :)
<span onmouseover="alert('Hello. This is a simple tooltip, I’m here if you need me, we’ve been away for some time.');"
class="hotspot">test link</span>

javascript example add remove element

I am struggling with javascript these days, I want to create dynamic add/remove element using java script and i came across following site, but following example doesn't working for me do you know what is wrong in example?
Adding and Removing Elements on the Fly Using JavaScript
I am having issue in following line, which i found using chrome developer tool
var html = '<input type="file" name="uploaded_files[]" /> ' +
'Remove';
Here is the screenshot of google chrome developer tool

You need to escape your quotes.
var html = '<input type="file" name="uploaded_files[]" /> ' +
'Remove';

You might need to escape those single quotes.
onclick="javascript:removeElement(\'file-\' + fileId + ''); return false;">Remove</a>';
That is what I would try.
You want the quotes to be there when you add the text.
You will also have a have files that are named like this
file-1
file-2

Did you add addElement('files', 'p', 'file-' + fileId, html);
At the end of addFile()?
We can't do anything for you if we don't have more information about your 'problem'
Be more explicit in your description.