CODEWITHSUNDEEP
javascriptjqueryhtmldom
coson
coson

Reputation: 8669

Dynamically adding HTML via javascript

Good Day,

I have an ASP.NET MVC app that I'm working on and have a partial view with one row of data.

<div class="row paymentRow">
    <div class="col-xs-4">Additional Invoices</div>
    <div class="col-xs-8"><input type="text" style="width: 100%"/></div>
</div>

I have a button that when clicked, it adds additional rows to the DOM after the after the last div with the class "row paymentRow".

<div class="btn-group" role="group" aria-label="...">
    <button type="button" id="Add">Add Row</button>
    <button type="button" id="Ok">Ok</button>
    <button type="button" id="Cancel">Cancel</button>
</div>

The jQuery to add the additional row works:

$(function() {
    $("#Add").click(function(e) {
        e.preventDefault();

        var row = '<div class="row paymentRow">' +
            '<div class="col-xs-4">&nbsp;</div>' +
            '<div class="col-xs-8"><input type="text" style="width: 100%"/></div>' +
            '</div>';

        $("div.modalUploadWidth div.row:last").after(row);
    });
});

My question is:

Is there a cleaner way to represent the HTML that is being dynamically constructed and assigned to row? I'm not a big fan of magic strings like this. Not only that, but there will be multiple instances of where I need to inject javascript into the DOM.

I know that I can put the string into a Resource and access it from there. I also know that Handlebars can do this by storing the javascript template into an external file and binding the contents of the external file to the DOM.

I'm trying to find alternatives I may be overlooking.

TIA,

coson

Upvotes: 0

Views: 97

Answers (2)

ramiramilu
ramiramilu

Reputation: 17182

Client side binding library like KnockOut JS would be more appropriate to make dynamic controls on client side. Here goes a simple Knockout JS Sample - https://dotnetfiddle.net/fmwTtJ

<!DOCTYPE html>

<html lang="en">
    <head>  
        <!-- JS includes -->
        <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>       
        <script src="//ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"></script>
    </head>

<table>
    <thead>
        <tr>
            <th>Last Name</th>
            <th>First Name</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: persons">
        <tr>
            <td><input data-bind="value: LastName"/></td>
            <td><input data-bind="value: FirstName"/></td>
        </tr>        
    </tbody>
</table>
<button data-bind="click: $root.addPerson ">Click</button>
<script>
    var ViewModel = function() {
        var self = this;
        self.persons = ko.observableArray([]);
        self.addPerson = function(){
            self.persons.push(new Person('Last Name','First Name'));
        };
    }

    var Person = function(lastName, firstName) {
        var self = this;
        self.LastName = ko.observable(lastName);
        self.FirstName = ko.observable(firstName);   
    }; 

    vm = new ViewModel()
    ko.applyBindings(vm);
</script>
</html>

When you click on the button, it will add a new row -

enter image description here

Upvotes: 2

bjaksic
bjaksic

Reputation: 3313

//take existing row (you've said there is always at least one row)
$(".paymentRow").
//take last (maybe there s already more than one)
last().
// create deep copy
clone().
//append it as last element to the parent element
appendTo(".modalUploadWidth");

Upvotes: 0

Related Questions