Question

I am trying to figure out how to format JSON in a better way that I am.

I am using form of javascript like this,

<script type="text/javascript">
$(document).ready(function(e) {   
    $.ajax({
        url: 'http://www.domain.ca/classes/brain.php?a=select',
        crossDomain: true,
        type: 'GET',
        dataType: 'json',

        beforeSend: function() {
        },

        success: function(data, textStatus, jqXHR) {
            $('.pageLoaded').html(data.name +' <br />'+ data.email);
        },

        error: function(responseText) {
            alert('Error: '+ responseText.toString());  
        }
    });
});
</script>
<div data-role="content" class="pageLoaded"></div>

But I would like to be able to have a better way to format how the display looks. Perhaps calling a template file?

I can only use HTML + CSS + Javascript… is there any possibilities, or do I have to do what I am doing here?

Answer 1

For simple html as name + <LINE BREAK> + email, what you are already doing shuold be fine.

If the HTML gets complex then jQuery.template is your friend.

For the above situation an example would be:

1) Add a script tag with the html layout you want to generate:

<script id="nameTemplate" type="text/x-jquery-tmpl">
   ${name} 
   <br />
   ${email}
</script>

2) Change your ajax success handler to:

 $( "#nameTemplate" ).tmpl( data).appendTo(".pageLoaded")