How to load the contents of a file and insert a variable in it using Javascript?

Question

I'm adding some html to a div using the following jQuery method:

$('#pageTabContent').append($('\
                    <div class="tab-pane" id="'+ticketId+'">\
                        And a whole lot more html here..
                    </div>'));

This works fine, but because I've got way too much html in my javascript I want to move that to a separate file. The problem is that I also need to insert the ticketId in the html. Is there a way using Javascript/jQuery to load the html from a separate file, but still insert the ticketId in it?

[EDIT] Please note that the ticketId is different for every time this piece of code is used. I will be used multiple times within one page load, so I cannot load the ticketId in the html using php. I has to be done client side.

All tips are welcome!

You could think over a template engine like Handlebars or Mustache. — t.niese
– t.niese, Commented May 14, 2014 at 15:13

T.J. Crowder · Accepted Answer · 2014-05-14 15:16:40Z

2

For that specific example, it's pretty straightforward:

$.get("/path/to/file.html", function(html) {
    var newStuff = $(html);
    newStuff.find("div.tab-pane:first").attr("id", ticketId);
    newStuff.appendTo("#pageTabContent");
});

You can generalize that a bit, the basic concept is: 1. Load the HTML, 2. Use jQuery to create DOM elements from it, 3. Use jQuery to find the element in question and modify it, 4. Add to the element.

Another approach is to use some form of templating, either a templating plugin or just DIY:

$.get("/path/to/file.html", function(html) {
    html = html.replace("{{ticketId}}", ticketId);
    $("#pageTabContent").append(html);
});

Again, there are plugins and templating systems to do that for you, which would offer various features over doing your own.

answered May 14, 2014 at 15:16

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

TGH · Accepted Answer · 2014-05-14 15:14:56Z

0

I generally recommend avoiding dynamic html generation in javascript. There are several good template based frameworks out there. One I like to use in KnockoutJS http://knockoutjs.com/

Another benefit of this approach is change tracking between your model and your html elements.

answered May 14, 2014 at 15:14

TGH

39.4k13 gold badges106 silver badges140 bronze badges

Collectives™ on Stack Overflow

How to load the contents of a file and insert a variable in it using Javascript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related