In my view, I have a model representing a list of items. Each item has a unique ID, which is included in the H2 header tag. The details of each item are displayed in a div below the header. Initially, there is an image within the header that is set to display:none. Using some jQuery scripting within the view, I am trying to dynamically change the text in the header and show the hidden image.
<h2 id= 'header+@Model[i].ID' class="header" style="background-color:whitesmoke">@Model[i].Item.Name 
<img id="img+@Model[i].ID" src="~/Images/yes.gif" alt="" style="display:none" class="yescheck"/>
</h2>
<div>
<table>
// all the data
</table>
<button id="but+@Model[i].ID" onclick=CountComplete(); return false //...
</div>
I've attempted to achieve this with the following code:
function CountComplete(but) {
var id = but.id;
id = id.substring(5);
var div = "#div+" + id;
$.ajax({
type: 'POST',
data: { id: id },
url: '@Url.Action("CountComplete")',
success: function (data) {
var test = data;
$("#accordion").accordion('option', 'active', false);
var head = '#header+' + id;
var $image = $(head).find('.yescheck');
$image.show();
$('img+' + id).show();
$(head).innerHTML = 'CLOSED';
}
});
return false;
}
Can anyone suggest a better way to accomplish this?