AJAX Call returns JSON, how to render properly formatted data


Tags: jquery,css,json,html5

Problem :

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?



Solution :

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")

    CSS Howto..

    How to center a span in a div

    How do I add background color to just the width of centred text?

    How can I show entered password using tooltip on input type=password in bootstrap?

    How to add code area css style to HTML

    How would I create global scripts within HTML Pages so I don't need to constantly change the location?

    How do I make the whole area of a list item in my navigation bar, clickable as a link?

    How can I invoke an “AktionLink” in an “onClick” event in a “div”?

    How should I override hover style of a div in an anchor tag?

    How can I have an image float next to a centered div?

    How can I make a div 100% of the browser window height, but with a top and bottom margin?

    How to put a div at left or right in pure CSS?

    How can I override an inline style with an external css?

    CSS: show only the last x items in a list

    How to make a Facebook-image-style web design using CSS3?

    How to style a selected radio button AND include space as clickable?

    How do I prevent a link tag from adding extra padding below an image?

    How to assign speed parameter to callback functions

    How to format a long
     HTML block suitable for width limited device such as iPhone

    How can I get good errors from the LESS compiler when integrated in Symfony 2

    How do I make a row of 5 responsive using percentage widths?

    Z-stacking CSS 3 Flex boxes : how to overlay DIVs that are flexbox items?

    How do I keep the 'hover' effect while using a Jquery color change effect while scrolling

    HTML/CSS- how to align part of a cell to the left, and part to the right?

    how to Resize Quick TIme Player to the size of an HTML/CSS DIV

    specifiy UL properties for nested class (sociallinks) but still it is working as a property of parent class (header) how can i solve it?

    CSS Positioning - How can you fix components in place?

    How to display “Classic” fractions in CSS / Javascript

    How to make this HTML change work? [closed]

    How to make a graphic image responsive in css

    How to convert all color code #XXYYZZ to shorter 3 character version #XYZ of whole css file?