jQuery Modal Window to Display a Table in MVC

Question

Let me start of by saying that I am inexperienced with JavaScript.

Here is what I want to do. When the user clicks "Show Details" on a row of data, they get a pop-up (modal?) window that has some data generated from another action within the MVC application. Where can I find an example of implementing something like this?

Also, when a user clicks "Approve" on either this pop-up or on the original data row another pop-up will display with a form a person needs to fill out.

Any direction will be greatly appreciated.

Answer 1

First of all, you will need a DIV somewhere on your page - let say give it an id "PopUpPanel". Now create a "ready" event for jQuery to initialize the pop-up/modal dialog:

<script type="text/javascript">
    $(document).ready(function () {
        $("#PopUpPanel").dialog({
            modal: true,
            autoOpen: false,
            height: 'auto',
            width: 'auto',
            buttons: {
                "Close": function () {
                    $(this).dialog("close");
                }
            }
        });
    });
</script>

Assuming the row has a link "Show Detail" - Create a "handler" for "Show Detail" click:

<script type="text/javascript">
    function showDetail(id) {
        $.get('MyController/MyAction/' + id, function(data) {
            $('#PopUpPanel').html(data);
            $('#PopUpPanel').dialog('open');
        });
    }
</script>

Those should get you to the point where your detail page is showing up in a pop-up/dialog window. To pop-up the other form in additional to the detail dialog or to replace the detail dialog, it should be pretty similar.