неопределенное значение при редактировании с использованием ajax - PullRequest
Новая
       6

неопределенное значение при редактировании с использованием ajax

1 голос
/ 29 апреля 2020

я пытаюсь получить данные из моей базы данных, используя ajax. Таким образом, в контроллере я получил идентификатор, но когда go для редактирования модального кода идентификатор не определен.

здесь код в контроллере: 

router.post('/ajax/edit_groups/:id', async (req, res) => {
    console.log("edit")
    let [data_group, err] = await model.getById(req.params.id)
    console.log(req.params.id)

    console.log(data_group)
    res.json(data_group)
});

e js код: 

<table id="groups_table" class="table table-striped table-bordered" style="width: 100%;font-size:14px;">
    <thead class="thead-dark">
        <tr style="text-align: center;">
            <th>Group Name</th>
            <th>Group Description</th>
            <th>Role</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <%  if(groupData){
            for(var i=0;i < groupData.length; i++){
            if(groupData[i].role == 1) groupData[i].role = "Admin";
            else groupData[i].role = "User";
        %>
        <tr>
            <td><%= groupData[i].name%></td>
            <td><%= groupData[i].desc%></td>
            <td><%= groupData[i].role%></td>
            <td> 
                <div class="text-center">
                <a href="#" class="data" title="Edit" data-id="<%= groupData[i].id%>">
                    <span class="fas fa-edit fa-lg"style="color: #000000; font-size: 15px;">
                </a>
                <a href="" title="Delete">
                    <span class="fas fa-trash-alt fa-lg" 
                     style="color: rgb(206, 17, 17); font-size: 15px;">
                </a>
                </div>
            </td>
        </tr>
    <% };%>
    <% }%>
    </tbody>
</table>

здесь я получил значение идентификатора данных. отредактируйте модальный код:

скрипт в e js: 

$('.data').on('click', function(){
        axios.post('ajax/edit_groups/' + $(this).attr("data-id"))
        .then(function (response){
            console.log("in: ", $(this).attr("data-id"))
            $('#editGroups').modal('show');
            $('#id_group').val(response.data_group[0].id);
            $('#name').val(response.data_group[0].group_name);
            $('#desc').val(response.data_group[0].group_desc);
            $('#inputRole').val(response.data_group[0].role);

        }).catch(function (error){
            console.log(error)
    })
})

здесь, результат журнала консоли, идентификатор данных не определен .. так что не знаю, как это решить. Я все еще новичок ie в nodejs e js

Ответы [ 3 ]

0 голосов
/ 29 апреля 2020

Попробуйте получить идентификатор из атрибута data-id 

console.log("in: ", $(this).dataset.id)

Для ссылок https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

0 голосов
/ 29 апреля 2020

Ваша проблема в том, что ключевое слово this внутри обратного вызова относится к объекту окна, а не к элементу .data, как вы ожидаете.

Вы можете сделать что-то подобное ниже.

Я храню элемент во внешней области видимости, чтобы запомнить элемент, по которому щелкнули, чтобы мы могли получить доступ к его набору данных в обратном вызове. 

$('.data').on('click', function(event){

        // here im storing the element
        //  you can probalby also access it with $(this) and store it
        const dataEl = event.target

        axios.post('ajax/edit_groups/' + dataEl.dataset.id)
        .then(function (response){

            // in the callback I access the element that is in the outer scope
            console.log("in: ", dataEl.dataset.id)

            $('#editGroups').modal('show');
            $('#id_group').val(response.data_group[0].id);
            $('#name').val(response.data_group[0].group_name);
            $('#desc').val(response.data_group[0].group_desc);
            $('#inputRole').val(response.data_group[0].role);

        }).catch(function (error){
            console.log(error)
    })
}

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

Возможно, вы захотите найти альтернативные способы. Вы можете использовать bind и некоторые другие методы при работе с this.

Поскольку у вас есть элемент внутри тега привязки, вам нужно убедиться, что вы не фиксируете его события щелчка. Это связано с тем, что называется делегированием событий.

Один простой способ добиться этого - на самом деле CSS. 

 .data span { pointer-events: none; }

Есть и другие варианты.

0 голосов
/ 29 апреля 2020

Поскольку ajax является асинхронным, вы не можете вызвать ответ напрямую. Попробуйте добавить asyn c await к вашей функции, например: 

    $('.data').on('click', async function() {
    await axios
        .post('ajax/edit_groups/' + $(this).attr('data-id'))
        .then(function(response) {
            console.log('in: ', $(this).attr('data-id'));
            $('#editGroups').modal('show');
            $('#id_group').val(response.data_group[0].id);
            $('#name').val(response.data_group[0].group_name);
            $('#desc').val(response.data_group[0].group_desc);
            $('#inputRole').val(response.data_group[0].role);
        })
        .catch(function(error) {
            console.log(error);
        });
    });
...