Question

I have following markup which is generated dynamically using C# in my asp.net MVC2 application. There could be more rows depending on data in database. I have shown two rows. one is view row other is edit row. by default I want ‘view’ row(s) visible and rows with id ‘edit’ will be invisible. I want to use jQuery so that:

1. on click of toggle link, I want view row invisible and edit row visible
2. on click of update/cancel images, I want edit row invisible and view rows visible. edit button will cause postback
3. There can be more than one rows with same id (view or edit), do i need to use class instead of id?

<table>
  <tr id="view">
    <a id="toggle" class="icon-button" href="#">
  </tr>
  <tr id="edit" style="display:none">
    <img id="update" alt="Update" src="/static/images/update.png">
    <img id="cancel" alt="cancel" src="/static/images/cancel.png">
  </tr>
  <tr id="view">
    <a id="toggle" class="icon-button" href="#">
  </tr>
  <tr id="edit" style="display:none">
    <img id="update" alt="Update" src="/static/images/update.png">
    <img id="cancel" alt="cancel" src="/static/images/cancel.png">
  </tr>
</table>

[EDIT]

I used this but it is not working:

<script type="text/javascript">
$(function () {
    $(".icon-button").click(function () {
        alert('I am here');
         $('.view,.edit').toggle();
        return false;
    });

    $(".icon-button-cancel").click(function(){
     alert('I am there');
   $('.view,.edit').toggle();
        return false;
    }
});

Please suggest solution using jQuery/JavaScript or any any other ASP.NET alternative

Answer 1

So, assuming you make the following changes:

• Wrap your rows in <td> cells to conform to a table format.
• Use class names instead of IDs (as I mentioned in a comment, an ID must be unique across the entire page).
• fix your anchor tags to include some form of text.

(Some of these may just be becuase you posted a demo snippet, I’m not sure). Then, I made a couple of adjustments like made the cancel a link instead of an image, but an image will work.

<table>
  <tr class="view">
      <td>
          <a class="toggle" class="icon-button" href="#">Edit</a>
      </td>
  </tr>
  <tr class="edit" style="display:none">
      <td>
          <img class="update" alt="Update" src="/static/images/update.png">
          <a class="cancel" href="#">Cancel</a>
      </td>
  </tr>
  <tr class="view">
      <td>
        <a class="toggle" class="icon-button" href="#">Edit</a>
      </td>
  </tr>
  <tr class="edit" style="display:none">
      <td>
        <img class="update" alt="Update" src="/static/images/update.png">
        <a class="cancel" href="#">Cancel</a>
      </td>
  </tr>
</table>

Then the following will work (with jQuery):

$('.toggle').click(function(){
    var $tr = $(this).closest('tr');
    $tr.add($tr.next('.edit')).toggle();
});
$('.cancel').click(function(){
    var $tr = $(this).closest('tr');
    $tr.add($tr.prev('.view')).toggle();
});

DEMO