Question

I am experimenting with a modular AJAX design where a script is returned to process and display payload. I currently have the following JSON response working but I would like some advice in terms of structuring the application to support this in a more maintainable way.

{
    payload: "<div class=\"test\">Something</div>",
    load: "jQuery(this.payload).appendTo('body')"
}

To generate the “load” script I have considered:

• Pass all dynamic variables via this and loading a fixed JavaScript from server

  jQuery(this.payload).appendTo(this.appendTo)
  

• Replace special templates within JavaScript with dynamic content:

  jQuery(this.payload).appendTo('{{APPENDTO}}')
  

• Or perhaps there would be a better methodology?

Answer 1

Before I have had the following structure;

[
    {
        args: ["<div class=\"test\">Something</div>"],
        method: "appendTo",
        selector: "body"
    },
    ...
]

Which you could then do as;

var foo = JSON.parse(theJSON);

for (var i=0;i<foo.length;i++) {
    var curr = foo[i];
    jQuery.fn[method].apply($(curr.selector), curr.args);
}

This supports the most common DOM methods, but can also support remove(), empty() etc;

[
    {
        args: [],
        method: "remove",
        selector: ".someElement"
    },
    ...
]

If this is still too stringent, you should look at skipping JSON completely, and just inserting the response into your page as a <script> tag.