Jquery ui Dialog in an MVC listing table

Question

I have a listing table displaying some information from the database.

What i am trying to do is to check if the item status is 1 and if comments exists to display a little icon where the user will click on it and see the specific comment for that item.

So in the listing table it seems to display fine that icon according to the above criteria but when i click on a specific listing it opens all dialogs with comments for all other listings with the same item status instead of the one i have chosen.

Can you please help me on what am i doing wrong ?

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.BookingId)
        </td>
        <td>
            <a href="@Url.Action("ItemDetails", new {id=item.ItemId })" title="@item.Item.ItemDescription">
            @Html.DisplayFor(modelItem => item.Item.ItemName)
                </a>
        </td>
          <td>
            @Html.DisplayFor(modelItem => item.StartDate)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.EndDate)
        </td>
         <td>
            @Html.DisplayFor(modelItem => item.RequestDate)
        </td>
        @if (item.StatusCodeId == 1)
        {
         <td style="color:#DD7500">

            @Html.DisplayFor(modelItem => item.StatusCode.StatusCodeName)

             @if (item.Comments != null)
             {                                 
              <img class="orangeclicker" style="margin-left:3px;display:inline;margin-bottom:-3px;cursor: pointer;" title="Tutor Comments" src="~/Images/chat_icon.gif" /> 

                      <div class="orangedialog" title="Tutor Comments"> 
                     <p> @item.Comments</p>
                     </div>                          
             }            
        </td>
        }
                }                      
    </tr>   
}   
</table>  
<script>  $(function ()
  {    
      $(" .orangedialog").dialog({
          autoOpen: false,
          show: { effect: "blind", duration: 1000 },
          hide: { effect: "explode", duration: 1000 },
          buttons: {
              Close: function () {
                  $(this).dialog("close");
              }
          }
      });

      $('.orangeclicker').live("click", function () {
         $(".orangedialog").dialog("open");        

      });         
  });

</script>

Answer 1

They all have the same id or class ( because they are render in a foreach statement )

You can add a difference by combining the class or the id with the index from your list

I don't have the code in front of me, but I also think something like this would work.

UPDATE:

 $('.orangeclicker').live("click", function (e) {
     alert("check"); // if this fires at click, the problem is somewhere else
     var target= $(e.currentTarget);
     target.next().dialog("open");        

  });         

Answer 2

You should try this:

first;you have to create links in each row of table having same class.

<a class="comments">Comments</a>

second; update your page as:

<div id="dialog-details" style="display: none">
  <p>
   @if (item.Comments != null)
         {                                 
          <img class="orangeclicker" style="margin-left:3px;display:inline;margin-bottom:-3px;cursor: pointer;" title="Tutor Comments" src="~/Images/chat_icon.gif" /> 

                  <div class="orangedialog" title="Tutor Comments"> 
                 <p> @item.Comments</p>
                 </div>                          
         }   
   </p>
 </div>

third update your script as:

    $('.comments').click(function () {
       $("#dialog-details").dialog('open');
     return false;
});
  $("#dialog-details").dialog({
    autoOpen: false,
    resizable: false,
    height: 170,
    width: 350,
    show: { effect: 'drop', direction: "up" },
    modal: true,
    draggable: true,
    open: function (event, ui) {
        $(".ui-dialog-titlebar-close").hide();

    },
    buttons: {

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

</script>

Answer 3

You should Use $(this).next().next().find(".orangedialog") to find relevent element.

$('.orangeclicker').on("click", function (e) {
    $element = $(this).next().next().find(".orangedialog");
    $element.dialog("open"); 
});

Update

Use on() instead of live()

See DEMO