13

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?

Mike M. Lin
  • 543
  • 1
  • 4
  • 13
  • Great question. But seems to belong to stackoverflow. – Saeed Neamati Jul 25 '11 at 02:46
  • 1
    @SaeedNeamati Software design questions, *especially* whiteboard-y conceptual questions like this one are [on-topic here and off-topic on Stack Overflow](http://blog.stackoverflow.com/2010/12/introducing-programmers-stackexchange-com/). –  Jul 25 '11 at 02:58

4 Answers4

10

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. – Mike M. Lin Jul 25 '11 at 03:36
  • 2
    Not to mention that JSON without markup is smaller and uses less bandwidth. –  Sep 12 '12 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. – Mike M. Lin Sep 16 '12 at 05:41
3

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.

pllee
  • 1,212
  • 1
  • 9
  • 13
  • 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). – Mike M. Lin Jul 25 '11 at 03: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 '11 at 15:40
1

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.

Ryan Gibbons
  • 173
  • 1
  • 9
  • 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. – Mike M. Lin Jul 25 '11 at 03:28
  • I was thinking something along the lines of this http://stackoverflow.com/questions/6008908/use-django-template-tags-in-jquery-javascript then using JSON to replace the data after the initial load – Ryan Gibbons Jul 25 '11 at 04:10
0

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.

Alex
  • 361
  • 1
  • 2
  • 8