Блог

У меня есть функция javascript, которая должна скрывать сообщение пользователя при вызове, а затем должна изменить кнопку, чтобы вызвать функцию, выполняющую противоположное (не показывать) и отображать соответствующий измененный текст.

 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>amp;nbsp;Hide");
      $("#tempID").attr("onclick", "hidePost("   postid   ")");
    }
  });
  reload();
}
  

Запрос post получает отправку, .php затем отправляет запрос запроса и возвращает 1 или 0, в зависимости от успеха. Затем он должен изменить html с помощью AJAX. Сначала я попробовал this селектор, который выбрал .php , поэтому я присвоил html-элементу временный идентификатор ( this.id="tempID"; ), который работает, но селектор внутри функции ( "#tempID" ) не может найти элемент.

Что же тогда он пытается выбрать? И как я могу заставить его выбрать в исходном документе?

Исходный html (php), как и было запрошено:

 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']) amp;amp; $entry['userid'] == $_SESSION['userid']){
    echo "<br><p class="info">amp;nbsp;amp;nbsp;<a class="actionlink" onclick="editPost(".$entry['id'].")"><i class="far fa-edit"></i>amp;nbsp;Edit</a></p>";
    echo "<p class="info">amp;nbsp;amp;nbsp;<a class="actionlink" onclick="deletePost(".$entry['id'].")"><i class="far fa-trash-alt"></i>amp;nbsp;Delete</a></p>";
    if(isset($entry['visible']) amp;amp; $entry['visible'] == true){
      echo "<p class="info">amp;nbsp;amp;nbsp;<a class="actionlink" onclick="hidePost(".$entry['id'].")"><i class="far fa-eye-slash"></i>amp;nbsp;Hide</a></p>";
    } else {
      echo "<p class="info">amp;nbsp;amp;nbsp;<a class="actionlink" onclick="unhidePost(".$entry['id'].")"><i class="far fa-eye"></i>amp;nbsp;Unhide</a></p>";
    }
  }
  echo "</div>";
};
  

Хорошо, взглянув на ваш код, я вижу проблему, с которой вы столкнулись.

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

Немного изменив ваш код, может показаться, что вы нигде не задаете идентификатор в своем родительском HTML, который хотите изменить. Поэтому селектор jQuery, ищущий идентификатор «tempID», не может быть найден.

Я бы изменил код PHP на:

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

А затем измените код jQuery на:

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

Это должно работать намного лучше, чем сейчас.

Я надеюсь, вы знаете концепцию EventLoop внутри браузера, javascript является однопоточным, и для его асинхронности он использует концепцию EventLoop.

Во-первых, в вашем коде есть ‘Post’, который запрашивает php и успешно пытается получить доступ к некоторым элементам из DOM.

Может быть две возможности :

1. DOM загружен не полностью.
2. Элемент не существует в дереве DOM.

Пожалуйста, используйте обратный вызов при завершении / завершении ‘POST’ AJAX и напишите свою функциональность примерно так, как показано ниже. код.

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

Или вы могли бы просто изменить jQuery, хотя я его не пробовал, на:

 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>amp;nbsp;Hide");
      $(this).attr("onclick", "hidePost("   postid   ")");
    }
  });
  reload();
}