CODEWITHSUNDEEP
javascriptjqueryajaxjson
dave
dave

Reputation: 1009

Getting data wtith Ajax (Placing inside div)

I'm trying to add my data into a div, and its not working. The php is fine but I need a fine eye to see if they can spot any errors or can suggest any work arounds to help figure out why its not working.

I've tried to fix it for the past 5 hours or so and its racking my brains.

The user comments on a status like post and its suppose to add it to the div. Just like my main status does. The ajax for the main status is almost identical to the comment ajax below..yet the comment ahax isn't playing nice and is not inserting any data at all. 

<script>
$(document).ready(function(){
    $("form#mycommentform").submit(function() {
        var streamidcontent = $('#streamidcontent').val();
        var contents = $(this).children('#contents').val();

        $.ajax({
            type: "POST",
            url: "comment_add.php",
            cache: false,
            dataType: "json",
            data: { streamidcontent: streamidcontent, contents: contents}, 
            success: function(data){  
                $('#containerid').html('<div class="stream_comment_holder" style="display:none;"
                id="comment_holder_'+data['comment_streamitem']+'"><div
                id="comment_list_'+data['comment_streamitem']+'"><div
                id="tgy"></div><div class="stream_comment"
                id="comment_'+data['comment_id']+'" style="margin-top:0px;"><table
                width=100%><tr><td valign=top width=30px><img
                class="stream_profileimage"
                style="border:none;padding:0px;display:inline;" border=\"0\"
                src=\"imgs/cropped'+data['id']+'.jpg\"
                onerror="this.src=\"img/no_profile_img.jpeg\"" width=\"40\"
                height=\"40\" ></a><td valign=top align=left><a
                href="/profile.php?username='+data['username']+'">'+data['first']+'</a><div
                class="commentholder">'+data['first']+'</div><br/><div
                id="commentactivitycontainer"></div></div></table></div></div><div
                class="form"><form id="mycommentform" method="POST" 
                class="form_statusinput"><input type="hidden"  name="streamidcontent"
                id="streamidcontent" value="'+data['comment_streamitem']+'"><input
                type="text" name"contents" id="contents" placeholder="Say something"
                autocomplete="off"><input type="submit" id="button"
                value="Feed"></form></div><div class="stream_comment_holder"
                style="display:;"><div class="like_name"><b><a
                href="profile.php?username='+data['username']+'">You Like
                This</a></b></div></div>');
            }
        });
        return false
    });
});
</script>

ERROR FOUND

success: function (data) {
    alert("SUCCESS!!!");
},
error: function (xhr, ajaxOptions, thrownError) {
    alert(xhr.statusText);
    alert(xhr.status);
    alert(thrownError);
}

OK
200
SyntaxError.JSONparse:Unexpectedcharacter

JSON

$json = array();
$check = "SELECT comment_id, comment_datetime, comment_streamitem FROM streamdata_comments WHERE comment_streamitem=".$_POST['streamidcontent']."";
$check1 = mysqli_query($mysqli,$check);
$resultArr = mysqli_fetch_array($check1);
$json['comment_id'] = $resultArr['comment_id'];
$json['comment_streamitem'] = $resultArr['comment_streamitem'];
mysqli_free_result($check1);

$check = "SELECT * FROM users WHERE id=".$_SESSION['id']."";
$check1 = mysqli_query($mysqli,$check);
$resultArr = mysqli_fetch_array($check1);
$json['username'] = $resultArr['username'];
$json['id'] = $resultArr['id'];
$json['first'] = $resultArr['first'];
$json['middle'] = $resultArr['middle'];
$json['last'] = $resultArr['last'];
mysqli_free_result($check1);

echo json_encode($json);

Upvotes: 0

Views: 443

Answers (2)

spinners
spinners

Reputation: 2689

I would recommend using some sort of templating system to do all the hard work assembling your content.

Take a look into Create a makeshift Javascript templating or John Resig's solution.

Building that string of mark-up inside html() is a little crude.

You also have an inline style of display:none on the first div, so you won't see it.

Have you tried stripping the function down just to see if anything gets populated

success: function(data){  
   $('#containerid').html('blurb');
}

Upvotes: 1

nnnnnn
nnnnnn

Reputation: 150070

I don't know if this is the only problem, but where you're trying to embed quotation marks inside the html attributes that you're creating, e.g.:

'onerror="this.src=\"img/no_profile_img.jpeg\""'

It will produce this invalid string:

onerror="this.src="img/no_profile_img.jpeg""

You should embed single quotes instead, like this:

'onerror="this.src=\'img/no_profile_img.jpeg\'"'

Which would produce:

onerror="this.src='img/no_profile_img.jpeg'"

Also, on about the sixth last line you have an attribute missing an = sign:

name"contents"

And the outer-most div you are inserting has style="display:none;".

Upvotes: 0

Related Questions