2

Brief Explanation

I have a form that is currently being loaded via AJAX. Ideally I would use the jQuery load() method, however, this request is slightly more complex as I also need to retrieve individual properties instead of just one large HTML chunk.

So, my script looks something like this (simplified):

$.ajax({
    url: url,
    dataType: 'json',
    success: function(data){
        // Set the width of the form
        $('.form').css({
            width: data.width
        })
        // Load the form into the popup
        $('.form').html(data.html);
    }
});

My Question

I am unsure whether including my HTML markup in the JSON response is such a good idea...

  1. Am I correct in thinking the above?
  2. Are there any other alternatives?
  3. Will I run into limits with large chunks of html stored in a JSON request?

Please Note

I am of course aware that I could build the markup using javascript, however, as there are several forms and all of which are quite large, it it much easier to build the form server side. Not to mention the fact it makes it much easier to debug/develop/maintain...

Furthermore, my site is currently VERY javascript heavy so I would like to minimise as much of the js needed as I possibly can.

Ben Carey
  • 16,540
  • 19
  • 87
  • 169
  • It is a string, so there is no issue including it. – epascarello Oct 02 '13 at 16:55
  • This looks perfectly fine.... there is no size related issues I'm aware of... one minor improvement I can suggest is chaining the jQuery so that the selector is not executed twice... like `$('.form').css(...).html(...)` – Arun P Johny Oct 02 '13 at 16:55
  • 2
    @jsmorph Who is Jason? – George Oct 02 '13 at 16:56
  • 2
    @jsmorph and do you know what `dataType` is? – epascarello Oct 02 '13 at 16:57
  • @epascarello Thanks for the input. I assume by your positive feedback that you would all use the same method in the same situation? – Ben Carey Oct 02 '13 at 16:57
  • @ArunPJohny Thanks for your feedback. I would of course chain the jQuery. I just mocked up that code for illustrative purposes, my actual code is substantially longer... :-) – Ben Carey Oct 02 '13 at 17:01

1 Answers1

4
  1. You can include the html in a json object, just make sure to escape all quotes and other special characters.
  2. You're probably better off with two requests, one that loads the html form and another that gets the data you need. This will make for cleaner, more maintainable code.
Ben Carey
  • 16,540
  • 19
  • 87
  • 169
Nicolas Straub
  • 3,381
  • 6
  • 21
  • 42
  • This actually crossed my mind, but the downside (obviously), is that there are 2 requests! – Ben Carey Oct 02 '13 at 16:59
  • 1
    @BenCarey -- While there's 2 requests, easily maintainable code goes a long way :) – tymeJV Oct 02 '13 at 17:01
  • @BenCarey true, but maintainable code trumps performance when performance isn't an issue, and you can easily refactor out the second request later on, if/when performance becomes an issue – Nicolas Straub Oct 02 '13 at 17:04
  • @NicolásStraubValdivieso Very true! Sadly performance is already an issue as my site is using a hell of a lot of javascript, resultantly, wherever possible, I am trying to minimise it :-) – Ben Carey Oct 02 '13 at 17:06
  • Watch our for size. You may get caught unexpectedly if the data returned from the server is too much and the server has limits imposed. For example: http://stackoverflow.com/questions/5902540/increasing-maximum-response-size-from-asp-net-page-method – Abhitalks Oct 02 '13 at 17:21