CODEWITHSUNDEEP
jqueryajaxjson
Loxzibit
Loxzibit

Reputation: 133

Create Div using JQuery and JSON data

I have some JSON data below and I would like to create an HTML div using jQuery with some of the data from the AJAX JSON response. The div will be created inside the success code:

<script type="text/javascript">
    $(document).ready(function() {
        $("#add-notes-form").submit(function(e){
            e.preventDefault();
            $.ajax({
                 type: 'POST',
                 url: '<?php the_permalink(); ?>',
                 dataType: 'json',
                 data: $("#add-notes-form").serialize(),
                 success: function(result){
                     $("#tab7 form").after("Code needs to go here");
                 }
             });
         });
    });
</script>

JSON Data:

{"comment_ID":"2",
 "comment_post_ID":"396",
 "comment_author":"Me",
 "comment_author_email":"[email protected]",
 "comment_author_url":"http:\//gmail.com",
 "comment_author_IP":"",
 "comment_date":"2012-09-17 09:21:19",
 "comment_date_gmt":"2012-09-17 16:21:19",
 "comment_content":"This is a killer Note. 4",
 "comment_karma":"0",
 "comment_approved":"1",
 "comment_agent":"",
 "comment_type":"note",
 "comment_parent":"0",
 "user_id":"1"}

The HTML I'm trying to create:

<div id="comment-2" class="binder-user-note">
    <a href="?delete=2" id="close-note"></a>
    <h1>I added this on: Monday 17th September 2012</h1>
    <p>This is a killer Note. 2</p>
    <a href="edit?2" id="editnote"></a>
</div>

What I have so far:

<div id="comment-'+response.comment_ID+'" class="binder-user-note">
    <a href="?delete='+response.comment_ID+'" id="close-note"></a>
     <h1>I added this on: '+response.comment_date+'</h1>
     <p>'+response.comment_content+'</p>
     <a href="edit?'+response.comment_ID+'" id="editnote"></a>
</div>

response is the object.

Upvotes: 3

Views: 7472

Answers (2)

Si Griffiths
Si Griffiths

Reputation: 333

I always find code like that really messy. Personally I prefer to do something like this, ymmv :

success:function(result){
    var html = "<div id='comment-"+result.comment_ID+"' class='binder-user-note'>" +
               "<a href='?delete="+result.comment_ID+"' id='close-note'></a>" +
               "<h1>I added this on: "+result.comment_date+"</h1>" +
               "<p>"+result.comment_content+"</p>" +
               "<a href='edit?"+result.comment_ID+"' id='editnote'></a>" +
               "</div>";

    $("#tab7 form").after(html);
    $('#add-notes-form textarea').attr('value','');
}

Enjoy,

Si

Upvotes: 4

Vytalyi
Vytalyi

Reputation: 1695

success: function(result){
     var jSon = result.Data;
     var div = $("<div></div>")
           .attr("id", "comment" + jSon.comment_ID)
           .addClass("binder-user-note");
     var a = $("<a></a>")
           .attr("href", "?delete=" + jSon.comment_ID)
           .attr("id", "close-note");
     $("<h1></h1>").text("I added this on: " + jSon.comment_date)
           .appendTo(a);
     $("<p></p>").text(jSon.comment_content)
           .appendTo(a);
     $("<a></a>")
           .attr("href", "edit?" + jSon.comment_ID)
           .attr("id", "editnote")
           .appendTo(a);
     a.appendTo(div)
     $("#tab7 form").after(div);
}

Upvotes: 5

Related Questions