open a popup form on DataTable Edit button click

Question

I am trying to open a pop up form on Edit button click of DataTable . I am doing this in ASP.NET MVC project.

<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>

But the problem is the function PopupForm is not being called from Edit button of the DataTable rows because alert message is not being popped up. Also, parameter in PopupForm is also not properly rendered. What is the problem with this code?

Answer 1

It looks like your following line of the segment is incorrect.

"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;
                      }

This is producing the element like this.

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

This is not valid DOM element.

Change your code segment to:

"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
                          }

This will produce the output element as:

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

EDIT

Please note your following line is also incorrect:

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

Change it to:

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