CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
user6930268
user6930268

Reputation:

Getting multiple images from AJAX but Each is displaying after the image extension

I am passing multiple ids to fetch the image name but each image is displaying after the name of the image. please check below output.

<img src="images/profile/1496108249.jpgavatar.pngavatar.png" alt="">

I need output like this.

<img src="images/profile/1496108249.jp" alt="">
<img src="images/profile/avatar.png" alt="">
<img src="images/profile/avatar.png" alt="">

What I am trying to achieve. I am creating add to compare section. I have more than 100 users with a check box. If any user selects the check box one by one then it will call the AJAX with an id of the selected user and display the image of the user.

Example: I have selected user id 5 it will call the AJAX and display the image of the user. At the same time If I select user id 10 then it will call the AJAX and display the image name of user 5 as well as 10. Same as If I select use id 100 and Pass to AJAX and display the image name. but it will display the Image 5, 10, 100.

So I just want to know what logic should I use it?

compare_process.php

This will display the image name of selected users

$_SESSION['compare_user']=$_POST['users'];
$sql_compare='SELECT * FROM request WHERE Id IN (' .( is_array( $_SESSION['compare_user'] ) ? implode( ',', $_SESSION['compare_user'] ) : $_SESSION['compare_user'] ).')';
$compare_query=$conn->query($sql_compare);
if ($compare_query->num_rows > 0) {
    while($userdata12=$compare_query->fetch_assoc()){ 
        $compare_pic=$userdata12['profile_pic'];
        echo $compare_pic;
    }
}

exit();

Ajax

It will get the selected id and pass to PHP

$(document).ready(function() {
  arr = [];
  $("[type=checkbox]").click(function() {
    arr.push($(this).val());
    $.ajax({
      type: "POST",
      url: "includes/compare_process.php",
      data: 'users=' + arr,
      success: function(msg) {
        $("#pics_name").html("<img src='images/profile/" + msg + "' alt='' />");
      },
      error: function() {
        alert("failure");
      }
    });
  });
});

HTML

<input class="check-hidden" type="checkbox" value="<?php echo $compare_u;?>" name="compare_peer" id="compare_peer" />

Upvotes: 1

Views: 573

Answers (2)

Barmar
Barmar

Reputation: 782785

You should return a JSON array from PHP:

$_SESSION['compare_user']=$_POST['users'];
$sql_compare='SELECT * FROM request WHERE Id IN (' .( is_array( $_SESSION['compare_user'] ) ? implode( ',', $_SESSION['compare_user'] ) : $_SESSION['compare_user'] ).')';
$compare_query=$conn->query($sql_compare);
$compare_pic = array();
if ($compare_query->num_rows > 0) {
    while($userdata12=$compare_query->fetch_assoc()){ 
        $compare_pic[]=$userdata12['profile_pic'];
    }
}
echo json_encode($compare_pic);    
exit();

then loop through the array in Javascript:

$(document).ready(function() {
  arr = [];
  $("[type=checkbox]").click(function() {
    if (this.checked) {
        arr.push($(this).val());
    } else { // Remove value if unchecked
        var index = arr.indexOf($(this).val());
        if (index != -1) {
            arr.splice(index, 1);
        }
    }
    $.ajax({
      type: "POST",
      url: "includes/compare_process.php",
      data: { users: arr },
      dataType: 'json',
      success: function(msg) {
        $("#pics_name").empty();
        $.each(msg, function() {
          $("#pics_name").append("<img src='images/profile/" + this + "' alt='' />");
        });
      },
      error: function() {
        alert("failure");
      }
    });
  });
});

Upvotes: 3

Sbrn
Sbrn

Reputation: 114

  1. You could loop over what checkboxes are checked with $('input[type=checkbox]:checked') Loop over those, and send that to the PHP script.

  2. You could do it per checkbox, and 'append' it with JS to some element. So instead of the .html(<img>) .append(<img>) in the success statement of the ajax call.

Upvotes: 0

Related Questions