Predefined JSON parsing: AJAX: Magic JavaScript

Magic can parse a returned JSON object if you want to do more advanced things with the returned data

Usage

Add data-mjf_ajax_call_on_success="magic_json" to your tag along with the normal Magic JS AJAX attributes.

Your returned JSON object should be structured using the example below.
[{ "update_id" : "ELEMENT_1" ,"update_html" : "HTML_STRING_1" ,"update_callback" : "YOUR_FUNCTION_1()" ,"update_method" : "append" },{ "update_id" : "ELEMENT_2" ,"update_html" : "HTML_STRING_2" ,"update_callback" : "YOUR_FUNCTION_2()" ,"update_method" : "prepend" },{ "update_id" : "ELEMENT_3" ,"update_html" : "HTML_STRING_3" ,"update_callback" : "YOUR_FUNCTION_3()" ,"update_method" : "replace" }]

Definitions

update_id is an HTML element.
update_html is the HTML string to populate the above element with.
update_method is how the HTML string is inserted. Available values are append, prepend and replace. If left out, it defaults to replace.
update_callback is a JavaScript function to execute.
None are required. However, update_id and update_html must both exist if you want to use them.

Example

Get me a JSON object and then populate the three <td> tags below with the returned content.

AJAX JSON 1 Content	AJAX JSON 2 Content	AJAX JSON 3 Content	AJAX JSON 4 Content
Red	Blue	Green

The last JSON item will also update this <p> tag.

The HTML
<p><a href="_ajax_json.php" data-mjf="ajax_click|return_false" data-mjf_ajax_url="_ajax_json.php" data-mjf_ajax_call_on_success="magic_json" id="ajax_json_link">Get me a JSON object</a></p> <table> <tr> <th>AJAX JSON 1 Content</th> <th>AJAX JSON 2 Content</th> <th>AJAX JSON 3 Content</th> </tr> <tr> <td id="ajax_json_1_cont">Red</td> <td id="ajax_json_2_cont">Blue</td> <td><input type="text" name="ajax_json_3_cont" value="" id="ajax_json_3_cont"></td> </tr> </table>

Returned JSON
[{ "update_id" : "ajax_json_1_cont" ,"update_html" : "<em>First item's returned HTML<\/em><br><span class=\"helper_text\">replaced current content<\/span><br>12:27:06 pm" },{ "update_id" : "ajax_json_2_cont" ,"update_html" : "<p><code>Second item's returned HTML<\/code><br><span class=\"helper_text\">appended current content<\/span><\/p><p>12:27:06 pm<\/p>" ,"update_method" : "append" },{ "update_id" : "ajax_json_3_cont" ,"update_html" : "Third item's returned HTML<br><span class=\"helper_text\">prepended current content<\/span><br>12:27:06 pm" ,"update_method" : "prepend" },{ "update_id" : "ajax_json_4_cont" ,"update_html" : "12:27:06 pm" ,"update_callback" : "$m.tag.html(\"ajax_json_4_cont_p\", \"I've been updated at 12:27:06 pm -- woo-hoo!\")" }]

Notes

The JSON object will be evaluated based on the order of the objects.

This applies to any type of Magic AJAX request. AJAX On Click was used simply as an example.