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.

dynamically change jquery tooltip

jsfiddle example of what i am trying
<div class="name1" title=" Air jordan ">mike jordan</div>
thats my html .
I want to change the tooltip dynamically to say "air jordan 12:44pm is mike jordan"
i know how to get the 12:44pm. what i dont know is how to change the tooltip dynamically while reading the original element. I have to change the title element in order to change the tooltip right?
here is what I am trying
$( ".name1" ).tooltip({
content: function() {
console.log("1234");
var element = $( this );
return "gerd";
}
});
I feel like i am going down a very wrong path. I dont even see the console logs inside of the function.
Is there a way to fix this?
Or Should I
1. see if the element has a mouseenter,
2. then quickly change the title attritubte then
3 add a .tooltip?

Assuming that by 'tooltip' you mean the text that you see when you hover over the element (which is just the value of the title attribute), then you can use jQuery to simply edit the title attribute directly.
$('.name1').attr('title','air jordan ' + yourFormattedDateTimeFunction() + ' is mike jordan');
EDIT:
A little Googling leads me to think you're referring specifically to the jQueryUI tooltip method, which is a bit fancier than standard tooltips. I'm not overly familiar with how this method works, but based on the API, I'd say your biggest problem is that you're passing a function handler to 'content', as opposed to actually executing a function which would create the string you need. I suggest you read up on Immediately Invoked Function Expressions for an explanation on the difference between these formats. So theoretically, your code should look something like this:
$('.name1').tooltip({
content: (function () {
console.log('this should show up now');
return 'air jordan ' + yourFormattedDateTimeFunction() + ' is mike jordan';
})()
});

jQuery select input elements in a target form with a certain class

I have several forms in one page, and I wanted to target all input fields in a target form (form ID) that has a certain class in it (Eg."has-error" ).
I though this would do the trick:
target_elem = "#form_b";
$(target_elem + ":input").hasClass("has-error").removeClass("has-error");
No luck so far. I've tried playing w/ filtering as well. tsk

Demo
Simply Use .class selector:
$(target_elem + " input.has-error").removeClass("has-error");

Try this , Let me know if it helps :
$(".has-error").each(function(){
$(this).removeClass("has-error");
});
Live example : http://jsbin.com/yudaseqe/1/edit

No need to use ':'
$(target_elem + " input").hasClass("has-error").removeClass("has-error"); should work
Note that you also can forget about hasClass("has-error")
It will take more time to find input with this class than deleting this class of every input without checking if it exists.
target_elem = "#form_b";
$(target_elem + " input").removeClass("has-error");

try this...
$("input[class*='has-error']",$(target_elem)).removeClass("has-error");
Or use this
$("input.has-error",$(target_elem)).removeClass("has-error");

How can I get the text that was clicked on in Javascript?

Does anyone know if it is possible with javascript to to tell the position of a mouse click in some text? I know it's easy to get the x,y coordinates, but I'm wanting the position in the text.
For example if I clicked inside <p>foo bar</p>
I want to be able to tell that the click was on/after the 5th character. Or that foo b is before the click and ar is after it.
By the way, I'm using jQuery too, I'm happy with pure JS and solutions that use jQ.
Thanks in advance.

Javascript and browsers don't support this directly, but you could technically wrap each character in a span and do it based on which span was clicked on:
<p>
<span>f</span>
<span>o</span>
<span>o</span>
<span> </span>
<span>b</span>
<span>a</span>
<span>r</span>
</p>
If anybody actually tries this, be prepared to be eaten by a velociraptor :p

Expanding on codeka's answer and my comment . . . try this (i'm assuming your target p has id my_p):
(function() {
var p = $('#my_p');
var o_string = p.text();
p.html('<span>' + o_string.split('').join('</span><span>') + '</span>');
$('span', p).each(function(i) {
$(this).data('MyIndex', i);
}).click(function() {
var char_index = $(this).data('MyIndex');
if (char_index >= 5) {
alert('You clicked after character 5! Before: "' + o_string.substring(0, char_index) + '", After (inclusive): "' + o_string.substring(char_index) + '"');
}
});
})();
What that does is:
1. Find the paragraph where you need per-character clicking knowledge, 2. Split the text in that paragraph into a number of one-character spans, 3. Inform each of those one-character spans of its position in the string, and 4. Assign a click() handler to each span, which spits out the information about the span (including your example of char index >= 5, and printing the before and after parts of the string).
Of course you might want to put that in $(document).ready(...) instead of an anonymous function; I didn't know if maybe you had a precondition for activating this detection though.

Frankly I don't like very much idea of travesting text and 'span'ing it. But I'm not quite sure what you are looking for, if you need just the word clicked and do dblclick instead of click will do, i have next code:
$('*').dblclick(function(event){
console.log((window.getSelection() || document.getSelection() || document.selection.createRange().text).toString());
event.stopPropagation();
});
after that you can deselect text if you want.
Without toString() you will get object that has a lot of properties, study it as well.

addClass/removeClass to a SubClass?

I am new to javascript and still learning the ropes. I am trying to use addClass to a subclass
I assumed that this would work:
jQuery('#wrow .text').addClass("error");
jQuery('#wrow .text').removeClass("error");
But it doesn't ? Little unsure how to do this to subclasses ? I am sure you gurus will help in a jiffy! :)
Edit: I am actually using
jQuery('#wrow_' + nameSpace + '.text').addClass("error");
but it isn't working?

If this is your actual code
jQuery('#wrow_' + nameSpace + '.text').addClass("error");
Then I suspect you're missing a space
jQuery('#wrow_' + nameSpace + ' .text').addClass("error");
// put a space right here -----^

Perhaps describe a little bit more as to what you're trying to accomplish?
$('#wrow .text').addClass("error");
$('#wrow .text').removeClass("error");
Will take any descendent of #wrow with the .text class and add the error class to those elements.
If you want to find the #wrow element when it also has the class "text", then it should look like this:
$('#wrow.text').addClass("error"); // no space in the selector
I don't think that's what you want either because you'd really only have one #wrow in the page (if you have more, you have another problem as IDs are supposed to be unique) so please clarify.

how does your html looks like. I'm just guessing that .text is child element of #wrow?
jQuery('#wrow > .text').addClass("error");
jQuery('#wrow > .text').removeClass("error");

jQuery('#wrow_' + nameSpace + '.text').addClass("error");
What is nameSpace? Will it actually contain a space? If not you may need a space on one or both sides