Передача данных со стороны сервера из ejs в Ajax

Question

Я создал таблицу с данными со стороны сервера для одобрения администратором.

Я использую - MongoDB, NodeJSи экспресс с видом EJS.Я столкнулся с проблемой, когда пытался использовать JQuery с запросами Ajax для передачи уникального идентификатора и статуса подтверждения данных, когда пользователь нажимает кнопку под утвержденным или отклоненным.

, поэтому я продолжаю получать всеидентификаторы переданных данных.

вот пример моего кода

<!-- EJS -->
<table class="table table-hover m-0 tickets-list table-actions-bar dt-responsive nowrap" cellspacing="0" width="100%" id="datatable">
                                                        <thead>
                                                        <tr>
                                                            <th>
                                                                <b>S/N</b>
                                                            </th>
                                                            <th><b>Name</b></th>
                                                            <th><b>Department</b></th>
                                                            <th><b>Status</b></th>
                                                            <th><b>Review</b></th>
                                                            <th><b>Approve</b></th>
                                                            <th><b>Disapprove</b></th>
                                                        </tr>
                                                        </thead>

                                                        <tbody>
                                                        <% profileData.forEach(function(item, index){ %>

                                                        <tr>
                                                            <td><b><%= index + 1 %></b></td>
                                                            <td>
                                                                <a
                                                                    <span class="ml-2"><%= item.lastname + " " + item.firstname %></span>
                                                                </a>
                                                            </td>

                                                            <td>
                                                                <a
                                                                    <span class="ml-2"><%= item.department %></span>
                                                                </a>
                                                            </td>
                                                            <% if (item.approved === 'pending'){ %>
                                                            <td>
                                                                <span class="badge badge-secondary">Pending</span>
                                                            </td>
                                                            <% } else if (item.approved === 'approved'){ %>
                                                             <td>
                                                                <span class="badge badge-success">Approved</span>
                                                            </td>
                                                            <% } else { %>
                                                             <td>
                                                                <span class="badge badge-danger">Disapproved</span>
                                                            </td> 
                                                            <% } %>

                                                            <td>
                                                                 <button type="button" class="btn btn-secondary waves-effect waves-light btn-sm"><i class=" fi-clipboard"></i></button>
                                                            </td>

                                                            <td>
                                                                <button type="button" class="btn btn-success waves-effect waves-light btn-sm" id="btn-success"><i class=" fi-check"></i></button>
                                                            </td>

                                                            <td>
                                                                <button type="button" id="disapproved" class="btn btn-danger waves-effect waves-light btn-sm"><i class=" fi-cross"></i></button>
                                                            </td>
                                                        </tr>
                                                        <% }); %>

                                                        </tbody>
                                                    </table>

jQuery / Ajax

<% profileData.forEach(function(item, index){ %>

    <script type="text/javascript">
                $(function(){               
                    $('#btn-success').click(function(e){
                        e.preventDefault();
                        console.log('select_link clicked');

                        var userId = <%- JSON.stringify(item.userId) %>;
                        console.log(userId);
                        var data = {};
                        // data.Id = userId;
                        data.message = "approved";

                        $.ajax({
                            type: 'POST',
                            data: JSON.stringify(data),
                            contentType: 'application/json',
                            url: 'http://localhost:8080/',                      
                            success: function(data) {
                                console.log('success');
                                // console.log(JSON.stringify(data));
                            }
                        });

                    });             
                });
            </script>

            <% }); %>

Answer 1

Вот еще один простой способ: сначала добавьте на каждую кнопку успеха id="<%= item.userId %>" и прикрепите атрибут onclick следующим образом.

<td>
    <button type="button" id="<%= item.userId %>" onclick="approve(this.id)" class="btn btn-success waves-effect waves-light btn-sm" id="btn-success"><i class=" fi-check"></i></button>
</td>

Затем в js вы можете использовать эту функцию следующим образом.

<script type="text/javascript">
   function approve(id) {
       var userId = id;
       console.log(userId);
       var data = {};
       // data.Id = userId;
       data.message = "approved";

       $.ajax({
             type: 'POST',
             data: JSON.stringify(data),
              contentType: 'application/json',
              url: 'http://localhost:8080/',                      
              success: function(data) {
                  console.log('success');
                  // console.log(JSON.stringify(data));
               }
         });
    }    
  </script>

Answer 2

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

<% profileData.forEach(function(item, index){ %>
<tr>
    <td><b>
            <%= index + 1 %></b>
        <input type="hidden" class="item_id" value="<%- JSON.stringify(item.userId) %>" /></td>
    <td>
        <a <span class="ml-2">
            <%= item.lastname + " " + item.firstname %></span>
        </a>
    </td>

    <td>
        <a <span class="ml-2">
            <%= item.department %></span>
        </a>
    </td>
    <% if (item.approved === 'pending'){ %>
    <td>
        <span class="badge badge-secondary">Pending</span>
    </td>
    <% } else if (item.approved === 'approved'){ %>
    <td>
        <span class="badge badge-success">Approved</span>
    </td>
    <% } else { %>
    <td>
        <span class="badge badge-danger">Disapproved</span>
    </td>
    <% } %>

    <td>
        <button type="button" class="btn btn-secondary waves-effect waves-light btn-sm"><i class=" fi-clipboard"></i></button>
    </td>

    <td>
        <button type="button" class="btn btn-success waves-effect waves-light btn-sm"><i class=" fi-check"></i></button>
    </td>

    <td>
        <button type="button" id="disapproved" class="btn btn-danger waves-effect waves-light btn-sm"><i class=" fi-cross"></i></button>
    </td>
</tr>
<% }); %>

И вам нужен только один фрагмент скрипта, подобный этому:

<script type="text/javascript">
            $(function(){               
                $('.btn-success').click(function(e){
                    e.preventDefault();
                    console.log('select_link clicked');

                    var userId = $(this).closest("tr").find(".item_id")
                                        .first().value;
                    console.log(userId);
                    var data = {};
                    // data.Id = userId;
                    data.message = "approved";

                    $.ajax({
                        method: 'POST',
                        data: JSON.stringify(data),
                        contentType: 'application/json',
                        url: 'http://localhost:8080/',                      
                        success: function(data) {
                            console.log('success');
                            // console.log(JSON.stringify(data));
                        }
                    });

                });             
            });
        </script>

Так что на этом этапе событие будетслушать каждую кнопку btn-success, и она запускается только один раз