Develop Reference

Razor model helpers in jquery/handlebars infinite scroll

I'm using MVC5 and originally had a standard MVC implementation with manual paging and all was well. Except, when I showed it to my friend, he's like "What are all these number things down here?" (referring to the paging buttons, in his defense he was using his smart phone). It was then I decided infinite scroll would be much better.
After what seems like a million google searches, most the solutions (as well as ALL the solutions that I can actually understand) use json and jquery. Since I was using Troy Goode's PagedList already to do the manual paging, I went with his recommended solution here:
How Can I Convert My Paging Functionality To Use AJAX Insead?
And, I came up with this using json, jquery and handlebars:
<div id="incidentsList"></div>
<div id="incidentsWaypoint">.</div>
#section Scripts{
<script id="incident-template" type="text/x-handlebars-template">
<div class="tRoot">
<div class="tRow">
<div class="index-title">
{{Title}}
</div>
</div>
<div class="tRow">
<div class="index-description">
{{Description}}
</div>
</div>
<div class="tRow">
<div class="pCount">
Count: {{Count}}
</div>
<div class="pSend">
!!!!Partial View Here!!!!
</div>
</div>
</div>
</script>
<script type="text/javascript" src="/Scripts/handlebars-v3.0.3.js"></script>
<script type="text/javascript" src="/Scripts/waypoints.min.js"></script>
<script type="text/javascript">
var source = $("#incident-template").html();
var template = Handlebars.compile(source);
$(function () {
var page = 1;
var $incdiv = $('#incidentsList');
var $waypoint = $('#incidentsWaypoint');
var opts = { offset: '100%' };
$waypoint.waypoint(function () {
$waypoint.waypoint('remove');
$.getJSON('#Url.Action("AjaxPage", "Incidents")', { page: page++ }, function(incidents) {
$.each(incidents, function (index, incident) {
var pPartial = '#Html.Partial("_ProjectStatus", incident)';
//console.log(incident.Title);
//var context = { IncidentId: incident.IncidentId, Title: incident.Title, Description: incident.Description, Count: incident.Count };
var context = incident;
$incdiv.append(template(context));
});
$waypoint.waypoint(opts);
});
}, { offset: '100%' });
});
</script>
}
It works well as far as I can tell, except that I now seem to have lost the ability to use razor html helpers and such, more specifically that #Html.Partial("_ProjectStatus", incident) that has logic like:
if (!Model.IsOwner(Context.User.Identity.Name))
{
if (Model.IsSent(userId))
{
So, I can't just generate straight html for that...
I was going to chop the handlebars template up into smaller templates and then hopefully use the razor helpers in jquery like I started with the var pPartial and then append it all together in the jquery code, but wanted to post it here first before I do all the work to see if I'm even on the right track, especially since (after many more searches) I haven't really found anyone trying to do this.
Therefore, my question(s) is (and I wouldn't expect them all answered, I'm just not sure what to ask and hoping someone can see what I'm trying to accomplish), will what I'm trying to do in the previous paragraph even work? Are razor helpers/logic out of the question in handlebars templates? Are there examples somewhere?...especially of someone who has a full implementation (i.e. something a little more complex than just a list where the example actually uses helpers/logic in it)? Is there another way to do infinite scroll that would allow me to keep my razor code or solely use partial views (or similar) with minimal jquery maybe?
As always, I appreciate any guidance. Thank you.

So far, I fixed it by moving my view logic (learned from nerddinner...which also makes me think of another question) to the controller, by simply adding the last two lines to my json result and returning them as bools:
var incidents = listPaged.Select(items => new
{
items.IncidentId,
items.Title,
items.Description,
items.Count,
IsOwner = items.IsOwner(userName), // this one
IsSent = items.IsSent(userId) //and this one
});
Then in handlebars, I did:
{{#unless IsOwner}}
{{#if IsSent}}
<div class="sent">Sent...</div>
{{else}}
<div class="sent">Not Sent...</div>
{{/if}}
{{/unless}}
I tried to do the partial view with #Html.Action and a few other things that were really straining my mind how they could even possibly work. I like to keep things simple and the couple things I got to sort-of work were noticeably slower (~20%).
This fix is slightly faster too by about 10% on average. Maybe because I'm not pulling every field in the model now? Anyway, wish I could use those helpers in the template, but i can live with this, especially since it allows me to move on...
I'd love to hear any other opinions. Thanks.

How to display JavaScript variables in a HTML page without document.write

I am trying to display some JavaScript variable on my HTML page.
I was first using document.write() but it use to overwrite the current page when the function was called.
After searching around, the general consensus was that document.write() isn't liked very much. What are the other options?
I found a page suggesting using .innerHTML but that was written in 2005.
A jsFiddle illustrating my problem http://jsfiddle.net/xHk5g/

Element.innerHTML is pretty much the way to go. Here are a few ways to use it:
HTML
<div class="results"></div>
JavaScript
// 'Modern' browsers (IE8+, use CSS-style selectors)
document.querySelector('.results').innerHTML = 'Hello World!';
// Using the jQuery library
$('.results').html('Hello World!');
If you just want to update a portion of a <div> I usually just add an empty element with a class like value or one I want to replace the contents of to the main <div>. e.g.
<div class="content">Hello <span class='value'></span></div>
Then I'd use some code like this:
// 'Modern' browsers (IE8+, use CSS-style selectors)
document.querySelector('.content .value').innerHTML = 'World!';
// Using the jQuery library
$(".content .value").html("World!");
Then the HTML/DOM would now contain:
<div class="content">Hello <span class='value'>World!</span></div>
Full example. Click run snippet to try it out.
// Plain Javascript Example
var $jsName = document.querySelector('.name');
var $jsValue = document.querySelector('.jsValue');
$jsName.addEventListener('input', function(event){
$jsValue.innerHTML = $jsName.value;
}, false);
// JQuery example
var $jqName = $('.name');
var $jqValue = $('.jqValue');
$jqName.on('input', function(event){
$jqValue.html($jqName.val());
});
html {
font-family: sans-serif;
font-size: 16px;
}
h1 {
margin: 1em 0 0.25em 0;
}
input[type=text] {
padding: 0.5em;
}
.jsValue, .jqValue {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Setting HTML content example</title>
</head>
<body>
<!-- This <input> field is where I'm getting the name from -->
<label>Enter your name: <input class="name" type="text" value="World"/></label>
<!-- Plain Javascript Example -->
<h1>Plain Javascript Example</h1>Hello <span class="jsValue">World</span>
<!-- jQuery Example -->
<h1>jQuery Example</h1>Hello <span class="jqValue">World</span>
</body>
</html>

You can use javascript to access elements on the page and modify their contents. So for example you might have a page with some HTML markup like so:
<div id="MyEdit">
This text will change
</div>
You can use javascript to change the content like so...
document.getElementById("MyEdit").innerHTML = "My new text!";​
Here is a working example
You can also look at using the JQuery javascript library for DOM manipulation, it has some great features to make things like this very easy.
For example, with JQuery, you could do this to acheive the same result...
$("#MyEdit").html("My new text!");
Here is a working example of the JQuery version
Based on this example you provided in your post. The following JQuery would work for you:
var x = "hello wolrd";
$("p").html(x);
Here is the working version
Using a P tag like this however is not recommended. You would ideally want to use an element with a unique ID so you can ensure you are selecting the correct one with JQuery.

there are different ways of doing this.
one way would be to write a script retrieving a command.
like so:
var name="kieran";
document.write=(name);
or we could use the default JavaScript way to print it.
var name="kieran";
document.getElementById("output").innerHTML=name;
and the html code would be:
<p id="output"></p>
i hope this helped :)

You could use jquery to get hold of the html element that you want to load the value with.
Say for instance if your page looks something like this,
<div id="FirstDiv">
<div id="SecondDiv">
...
</div>
</div>
And if your javascript (I hope) looks something as simple as this,
function somefunction(){
var somevalue = "Data to be inserted";
$("#SecondDiv").text(somevalue);
}
I hope this is what you were looking for.

If you want to avoid innerHTML you can use the DOM methods to construct elements and append them to the page.
​var element = document.createElement('div');
var text = document.createTextNode('This is some text');
element.appendChild(text);
document.body.appendChild(element);​​​​​​

innerHTML is fine and still valid. Use it all the time on projects big and small. I just flipped to an open tab in my IDE and there was one right there.
document.getElementById("data-progress").innerHTML = "<img src='../images/loading.gif'/>";
Not much has changed in js + dom manipulation since 2005, other than the addition of more libraries. You can easily set other properties such as
uploadElement.style.width = "100%";

hi here is a simple example: <div id="test">content</div> and
var test = 5;
document.getElementById('test').innerHTML = test;
and you can test it here : http://jsfiddle.net/SLbKX/

Add an element to your page (such as a div) and write to that div.
HTML:
<html>
<header>
<title>Page Title</title>
</header>
<body>
<div id="myDiv"></div>
</body>
</html>
jQuery:
$('#myDiv').text('hello world!');
javascript:
document.getElementById('myDiv').innerHTML = 'hello world!';

Similar to above, but I used (this was in CSHTML):
JavaScript:
var value = "Hello World!"<br>
$('.output').html(value);
CSHTML:
<div class="output"></div>

How can I make this Javascript code unobtrusive?

<div id="detailed">
#foreach (var item in Model.Result.Items)
{
<div id="movie_#(movie.UserMovieID)" class="movie border-gray">
<!-- Some html code -->
</div>
<script type="text/javascript">
new InitMovieWicket(#(MvcHtmlString.Create(movie.ToJSon())),"movie_#(movie.UserMovieID)");
</script>
}
</div>
I am getting list of movie objects from ASP.NET MVC server-side and generating html like above. As you can see , I am also initializing javascript wickets for each of these movies by using movies's JSON data and script tags.
I want to remove these script tags from html and javascript code to be unobtrusive but I dont know how to do that because for each movie to create wicket I need JSON data and without rendering time script tags I cannot see a way to do this. Do you have any idea ? Thanks..
Update
I want want my html code to look like this.
<div id="detailed">
#foreach (var item in Model.Result.Items)
{
<div id="movie_#(movie.UserMovieID)" class="movie border-gray">
<!-- Some html code -->
</div>
}
</div>
And I want my Javascript code to look like this.
$(document).ready(function() {
//init all movie wickets
});

A potentially better way, for users which don't have JavaScript enabled but still want to see movie details for each item, would be to actually render those details as HTML elements, and then hide them if JavaScript is available.
For example, you would render your HTML to look something like:
<div id="detailed">
<div id="movie_#1234" class="movie border-gray">
<div class="wicketData title">Some title</div>
<div class="wicketData year">Year</div>
<div class="wicketData synopsis">Some other stuff</div>
</div>
</div>
And then iterate through the elements and replace divs with anything you like:
$(doument).ready(function() {
// get the parent div
var $detailedParent = $("#detailed");
// get a list of all movie class divs
var $items = $detailedParent.find(".movie");
$.each($items, function(i) {
// get the movie div
var movie = $items[i];
// get all wicket data
var data = movie.find(".wicketData");
// prepare the JSON data using DOM
var movieData = {
title = data.children("title").text(),
year = data.children("year").text(),
synopsis = data.children("synopsis").text()
};
// remove or hide dummy elements
data.remove();
// init your wicket
new InitMovieWicket(movieData, movie.attr('id'));
};
});
This will allow users without JavaScript to get a bit degraded presentation, but all the data will still be there.

here's how I'd do it:
Put only one script tag in the <head></head> part where you initialize an JSON array with all the movies in it (on the server side) like:
var movies = '[{"userMovieID": "123", ...}, {"userMovieID": "432", ...}]';
when the document is ready, you should start building the widgets by first parsing the json array and then iterating through the array of movies, then create a Widget for every movie and insert
<div id="movie_#(movie.UserMovieID)" class="movie border-gray">
<!-- Some html code -->
</div>
to your <div id="detailed">..</div>, maybe you want to use Javascript Templates like jquery-tmpl
The best solution would be if your widget class "InitMovieWicket" creates the <div id="movie_"..>...</div> entry.

best way to inject html using javascript

I'm hoping that this isn't too subjective. I feel there is a definitive answer so here goes.
I want to create this html on the fly using JS (no libraries):
Play
Mute
<div id="progressBarOuter">
<div id="bytesLoaded"></div>
<div id="progressBar"></div>
</div>
<div id="currentTime">0:00</div>
<div id="totalTime">0:00</div>
using javascript. I know I can do this using createElement etc but it seems extremely long winded to do this for each element. Can anyone suggest a way to do this with more brevity.
I do not have access to a library in this project....so no jquery etc.

Keep your markup separate from your code:
You can embed the HTML snippets that you'll be using as hidden templates inside your HTML page and clone them on demand:
<style type="text/css">
#templates { display: none }
</style>
...
<script type="text/javascript">
var node = document.getElementById("tmp_audio").cloneNode(true);
node.id = ""; // Don't forget :)
// modify node contents with DOM manipulation
container.appendChild(node);
</script>
...
<div id="templates">
<div id="tmp_audio">
Play
Mute
<div class="progressBarOuter">
<div class="bytesLoaded"></div>
<div class="progressBar"></div>
</div>
<div class="currentTime">0:00</div>
<div class="totalTime">0:00</div>
</div>
</div>
Update: Note that I've converted the id attributes in the template to class attributes. This is to avoid having multiple elements on your page with the same ids. You probably don't even need the classes. You can access elements with:
node.getElementsByTagName("div")[4].innerHTML =
format(data.currentTime);
Alternatively, you can act on the HTML of the template:
<script type="text/javascript">
var tmp = document.getElementById("tmp_audio").innerHTML;
// modify template HTML with token replacement
container.innerHTML += tmp;
</script>

Shove the entire thing into a JS variable:
var html = 'Play';
html += 'Mute';
html += '<div id="progressBarOuter"><div id="bytesLoaded"></div><div id="progressBar"></div></div>';
html += '<div id="currentTime">0:00</div>';
html += '<div id="totalTime">0:00</div>';
Then:
document.getElementById("parentElement").innerHTML = html;
if you want theN:
document.getElementById("totalTime").innerHTML = "5:00";

You can use
<script type="text/javascript">
function appendHTML() {
var wrapper = document.createElement("div");
wrapper.innerHTML = '\
Play\
Mute\
<div id="progressBarOuter"> \
<div id="bytesLoaded"></div>\
<div id="progressBar"></div>\
</div>\
<div id="currentTime">0:00</div>\
<div id="totalTime">0:00</div>\
';
document.body.appendChild(wrapper);
}
</script>

If you live in 2019 and beyond read here.
With JavaScript es6 you can use string literals to create templates.
create a function that returns a string/template literal
function videoPlayerTemplate(data) {
return `
<h1>${data.header}</h1>
<p>${data.subheader}</p>
Play
Mute
<div id="progressBarOuter">
<div id="bytesLoaded"></div>
<div id="progressBar"></div>
</div>
<time id="currentTime">0:00</time>
<time id="totalTime">0:00</time>
`
}
Create a JSON object containing the data you want to display
var data = {
header: 'My video player',
subheader: 'Version 2 coming soon'
}
add that to whatever element you like
const videoplayer = videoPlayerTemplate(data);
document.getElementById('myRandomElement').insertAdjacentHTML("afterbegin", videoplayer);
You can read more about string literals here

edit: HTML import is now deprecated.
Now with Web Components you can inject HTML using an HTML import.
The syntax looks like this:
<link rel="import" href="component.html" >
This will just load the content of the html file in the href attribute inline in the order it appears. You can any valid html in the loaded file, so you can even load other scripts if you want.
To inject that from JavaScript you could do something of the likes of:
var importTag = document.createElement('link');
importTag.setAttribute('rel', 'import');
importTag.setAttribute('href', 'component.html');
document.body.appendChild(importTag);
At the time I am writing this, Chrome and Opera support HTML imports. You can see an up to date compatibility table here http://caniuse.com/#feat=imports
But don't worry about browsers not supporting it, you can use it in them anyway with the webcomponentsjs polyfill.
For more info about HTML imports check http://webcomponents.org/articles/introduction-to-html-imports/

If you don't need any validation for your syntax (which is what makes createElement() so nice) then you could always default to simply setting the innerHTML property of the element you want to insert your markup inside of.
Personally, I would stick with using createElement(). It is more verbose but there are far less things to worry about that way.

If performance is a concern, stay away from innerHTML. You should create the whole object tree using document.createElement() as many times as needed, including for nested elements.
Finally, append it to the document with one statement, not many statements.
In my informal testing over the years, this will give you the best performance (some browsers may differ).
If HTML is ever declared in a variable, it should be simple and for a very specific purpose. Usually, this is not the right approach.

here's 2 possible cases :
Your HTML is static
Your HTML is dynamic
solution 1
In this case, wrap your HTML in double quotes, make it a string and save it in a variable. then push it inside HTML, here's a demo 👇
HTML
<div id="test"></div>
JavaScript
let selector = document.querySelector("#test");
let demo_1 = "<div id='child'> hello and welcome</div>"
selector.innerHTML = demo_1;
solution 2
In this case, wrap your HTML in back ticks, make it a template literal and save it in a variable. then push it inside HTML,
here, you can use variables to change your content. here's a demo 👇
HTML
<div id="test"></div>
JavaScript
let selector = document.querySelector("#test");
let changes = 'hello and welcome'
let demo_1 = `<div id='child'>${changes}</div>`
selector.innerHTML = demo_1;

You can concatenate raw HTML strings (being careful to escape text and prevent XSS holes), or you can rewrite jQuery (or something similar)

I have a situation where I pass text into a third party library, but if my model isPrivate, I'd like to add an element to the text.
return { id: item.id, text: (item.isPrivate == true) ? "<i class=\"icon-lock\" title=\"Private group.\"></i> " + item.label : item.label };
This creates issues with the way the third party library builds up its markup.
This is never a good idea, but third party libraries are there so that we don't have to write everything ourselves. In a situation like this, you have to rely on passing markup though javascript.
When i find a proper solution to this, I will give you an update

Javascript Object orientation + DOM?

Im using multiple ASCX controls on one page, and the javascript clashes obviously if I use two of the same control. So Ive changed it all to proper OOP javascript so they dont interfere, but my problem now is how do I do the HTML side of things. Both ASCX's will make a div called "foo". So whats the usual way around this? Am I meant to also be generating all the html from inside my JS classes?
Thanks :)

You can add runat="server" to your DIVs to make them server-side controls:
<div id="foo" runat="server"> ... </div>
then use the control's (generated) ClientID:
<script>
var divId = "<%= foo.ClientID %>";
</script>

Put them into their own ''containers'': divs with unique IDs such as:
...
<div id="control1">
...
<!-- Control One goes here -->
<div class="foo">...</div>
...
</div>
...
<div id="control2">
...
<!-- Control Two goes here -->
<div class="foo">...</div>
...
</div>
...
You can then manipulate them by first navigating to the uniquely named DIVs, then searching for elements with class foo.
To access these in Javascript you could use something like:
var c1 = document.getElementById("control1").getElementsByClassName('foo')[0];
var c2 = document.getElementById("control2").getElementsByClassName('foo')[0];
Make sure to use the [0] on each, because getElementsByClassName returns an array of elements. You (probably) need only one element (not an array object).