post（）中的jQuery函数不选择父函数的元素

Question

I have a javascript function, which should hide a user post on call, and then should change the button to call the function doing the opposite (unhide) and display a corresponding changed text.

function unhidePost(postid) {
  if( called ) return false;
  called = true;
  this.id="tempID";
  $.post("../scripts/requests.php", {
    visiblePost: 1,
    postId: postid,
  }, function(success){
    if (success) {
      $("#tempID").html("<i class=\"fas fa-eye-slash\"></i>&nbsp;Hide");
      $("#tempID").attr("onclick", "hidePost(" + postid + ")");
    }
  });
  reload();
}

The post request gets send, the .php then sends a query request and returns 1 or 0, depending on success. Then it should change the html with AJAX. First I tried this a selector, which selected the .php , so I gave the html element a temporary id ( this.id="tempID"; ) which works, but the selector inside the function ( "#tempID" ) can't find the element.

What is it trying to select then? And how can I get it to select in the original document?

Orig html (php), as requested:

function displayPost($entry, $class = "entry1"){
  $userid = $entry['userid'];
  $username = getUserName($userid);
  $created_at = DateTime::createFromFormat('Y-m-d H:i:s', $entry['created_at']);
  echo "<div class=\"".$class."\" onclick=\"postById(".$entry['id'].")\"><p class=\"info\">Posted by <a class=\"userlink\" onclick=\"userById(".$userid.")\">".$username."</a> on ".$created_at->format('j.n.Y')." at ".$created_at->format('H:i')."</p>";
  echo "<h2 class=\"title\">".$entry['title']."</h2>";
  echo $entry['content'];
  if(isset($_SESSION['userid']) && $entry['userid'] == $_SESSION['userid']){
    echo "<br><p class=\"info\">&nbsp;&nbsp;<a class=\"actionlink\" onclick=\"editPost(".$entry['id'].")\"><i class=\"far fa-edit\"></i>&nbsp;Edit</a></p>";
    echo "<p class=\"info\">&nbsp;&nbsp;<a class=\"actionlink\" onclick=\"deletePost(".$entry['id'].")\"><i class=\"far fa-trash-alt\"></i>&nbsp;Delete</a></p>";
    if(isset($entry['visible']) && $entry['visible'] == true){
      echo "<p class=\"info\">&nbsp;&nbsp;<a class=\"actionlink\" onclick=\"hidePost(".$entry['id'].")\"><i class=\"far fa-eye-slash\"></i>&nbsp;Hide</a></p>";
    } else {
      echo "<p class=\"info\">&nbsp;&nbsp;<a class=\"actionlink\" onclick=\"unhidePost(".$entry['id'].")\"><i class=\"far fa-eye\"></i>&nbsp;Unhide</a></p>";
    }
  }
  echo "</div>";
};

Answer 1

I hope you are aware concept of EventLoop inside the browser, javascript is single threaded and to make it async it uses the concept of EventLoop.

Firstly in your code, there is 'Post' which requests php and success you are trying to access some elements from the DOM.

There could be two possibilities :

1. DOM is not completely loaded.
2. Element does not exist in the DOM tree.

Please use a callback on completion/done of the 'POST' AJAX and write your functionality something like below code.

var successObj;
$.ajax({
    url: url,   
    dataType: 'json',
    type: POST,
    data: 'specify your input',
    sucess:function(success){
       successObj = success;
    }
}).done(function() {
   if(successObj) {
       //YOUR CODE
   }
});

Answer 2

Okay having taken a look at your code, I can see the issue you are having.

if(isset($entry['visible']) && $entry['visible'] == true)
{
    print '<p class="info">&nbsp;&nbsp;<a class="actionlink" onclick="hidePost('.$entry['id'].')"><i class="far fa-eye-slash"></i>&nbsp;Hide</a></p>';
}
else
{
    print '<p class="info">&nbsp;&nbsp;<a class="actionlink" onclick="unhidePost('.$entry['id'].')"><i class="far fa-eye"></i>&nbsp;Unhide</a></p>';
}

Having changed your code slightly, it would appear that nowhere do you set an ID within your parent HTML you wish to change. Therefore the jQuery selector looking for an ID "tempID" cannot be found.

I would change the PHP code to:

if(isset($entry['visible']) && $entry['visible'] == true)
{
    print '<p class="info">&nbsp;&nbsp;<a id="post-'.$entry['id'].'" class="actionlink" onclick="hidePost('.$entry['id'].')"><i class="far fa-eye-slash"></i>&nbsp;Hide</a></p>';
}
else
{
    print '<p class="info">&nbsp;&nbsp;<a  id="post-'.$entry['id'].'" class="actionlink" onclick="unhidePost('.$entry['id'].')"><i class="far fa-eye"></i>&nbsp;Unhide</a></p>';
}

And then change the jQuery code to:

$("#post-"+postid).html("<a class=\"fas fa-eye-slash\"></i>&nbsp;Hide");
$("#post-"+postid).attr("onclick", "hidePost(" + postid + ")");

That should work much better than it is currently.

Answer 3

Or you could simply change the jQuery, although I haven't tried it out, to:

function unhidePost(postid) {

  if( called ) return false;

  called = true;

  $.post("../scripts/requests.php", {
    visiblePost: 1,
    postId: postid,
  }, function(success){
    if (success) {
      $(this).html("<i class=\"fas fa-eye-slash\"></i>&nbsp;Hide");
      $(this).attr("onclick", "hidePost(" + postid + ")");
    }
  });
  reload();
}