My ID's have been changed, how can i stop it? - javascript

I've been trying to do something simple, i think, let me explain:
I have an BPMS software where a send an e-mail at the end of the process, this e-mail is an HTML page that i created, inside the HTML page we have some identifying codes that get a field value from an previously form, some strings. The problem is, when i transfer that value to the HTML page, obviously the "Enter" key doesn't work like the "br" tag, so i made a simple javascript to replace the "enter" for the "br". It worked, but when i send the e-mail my ID is changed and they put an "x_" prefix, so there goes my question.
Can i stop it or there is some other way to do it?
The code is below:
<p id="informacoes">
TEST
TEST
</p>
<script>
var strMessege = document.getElementById('informacoes');
strMessege.innerHTML = strMessege.innerHTML.replace(/(?:\r\n|\r|\n)/g, '<br />');
</script>

It seems like your end goal here is to retain original line breaks present in the source code. I think your best bet would be to address this using CSS.
Take a look at the CSS property white-space, MDN: white-space property
By default, CSS collapses white space (e.g. multiple non-breaking ("regular") spaces, tabs, and newlines) into, effectively, a single regular space. In your example, the line breaks that you see in the source code are being collapsed and so they will not be rendered by the browser or email client.
Try using CSS to set a different white-space property, like
#informacoes {
white-space: pre-line;
/* depending on your use case,
a different value might work better */
}
Property values other than white-space: normal (which is the default) will change whether and how white space, including new lines, are collapsed when rendering from the source code to the screen.

Related

Javascript - getting the exact value of a textarea

I need to get the exact value of a textarea field. There are many topics, but none of them meet my needs.
Javascript transforms the html characters.
console.log(document.getElementById('t1').value);
// display: a'b => OK
console.log(document.getElementById('t2').value);
// display: a'b => KO I need to get a'b
<textarea id="t1">a'b</textarea>
<textarea id="t2">a'b</textarea>
I must imperatively recover the exact content of the textarea (and not re-encode the content).
Do you have a solution for this issue?
Not JavaScript is transforming anything when reading the textarea's value, but your browser is rendering the entities as their corresponding characters. So, once the page is rendered, there's no entity inside the textarea anymore, it's just the text as the end user would see it. Therefore, neither .value nor .innerHTML will be able to retrieve the entity.
If what you're trying to achieve is displaying entities inside a textarea, you'll have to double-encode them as a&#039;b for example, by using the entity & for the ampersand.

Why does javascript only do the line breaks once (The first time)?

I have a span.value element, which has nl2br('lots of text') in it, which I will edit with a textarea, which upon click of a button appears in place of the span.value, containing the current text.
Code involved:
1 valObject = $(this).parent().find('span.value');
2 curVal = valObject.text();
3 $(this).parent().find('span.value').html('<textarea style="width:660px; height:100px;">'+curVal+'</textarea>');
4 sendValue = $(this).parent().find('input, textarea').val();
5 valObject.html(sendValue);
Now if I enter edit mode a second time, all the line breaks have vanished. I would not like to refresh page upon every edit. Any help? I just don't see what's causing it to behave the way it does. If I enter "edit mode" the first time, it gets the line breaks, shows the text in the textarea as it's supposed to and after leaving it the "edit mode" it still shows the text as supposed to on the span.value element. But once I enter the "edit mode" second time, all hell breaks loose and the world ends. Any help?
You are modifying the DOM as if it was HTML. The DOM is not HTML. The rules are different. Once a browser has interpreted the HTML, the HTML is gone. It has become a DOM structure. If you later ask the browser to give you HTML, it will convert the DOM structure into HTML. It is very unlikely that this HTML will be the same as your original HTML.
In particular this affects whitespace. If you have more than one whitespace character in a row, they are reduced into one. So multiple spaces, tabs, line breaks and whatnot will become one single whitespace character. This will be true in the HTML that is returned to you.
If you are going to convert between DOM structures and HTML, do not expect the HTML to remain constant. You cannot rely on this.
Add white-space: pre-wrap in the style of the <textarea>
$(this).parent().find('span.value').html('<textarea style="width:660px; white-space: pre-wrap; height:100px;">'+curVal+'</textarea>');

jQuery empty textarea that contains data

Curious problem. I need to empty a <textarea> then replace it with other content. The tests in the JSFiddle will work if nothing is manually typed, but as soon as anything is entered in the textarea by hand, the methods will cease to work.
http://jsfiddle.net/ecFjH/
I understand that I can simply just .val('New stuff here'), however I need HTML entities such as > and < to appear as < and >, which .val() will not accomplish.
It sounds like your real problem is that you want to decode HTML entities to render them in a text area. You could use the following to do this:
var content = 'text > HTML';
$('#myText').val($('<div/>').html(content).text());
However, you should only do this with trusted content. If the content for the textarea is not created by you, it could contain malicious HTML, which you would unsafely be creating on the page.
For a more thorough example, see this answer to essentially the same question; note that the accepted answer repeats the above, but the linked answer is safer.
Your text area has no html. use just $('#myText').val('Button 2 was pressed'); that will remove the previous content and put the text "Button 2 was pressed".
Check here (updated with < and >)

Preserving white space in an HTML select option

I have a set of html text boxes that take input and when the user clicks an 'add' button uses javascript to take the text input and format a string that is put in an HTML select box. The first of these boxes is supposed to contain a 2 character number but can also accept a blank. The formatted strings would look like this:
01-ABC-O
02-DEF-I
However I need a way to display the blank numbers that lines up with the other elements
-GHI-O
This type of entry will show up fine when the javascript adds the option, but when the page is reloaded and the select is repopulated with the values (I'm using Java, jsp, and struts 1.1 if that helps) it gets the same values(spaces preserved) but the whitespace is no longer shown in the select control (I've looked at the page source, and it looks identical to when the javascript adds the option). I have tried substituting the spaces for but this just prints the string "&nbsp" instead of the space. I've also tried using "pre" html blocks and the css white-space property and neither have worked.
Let me know if any further clarification is needed.
You need to replace the spaces with and it should work - note the closing semi-colon (which is missing from your example in the question)! When you do it through Javascript, most (all?) browsers will automatically render the spaces, but when the spaces are there when the page is loaded all (sometimes all but one) of them will be ignored.
You should also apply a font-family: CSS attribute to the select that specifies mono-spaced font(s) in order to ensure everything lines up properly.
When creating the select option with javascript, to preserve white-space, use "\xa0" - it is a NO-BREAK SPACE char.
You can use the pre css style on the area that you are outputting the value to.
<style type="text/css">
#element {
white-space: pre;
}
</style>
<div id="element">
stuff goes here
</div>
This will preserve all whitespace in the div element (other element types will also work) and then you don't need to worry about using the non breaking space.
Are you going to add it via scripting, you need to use Escape Codes for Space "% A0" which you then decode with unescape ()
logTypeList[i] = new Option(unescape(" kent Agent".replace(/ /g, "%A0")), "theValue");
logTypeList[i] = new Option(unescape(" kent Agent".replace(/ /g, "%A0")), "theValue");
Since unescape is deprecated, you may want to use decodeURI:
logTypeList[i] = new Option(decodeURI(" kent Agent".replace(/ /g, "%C2%A0")), "theValue");
More info at http://www.javascripter.net/faq/mathsymbols.htm
You can use the Unicode Character 'SPACE' (U+0020) instead of ("\u0020")

Displaying <textarea> value as HTML

I have a form with several textarea elements. User enters data and submits the form. On the next page it shows submitted text as static text - in p tags. Obviously New Line and multiple paces get ignored and everything just shows in one line.
I can do some preprocessing like replacing New line characters with "br/" and spaces with . but I was wondering if there is a standard solution to that either on server side (C#) or client side (javascript)
Since the data is preformatted (and this isn't just a matter of presentation), the pre element would be suitable (you will still need to replace <, & and friends with the appropriate entities).
Apply CSS white-space: pre; on the <p> element. This way any whitespace inside the element will be preserved.
Actually, I ended up replacing new line symbol with [br/] and it works very well.

Categories