MVC3 - only the first line link works well with jQuery Modal Dialog

Work with MVC3, Razor, JQuery, Javascript. Below is the code and displays the table structure with fields and a link. A link to each line brings up the JQuery Modal dialog box, displaying the partial view page as a popup. But the popup dialog only works for the first line ... a link from the second line and down opens the page as a full-blown web page, not a pop-up modal dialog. How to fix it ... thanks for any help.

@foreach (var item in Model) {
<tr>
    <td>
        @Html.DisplayFor(modelItem => item.Title)
    </td>
    <td>
         @Html.DisplayFor(modelItem => item.Category)
    </td>

    <td>
        @Html.ActionLink("Edit", "Edit", new { id = item.ID }, new { id = "modalEdit" })   |             

    </td>
</tr>

This is the jQuery Modal dialog code.

<script type="text/javascript">
$(document).ready(function () {
    //initialize the dialog
    $("#resultEdit").dialog({ modal: true, width: 300, resizable: true, position: 'center', title: 'Edit Information', autoOpen: false, 
    open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); }

    });
});

$(function () {
    $('#modalEdit').click(function () {
        //load the content from this.href, then turn it into a dialog.
        $('#resultEdit').load(this.href).dialog('open');
        return false;
    });
});

+3
source share
3 answers

Probably because all your link links have the same identifier!

This will make jquery very unpredictable!

, :

@Html.ActionLink("Edit", "Edit", new { id = item.ID }, new { @class = "modalEdit" }) 

:

$('.modalEdit').click(function () {
+9

, , .

.

@Html.ActionLink("Edit", "Edit", new { id = item.ID }, new { @class = "modalEdit" })

$('.modalEdit').click(function () ...
+5

You cannot have multiple items with the same identifier.
Use the class name instead.

+2
source

All Articles