jquery toggle/show hide
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:
- on click of toggle link, I want view row invisible and edit row visible
- on click of update/cancel images, I want edit row invisible and view rows visible. edit button will cause postback
- 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
5 answers
solution1
1 2011-06-01 16:32:27
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.
solution2
0 2011-06-01 16:32:19
why dont you use jquery .toggle itself http://api.jquery.com/toggle/
solution3
0 2011-06-01 16:33:10
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>
solution4
0 2011-06-01 17:20:34
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>
solution5
0 ACCPTED 2011-06-01 17:21:16
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();
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.