Блог

Главная - Вопросы по программированию - Как получить текущий идентификатор на основе сообщений пользователя

Как получить текущий идентификатор на основе сообщений пользователя

#php #html #jquery #twig #drupal-8

#php #HTML #jquery #twig #drupal-8

Вопрос:

Я работаю над пользовательским модулем Drupal, в котором пользователи могут создавать сообщения, а также редактировать и удалять свои собственные сообщения на странице компании других пользователей, аналогичной LinkedIn. Но я столкнулся с проблемой. Когда я нажимаю на ссылку «Редактировать» или «удалить», он получает динамический идентификатор как для редактирования, так и для удаления, но как только открывается модальный (загрузочный) идентификатор всегда равен 3 (в порядке возрастания), и данные не совпадают с конкретным нажатым блоком сообщений.

Ниже приведен шаблон ветки пользователя.

 <div>
  <label for="">Your user id is {{ logged_in_user_id }}</label>
</div>#}

<div>
  {#{% for key, value in allresults %}
    <p>Name: {{ value.company_name }}</p>
    <p>Image: {{ value.post_image }}</p>
    <p>Message: {{ value.post_message }}</p>
  {% endfor %}#}
</div>

<style>
  .invalid{
    background-color: #fad4cf;
  }
  .profile_box{
    box-shadow: 0px 1px 1px 2px rgba(0,0,0,0.1);
    margin-top: 20px;
    /*border-radius: 10px;
    padding-bottom: 20px;*/
    text-align: left;
    /*width: 75%;*/
  }
  #edit{
    color: blue;
  }
  #edit:hover{
    cursor: pointer;
    color: red;
  }
  .trash_icon:hover{
    cursor: pointer;
  }
  .edit_post:hover{
    cursor: pointer;
  }
  #txt_about{
    resize: none;
  }
</style>

<div class="profile_box">
  <div class="container">
    <div class="row">
      <br />

      <div class="col-sm-4" style="width: 13%; margin-left: 2%">
        {% if page_picture == "" %}
        <div style="height: 100px; width: 100px; background-color: lightgray; padding-top: 34px; padding-left: 13px">Logo Image</div>
        {% else %}
        <div><img style="height: 100px; width: 100px;" src="/sites/default/files/inline-images/company_images/{{ page_picture }}" alt="Company Image"></div>
        {% endif %}
        <br />

        {% if logged_in_user_id != 0 %}
          <div>
            <a href="{{ 'https://' in website ? website : "https://" ~ website }}" style="width: 103px;" class="btn btn-primary" target="_blank">Visit Website</a>
          </div>
        {% endif %}
        <br />
      </div>

      <div class="col-sm-4" style="/*margin-left: 5%; width: 29%; color: black;*/ font-size: 22px;">
        <p><strong>{#Company Name#}{{ name_of_user }}</strong></p>
        <div><span>{#Industry#}{{ industry }}</span>,<span> {#Location#}{{ headquarters != "" ? headquarters : "location" }}</span>,<span> followers: {{ count_following }}</span></div>
        <br />
        <div><span>{#Tagline goes here#}{{ tagline }}</span></div>
      </div>

      {% if logged_in_user_id != 0 and count_following_each_other == 0 %}
        <div class="col-sm-4">
          <a id="{{ logged_in_user_id != uid ? "btn_follow" : "btn_edit_page" }}" class="btn btn-primary" href="javascript:void(0)">
            {{ (logged_in_user_id == uid ? "Edit Page" : "Follow ") }}</a>
        </div>
        {% elseif count_following_each_other == 1 %}
        <p><strong>Following</strong></p>
      {% endif %}
    </div>
  </div>
</div>
<br /><br />

<!-- Menu tabs go here -->
<div style="display: flex; font-size: 22px;">
  <div>Home</div>
  <div style="margin-left: 25px;">Jobs</div>
  <div style="margin-left: 25px;">Followers</div>
  <div style="margin-left: 25px;">Members</div>
</div>

<!-- About section here -->
<div class="profile_box">
  <div class="container">
    <div style="width: 57%; font-size: 18px; margin-top: 10px;">
      <div style="float: left; margin-left: 3%;"><strong>About</strong></div>
      {% if logged_in_user_id == uid %}
      <div id="edit" data-toggle="modal" data-target="#myModal" style="float: right;">Edit</div>
      {% endif %}
    </div>
  </div>
  <hr style="border-top: 5px solid #cce5f1; width: 91%;" />
  <div class="container">
    {% if about != "" %}
    <p style="width: 59%; margin-left: 2%;">{{ about }}</p>
    {% else %}
    <p style="width: 59%; margin-left: 2%;">Write something about your company page</p>
    {% endif %}
    <br />
  </div>
</div>
<!-- Modal -->
{% include '@company_page/user-page-edit-modal.html.twig' %}
<br /><br />
<!-- View Posts section here -->

<div>
  <p style="font-size: 20px;"><strong>View Posts</strong></p>
</div>
<br /><br />

<div style="display: flex; justify-content: space-between">
  <div style="font-size: 20px; margin-top: 5px;">Sort by</div>
  {% if logged_in_user_id != uid %}
    <div><button data-toggle="modal" data-target="#create_post_modal" class="btn btn-primary">Create a post</button></div>
  {% endif %}
</div>
<br /><br />
<!-- Add create post modal here -->
{% include '@company_page/create-post-modal.html.twig' %}
<br />

{% if poster_count != 0 %}

  {% for value in allresults %}

    <div class="profile_box">
<div style="margin-left: 10px;" class="">
<div class="row">
    <br />

    <div class="col-sm-3" style="width: 13%; margin-left: 2%">
      {% if page_picture == "" %}#}
      <div style="height: 100px; width: 100px; background-color: lightgray; padding-top: 34px; padding-left: 13px">Logo Image</div>
      {% else %}#}
        <img height="100" width="100" class="img-responsive" src="/sites/default/files/inline-images/company_images/{{ page_picture }}" alt="Picture">
        {% endif %}
    </div>

  <div class="col-sm-9" style="/*margin-left: 5%; width: 29%; color: black;*/ font-size: 16px;">
    <!-- DISPLAY DELETE TRASH CAN ONLY TO THE OWNERS OF THE POST -->
    <div style="display: flex;">
      <p><strong>{{ value.company_name }} {{ value.poster_id }}</strong></p>
      {% if logged_in_user_id == value.poster_id %}
      <div class="edit_post" style="margin-left: 70%;" data-post-id="{{ value.id }}" data-toggle="modal" data-target="#edit_post_modal">Edit Post</div>
      <!-- Edit Post Modal -->
      {% include '@company_page/post-edit-modal.html.twig' %}
      <div class="trash_icon" data-delete-id="{{ value.id }}" data-toggle="modal" data-target="#delete_post_modal"><img style="height: 25px; margin-left: 57%;" src="/sites/default/files/inline-images/posts/delete_icon.png" alt="Delete Icon"></div>
      {% include '@company_page/delete-post-modal.html.twig' %}
      {% endif %}
    </div>

    <div><span>Posted on {{ value.created_at|date("M d, Y") }}</span></div>
  </div>
  </div>
  <br />

  <div class="row">
    <div class="container">
      <div style="width: 62%;" class="col-sm-9">
        {% if value.post_image != "" %}
        <div>
          <img style="margin: 0 auto;" class="img-responsive" src="/sites/default/files/inline-images/posts/{{ value.post_image }}" alt="Picture">
        </div>
        {% endif %}

        <br />
        <p style="width: 75%;">
          {{ value.post_message }}
        </p>
        <hr />
        <div style="display: flex;">
          <div>Like</div>
          <div style="margin-left: 27px;">Comment</div>
          {#{% if logged_in_user_id == poster_id %}
          <div style="margin-left: 78%;"><button id="btn_delete_post" class="btn btn-danger">Delete</button></div>
          {% endif %}#}
        </div>
      </div>
    </div>
  </div>
</div>
  <div style="background-color: lightgray; height: 65px; margin-top: 15px">
    <div class="container">
      <div style="padding-top: 24px; padding-left: 14px;">Be the first to comment on this</div>
    </div>
  </div>
</div>
  {% endfor %}
{% endif %}
<script>

  (function ($, Drupal){
    /** Get current user id variable from above markup and pass it down here to javascript **/
    let currentUserID = '{{ logged_in_user_id }}';
    let ownerOfPageID = '{{ uid }}';
    let ownerPage = '{{ grmds_url }}';

    //let postID = $('#trash_icon').attr('data-delete-id');
    $('#btn_edit_page').on('click', function (){
      //alert("Edit page coming soon currently fixing a bug");
      //alert("You clicked the edit page button. Your user id is: "   currentUserID);
      window.location.href = "/company/"  currentUserID  "/edit"
    });

    $('#btn_follow').on('click', function (){
      //alert("Working on the back-end logic to keep track of users being followed");
      $.ajax({
        url: "/company/"   ownerOfPageID   "/follow_user_page",
        type: "POST",
        dataType: "JSON",
        success: function (data){
          window.location.href = "/company/"   ownerPage;
        }
      });
    });

    $('#btn_submit_post').on('click', function (e){
      e.preventDefault();
      /** Validate user input fileds **/
      let post_company_name = $('#txt_name').val();
      let post_message = $('#txt_post_message').val();
      let post_image = $('#postImage')[0].files[0];

      let form_data = new FormData();
      form_data.append("postCompanyName", post_company_name);
      form_data.append("postMessage", post_message);
      form_data.append("postImage", post_image);

      //alert(post_image.name   " | "   post_image.size   " | "   post_image.type);
      if(post_company_name !== ""){
        if(post_message !== ""){
          /*if(post_image.length <= 0){*/
            /** Make Ajax request to back-end php controller **/
            $.ajax({
              url: "/company/"   ownerOfPageID   "/create_post",
              type: "POST",
              processData: false, // important
              contentType: false, // important
              data: form_data,
              dataType: "JSON",
              success: function (data){
                console.log(data);
                if(data.result === "success"){
                  window.location.href = "/company/"   ownerPage;
                } else if(data.result === "error"){
                  alert(data.msg);
                }
              }
            });
        } else {
          addClassToElements('#txt_post_message');
        }
      } else {
        addClassToElements('#txt_name');
      }
    });

    $('#btn_save_changes').on('click', function (){
      let about_text = $('#txt_about').val();
      let myFormData = new FormData();
      myFormData.append('about_text', about_text);

      /** Send to back-end and save to database **/
      $.ajax({
        url: "/company/"   currentUserID   "/edit/about",
        type: "POST",
        body: myFormData,
        dataType: "JSON",
        success: function (data){
          console.log(data.msg);

          if(data.result === "success"){
            alert(data.msg);
            //window.location.href = "/company/"   ownerPage;
          }
        }
      });
    });

    $('.edit_post').on('click', function (){
      let edit_post_item = $(this);
      let edit_post_id = $(this).attr('data-post-id');
      alert("Edit Post id is "   edit_post_id);
    });

    $('.trash_icon').on('click', function (){
      let item = $(this);
      let id = $(this).attr('data-delete-id');
      alert("Delete Post id is: "   id);

      /** Connect to back-end database to delete selected post **/
      $('#btn_delete_post').on('click', function (){
        $.ajax({
          url: "/company/"  id  "/delete/post",
          type: "POST",
          dataType: "JSON",
          success: function (data){
            console.log(data);
            if(data.result === "success"){
              $('#delete_post_modal').modal('hide');
              item.parent().parent().parent().parent().parent().remove();
              //window.location.href = "/company/"   ownerPage;
            }
          }
        });
      });
    });

    onBlurElements('#txt_name');
    onBlurElements('#txt_post_message');

    /** Create a function to handle all input blur elements **/
    function onBlurElements(targetElement){
      $(targetElement).blur(function (){
        //alert($(targetElement).val());
        if($(targetElement).val() === ""){
          $(targetElement).addClass('invalid');
        } else {
          $(targetElement).removeClass('invalid');
        }
      });
    }

    function addClassToElements(addClassElement){
      $(addClassElement).addClass('invalid');
    }
  })(jQuery, Drupal);
</script>

Ниже приведен режим редактирования, когда пользователь нажимает на редактирование.

 <div class="modal fade" id="edit_post_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">amp;times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Edit post id {{ value.id }}</h4>
      </div>
      <div class="modal-body">

        <!-- Edit POST FORM -->

        <form method="post" id="post_form" enctype="multipart/form-data">

          <div class="form-group">
            <label for="edit_txt_name">Company Name</label>
            <input placeholder="Put your company name" type="text" class="form-control" name="post_company_name" id="edit_txt_name" value="{{ value.company_name }}" required>
          </div>

          <div class="">
            <label for="editImage">Upload logo image</label>

            <input name="editImage" id="editImage" style="border: 1px solid darkgray; width: 100%; border-radius: 8px;" type="file" /><br />

            <label id="popover" role="button" tabindex="0" class="" data-toggle="popover" title="Upload requirements"
                   data-content="File types allowed: .png .jpg .jpeg">? Upload requirements</label>
          </div>
          <br />
          <div class="form-group">
            <label for="edit_txt_post_message">Post Message</label>
            <textarea id="edit_txt_post_message" cols="30" class="form-control" rows="10" placeholder="Post a message for {{ name_of_user }}">{{ value.post_message }}</textarea>

          </div>

        </form>
        <!-- Edit POST FORM -->

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="submit" id="btn_submit_post" class="btn btn-primary disabled">Update</button>
      </div>
    </div>
  </div>
</div>

Ниже приведен метод контроллера, откуда поступают данные.

 <?php
/** Display user's page **/
public function displayUserPage($url)
{
    $db = Database::getConnection();
    $logged_in_user_in = Drupal::currentUser()->id();

    $query = $db->query("SELECT * FROM {dr_user_company_page} WHERE grmds_url = :url", [':url' => $url]);
    $result = $query->fetchAll();
    $followee_id = $result[0]->uid;

    if (count($result) === 1)
    {

        $query_follow = $db->query("SELECT * FROM {dr_user_follow_page} WHERE followee_id = :followee_id", [':followee_id' => $followee_id]);
        $result_follow = $query_follow->fetchAll();

        $match_following_follower_query =$db->query("SELECT * FROM {dr_user_follow_page} WHERE (follower_id = :current_loggedin_user AND followee_id = :followee_id)",
            [':current_loggedin_user' => $logged_in_user_in, ':followee_id' => $followee_id]);
        $match_result = $match_following_follower_query->fetchAll();

        /** Check if there are any posts for the user **/
        $posts_query = $db->query("SELECT * FROM {dr_user_posts} WHERE posting_to_id = :uid", [':uid' => $followee_id]);
        $posts_result = $posts_query->fetchAll();
        return ['#theme' => 'user_page', '#logged_in_user_id' => $logged_in_user_in, '#uid' => $result[0]->uid, '#name_of_user' => $result[0]->name_of_user, '#grmds_url' => $result[0]->grmds_url, '#website' => $result[0]->website, '#industry' => $result[0]->industry, '#company_size' => $result[0]->company_size, '#company_type' => $result[0]->company_type, '#headquarters' => $result[0]->headquarters, '#founded' => $result[0]->founded, '#page_picture' => $result[0]->page_picture, '#tagline' => $result[0]->tagline, '#about' => $result[0]->about, '#postresultarray' => $result, '#count_following' => count($result_follow) , '#count_following_each_other' => count($match_result) , '#post_id' => $posts_result[0]->id, '#poster_id' => $posts_result[0]->poster_id, '#poster_count' => count($posts_result) , '#allresults' => $posts_result, ];
    }
    else
    {
        return ['#theme' => 'error_no_user_page', ];
    }
}
?>

Я также добавил модуль php, если это поможет.

 <?php
/**
 * Implements hook_theme().
 *
 * Register a module or theme's theme implementations.
 * The implementations declared by this hook specify how a particular render array is to be rendered as HTML.
 *
 * See: https://api.drupal.org/api/drupal/core!lib!Drupal!Core!Render!theme.api.php/function/hook_theme/8.2.x
 *
 * If you change this method, clear theme registry and routing table 'drush cc theme-registry' and 'drush cc router'.
 */
function company_page_theme($existing, $type, $theme, $path)
{
    return [
    'company_form' => ['variables' => ['name_of_user' => NULL, 'grmds_url' => NULL, 'website' => NULL, 'industry' => NULL, 'company_size' => NULL, 'company_type' => NULL, 'headquarters' => NULL, 'founded' => NULL, 'page_picture' => NULL, 'tagline' => NULL, ], ],
     'user_page' => ['variables' => ['logged_in_user_id' => NULL, 'uid' => NULL, 'name_of_user' => NULL, 'grmds_url' => NULL, 'website' => NULL, 'industry' => NULL, 'company_size' => NULL, 'company_type' => NULL, 'headquarters' => NULL, 'founded' => NULL, 'page_picture' => NULL, 'tagline' => NULL, 'postresultarray' => [], 'about' => NULL, 'count_following' => NULL, 'count_following_each_other' => NULL, 'post_id' => NULL, 'poster_id' => NULL, 'poster_count' => NULL, 'poster_company_name' => NULL, 'poster_image' => NULL, 'poster_message' => NULL, 'posted_time' => NULL, 'allresults' => [], ], ], 'error_no_user_page' => ['variables' => ['name_of_user' => NULL, ], ],
     'user_edit_page' => ['variables' => ['uid' => NULL, 'name_of_user' => NULL, 'grmds_url' => NULL, 'website' => NULL, 'industry' => NULL, 'company_size' => NULL, 'company_type' => NULL, 'headquarters' => NULL, 'founded' => NULL, 'page_picture' => NULL, 'tagline' => NULL, ],],
    ];

}
function company_page_page_attachments(array amp; $attachments)
{
    $attachments['#attached']['library'][] = 'company_page/company_page';
}
?>

Я добавил изображения, чтобы вы могли лучше понять, о чем я говорю. Надеюсь, это поможет.

введите описание изображения здесь
введите описание изображения здесь
введите описание изображения здесь
введите описание изображения здесь

Я чувствую, что, возможно, я подхожу к этому неправильно. Возможно, я неправильно выполняю вызовы базы данных. Я делаю около 3-4 вызовов базы данных, 1 дважды для одной и той же таблицы. Возможно, объединение? Я ценю помощь в этом. Спасибо!

Комментарии:

1. Какое значение вы получаете в этом предупреждении о предупреждении о щелчке корзины («Удалить идентификатор записи: » id); ?

2. При предупреждении о щелчке корзины идентификатор возвращает 27.

3. Надеюсь, мой ответ сработает?

4. Эй, чувак, спасибо за твой ответ, но у меня нет проблем с удалением. У меня возникают проблемы с отображением идентификатора при появлении модального… «Редактировать идентификатор записи равен 3», где он должен быть 27 или каким бы ни был динамический идентификатор записи. Кроме того, если вы заметили, сообщение post не совпадает с сообщением post в модальном. Я добавил «редактировать модальный» код шаблона twig, если вы хотите взглянуть.

Ответ №1:

Измените, как показано ниже, в вашем коде.

Шаг 1

Удалите функцию щелчка #btn_delete_post, которая находится внутри .щелчок trash_icon.

Шаг 2

Отобразите идентификатор в кнопке удаления.

 <button id="btn_delete_post" data-delete-id="{{ value.id }}" class="btn btn-danger">Delete</button>

Шаг 3
Получите идентификатор с помощью кнопки удаления и передайте его в AJAX.

 Connect to back-end database to delete selected post **/
  $('#btn_delete_post').on('click', function (){
    var id = $(this).attr('data-delete-id');
    $.ajax({
      url: "/company/"  id  "/delete/post",
      type: "POST",
      dataType: "JSON",
      success: function (data){
        console.log(data);
        if(data.result === "success"){
          $('#delete_post_modal').modal('hide');
          item.parent().parent().parent().parent().parent().remove();
          //window.location.href = "/company/"   ownerPage;
        }
      }
    });
  });
Метки: