Ajax in while loop

Question

I'm building push notifications for my messaging system and have a weird bug.

I'm using an ajax to get recent messages. In my PHP script I have a while loop where I go through my results. So each <li> is a 'recent message'.

In my mind it would be simple. I put an ajax function in the <li> and as it iterates through the while loop it will send the values received from the iteration. Below is my PHP script.

$output .= "
  <li>
    <img src='$profilephoto' class='rm_pp' alt=''>
      <div class='imNotification'>
       <script>
         function getIMNotification() {
           $.ajax({
             url: 'getIMNotification.php',
             method: 'POST',
             data:{user2:'$id'},
             success:function(data) {
               $('.imNotification').html(data);
             }
           });
         }

         getIMNotification();
       </script>
     </div>
  </li>
";

For example, in my getIMNotification.php if i just echo the user2 value sent from my AJAX, it will echo the same value for each result. But, since it's in the while loop, shouldn't it receive new values each iteration?

Is it because of the function being called? The one value being echoed is the last id in the loop. Any logic as to why it's doing that?

A function can only have one definition. If you define the function in a loop, you'll only get the last version when the function is called. — Barmar
– Barmar, Commented Dec 22, 2017 at 18:52
@Barmar Tru, but, he's calling it immediately, so that's hardly a problem. It might as well just not be a function. — user400654
– user400654, Commented Dec 22, 2017 at 18:53
$('.imNotification').html(data); of course updates ALL .imNotification elements, not just the one nearby the script tag. — user400654
– user400654, Commented Dec 22, 2017 at 18:54
ah i figured so..and the reason for the function in the first place was so that when they click on the image i open the chat and setTimeout(theFunction, 0) so it resets — Ryne
– Ryne, Commented Dec 22, 2017 at 18:55
You need one ajax function, not a whole bunch in a loop. You need an event that will use $(this) to act on the current element by activating only one getIMNotification() function. You would like feed in this or $(this) into the function. — Rasclatt
– Rasclatt, Commented Dec 22, 2017 at 18:57

Barmar · Accepted Answer · 2017-12-22 18:59:59Z

3

You shouldn't redefine the function in the loop. You should define the function once, and have it take the ID as a parameter. Then you can call it separately for each LI.

You also need to put the result in the specific DIV for that message. .imNotification selects all the DIVs with that class. You can use $id in the ID of the DIV to target each one.

The function doesn't need to come from AJAX, you can just put this in the original HTML:

function getIMNotification(id, target) {
  $.ajax({
    url: 'getIMNotification.php',
    method: 'POST',
    data: {
      user2: id
    },
    success: function(data) {
      $('#' + target).html(data);
    }
  });
}

Then the PHP would be:

$output .= "
  <li>
    <img src='$profilephoto' class='rm_pp' alt=''>
      <div class='imNotification' id='imNotification-$id'>
       <script>
         getIMNotification('$id', 'imNotification-$id');
       </script>
     </div>
  </li>
";

answered Dec 22, 2017 at 18:59

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ryne Over a year ago

yes that works perfect! so I tried something similar before i set id variable as a param and passed in the loop similar to your answer but it was setting the id and target on the div that made the selector load individually! Thank you so much for your time and explanation!

Collectives™ on Stack Overflow

Ajax in while loop

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related