Jquery ui Dialog firing multiple dialogs issue

Question

I have a listing table displaying some information from the database in an asp.net mvc website.

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 ?

    <table id="listTable" style="width:100%;" >
    <tr>
        <th style="text-align:center">
            #
        </th>          
        <th style="padding-left:5px;">
           Item Name
        </th>

        <th>
            Start Date       
        </th>
          <th>
            End Date       
        </th>
         <th>
            Request Date       
        </th>
         <th>
            Request Status      
        </th>
    </tr>

@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>
        }
        else if (item.StatusCodeId == 2)
        {
            <td style="color:darkgreen">

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

                 @if (item.Comments != null)
             {
                  <img id="greenclicker" style="margin-left:3px;display:inline;margin-bottom:-3px;cursor: pointer;" title="Tutor Comments" src="~/Images/chat_icon.gif" /> 
                     <div id="greendialog" title="Tutor Comments"> 
                     <p>@item.Comments</p>
                     </div>
             }     
        </td> 
        }
        else if (item.StatusCodeId == 3)
        {
          <td style="color:red">

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

                   @if (item.Comments != null)
                   {
                 <img id="redclicker" style="margin-left:3px;display:inline;margin-bottom:-3px;cursor: pointer;" title="Tutor Comments" src="~/Images/chat_icon.gif" />
                       <div id="reddialog" title="Tutor Comments"> 
                     <p>@item.Comments</p>
                     </div>
                   }         
        </td>   
        }
        else if (item.StatusCodeId == 4)
        {
             <td style="color:black">

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

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


    </tr>   
}

</table>



<script>
    $(function ()
  {

        $('.orangedialog, #greendialog, #reddialog, #blackdialog').dialog({
          autoOpen: false,
          show: { effect: "blind", duration: 1000 },
          hide: { effect: "explode", duration: 1000 },
          buttons: {
              Close: function () {
                  $(this).dialog("close");
              }
          }
      });
      $("#greenclicker").live("click", function () {
          $("#greendialog").dialog("open");
      });

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

      $("#redclicker").live("click", function () {
          $("#reddialog").dialog("open");
      });
      $("#blackclicker").live("click", function () {
          $("#blackdialog").dialog("open");
        });

  });

</script>

html:

<table id="listTable" style="width:100%;" >
    <tr>
        <th style="text-align:center">
            #
        </th>          
        <th style="padding-left:5px;">
           Item Name
        </th>

        <th>
            Start Date       
        </th>
          <th>
            End Date       
        </th>
         <th>
            Request Date       
        </th>
         <th>
            Request Status      
        </th>
    </tr>

    <tr>
        <td>
            192
        </td>
        <td>
            <a href="/Home/ItemDetails/42" title="this is a lab computer">
            Lab Computer 1
                </a>
        </td>
          <td>
            08/04/2014 09:00:00
        </td>
        <td>
            09/04/2014 09:00:00
        </td>
         <td>
            26/03/2014
        </td>
         <td style="color:#DD7500">

            In Progress

              <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> testtttttttttttttt</p>
                     </div>                          

        </td>


    </tr>   
    <tr>
        <td>
            191
        </td>
        <td>
            <a href="/Home/ItemDetails/42" title="this is a lab computer">
            Lab Computer 1
                </a>
        </td>
          <td>
            01/04/2014 17:03:00
        </td>
        <td>
            02/04/2014 09:05:00
        </td>
         <td>
            26/03/2014
        </td>
         <td style="color:#DD7500">

            In Progress

              <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> You won&#39;t get such a fast computer !!!</p>
                     </div>                          

        </td>


    </tr>   
    <tr>
        <td>
            190
        </td>
        <td>
            <a href="/Home/ItemDetails/44" title="3 ghz / 6gm ram / 1tb drive">
            Ibm Laptop
                </a>
        </td>
          <td>
            10/04/2014 09:00:00
        </td>
        <td>
            11/04/2014 09:00:00
        </td>
         <td>
            19/03/2014
        </td>

I'm assuming this is just a loop so there are a bunch of cells, some of which have comments associated with them. The ones with the comments he wants to be able to click and open the comment associated with them. I'm guessing .orangedialog is probably display:none so it only appears when the dialog plugin is fired. — Aarmora
– Aarmora, Commented Apr 8, 2014 at 14:31

Aarmora · Accepted Answer · 2014-04-08 15:22:46Z

1

Try the code below. I don't think you can use siblings() because all of the .orangedialog classes will be siblings.

HTML

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

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

Javascript

 $('.orangeclicker').live("click", function () {
     $('.'+$(this).attr('commentid')).dialog("open");           
 });

Update: The dialog plugin changes the dom around. We added a custom id as shown above.

edited Apr 8, 2014 at 15:22

answered Apr 8, 2014 at 14:18

Aarmora

1,1531 gold badge14 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Wizeman1986 Over a year ago

it doesnt fire at all now :(

Wizeman1986 Over a year ago

what i get in the aler is : underfined

Aarmora Over a year ago

@Wizeman1986 Undefined? Hmm, can you post what your code looks like?

Wizeman1986 Over a year ago

i have posted the full code , i have been talking about "orangeclicker" as i have double entries for this at the moment but the issue is general at the rest as well

Aarmora Over a year ago

@Wizeman1986 What's the js code that's giving an alert of undefined? If there are two elements next to each other, using $(this).next().children().dialog("open"); like this or alerting the html should select the correct element, which would be the siblings child....or nephew/niece? :)

|

dreamweiver · Accepted Answer · 2014-04-08 14:31:22Z

0

try this way

  <script>  $(function ()
  {    
   $(" .orangedialog").dialog({
      autoOpen: false,
      show: { effect: "blind", duration: 1000 },
      hide: { effect: "explode", duration: 1000 },
      buttons: {
          Close: function () {
              $(this).dialog("close");
          }
      }
  });

   $('.orangeclicker').on("click", function () {
     $(this).parent().find(".orangedialog").dialog("open");    //this will open only its respective comments dialog     
   });         
});

Note:Always be updated with the latest jQuery lib, .live() is deprecated and as of jQuery 1.7, use .on

Happy Coding :)

answered Apr 8, 2014 at 14:31

dreamweiver

5,9922 gold badges27 silver badges39 bronze badges

8 Comments

Aarmora Over a year ago

It's not a child, though, it's a sibling. The code is hard to see but the div isn't a child of the img.

Wizeman1986 Over a year ago

Thank you for your time but the on click is not firing :(

dreamweiver Over a year ago

@Wizeman1986: it depends on what version of jquery lib your using. also using .on is ideal way to associate delegated events since the html elements are getting created dynamically

dreamweiver Over a year ago

@Aarmora: well that was difficult to figure out in asp code, thats the reason i requested for html dom structure. anyway code is modified to suit the problem

Wizeman1986 Over a year ago

i am using jquery 1.8.2

|

Collectives™ on Stack Overflow

Jquery ui Dialog firing multiple dialogs issue

2 Answers 2

7 Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related