3

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?

1

6 Answers 6

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.

0
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!

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.

0

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.

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.

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.