Em meu projeto tenho um campo que é o Status de determinada ocorrencia. Ou seja, se ela está pendente ou resolvida. Fiz uma função em javascript que , ao clicar o campo input que esta em modo readonly, muda o background. Digo, se a o valor de dentro do input for Resolvido, o input fica verde, e se o valor do input for Pendente fica vermelho.
O que acontece é que funciona direitinho, mas to tendo um problema: essa função só é feita na primeira ocorrência do input. Eu tenho uma index, e nela tem um foreach pra iterar sobre todos os dados do banco referente a ocorrencias, ou seja, tenho vários inputs sobre o status.
O que acontece é que a função só é executada na primeira ocorrência da lista, o restante não acontece nada.
Outra coisa é que, eu queria que ao salvar o ou editar a ocorrência, quando voltasse pra index pra mostrar, já se aplicasse a função, sem que o usuário precise clicar ou passar o mouse em cima. Fosse automático, digo, se o valor do input for Pendente, ficasse vermelho, se o valor for Resolvido ficasse verde.
Será que alguém pode me ajudar ?
View(onde está todo o código)
@*@model IEnumerable<CEF01.Models.Ocorrencia>*@
@model PagedList.IPagedList<CEF01.Models.Ocorrencia>
@using PagedList.Mvc;
<link href="~/Content/PagedList.css" rel="stylesheet" type="text/css" />
<style>
#Status {
text-align: center;
}
.resolvido {
background-color: green;
font-family: 'Times New Roman';
color: white;
}
.pendente {
background-color: red;
font-family: 'Times New Roman';
color: white;
}
</style>
@{
ViewBag.Title = "Index";
}
@Html.ActionLink("Criar uma nova ocorrência", "Adiciona", null, new { @class = "btn btn-primary" })
@Html.ActionLink("Lista de Alunos", "Index", "Alunos", null, new { @class = "btn btn-primary" })
<span class="pull-right">
@using (Html.BeginForm("Index", "Ocorrencias", FormMethod.Get))
{
<p>
Busca Aluno: @Html.TextBox("busca")
<input type="submit" value="Procurar" class="btn btn-info" />
</p>
}
</span>
<table class="table">
<tr>
<th>
@*@Html.DisplayNameFor(model => model.Aluno.Nome)*@
Nome do Aluno
</th>
<th>
@*@Html.DisplayNameFor(model => model.Tipo)*@
Tipo
</th>
<th>
@*@Html.DisplayNameFor(model => model.Causa)*@
Causa
</th>
<th>
@*@Html.DisplayNameFor(model => model.Descricao)*@
Descrição
</th>
<th>
Status
</th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Aluno.Nome)
</td>
<td>
@Html.DisplayFor(modelItem => item.Tipo)
</td>
<td>
@Html.DisplayFor(modelItem => item.Causa)
</td>
<td>
@Html.DisplayFor(modelItem => item.Descricao)
</td>
<td>
@*@Html.DisplayFor(modelItem => item.Status)*@
<input type="text" name="Status" id="Status" value="@Html.DisplayFor(modelItem => item.Status)" readonly onmousemove="trocaCor()" />
</td>
<td>
@Html.ActionLink("Editar", "Edita", new { id = item.Id }) |
@* @Html.ActionLink("Details", "Details", new { id=item.Id }) | *@
@Html.ActionLink("Remover", "Remove", new { id = item.Id })
</td>
</tr>
}
</table>
<br />
Pagina @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) de @Model.PageCount
@Html.PagedListPager(Model, pagina => Url.Action("Index", new { pagina, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter }))
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script>
function trocaCor() {
var troca = document.getElementById("Status");
if (troca.value == "Pendente") {
$("#Status").addClass("pendente");
}
if (troca.value == "Resolvido") {
$("#Status").addClass("resolvido")
}
}
</script>
}