откройте всплывающую форму при нажатии кнопки DataTable Edit - PullRequest
Новая
       39

откройте всплывающую форму при нажатии кнопки DataTable Edit

1 голос
/ 23 января 2020

Я пытаюсь открыть всплывающую форму при нажатии Edit кнопки DataTable. Я делаю это в ASP. NET MVC проекте. 

<table id="tbl_class" class="table table-striped table-bordered dt-responsive nowrap" style="width:100%;" cellspacing="0">
    <thead>
        <tr>
            <th>Id</th>
            <th>ClassName</th>
            <th>Student</th>
            <th>Edit</th>
            <th>Delete</th>
        </tr>
    </thead>
</table>
<script>
        $('#tbl_vehicle').DataTable({
            "processing": true, // for show progress bar
            "serverSide": true, // for process server side
            "filter": true, // this is for disable filter (search box)
            "orderMulti": false, // for disable multiple column at once
            "pageLength": 5,
            "ajax": {
                "url": "/Students/LoadData",
                "type": "POST",
                "datatype": "json"
            },
            "columnDefs":
                    [{
                        "targets": [0],
                        "visible": false,
                        "searchable": false
                    },
                   ],

            "columns": [
                  { "data": "Id", "name": "Id", "autoWidth": true },
                  { "data": "ClassName", "name": "ClassName", "autoWidth": true },
                  { "data": "Student", "title": "Student", "name": "Student", "autoWidth": true },                 
                  {
                      "render": function (data, type, full, meta)
                      {
                          var setUrl = "/Students/AddorEdit/' + full.Id +'";
                          var result = "<a class='btn btn-info btn-sm' onclick='PopupForm('" + setUrl + "')'><i class='fa fa-edit'></i> Edit </a>"
                          return result;
                      }
                  },
            ]

        });
        function PopupForm(url) {
            alert("value of url " + url);
            var formDiv = $('<div/>');
            $.get(url).done(function (response) {
                formDiv.html(response);

                Popup = formDiv.dialog({
                    autoOpen: true,
                    resizable: false,
                    title: 'fill details',
                    height: 500,
                    width: 700,
                    close: function () {
                        Popup.dialog('destroy').remove();
                    }
                });
            });
        }
    </script>

Но проблема в том, что функция PopupForm не вызывается из кнопки Edit строк DataTable из-за предупреждения сообщение не выскакивает. Кроме того, параметр в PopupForm также неправильно отображается. В чем проблема с этим кодом?

1 Ответ

1 голос
/ 23 января 2020

Похоже, что ваша следующая строка сегмента неверна. 

"render": function (data, type, full, meta)
                      {
                          var setUrl = "/Students/AddorEdit/' + full.Id +'";
                          var result = "<a class='btn btn-info btn-sm' onclick='PopupForm('" + setUrl + "')'><i class='fa fa-edit'></i> Edit </a>"
                          return result;
                      }

Это создает такой элемент. 

<a class='btn btn-info btn-sm' onclick='PopupForm('/Students/AddorEdit/' + full.Id +'')'><i class='fa fa-edit'></i> Edit </a>

Это недопустимый элемент DOM.

Измените ваш сегмент кода на: 

"render": function (data, type, full, meta)
                          {
                              var setUrl = "/Students/AddorEdit/some_id";
                              var result = '<a class="btn btn-info btn-sm" onclick="PopupForm(\'' + setUrl + '\')"><i class="fa fa-edit"></i> Edit </a>'
                              return result
                          }

Будет получен выходной элемент: 

<a class="btn btn-info btn-sm" onclick="PopupForm('/Students/AddorEdit/some_id')"><i class="fa fa-edit"></i> Edit </a>

РЕДАКТИРОВАТЬ

Пожалуйста обратите внимание, что ваша следующая строка также неверна: 

var setUrl = "/Students/AddorEdit/' + full.Id +'";

Измените ее на: 

var setUrl = "/Students/AddorEdit/" + full.Id;
...