1

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

2
  • 1
    Very poor structure, HTML should only have one "edit" id. An id is meant to be unique; perhaps you should transition to using class names... Jun 1, 2011 at 16:30
  • There can be more than one rows with same id (view or edit), do i need to use class instead of id? ... umm yes. An ID is a unique identifier, how can it be unique if more than one exists? By using multiple, you'd be writing non-compliant markup, sending the browser into quirksmode. Use class instead. FYI: you can use multiple classes eg(class="foo bar") so long as they are space delimited
    – vol7ron
    Jun 1, 2011 at 17:22

5 Answers 5

1

I think you may run into problems having multiple elements with the same ID, and it will certainly confuse you in the future.

My suggestion is to use classes instead. Small difference in your markup but big difference in semantics/intent.

Then, you could write simple jQuery code as the click events for your buttons (this goes in your document.ready):

$("#update").click(function() {
    $(".edit").show();
    $(".view").hide();
}

and so on.

1
  • multiple elements with the same DOM ID will certainly cause problems. Also, .toggle() is a useful addition to your .show() and .hide()
    – Matt
    Jun 1, 2011 at 16:34
0

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

3
  • Thanks all for wonderful help. @Brad this is what I was looking far. thanks a lot :) Jun 1, 2011 at 17:36
  • There is a logical "next question" the OP did not ask. Once you have a row with some data in it and an edit link that pops out an update and cancel link, what would the structure and the jquery look like to actually make the data editable and then updated when that link is clicked? Guessing: Dump the contents of the row into a text input somehow, have the update do an AJAX post with the value of input field (assuming the values originally came from a data base), then toggle the row back to edit status and display the newly updated info?
    – mikeY
    Jun 1, 2011 at 17:58
  • @mikeY: I would probably have <input> fields in the edit row. The initial populate places the information in both the "view" and "edit" rows initially (with the value="" attributes set for reset purposes -- i.e. "cancel"). When the user decides to edit, they view the edit row and begin. When they're ready to save, you serialize those new values (validate if necessary) and use AJAX to submit. I would then probably have it push those values back to me (depending on their size) and use that data to then update the view row/edit fields and .toggle the row views again. Jun 1, 2011 at 18:18
0

why dont you use jquery .toggle itself http://api.jquery.com/toggle/

2
  • actually I want to use jquery toggle but I am not sure how to do it in my case where there can be 100 rows (50 with class view and 50 with class edit) and I want to make only one row editable at once Jun 1, 2011 at 16:41
  • but you know where this 50 row start. you can put a div before that 51st row where you want to hide. hiding the div will hide the tr inside that . or you can split into 2 table and give id to second table and toggle it!!it should work
    – zod
    Jun 1, 2011 at 16:48
0

Yes, your rows will need classes. Then you can toggle your rows like this:

$('.view,.edit').toggle();

<table>
<tr id="view" class="view">
<a id="toggle" class="icon-button" href="#">
</tr>
<tr id="edit" class="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" class="view">
<a id="toggle" class="icon-button" href="#">
</tr>
<tr id="edit" class="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>
0
0

You had a javascript issue.

Try This:

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
</head>
<body>
    <table>
        <tr>
            <td>
                <a class="toggle" href="#">Toggle</a>
            </td>
        </tr>
        <tr style="display:none">
            <td>
                <img class="update" alt="Update" src="/static/images/update.png" />
                <img class="cancel" alt="cancel" src="/static/images/cancel.png" />
            </td>
        </tr>
        <tr>
            <td>
                <a class="toggle" href="#">Toggle</a>
            </td>
        </tr>
        <tr style="display:none">
            <td>
                <img class="update" alt="Update" src="/static/images/update.png" />
                <img class="cancel" alt="cancel" src="/static/images/cancel.png" />
            </td>
        </tr>
    </table>
</body>
</html>
<script type="text/javascript">
    $(document).ready(function() {
        $(".toggle").click(function(){
            $(this).parents("tr:first").next().toggle();
        });
        $(".cancel").click(function(){
            $(this).parents("tr:first").prev().toggle();
        });
    });
</script>
1
  • This doesn't do one row at a time. You need to traverse (either using prev()/next(), or grouping by ID, or otherwise.) Jun 1, 2011 at 17:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.