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

Question

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);
}}

Not sure what your actual question is, but I do think its good practice to use document.createElement instead of just injecting elements onto the page. see http://stackoverflow.com/questions/2946656/advantages-of-createelement-over-innerhtml — kurt, Nov 08 '15 at 04:11
It really depends on how the multiple notifications are received. Most likely the json would contain an array of objects, so $.each would be appropriate. The json you've posted would not be valid as it is. If you can show the exact response, we can give an exact answer. — rjdown, Nov 08 '15 at 04:12
I have a notification system. when another user posts to my wall once the data caught on my side goes into the notification fine. But say that same user posts twice on my wall and I get two sets of data passed back, only one set is posted into my notifications, not two, three four or however many are passed back in the one call. — The River Scene Music, Nov 08 '15 at 04:14
Edited my post of the exact response the way it shows in firebug! They don''t have a key and maybe this is also a php issue which I can also provide code for. @rjdown — The River Scene Music, Nov 08 '15 at 04:18
Ahh I see, yes that's not valid json. You'll need to change the PHP too. I'll post an answer shortly. — rjdown, Nov 08 '15 at 04:21
Thanks ever so much @rjdown your patience, help and your knowledge is much appreciated. — The River Scene Music, Nov 08 '15 at 04:23

score 1 · Answer 1 · answered Nov 08 '15 at 04:28

Your php could be changed to

// you can just the the number of rows once outside the while loop
$num = mysqli_num_rows($com);
if($num){
    $jsonNum = 1;
}else{
    $jsonNum = 0;
}
while($row = mysqli_fetch_assoc($com)){
    if($row['notification_status']==1){ // this would be unnecessary if you add it as a where conditional to your sql query
        // add the num to the array to match your current data structure
        $row['num'] = $jsonNum;
        $json[] = $row;
    }
}
echo json_encode($json);

rjdown · Accepted Answer · 2015-11-08T05:22:42.560

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!

Woops moved a ) around a bit, try that. Sorry flying blind, I don't have a dev environment here! — rjdown, Nov 08 '15 at 05:23
If you still have problems, I suggest just having a look at trying to put your current code into the $.each loop. The only real change is that the json has a "notificaions" property, which is an array of notification objects. — rjdown, Nov 08 '15 at 05:31
A MAHOOOSIVE thank you rjdown. Its now working fabulously. Thank you for your time and effort. You deserve your ratings and more. — The River Scene Music, Nov 08 '15 at 05:38

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

2 Answers2