Home/ Questions/Q 4273720
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T07:45:03+00:00

I am learning how to use AJAX and PHP json_encode() . I am returning

  • 0

I am learning how to use AJAX and PHP json_encode(). I am returning an array using json_encode() as an AJAX POST response:

$.post("<?php echo base_url();?>index.php/post/post_insert_ajax/",{
        text: post_wall, type:type, entity_id:entity_id, poster_id:poster_id
    },
    function (data){
        var postObj = $.evalJSON(data);                                 
        $("ul#post_already").prepend(//something);
        $("ul#post_already li:first").slideDown("slow");
        $('#post_wall').val("");   
    });

i am using jquery.json.js to explode the array returned, and i wanted to display this block of html into $("ul#post_already")

<a id='"+postObj.post_id+"' href='board/?p="+postObj.post_id+"' >
    "+postObj.post_text+"
</a>
Created on: "+postObj.created_timestamp+"<a class='showCommentBox' id='"+postObj.post_id"' href='#' >Comment</a>                                               
<div id='commentContainer-"+postObj.post_id+"' class='commentContainer' style='display:none;'>
                <form class='submit_comment' id='"+postObj.post_id+"' action='#'>
                    <textarea name='text' id='commentText-"+postObj.post_id+"' class='commentText'></textarea>
                    <input type='submit' name='submit' value='Post Comment' id='"postObj.post_id"' class='submit_comment' />
                    <input type='hidden' name='user_id' id='user_id' value='"+postObj.user_id+"' />
                </form>
            </div>
<ul id='comment_post"+postObj.post_id+"'></ul></li>

I have tried to put all of these into .prepend(), but it seems not to be working that way, what should I do to achieve this? Thank you very much.

UPDATE: it turn out that i missed the concatenate symbol on few of the code, so in the mean time my solution is this:

block = "<b>"+user_name+"</b> posted on ";
block += "<br/><a id='"+postObj.post_id+"' href='<?php echo base_url();?>board/?p="+postObj.post_id+"' >"+postObj.post_text+"</a>";
block += "<br />Created on: "+postObj.created_timestamp+"&nbsp;<a class='showCommentBox' id='"+postObj.post_id+"' href='#' >Comment</a>";
block += "<div id='commentContainer-"+postObj.post_id+"' class='commentContainer' style='display:none;'>";
block += "<form class='submit_comment' id='"+postObj.post_id+"' action='#'><textarea name='text' id='commentText-"+postObj.post_id+"' class='commentText'></textarea>";
block += "<input type='submit' name='submit' value='Post Comment' id='"+postObj.post_id+"' class='submit_comment' />";
block += "<input type='hidden' name='user_id' id='user_id' value='"+postObj.user_id+"' />";
block += "</form></div><ul id='comment_post"+postObj.post_id+"'></ul></li>";

and on success i called the HTML:

$("ul#post_already").prepend(HTML);

it works for now, but i still see this as messy lines, not a best practice, is there any workaround to do this ???

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Personally, I like to use the $.parseJSON() method to convert a JSON array into data JavaScript can use. So, back to the answer, say we have an array like this from the server, before it is JSON encoded:

    $array = array('one' => '1', 'two' => '2', 'three' => '3', 'four' => '4');

    You can use jQuery to fetch the data then iterate through the data like this:

    var HTML;
var returnedData = $.parseJSON(data);

$.each(returnedData, function(key, value) {
  HTML += '<li>' + value + '</li>';
});

$('.unorderedList').append(HTML);

    So, that is a basic way to get data from the server, and attach it to a list. Of course, you can change the generated output, or even complicate the JSON array for a more fancy output.

    Hope that helps,
    spryno724

    • 0