How can I handle elements with class imported from mySQL with PHP?-CodePudding

I am newbie in PHP and I am trying to create a reaction system like Facebook but I'm stuck on how do I select an element whose class() contains the id of the current post. To be more clear the button of the reactions has a class which is equal to this: . I use two different files to read the posts and handle the reactions. In the first file I use AJAX to read the posts from mySQL and in the second I am calling AJAX again but now I am reading only the IDs of the posts in order to trigger the reactions dialog.

I thought that it might help if I use AJAX and I tried the following code: PHP

<?php
// connect to the database
include "conn.php";
//session start
session_start();
//retrieve user
if(isset($_SESSION["userId"]) && isset($_SESSION["username"]) && isset($_SESSION["profile_image"]) && isset($_SESSION["first_name"]) && isset($_SESSION["last_name"])) {
    $result = mysqli_query($conn, "SELECT ID FROM posts GROUP BY(ID)");

    $data = array();
    while ($row = mysqli_fetch_object($result))
    {
        array_push($data, $row);
    }
    echo json_encode($data);
    exit();
}else {
    echo "It doesn't work";
}
?>

And Javascript

var ajax = new XMLHttpRequest();

var method = "GET";

var url = "../new/php/handle_posts_details.php";

var asynchronous = true

ajax.open(method, url, asynchronous)

//sending ajax request
ajax.send()


//receiving response from php
ajax.onreadystatechange = function() {
  
  if (this.readyState == 4 && this.status == 200) {
  
      //converting JSON to array
      var data = JSON.parse(this.responseText);
      //html value for posts
      for(var i = 0; i < data.length; i  ) {
        var ID = data[i].ID;

        //Open and send reactions
      document.querySelector('.reaction-toggle--' data[i].ID '').addEventListener("mouseenter",function(e){
        document.querySelector('.container').style.display = "block";
      });
      document.querySelector('.reaction-toggle--' data[i].ID '').addEventListener("mouseleave",function(e){
        document.querySelector('.container').style.display = "none";
      });
      document.querySelector('.reaction-toggle--' data[i].ID '').addEventListener("mouseenter",function(e){
        document.querySelector('.container').style.display = "block";
      });
      document.querySelector('.reaction-toggle--' data[i].ID '').addEventListener("mouseleave",function(e){
        document.querySelector('.container').style.display = "none";
      });

      //Send Reactions
      }
      console.log(data);
  }
}

The posts are read perfectly but the problem occurs when it comes to the reactions. The error in above code is that it shows me: querySelector is null (But the postId exists). Is there a way I can solve this problem?

EDIT: Because the html that is generated is too many lines I am adding just the reaction button. Here it is:

<a id="default-like-'.$ID.'" href="#/"  style="display: none;">
              <span>Like</span>
              </a>

EDIT 2: This is a sample of the json because there are also too many data. Here it is: [{"ID":"36"},{"ID":"54"},{"ID":"55"},{"ID":"57"},{"ID":"58"},{"ID":"60"}]

CodePudding user response：

It seems like you are trying to render PHP in your view; but I would suggest you consider using GET requests to pull the data you need, and then rendering it using Javascript.

If you use your PHP code to generate the reactions you need, you can actually iterate through each one and generate it on your front-end. This would be a lot cleaner.

First of all, try to turn your identifier into a variable.

let data_id = data[i].ID;
let selector = '[data-id="'   data_id   '"]';

Once the selector is set, you can use this in future, and as opposed to changing multiple lines of code to update the selector, you can change one.

Now we can use this code to generate lots of reactions.

You will need a div to contain these reactions.

<div id='parent-container'></div>

And we can start loading this div up using the existing loop.

let post_obj = `<a id="default-like" href="#/"  style="display: none;" data-id="${data_id}">
              <span>Like</span>
              </a>`;


// Wait for element to render 
setTimeout(() => {
    let element = document.querySelector(selector);
    element.innerHTML  = post_obj;
}, 500);

Once this object is loaded in, you can assign event listeners to it:

 document.querySelector(selector).addEventListener("mouseenter",function(e){
    document.querySelector('.container').style.display = "block";
  });
  document.querySelector(selector).addEventListener("mouseleave",function(e){
    document.querySelector('.container').style.display = "none";
  });
  document.querySelector(selector).addEventListener("mouseenter",function(e){
    document.querySelector('.container').style.display = "block";
  });
  document.querySelector(selector).addEventListener("mouseleave",function(e){
    document.querySelector('.container').style.display = "none";
  });

Notice how using one variable is a lot cleaner.