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

Необходимо динамически заполнять поля ввода в модале начальной загрузки по нажатию кнопки на странице

0 голосов
/ 24 апреля 2019

В index.pug: 

doctype html
html
 head
    title = "IssueTracker"
    link(rel="stylesheet" href="/bootstrap/bootstrap.css")
    link(rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css")
    script(type='text/javascript', src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js")
    script(type='text/javascript', src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js")
    script(type='text/javascript', src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js")



body
    div.container
        div.row.rowStyle
            div.col-md-12
                button.btn.btn-primary.btn-sm(type='button', data-toggle="modal" data-target="#myUpdate" style='margin-top: 2%') add data
.row
            table.table.table-striped
                thead.table-dark
                    tr
                        th Issue ID
                        th Description
                        th Severity
                        th Status
                        th Created Date
                        th Resolved Date
                        th Action

                each val in result
                    tr
                        td(name = "id") #{val.id}
                        td #{val.Description}
                        td #{val.Severity}
                        td #{val.Status}
                        td #{val.Created}
                        td #{val.Resolved}
                        td
                            button.btn.btn-info.btn-sm( type="button" data-toggle="modal" data-target="#myUpdate" class="btn btn-default" onclick='Update(' + val.id + ')') Update
                            button.btn.btn-danger.btn-sm( onclick='Delete(' + val.id + ')') Delete
#myUpdate.modal
            .modal-dialog
                .modal-content
                    // Modal Header
                    .modal-header
                        h4.modal-title Update ISSUE
                        button.close(type='button' data-dismiss="modal") ×
                    // Modal body
                    .modal-body
                        .form-group
                            label(for='Description') Description
                            textarea#Description.form-control(rows='2') #{description123}
                        label(for='Severity') Severity
                        select#Severity.custom-select.mb-3()
                            option(value='Minor') Minor
                            option(value='Major') Major
                            option(value='Critical') Critical
                        label(for='Status') Status
                        select#Status.custom-select.mb-3()
                            option(value='Open') Open
                            option(value='In Progress') In Progress
                            option(value='Closed') Closed
                        label(for='Created') Created Date
                        input#Created.form-control(type="date")
                        label(for='Resolved') Resolved Date
                        input#Resolved.form-control(type="date")

                        .modal-footer
                            button.btn.btn-info(type='button' class="close", data-dismiss="modal") Save
                            button.btn.btn-danger(type='button' data-dismiss='modal') Close 

script(type='text/javascript').
        var result = result;


        function Delete(value){
        console.log(value);
        $.ajax({
        type: 'DELETE',
        url: '/delete/' + value,
        success: function(data){
            console.log("sdasdas"+data);
        //do something with the data via front-end framework
        location.reload();
        }
        });
        }
        var description123 = "sdsdsdsds";
        function Update(value){
        console.log(value);
        //console.log(result);
        $.ajax({
        type: 'GET',
        url: '/' + value,
        success: function(data){
            console.log("sdasdas"+data.Description);
            description123 = data.Description;
            console.log(data);
        //{"id":1,"Description":"Description 1","Severity":"Major","Status":"Closed","Created":"2019-04-06","Resolved":"2019-04-25"}
            console.log(description123);
         //Description 1
        //location.reload();
        }
        });
        }

Когда я нажимаю кнопку обновления, мне нужно заполнить модальное поле данными, которые я получаю от вызова ajax.Проблема в том, что я получаю данные, но поле не заполняется, я пытался добиться этого, используя, например, «# {description123}», но не привязываясь к полю.Кто-нибудь может подсказать мне, что мне нужно сделать ... Пожалуйста, помогите, спасибо

...