JQuery Dialog в строке таблицы

Question

Я использую C# и бритву для создания списка счетов-фактур. Каждый счет-фактура представляет собой строку таблицы и имеет огромный список примечаний к ней. Чтобы избежать большого количества пробелов между строками, я хочу скрыть заметки и разрешить поп-просмотр. В настоящее время:

<td> 
@foreach (var invoiceLine in invoice.InvoiceLines) 
       { 
        <p> 
         <strong>@invoiceLine.Date.ToShortDateString() @invoiceLine.Username</strong> <br /> 
         @Html.Raw(invoiceLine.Notes.Replace(Environment.NewLine, "<br />")) 
         @Html.Raw((invoiceLine.DueDate.HasValue ? "<br /><strong>Follow up:</strong> " + invoiceLine.DueDate.Value.ToShortDateString() : "")) 
         @Html.Raw(invoiceLine.Completed ? "<br /><strong>Completed</strong>" : "") 
        </p> 
       } 

Так что я хочу сделать, это добавить всплывающее окно с помощью JQuery:

$(function() { 

$('#clickMe').click(function (event) { 
    var mytext = $('#myText').val(); 

    $('<div id="dialog">' + mytext + '</div>').appendTo('body'); 
    event.preventDefault(); 

    $("#dialog").dialog({ 
     width: 600, 
     modal: true, 
     close: function (event, ui) { 
      $("#dialog").hide(); 
     } 
    }); 
}); //close click 

});

Затем изменить мой код:

<td> 
      <h3 id="clickMe">Open Notes</h3> 
       <textarea cols="1" rows="75" id="myText" style="display:none"> 
       @foreach (var invoiceLine in invoice.InvoiceLines) 
       { 
        <p> 
         <strong>@invoiceLine.Date.ToShortDateString() @invoiceLine.Username</strong> <br /> 
         @Html.Raw(invoiceLine.Notes.Replace(Environment.NewLine, "<br />")) 
         @Html.Raw((invoiceLine.DueDate.HasValue ? "<br /><strong>Follow up:</strong> " + invoiceLine.DueDate.Value.ToShortDateString() : "")) 
         @Html.Raw(invoiceLine.Completed ? "<br /><strong>Completed</strong>" : "") 
        </p> 
       } 
       </textarea> 
      </td> 

Первая проблема, которая появляется только первая строка. Я полагаю, потому что мой id тот же самый путь вниз?

Как открыть диалог для каждой строки?

Я NEWB на C# и JS кстати :)

Answer 1

Первое: текстовое поле не имеет никакого смысла.

Затем измените детали следующим образом. См. Его работу в jsfiddle.

HTML

<td> 
@foreach (var invoiceLine in invoice.InvoiceLines) 
{ 

    <p> 
     <strong>@invoiceLine.Date.ToShortDateString() @invoiceLine.Username</strong> <br /> 
     @Html.Raw((invoiceLine.DueDate.HasValue ? "<br /><strong>Follow up:</strong> " + invoiceLine.DueDate.Value.ToShortDateString() : "")) 
     @Html.Raw(invoiceLine.Completed ? "<br /><strong>Completed</strong>" : "") 

     <h3 class="notesClick">Open Notes</h3> 
     <div class="notesHtml" style="display:none"> 
      @Html.Raw(invoiceLine.Notes.Replace(Environment.NewLine, "<br />")) 
     </div> 

    </p> 
} 
</td> 

JS

$(function() { 

    $('.notesClick').click(function(event) { 
     var notes = $(event.currentTarget).next('.notesHtml'); 
     $("<div>").html(notes.html()).dialog(); 
    }); 

});​