4

Working with MVC3, Razor, Jquery, Javascript. The below code loops through and displays a table structure with fields and a link. The link on each row, triggers a Jquery Modal Dialog that displays a partial view page as a pop up. But the pop up dialog works only for the first row... the link from second row and down open the page as a full blown web page and not a pop up modal dialog. How to fix this..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;
    });
});

marcind
  • 52,944
  • 13
  • 125
  • 111
ZVenue
  • 4,967
  • 16
  • 61
  • 92

3 Answers3

10

It's likely because all your edit links have the same id!

This is going to make jquery act highly unpredictably!

Give your edit links a shared class instead, like this:

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

and change your selector to :

$('.modalEdit').click(function () {
WEFX
  • 8,298
  • 8
  • 66
  • 102
Patricia
  • 7,752
  • 4
  • 37
  • 70
  • 3
    You just beat me to it! Just note that because `class` is a reserved word in C#, you must prefix it with an `@` symbol when adding a class html attribute. E.g. `new { @class = "modalEdit" }` – Charlino Jun 13 '11 at 17:28
  • Thanks! that worked.. except class needs to be @class. (from Charlinos response) – ZVenue Jun 13 '11 at 17:33
  • righto! i'm using mvc 2 and vb.net so the syntax is a little different :) glad it worked! – Patricia Jun 13 '11 at 18:27
5

Try changing the link to use a class rather than an id.

E.g.

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

and

$('.modalEdit').click(function () ...
Charlino
  • 15,802
  • 3
  • 58
  • 74
2

You cannot have multiple elements with the same ID.
Use a classname instead.

SLaks
  • 868,454
  • 176
  • 1,908
  • 1,964