Question 10793 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Close first pop up on button click when second button is clicked in JQuery datatables

I am learning asp.NET Core, and currently I am working on Jquery data tables. I am facing a problem in data table. Please see attached image:

Jquery datatable

See, in the image, there is a View button for each row. When the View button is clicked, a Model pop up opens and displays information of Name and Position headers. After clicking on second View button for second row, first pop up remains open. I just want to turn off first pop up when we click for second pop up.
Following is the main code for onclick View button.

var Popup, dataTable;
$(document).ready(function () {
    dataTable = $("#employeetable").DataTable({
        "ajax": {
            "url": "/Employee/GetList",
            "type": "POST",
            "datatype": "json"
        },
        "columns": [
            { "data": "Name", "name": "Name" },
            { "data": "Position", "name": "Position" },
            { "data": "Office", "name": "Office" },
            { "data": "Age", "name": "Age" },
            { "data": "Salary", "name": "Salary" },
            {
                "data": "EmployeeID", "render": function (data) {
                    return "<a class='btn btn-default' onclick=PopupForm('@Url.Action("AddOrEdit","Employee")/" + data + "')>View</a>";
                },
                "orderable": false,
                "searchable": false,
                "width": "150px"
            }
        ],

        "serverSide": "true",
        "order": [0, "asc"],
        "processing": "true",
        "language": {
            "processing": "processing... please wait"
        }
    });
});

function PopupForm(url) {

    var formDiv = $('<div/>');

    $.get(url)
        .done(function (response) {
            formDiv.html(response);
            Popup = formDiv.dialog({

                autoOpen: true,
                resizable: false,
                title: 'Employee Details',
                height: 500,
                width: 700,
                close: function () {
                    Popup.dialog('destroy').remove();
                    /*formDiv.dialog('close');*/
                }

            });  
        });
}

Here is GitHub repo if above code is not enough: https://github.com/atif-dev/ServerSideProcessing

I have found some similar solutions about my issue here on Stack Overflow, but since I’m kind of NEWBIE in .NET Core, I didn’t get the solution.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The credit of my answer goes to @Jerry's Answer. Although the answer of @Jerry was not working, it redirected me to think as he was saying to destroy the first dialog box. Thanks, @Jerry.

    Here is solution code:

    var formDiv = $('<div/>');
function PopupForm(url) {
   /*formDiv = $('<div/>');*/
   formDiv.dialog({ autoOpen: false })
   $.get(url)
   .done(function (response) {
      formDiv.html(response);
      /*   console.log(formDiv)*/
      Popup = formDiv.dialog({
      autoOpen: true,
      resizable: false,
      title: 'Employee Details',
      height: 500,
      width: 700,
      close: function () {
        Popup.dialog('destroy').remove();
        /*formDiv.dialog('close');*/
      }
     });
    });
}

  2. 0

    By click the button you can destroy the previous dialog first, then initialize the next dialog.

    var formDiv=$('<div/>');
formdiv.dialog({autoOpen:false}) //initialize an empty dialog to be destroyed

function PopupForm(url) {

var formDiv = $('<div/>');

$.get(url)
    .done(function (response) {
        formDiv.dialog('destroy').remove(); //destroy the previous one first
        formDiv = $('<div/>');
        formDiv.html(response);
        Popup = formDiv.dialog({

            autoOpen: true,
            resizable: false,
            title: 'Employee Details',
            height: 500,
            width: 700
        });  
    });
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search