Обновление модальных значений по нажатию кнопки без перезагрузки - PullRequest
Новая
       6

Обновление модальных значений по нажатию кнопки без перезагрузки

0 голосов
/ 29 января 2019

В настоящее время я пытаюсь выучить node.js с помощью express и bootstrap.Я пытаюсь обновить значения внутри тегов «pre» после нажатия кнопки «Создать».Я предполагаю, что это может быть сделано через AJAX, но у меня возникают проблемы с его правильной реализацией.

В настоящее время API_Key & API_Secret извлекаются из содержимого "req" после входа в систему. Затем пользователь имеетссылка navbar, чтобы открыть модальное окно для получения ключей API или создания нового.

[Modal] [1]

Вот коды, которые у меня есть. 

<code>//Route js  
router.get('/api/generate', ensureAuthenticated, (req, res) => {
    db.Account.findOne({ where: {email: req.user.email} })
    .then(Account => { 
        Account.update({
            API_Key: uuidv4(),
            API_Secret: uuidv4()
        });
        req.flash('success_msg', 'New API Keys successfully generated.');
    });
});

//.ejs modal
<div class="modal fade" id="APIModal">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                              <%= success_msg %>
                              <h5 class="modal-title">API Token</h5>
                              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                              </button>
                            </div>
                            <div class="modal-body">
                                <a>API Key</a>
                                <pre style="display: flex; word-break: break-word; white-space: normal; background: #eeeeee" id="preKey"><%= API_Key %>
API Secret <% = API_Secret%> Внимание! Генерация нового токена приведет к аннулированию предыдущих токенов. Generate <!--<button href='/generate' type="submit" class="btn btn-primary" >Generate--> <[1]: https://i.stack.imgur.com/xk64g.png</code>

1 Ответ

0 голосов
/ 30 января 2019

Теперь все хорошо.Разобрался, как его обновить с помощью AJAX.

Спасибо! 

$("#generateAPI").on('click',function(event){
    event.preventDefault();
    event.stopPropagation();
    var uid = $(".uid").val();
    var confirmation = confirm('Are you sure you want to generate new set of keys?');
    if(!confirmation){
        return false;
    }
    $.ajax({
        url: "/api/generate",
        method: "POST",
        data: {uid: uid},
        dataType: "json"
    }).done(function(data){
        var key = JSON.parse(JSON.stringify(data));
        changeKeysDisplay(key.API_Key, key.API_Secret);
    })
    .fail(function(err) {
        console.log(err);
    })
    })
...