3

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>
      }
3
  • 1
    Seria legal ter um título mais descritivo do problema real. E separar os parágrafos. Fica mais fácil das pessoas lerem, entenderem o que você quer e ajudarem.
    – Maniero
    Commented 2/06/2014 às 18:22
  • Favor utilizar o jsfiddle.net para colocar seu código.
    – Tiedt Tech
    Commented 2/06/2014 às 18:28
  • @bigown Melhorou ? O título é porque eu acho que assim fica melhor. Eu num sei um título que fiquei bem adequado com o problema, caso queira editar minha pergunta, pode ficar a vontade. Eu só queria uma ajuda pra poder resolver esse impasse. Penso que é uma coisa simples. Commented 2/06/2014 às 18:39

2 Respostas 2

4

Se quiser que o javascript interaja com todos os objetos utilize classes. Pelo Id somente um será afetado.

Adicione a classe Status

<input type="text" name="Status" id="Status" class="Status" value="@Html.DisplayFor(modelItem => item.Status)" readonly onmousemove="trocaCor()" />

Script para carregar no index pra mostrar ja da cor correta:

<script>
$(document).ready(function() {
    $('.Status').each(function(){
        if ($(this).val() == "Pendente") {
            $(this).addClass("pendente");
        }
        if ($(this).val() == "Resolvido") {
            $(this).addClass("resolvido")
        }
    });
});
</script>

Tem uma opção que não precisa nem de Javascript. Apenas com css e não precisa da classe tbm. Basta: http://jsfiddle.net/JH2tG/

<style>
    input[value=resolvido] { background-color: green }
    input[value=pendente] { background-color: red }
</style>
14
  • Poxa não funcionou dessa maneira. Ele nem trocou de cor. Commented 2/06/2014 às 18:55
  • Pressiona F12 no navegador e veja no console qual foi o erro de JS que te ajudo.
    – Joao Paulo
    Commented 2/06/2014 às 18:56
  • Ele até carrega o código, mas não aplica a função. Mas não da erro algum. Commented 2/06/2014 às 18:57
  • Voce pode fazer toda a chamada direto do JS também sem precisar chamar no input. Reparei que vc esta usando onmousemove pra chamar a função, tem outras formas melhores de fazer.
    – Joao Paulo
    Commented 2/06/2014 às 18:59
  • 1
    Blz. Qualquer duvida so postar ai.
    – Joao Paulo
    Commented 2/06/2014 às 19:15
4

Se você quer colorir o input conforme o status ao carregar a página, você pode fazer um seletor jquery para isto. Em seu input, você está utilizando id="Status", isto é inválido, não podemos ter vários elementos com o mesmo id, altere o id="Status" para class="status", veja no exemplo:

HTML da view:

<input type="text" name="status" class="status" value="Pendente" readonly />
<input type="text" name="status" class="status" value="Resolvido" readonly />

Jquery

$(document).ready(function(){
    $("input[value='Resolvido'].status").addClass('resolvido');
    $("input[value='Pendente'].status").addClass('pendente');
});

Exemplo: JSFiddle

1
  • Muito top também sua solução cara ! Valeu demais ! Commented 2/06/2014 às 19:17

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .