How to separate Javascript/JQuery from HTML?

Question

Suppose I got a div that uses AJAX to retrieve prices and information about products, and appends the new products to current results.

<div id="product">
<div class="label">Price: <div class="price">$10.90</div></div>
<div class="label">Sales Price: <div class="price">$9.90</div></div>
</div>

I can do: 1) Get the price and data only. Then iterate through these results and have the Javascript create the div dynamically for each product.

Problem with this: If HTML structure for the div changes (say the class for price changes), I potentially need to change it in 2 places. In the static HTML, as well as in the Javascript.

2) Or is it better practice to have the server return the actual HTML to append to the page? But wouldn't this be messy because the design isn't separate from business logic, and the actual HTML structure might change?

Or is there a 3rd alternative I'm missing?

Take a look at _.js and Backbound View.

Jared Farrish
– Jared Farrish

2011-10-13 04:41:34 +00:00
Commented Oct 13, 2011 at 4:41 — Jared Farrish
– Jared Farrish, Commented Oct 13, 2011 at 4:41

VinayC · Accepted Answer · 2011-10-13 04:45:53Z

2

You can use java-script side templating - there are lots of libraries. I will recommend looking at John Resig's approach. I believe there is also work going on jquery based template engine.

You may also read Rick Strahl's experience here and also the comparison of various template libraries.

Although java-script based templating is elegant solution to your problem, if you have to support java-script disabled scenario then your option #2 is good bet. Generally, you use server side templating to generate the html for first request as well as ajax request (so html structure is maintained only at one place i.e. server side template). Of course, in js-disabled scenarios, your ajax calls will become regular POST requests.

edited Oct 13, 2011 at 4:45

answered Oct 13, 2011 at 4:40

VinayC

49.6k7 gold badges64 silver badges74 bronze badges

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

Comments

Watermark Studios · Accepted Answer · 2011-10-13 04:38:04Z

1

You may want to consider JavaScript templates. Check out http://code.google.com/p/trimpath/wiki/JavaScriptTemplates

You can just have JSON passed back from the AJAX call, and let the template do the hard work. That way you only have one place to change classes in the HTML.

Happy coding!

answered Oct 13, 2011 at 4:38

Watermark Studios

1,1731 gold badge10 silver badges24 bronze badges

Comments

Jonas m · Accepted Answer · 2011-10-13 04:32:34Z

0

You should let javascript create the div when it recieves the data. By making javascript fetch the whole HTML structure and prices your loading a bigger bunch of information than if you just load the price for itself and make JS do the outputting.

Happy programming.

answered Oct 13, 2011 at 4:32

Jonas m

2,7343 gold badges25 silver badges43 bronze badges

Comments

RobG · Accepted Answer · 2011-10-13 04:38:13Z

What you see in the page is just presentation, the browser is just a display device. All your presentation logic should be in once place, so if your server is generating the display (which is the usual case) then generate the markup there and insert it at the client.

If you want to access the data in the page at the client using script, then use suitable classes or ids on the elements that hold the data so that script can find it without needing to know the document layout.

If you are just updating the data on the client, use the same strategy - pass the values to script, that then uses classes or ids (or whatever) to determine which elements to update.

If you are doing presentation at both the server and client, they you will usually have to update both if something changes.

DP. · Accepted Answer · 2011-10-13 04:39:31Z

0

You can have a blank placeholder like div in the HTML, the div can be hidden when details are not available. Once the AJAX calls is made the structure including headers and details can be added dynamically to the placeholder. If the structure changes you just need to change the JavaScript.

answered Oct 13, 2011 at 4:39

DP.

515 bronze badges

Comments

LAW · Accepted Answer · 2011-10-13 05:41:59Z

0

Assuming you control the server that outputs the data, you can painlessly structure the data like so:

<div id="product" data-price="$10.90" data-sales-price="$9.90">
    other markup here
</div>

Any arbitrary HTML attribute prefixed with "data" will validate just fine.

answered Oct 13, 2011 at 5:41

LAW

1,1713 gold badges14 silver badges20 bronze badges

Collectives™ on Stack Overflow

How to separate Javascript/JQuery from HTML?

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related