We Keep Coding

jQuery issue when .find() term in variable with more than one match

My aim is to let the user select text with the cursor and output the selection into a different div with the highlighted text in <span> tags.
So, I have the selection set like this:
var sel = jQuery.selection();
And then I wrap the selection into <span> and output it:
var $title = jQuery(this).parent().find('.title').text();
var $result;
$result = $title.replace(sel, '<span>'+sel+'</span>');
// output result
jQuery(this).parent().find('.output').html($result);
It works fine.
The problem is that if the text contain the same term twice and the user selects the second term, it will find and replace the first term.
For example, random text:
hello world lorem ipsum hello
If user selects the second hello, it will wrap the first one.
Is there a solution to apply to solve this type of scenario?
jsFiddle for testing.

Get the offset from which you can start replacing ...
$('button').click(function() {
var sel = jQuery.selection();
var $title = jQuery(this).parent().find('.title').text();
var $result;
var highlightFrom = window.getSelection().anchorOffset;
$result = $title.substr(0,highlightFrom) + $title.substr(highlightFrom, $title.length).replace(sel, '<span>' + sel + '</span>');
// output result
jQuery(this).parent().find('.output').text($result);
});
In your sample, highlighfrom gives 24 when selecting second hello.
Updated Fiddle
AnchorOffset is supported by IE9+ and other major browsers.
If you need a valid alternative, I refer to Rangy as stated here:
AnchorOffset alternative
See here for more info on textselection ranges and browser compatibility
TESTED - Chrome, IE11+, FF

i know, there is still an issue with browser compatibility, using the anchor offsets. but the first thing, i came up with, would be slicing the given string into three parts. the part before the selection, the selected part and the rest.
then wrapping the selected part and put them together again...
$('button').click(function() {
var $sel = jQuery.selection();
var $highlightStart = window.getSelection().anchorOffset;
var $highlightEnd = window.getSelection().focusOffset;
var $title = jQuery(this).parent().find('.title').text();
var $textLength = $title.length;
var $textBefore = $title.substr(0,$highlightStart);
var $textToWrap = $title.substr($highlightStart, $highlightEnd - $highlightStart);
var $textAfter = $title.substr($highlightEnd, $textLength - $highlightEnd);
var $result;
$result = $textBefore + '<span>' + $textToWrap + '</span>' + $textAfter;
// output result
jQuery(this).parent().find('.output').text($result);
});
https://jsfiddle.net/sqd5gsz5/6/

SharePoint List, display calculated field in edit form

I have several SharePoint lists that have a calculated field, which is calculated from the ID field, e.g. if the ID is 13, the calculated field is "XX00013", where "XX" indicates the purpose of this particular list.
By default, in the Display From, this "XX00013" is shown.
How can I make it shown as read-only in the Edit Form too? So that the user who is editing the entry always can see which entry s/he is editing?
I don't think I can edit the EditForm, as it's restricted by the webmaster.
I do have access to Content Editor Web Part to edit some javascript code.
Any suggestions?

I tried to put following code in the in the Content Editor Web Part, which is added to the Edit page. It works so far that the "XX00013" is shown as ready-only in the Edit form. This solution is just a walk-around.
Still the question of in general how to show calculated field remains.
<script type="text/javascript">
function DisplayID(){
var regex = new RegExp("[\\?&]"+"ID"+"=([^&#]*)");
var qs = regex.exec(window.location.href);
var sID = qs[1];
var stID="XX";
var nLength=5-sID.length;
var i=0;
do{
stID=stID.concat("0");
i++;
}while (i<nLength)
stID=stID.concat(sID);
var TD1 = document.createElement("TD");
TD1.className = "ms-formlabel";
TD1.innerHTML = "<h3 class='ms-standardheader'>XX_ID</h3>";
var TD2 = document.createElement("TD");
TD2.className = "ms-formbody";
TD2.innerHTML = stID;
var IdRow = document.createElement("TR");
IdRow.appendChild(TD1);
IdRow.appendChild(TD2);
var ItemBody = GetSelectedElement(document.getElementById("idAttachmentsRow"),"TABLE").getElementsByTagName("TBODY")[0];
ItemBody.insertBefore(IdRow,ItemBody.firstChild);
}
_spBodyOnLoadFunctionNames.push("DisplayID");
</script>

How to generate <form:input> tags dynamically from JS?

I need to generate two type of fields, with a specific tags <form:input> and <form:hidden> dynamically from JS.
The first one <form:input> should be an input field the second, must be hidden.
The problem is that <form:input> is not recognized as an input and it's not shown at all. But it can be seen from the page source code.
if (bank != null) {
var fields = bank.additionalFields;
var additionalRows = document.getElementById("additionalRows");
for (i = 0; i < fields.length; i++) {
//from here generates jsp inputs:
//1 - <form:input>
//2 - <form:hidden> for each element from fields
var formInput = document.createElement("form:input");
var formHidden = document.createElement("form:hidden");
formInput.setAttribute("path", "paymentInfo.fields[" + i + "].value");
formHidden.setAttribute("path", "paymentInfo.fields[" + i + "].id");
formInput.setAttribute("type", "text");
formHidden.setAttribute("type", "text");
formInput.setAttribute("value", "");
formHidden.setAttribute("value", fields[i].id);
additionalRows.appendChild(formInput);
additionalRows.appendChild(formHidden);
}
}
Other <form:input> fields generated from JSP are appearing properly on the page.
Link to the generated page source code >> https://dl.dropboxusercontent.com/u/106355152/form_input.PNG
How can it be resolved?

What you are trying to do likely cannot be done. <form:input> and <form:hidden> appear to be server side tags - this is why they are only working from the java end.
You can generate regular and tags using javascript in a way similar to your current approach:
var formInput = document.createElement("input");
var formHidden = document.createElement("input");
formInput.setAttribute("type", "text");
formHidden.setAttribute("type", "hidden");
and then append them to your form.

How to get a textarea element in jquery when the name is in a variable

I am trying to populate multiple text areas with a single select button .
For my application I cant use anything else (esp id's)
All the textareas are dynamically created and are named in order tx1 , tx2 ... txn.
my code is like ....
var count = 13;
for(var i=1;i<count;i++ )
{
var txtname = 'tx' + i;
var txt1 = $('textarea[name=txtname]');
var selTxt1 = $(this).find("option:selected").attr('text');
.....
.....
but var txt1 = $('textarea[name=txtname]'); does not work !!!
How do i provide the dynamically created name of the txtaarea to the var txt1 .

Like this -
$("textarea[name="+txtname+"]");

How to change h:outputText value by JavaScript?

I already tested with 2 inputText, It runs well
for example
var tdate = document.getElementById('txtDate'); //h:inputText
var tdt = document.getElementById('txtDateTime'); //h:inputText
tdate.onchange = function(){
tdt.value = tdate.value;
};
How can I change the value of " tdt " - h:outputText?
var tdate = document.getElementById('txtDate'); //h:inputText
var tdt = document.getElementById('txtDateTime'); //h:outputText

Look in the generated HTML source. Rightclick page in browser and view source. You'll see that the <h:outputText> renders a HTML <span> element with the value in its body. To alter the body of a <span> in JavaScript you need to manipulate the innerHTML.
tdt.innerHTML = "new value";