CODEWITHSUNDEEP
javascriptjqueryhtmlajax
Isaac Lee
Isaac Lee

Reputation: 33

How to insert a large amount of HTML into the DOM without using AJAX or "Mega Strings"

Right now, when a button is clicked on my page, I want a div to be populated with a lot of HTML-- a small form's worth. The strategy I'm using now implements usage of the .html() JQuery method which passes in this behemoth string:

'<div class="container-fluid">' +
    '<div class="row"> &nbsp; </div>' +        
    '<div class="row"> &nbsp; </div>' +
    '<div class="row"> &nbsp; </div>' +
        '<div class="col-md-3 col-md-offset-1 col-sm-6">' +
            '<select id="measures" class="form-control">' +
                '<option>Select a Measure</option>' +
            '</select>' +
        '</div>' +
        '<div class="col-md-3 col-sm-6">' +
            '<select id="budgets" class="form-control">' +
            '</select>' +
        '</div>' +
        '<div class="">' +
            '<button class="col-md-1  text-center col-sm-2 btn btn-primary" id="createSMSButton">Create Summary</button>' +
        '</div>' +
        '<div class="">' +
            '<button class="col-md-2 col-md-offset-1 col-sm-3 btn btn-primary" id="createBudgetReportButton">Create Budget Report</button>' +
        '</div>' +
    '<div class="row"> &nbsp; </div>' +
    '<div class="row"> &nbsp; </div>' +
    '<div class="row"> &nbsp; </div>' +
'</div>';

I don't really like the fact that this string is so bug-prone. I also don't really like the idea of requesting a new .cshtml file from the server, which would take up server/ network time, and force users to wait for an AJAX request to happen. Is there a way to add all this HTML to a div without use of a string this long and delicate and/or slow AJAX requests?

Upvotes: 3

Views: 613

Answers (1)

Andrea Casaccia
Andrea Casaccia

Reputation: 4971

Since you don't want to use Ajax (which would allow you to have templates in separate files), what you can do is storing your html in a tag with type="text/html" and retrieve it accessing the innerHTML property of the script element.

<script id="html" type="text/html">
    <div class="container-fluid">
        <div class="row"> &nbsp; </div>        
        <div class="row"> &nbsp; </div>
        <div class="row"> &nbsp; </div>
            <div class="col-md-3 col-md-offset-1 col-sm-6">
                <select id="measures" class="form-control">
                    <option>Select a Measure</option>
                </select>
            </div>
            <div class="col-md-3 col-sm-6">
                <select id="budgets" class="form-control">
                </select>
            </div>
            <div class="">
                <button class="col-md-1  text-center col-sm-2 btn btn-primary" id="createSMSButton">Create Summary</button>
            </div>
            <div class="">
                <button class="col-md-2 col-md-offset-1 col-sm-3 btn btn-primary" id="createBudgetReportButton">Create Budget Report</button>
            </div>
        <div class="row"> &nbsp; </div>
        <div class="row"> &nbsp; </div>
        <div class="row"> &nbsp; </div>
    </div>
</script>

var html = document.getElementById("html").innerHTML;

Another option is to use RequireJs with text plugin https://github.com/requirejs/text to load templates as a dependency of your modules.

define(['text!/templates/content.html'], function() {
    /*...*/
});

Behind the scenes RequireJs will make an Ajax request to download your template, but I think you should consider the benefit in your application mantainability having separate files for templates.

Additionally you could use the RequireJs optimizer tool to bundle all the dependency in a single file and avoid the extra calls.

Upvotes: 3

Related Questions