In an e-commerce site, when adding an item to a cart, I'd like to show a popup window with the options you can choose. Imagine you're ordering an iPod Shuffle and now you have to choose the color and text to engrave.

I'd like the window to be modal, so I'm using a lightbox populated by an Ajax call. Now I have two options:

Option 1: Send only the data, and generate the HTML markup using JavaScript

What's nice about this is that it trims down the Ajax request to the bear minimum and doesn't mix the data with the markup.

What's not so great about this is that now I need to use JavaScript to do my rendering, instead of having a template engine on the server-side do it. I might be able to clean up the approach a bit by using a client-side templating solution.

Option 2: Send the HTML markup

What's good about this is that I can have the same server-side templating engine I'm using for the rest of my rendering tasks (Django), do the rendering of the lightbox. JavaScript is only used to insert the HTML fragment into the page. So it clearly leaves the rendering to the rendering engine. Makes sense to me.

But I don't feel comfortable mixing data and markup in an Ajax call for some reason. I'm not sure what makes me feel uneasy about it. I mean, it's the same way every web page is served up -- data plus markup -- right?


4 Answers 4


JSON should just contain the data and no markup. In the long run this approach is more extensible because there is potential for using the JSON data in other parts of your site. If you include markup then using the same data to populate another template becomes much harder.

  • 2
    Great point about the reuse. Everyone seems to be voting for the Ajax request to only contain data, and no markup, for various reasons. But this one is a big one. Thanks. Jul 25, 2011 at 3:36
  • 2
    Not to mention that JSON without markup is smaller and uses less bandwidth.
    – user11946
    Sep 12, 2012 at 22:53
  • @JackManey: Also a good point. But the true cost of additional bandwidth isn't all that much after you already eat the cost of the HTTP request. And I can imagine some setups where you know the client machines are so crappy that it would cost you more to generate the DOM real-time using JavaScript. Think: Internal apps with users on ancient machines/browsers. Sep 16, 2012 at 5:41

I would send the data in the request and build up the markup in js. One extra benefit would be is that there would be less bandwidth usage. It's kind of a personal preference but keeping client side markup away from the server side is probably a better idea. I have a Django website as well and I only use the templating system for putting some json varibles on the page (one less ajax req. to make) and using src files when developing on my machine. All of the client side is done with ExtJS.

  • I like your idea of burning the JSON data into the page -- not here since I don't fetch the additional data until I know what item you're adding to your cart. Making a request for the page layout, then a second for the data seems to be common these days. Having the data in a JavaScript variable eliminates the need for the second HTTP request without having the have two different bits of rendering code (i.e, client and server). Jul 25, 2011 at 3:33
  • Oh I see your server is not advanced enough to know what the user is going to put in the cart beforehand ;).
    – pllee
    Jul 25, 2011 at 15:40

I think you've talk about the pros and cons of both. Why not look at a 3rd option of having the javascript for your lightbox be generated from a django view. Then have your JSON just contain the data to update it for each view?

What you should be able to do is wrap all the templating code into javascript variables and then output them with javascript after it's received the JSON request on the client side.

  • Thanks for the reply. That's actually what I meant in option 1. The lightbox as a container would be burned into the page but hidden. The JSON data from the Ajax request would be used to generate the content in the container. Some of that content would be marked up using HTML. How did you interpret option 1? Maybe that can be my third option. Jul 25, 2011 at 3:28
  • I was thinking something along the lines of this stackoverflow.com/questions/6008908/… then using JSON to replace the data after the initial load Jul 25, 2011 at 4:10

You should use the template engine for markup and keep a hidden field somewhere to store values, that you can then find in the document using a selector.

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.