We Keep Coding

Handling multi-line HTML inside Javascript

I am using Javascript to define a button behaviour on a web page. The behaviour I am after is to insert some new HTML somewhere on my page, but I would like to use the MVC extension method Html.EditorFor to define the new HTML which will be inserted.
What I would like to do is the following:
$("#myButton").click(function() {
$("#(Html.EditorFor(x => x.SomeModelProperty))").insertBefore(<somewhere>);
});
The problem I'm encountering is that the MvcHtmlString returned by the call to EditorFor renders as multi-line HTML, resulting in invalid Javascript:
$("<div>
<label for="ModelData_SomeModelProperty">SomeModelProperty</label>
</div>
<div> ....
In an ideal world, I could get EditorFor to somehow render all of the above on a single line, or use some kind of special Javascript syntax to define a multi-line string (like using single quotes in C#), but so far I'm drawing a blank.
I've tried calling ToHtmlString and hand-editing the resulting string to remove line-breaks, and I'm aware that I can escape the new lines in Javascript using a /, but the problem with doing so is that I then have to handle the escaped HTML, which looks a little like the following:
$("<div>
<label for="ModelData_SomeModelProperty">SomeModelProperty</label>
</div>
<div> .... (you get the idea)
I was just wondering whether anyone had tried anything similar and might have a more elegant approach?

One way would be to get it written into a hidden div in html instead of directly into the javascript. Then you can just read it from the dom to use in you script.
So you page would have a
<div style="display:none" id="hiddenArea">
...insert whatever you want in here
with newline or whatever...
</div>
And then in your javascript:
$("#myButton").click(function() {
var source = $("#hiddenArea").html();
$(source).insertBefore(<somewhere>);
});

You could maybe create a HTML helper so you much more control on what's returned and how it is formatted.
http://www.codeproject.com/Tips/720515/Custom-HTML-Helper-for-MVC-Application

Why doesn't my javascript onclick work with div?

I am trying to turn a <div> into a link to local HTML document (./lilo/index.html) using JavaScript.
HTML
<div class="pagelist_item" onClick="goto("./lilo")">
<h4>Test Button</h4>
<h6>Discription</h6>
</div>
JavaScript
function goto(url){
window.location = url;
alert(url);
}
See http://jsfiddle.net/6HHTd/
But when I click the button, nothing happens.
Why does this not work?

Your quotes are incorrect in this line:
<div class="pagelist_item" onClick="goto("./lilo")">
jsfiddle even shows the error in red text.
Using apostrophes makes it easier to fix:
<div class="pagelist_item" onClick="goto('./lilo')">
To clarify, in "hi "there" you" the second double-quote matches with the first, closing the string and causing an error with the rest of the expression. Escaping the quotes with back-slashes works "hi \"there\" you" but embedding apostrophes (single-quotes) within double-quotes is often easier. (JavaScript is happy to use either single or double-quotes to delimit strings.)
Also rename your function from goto, as it is a reserved keyword.

Use jquery as follows
$('.pagelist_item').click(function(){
window.location="./lilo";
});
Fiddle

update attribute that is html

I have a anchor <a></a> with an attribute rel. in the rel value there is html, such as <a rel="html=<div>This is a test</div>. I want to update html inside of rel value, I can update the actual change on the page but if i go to the next slide and come back, its back to what it was before because the rel value is not updated. I am not sure how to go about doing this. Any suggestions, I am using Clearbox by the way.
Example(I know the html is incorrect on here, but it is correct on my page. I just need to know how to update it through jquery or any other way)
<a rel="html=<div class="testclass"> This is a test</div></a>
a piece of the html element (not the a) Needs to be changed to
<a rel="html=<div class="testclass"> No more testing </div></a>

You can (But SHOULDN'T) do that with
this.rel = 'html=<div>But you shouldnt do that</div>';
JSFiddle here

I think you need to avoid the use of double quotes inside another double quotes, if you are using double quotes to wrap a string use single quotes inside that string and vice versa.
See this --> http://jsfiddle.net/Galled/rXKCL/14/

Javascript innerHTML with onclick not working

I have some AJAX, it pulls in the following, which is added to a div using innerHTML.
Add
Then when I press the "Add" link, it will add "TEST" into textareax.
If I have it in the HTML of the document from the start, it works perfectly, but when I pull it in using AJAX and using innerHTML to add it to the div the "Add" link does not work.
I think it might be a problem because it has javascript in it and I am just adding it using innerHTML, but don't know how to solve this.

\r\n is a newline, but is parsed by JavaScript already. The innerHTML will be set to:
<a href="#" onclick="javascript:document.getElementById('textareax').value += '
TEST';">Add</a>
which does not work (a syntax error; JavaScript strings cannot have literal newlines).
You'd need to double-escape with \\r\\n so that it becomes \r\n when it is parsed by JavaScript (\\ becomes \ and the r will be unaffected). Then the \r\n will be kept in the onclick handler, so that the newline is indeed added to the textarea: http://jsfiddle.net/r6bhE/.

onclick="javascript:document[...] is incorrect syntax. The onclick attribute is a javascript event, and doesn't need the javascript scheme indication. You can just place the script directly into the attribute value:
Add
It's also a good idea to return a value when intercepting mouse events (true to pass the event on, false to cancel it).

Quote in HTML attribute destroys layout

My site has user generated content. I noticed that if the user has quotes in some text and later I displayed that text in an HTML attribute, the layout would get screwed up in IE.
Hello
However, if I had generated the same anchor with Javascript (Prototype library), the layout would not be screwed up in IE:
$$('body').first().appendChild(
new Element(
'a', {
title: 'user "description" of link',
href: 'link.html'
}
).update('Hello')
);
Why is this so? The JS and the plain HTML versions both have the same intended result, but only the JS doesn't screw up IE. What's happening behind the scenes?
BTW, I do strip_tags() and clean XSS attacks from all user input, but I don't strip all HTML entities because I use a lot of form text input boxes to display back user generated text. Form elements literally display HTML entities, which looks ugly.

You need to escape all output that is user-specified (using entities). The DOM-methods do that automatically.

I don't know how you are processing the user generated content, but you could use a replace function to clean up the input something like string.replace("\"", "")

The answer to your question: 'Why is it so' is because in your JavaScript example set the title attribute with single quotes. So the double quotes in the user generated string are already escaped.
In you A tag example, single quotes around the text you use in the title attribute may be a way to solve the rendering problem.
However, Your HTML attributes should be in double quotes, so you would be better off using entities, as suggested by #elusive in his answer.