open modal window with paramters in mvc 4 using jqueryui

Question

I want to load a modal window with data dynamically based on a parameter sent by the host page. The host page will have a set of edit links in a table. Clicking on any of the edit links should open a window with corresponding data based on the row id sent in. The code I have below doesnt work. What changes will I need to make so that when I click on the Edit link I can send a rowid to the 'dialogMsg' div layer so that data can be dynamically placed in it

<div id="dialogMsg" title="Editing " + StudentFirstName >
            Show other student details here
</div>

<table >
<tr>
    <td>
        James
    </td> <td><a href="#" id="editlink">Edit</a></td>
</tr>
<tr>
    <td>
        John
    </td> <td><a href="#" id="editlink">Edit</a></td>
</tr>
<tr>
    <td>
        Doe
    </td> <td><a href="#" id="editlink">Edit</a></td>
</tr>
</table>

<script type="text/javascript">

    $(document).ready(function () 
    {
        $("#dialogMsg").dialog({
            autoOpen: false,
            height: 300,
            width: 350,
            modal: true,
            buttons: {
                "Create an account": function () {
                    var bValid = true;

                    $(this).dialog("close");

                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }

        });


        $('#editlink')
        .click(function () {
            $('#dialogMsg').dialog('open');
        });
    });
</script>

Answer 1

I have made some changes to your code:

<div id="dialogMsg" title="Editing ">Show other student details here</div>
<table>
    <tr>
        <td>James</td>
        <td>
            <a href="#" class="editlink">Edit</a>
            <input type="javascript" class="personId" value="1" />
        </td>
    </tr>
    <tr>
        <td>John</td>
        <td>
            <a href="#" class="editlink">Edit</a>
            <input type="javascript" class="personId" value="2" />
        </td>
    </tr>
    <tr>
        <td>Doe</td>
        <td>
            <a href="#" class="editlink">Edit</a>
            <input type="javascript" class="personId" value="2" />
        </td>
    </tr>
</table>

<script type="text/javascript">
    $(document).ready(function () {
        $("#dialogMsg").dialog({
            autoOpen: false,
            height: 300,
            width: 350,
            modal: true,
            buttons: {
                "Create an account": function () {
                    var bValid = true;

                    $(this).dialog("close");

                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }

        });


        $('.editlink').click(function () {
            $('#dialogMsg')
                .dialog('option', 'title', "Editing " 
                    + $(this).closest('tr').find('td:first').text())
                .dialog('open');

            var personId = $(this).closest('tr').find('.personId').val();
            // work it out with the ID here
        });
    });
</script>

Changes done:

1. Moved the title to the JavaScript. You cannot set the title attribute like this <div id="dialogMsg" title="Editing " + StudentFirstName >.

2. Changed the id attribute of the Edit link to class attribute. id must be unique for each element in the page.

3. Setting the dialog title in the JavaScript. $(this).closest('tr').find('td:first').text()).dialog('open');. Here I am getting the nearest parent tr tag and get the text of the first td child tag.

Edit:

Added hidden field for ID with a css class. The class can be used in jQuery select for getting the ID.