The River Scene Music The River Scene Music - 4 months ago 8
Ajax Question

Multiple sets of data insert at one call into separate divs by unique id AJAX

Currently when asking the server for data, when one single set is sent back like so

{"num":1,"notification_id":"818","notification_content":
"Lucy Botham posted a status on your wall","notification_throughurl"}


the div is inserted.

But lets say there's two sets with different notification id's like so

{"num":1,"notification_id":"818","notification_content":
"Lucy Botham posted a status on your wall","notification_throughurl"}

{"num":1,"notification_id":"819","notification_content":
"Lucy Botham posted a status on your wall","notification_throughurl"}


Nothing happens

So I'll cut the code down as to show and example of what I have

success: function(response){
if(response.notification_id > notification_id){

$("#notif_ui"+ notification_id).prepend('
<div class="notif_text"><div id="notif_actual_text-'+response['notification_id']+'"
class="notif_actual_text"><img border=\"1\" src=\"userimages/cropped'+response
['notification_triggeredby']+'.jpg\"
onerror=this.src=\"userimages/no_profile_img.jpeg\"
width=\"40\" height=\"40\" ><br /></div></div>');
i = parseInt($("#mes").text()); $("#mes").text((i+response.num));
}


I was toying with the idea of maybe using

$.each(response, function (i, val)


But I'm still unsure.

EDIT
Exact response how it shows

{"num":1,"notification_id":"823","notification_content":"Lucy Botham posted a status on your wall","notification_throughurl"
:"singlepoststreamitem.php?streamitem_id=703","notification_triggeredby":"85","notification_status":"1"
,"notification_time":"2015-11-08 04:16:26"}{"num":1,"notification_id":"824","notification_content":"Lucy
Botham posted a status on your wall","notification_throughurl":"singlepoststreamitem.php?streamitem_id
=704","notification_triggeredby":"85","notification_status":"1","notification_time":"2015-11-08 04:16
:27"}


AND MY WHILE LOOP

while($row = mysqli_fetch_assoc($com)){
if($row['notification_status']==1){
$num = mysqli_num_rows($com);

if($num){
$json['num'] = 1;
}else{
$json['num'] = 0;
}
$json['notification_id'] = $row['notification_id'];
$json['notification_content'] = $row['notification_content'];
$json['notification_throughurl'] = $row['notification_throughurl'];
$json['notification_triggeredby'] = $row['notification_triggeredby'];
$json['notification_status'] = $row['notification_status'];
$json['notification_time'] = $row['notification_time'];



echo json_encode($json);
}}

Answer

First you need to build an array of notifications, rather than a single one:

<?php
$json = array(
    'notifications' => array()
);

while ($row = mysqli_fetch_assoc($com)) {
    if ($row['notification_status'] == 1) {
        $num = mysqli_num_rows($com);

        $notification = array();
        if ($num) {
            $notification['num'] = 1;
        } else {
            $notification['num'] = 0;
        }
        $notification['notification_id'] = $row['notification_id'];
        $notification['notification_content'] = $row['notification_content'];
        $notification['notification_throughurl'] = $row['notification_throughurl'];
        $notification['notification_triggeredby'] = $row['notification_triggeredby'];
        $notification['notification_status'] = $row['notification_status'];
        $notification['notification_time'] = $row['notification_time'];
        $json['notifications'][] = $notification;
    }
}

echo json_encode($json);
?>

Then you can access the notifications array from JavaScript:

        success: function(response) {

            $.each(response.notifications, function(i, notification) {

                if (notification.notification_id > notification_id) {

                    $("#notif_ui" + notification_id).prepend('<div class="notif_text"><div id="notif_actual_text-' + notification['notification_id'] + '" class="notif_actual_text"><img border=\"1\" src=\"userimages/cropped' + notification['notification_triggeredby'] + '.jpg\" onerror=this.src=\"userimages/no_profile_img.jpeg\" width=\"40\" height=\"40\" ><br /></div></div>');
                    i = parseInt($("#mes").text());
                    $("#mes").text((i + response.num));
                }
            })
        }

Note, completely untested, but hopefully you can see the difference!

Comments