none
Carregando dados jquery e ajax e mvc3 com razor RRS feed

  • Pergunta

  • Boa tarde, estou enfrentando um problema na minha aplicação que pra ser sincero, já perdi uma semana, e infelizmente eu não consegui resolver o problema.

    Tentarei expor de forma bem sucinta o meu problema.

    Abaixo está a minha index.

    <div id="funcionario" class="janela2"> @{ Html.RenderPartial("_Operadoras"); } </div>

    <script type="text/javascript">
        //script responsavel por renderizar a pagina de acordo com a operadora selecionada
        function teste() {
            $("#All").remove();
            ids = $("#selectOperator :selected").attr('id');
     
            $('#funcionario').load("/Funcionario/GetOperadora/"+ ids );
        }
    </script>

    Abaixo a view partial Operadoras

    @using CadastroDeFuncionarios.Models
    <table class="table3" id="All">
        <thead>
            <tr>
                <th>
                    Matrícula
                </th>
                <th>
                    Nome
                </th>
                <th>
                    Cargo
                </th>
                <th>
                    Calendário
                </th>
                <th>
                    Deduções
                </th>
                <th>
                    Additions
                </th>
                <th>
                    Dias Trabalhados
                </th>
                <th>
                    Dias de compra
                </th>
                <th>
                    Ações
                </th>
            </tr>
        </thead>
        <tbody>
            @foreach (var contato in ViewBag.Funcionarios)
            {
                <tr class="casa">
                    <td>
                        @contato.Identifier
                    </td>
                    <td>
                        <a id="@contato.EmployeesId" >@contato.Name</a>
                    </td>
                    <td>
                        @contato.Cargo
                    </td>
                    <td>
                        @contato.Calendar
                    </td>
                    <td>
                        @contato.Deductions
                    </td>
                    <td>
                        @contato.Additions
                    </td>
                    <td>
                        @contato.WorkDays
                    </td>
                    <td>
                        @contato.OrderDays
                    </td>
                    <td>
                        @Html.ActionImage("Delete", new { Id = @contato.EmployeesId }, "~/Content/Image/x.png", "Delete")
                    </td>
                </tr>
            }
        </tbody>
    </table>
    <div id="element_to_pop_up" style="display: none; width: 90%; background: #fff; overflow-y: scroll;
        height: 80%;">
        <div id="suporte" style="width: 100%; padding: 10px 0;">
            @using (Html.BeginForm("Edit", "Funcionarios", FormMethod.Post,new {Id = "popup"}))
            {
               
             <p></p>
                <div style="width: 350px;">
                
                    <fieldset>
                        <legend>Editando Funcionário</legend><br/>
                    <table class="table3">
                        <tr>
                            <td><span>Matrícula</span></td>
                            <td id="identifier"></td>
                        </tr>
                        <tr>
                            <td><span>Nome</span></td>
                            <td id="name"></td>
                        </tr>
                        <tr>
                            <td><span>Função</span></td>
                            <td><select id="cargos">
                                    <option selected="selected" class="input"></option>
                                    @*  @foreach (var function in ViewBag.Funcao)
                                    {
                                        Guid guid = new Guid("f95ecfe0-9083-48a6-b3b8-152b4f5fcb88");
                                        if (function.BranchJobsId == guid)
                                          {
                                              <option class="input" selected="selected" >@function.Name</option>
                                          }
                                           <option class="input">@function.Name</option>
                                    }*@
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td><span>Calendário</span></td>
                            <td id="calendar"></td>
                        </tr>
                        <tr>
                            <td><span>Dias Trabalhados</span></td>
                            <td id="workDays"></td>
                        </tr>
                        <tr>
                            <td><span>Acréscimos</span></td>
                            <td id="additions"></td>
                        </tr>
                        <tr>
                            <td><span>Deduções</span></td>
                            <td id="deductions"></td>
                        </tr>
                         <tr>
                            <td><span>Dias úteis de VT</span></td>
                            <td id="orderDays"></td>
                        </tr>
                    </table>
             </fieldset>
                </div>
                <fieldset>
                    <legend>Utilização diária de vale transporte</legend>
                    <p>
                        Operadoras</p>
                    <select data-bind="value:operadora">
                        <option></option>
                        @*  @foreach (var operators in ViewBag.Operadoras)
                    {
                        <option value="@operators.OperatorId">@operators.Name</option>
                    }*@
                    </select>
                    <br />
                    <br />
                    <table id="operadoras">
                        <tbody>
                            <tr>
                                <td colspan="2">
                                    Cartão nº:
                                </td>
                                <td colspan="6">
                                    <input id="cartao" class="input" name="cartao" size="55" type="text" data-bind="value:cartao" />
                                </td>
                                <tr />
                            <tr>
                                <td>
                                    Tarifa
                                </td>
                                <td>
                                </td>
                                <td>
                                    Qte<input id="qte1" class="input" name="qte1" size="4" type="text" value="" data-bind="value:quantidade" />
                                </td>
                                <td>
                                    Valor<input id="value1" class="input" name="value1" size="4" type="text" value=""
                                        data-bind="value:valor" />
                                </td>
                                <td>
                                    Nome<input id="nome1" class="input" name="nome1" size="4" type="text" value="" data-bind="value:nome" />
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <a id="addTarifas">Adicionar Evento</a><br />
                    <br />
                    <hr />
                    <span>Lista de operadoras Cadastradas</span><br />
                    <br />
                    <div style="min-width: 500px; border: 1px solid #fff;">
                        <table id="relacaoOperadoras">
                            <thead>
                                <tr>
                                    <th>
                                        Operadora
                                    </th>
                                    <th>
                                        Nº do Cartão
                                    </th>
                                    <th>
                                        Tarifa 1
                                    </th>
                                    <th>
                                        Nome Tarifa 1
                                    </th>
                                    <th>
                                        Tarifa 2
                                    </th>
                                    <th>
                                        Nome Tarifa 2
                                    </th>
                                    <th>
                                        Tarifa 3
                                    </th>
                                    <th>
                                        Nome Tarifa 3
                                    </th>
                                    <th>
                                        Tarifa 4
                                    </th>
                                    <th>
                                        Nome Tarifa 4
                                    </th>
                                </tr>
                            </thead>
                            <tbody class="operators" data-bind="foreach:tarifas">
                                <tr>
                                    <td data-bind="text: operadora">
                                        <input type="text" disabled="disabled" data-bind="value:operadora" />
                                    </td>
                                    <td data-bind="text: cartao">
                                        <input type="text" disabled="disabled" data-bind="value:cartao" />
                                    </td>
                                    <td data-bind="text: nome">
                                        <input type="text" disabled="disabled" data-bind="value:nome" />
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <br />
                    <br />
                </fieldset>
                <div style="width: 430px">
                    <fieldset>
                        <legend>Eventos</legend>
                        <div id="datasEvent">
                            <span>Nome</span>
                            <input id="nameEvent" name="name" size="55" type="text" data-bind="value: nomeEvent" />
                            <br />
                            <br />
                            <span>Data Inicial</span><input id="dtIni" class="Date" name="dtIni" size="15" type="text"
                                data-bind="value:dataInicial" />
                            <span>Data Final</span><input id="dtFim" class="Date" name="dtFim" size="16" type="text"
                                data-bind="value:dataFinal" /><br />
                            <br />
                            <span>Considerar Evento em </span>
                            <input id="dtConsiderar" class="Date" name="dtConsiderar" size="16" type="text" data-bind="value:dataConsiderar" /><br />
                            <br />
                            <span>Descrição do evento </span>
                            <input id="descriptionEvent" name="descriptionEvent" size="38" type="text" data-bind="value:descricao" /><br />
                            <br />
                            <a id="addEvent">Adicionar Evento</a><br />
                            <br />
                        </div>
                        <hr />
                        <span>Lista de evento Cadastradas</span><br />
                        <br />
                        <div style="border: 1px solid #fff; width: 420px;">
                            <table id="relacaoEvents">
                                <thead>
                                    <tr>
                                        <th>
                                            Nome
                                        </th>
                                        <th>
                                            Quantidade
                                        </th>
                                        <th>
                                            Data Inicial
                                        </th>
                                        <th>
                                            Data Final
                                        </th>
                                    </tr>
                                </thead>
                                <tbody class="events" data-bind="foreach:eventos">
                                    <tr>
                                        <td data-bind="text: nomeEvent">
                                            <input type="text" disabled="disabled" data-bind="value:nomeEvent" />
                                        </td>
                                        <td>
                                            0
                                        </td>
                                        <td data-bind="text: dataInicial">
                                            <input type="text" disabled="disabled" data-bind="value:dataInicial" />
                                        </td>
                                        <td data-bind="text: dataFinal">
                                            <input type="text" disabled="disabled" data-bind="value:dataFinal" />
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <br />
                    </fieldset>
                </div>
                <button type="submit">
                    Salvar</button>
            }
        </div>
    </div>
    <!-- Chamada ao método Json -->
    <script type="text/javascript">
        $('.casa td a').bind('click', function (event) {
            event.preventDefault();
            $("#popup").fadeIn(300);
            $.ajax({
                type: "post", //metodo de requisição
                url: "/Funcionario/EncontrarFuncionario", //caminho 
                data: {
                    str: $(this).attr('id')
                },
                dataType: "json", //tipo do dado de retorno
                success: function (data, status) {
                    //Caso não ocorra nenhum tipo de erro:
                    console.log(data);
                    $("#popup").unbind();
                    $("#employeesId").empty();
                    $("#identifier").empty();
                    $("#name").empty();
                    $("#calendar").empty();
                    $("#workDays").empty();
                    $("#additions").empty();
                    $("#deductions").empty();
                    $("#orderDays").empty();
    
                    $("#identifier").append("<input  class='input' name='identifier' size='26' type='text' value='" + data.identifier + "' />");
                    $("#name").append("<input  class='input' name='name' size='26' type='text' value='" + data.name + "' />");
                    //  $("#cargos").append('<option value="' + data.cargos + '" selected="selected">' + data.cargos + '</option>');
                    $("#calendar").append("<input  class='input' name='calendar' size='26' type='text' value='" + data.calendar + "' />");
                    $("#workDays").append("<input  class='input' name='workDays' size='26' type='text' value='" + data.workDays + "' />");
                    $("#additions").append("<input  class='input' name='additions' size='26' type='text' value='" + data.additions + "' />");
                    $("#deductions").append("<input  class='input' name='deductions' size='26' type='text' value='" + data.deductions + "' />");
                    $("#orderDays").append("<input  class='input' name='orderDays' size='26' type='text' value='" + data.orderDays + "' />");
    
                    //Relação de VT de um funcionario específico 
                    $(".operators").empty();
                    for (var i = 0; i < data.arrays.length; i++) {
                        $(".operators").append("<tr>");
                        $(".operators").append("<td>" + data.arrays[i].Name + "</td>");
                        $(".operators").append("<td>" + data.arrays[i].CardNumber + "</td>");
                        $(".operators").append("<td>" + parseFloat(data.arrays[i].Cost1, 10).toFixed(2) + "</td>");
                        $(".operators").append("<td>" + data.arrays[i].Cost1Name + "</td>");
                        $(".operators").append("<td>" + parseFloat(data.arrays[i].Cost2, 10).toFixed(2) + "</td>");
                        $(".operators").append("<td>" + data.arrays[i].Cost2Name + "</td>");
                        $(".operators").append("<td>" + parseFloat(data.arrays[i].Cost3, 10).toFixed(2) + "</td>");
                        $(".operators").append("<td>" + data.arrays[i].Cost3Name + "</td>");
                        $(".operators").append("<td>" + parseFloat(data.arrays[i].Cost4, 10).toFixed(2) + "</td>");
                        $(".operators").append("<td>" + data.arrays[i].Cost4Name + "</td><br />");
                        $(".operators").append("</tr>");
                    }
                    //lista de eventos de um funcionario em especifico.
                    $(".events").empty();
                    for (var j = 0; j < data.Events.length; j++) {
                        $(".events").append("<tr>");
                        $(".events").append("<td>" + data.Events[j].Name + "</td>");
                        $(".events").append("<td>" + data.Events[j].Days + "</td>");
                        $(".events").append("<td>" + data.Events[j].StartDate + "</td>");
                        $(".events").append("<td>" + data.Events[j].EndDate + "</td>");
                        $(".events").append("</tr>");
                    }
                },
                error: function (jqXhr, textStatus, errorThrown) {
                }
            });
            $('#element_to_pop_up').bPopup({
                modalClose: true,
                opacity: 0.6,
                positionStyle: 'fixed' //'fixed' or 'absolute'
            });
        });
    
    </script>

    Funciona basicamente assim: Quando a index carrega, a partial view e carregada e traz consigo alguns dados,conforme imagem abaixo.


    quando o usuario clica em um nome, uma janela pop up se abre com todos os dados referentes ao usuario selecionado.

    Até ai tudo bem, tudo funciona. Entretanto, logo acima desta tabela esta um select com o nome operadoras, que através do evento onclick disparo a função teste(), que esta na index logo acima, que tem como a finalidade simplesmente filtrar os funcionários do sistema de acordo com o que foi selecionado no select, até ai, tudo bem....o problema aparece exatamente agora, a tela que é carregada é a mesma, com uma unica distinção que é a filtragem do select, quando clico no nome do funcionário, os dados não são carregados no pop up, ate são carregados, mas só depois que clico duas vezes.

    Difícil até de explicar galera......nos meus scripts, dei um console.log(), e percebi que os dados estão lá, certinhos......o mais estranho é que na index funciona certinho.....e qdo seleciona a operadora a pagina continua a mesma, com exceção é claro dos dados da tabela.

    Alguém já passou por isso ou tem conhecimento do que pode estar acontecendo?


    terça-feira, 5 de fevereiro de 2013 19:34

Respostas

  • Amigo, montei a sua aplicação aqui, e debugando no Chrome, percebi que a sua logica esta um pouquinho errada.....analisando o código fonte da aplicação, pude perceber que a cada interação sobre o select operadoras, estava sendo criado uma nova div "element_to_pop_up", e isto é o que esta gerando as anomalias relatas por você. Sugiro que reescreva sua função teste() da seguinte forma:

    <script type="text/javascript">
        //script responsavel por renderizar a pagina de acordo com a operadora selecionada
        function teste() {
            $("#All").remove();
            //insira esta linha aqui
            $("#element_to_pop_up").remove();
            ids = $("#selectOperator :selected").attr('id');
            $('#funcionario').load("/Funcionario/GetOperadora/"+ ids );
        }
    </script>

    ps. se util, gentileza marcar como resposta.

    • Marcado como Resposta Felipe Mena quarta-feira, 6 de fevereiro de 2013 18:41
    quarta-feira, 6 de fevereiro de 2013 18:09

Todas as Respostas

  • Desculpem, mas esqueci de dizer que o pop up começa na div 
    id="element_to_pop_up"
    terça-feira, 5 de fevereiro de 2013 19:36
  • Ele chega a carregar uma lista e enviar para o controller todos os dados corretos?

    Vc ja debugou e na função no controller esta chegando tudo certo?


    Paulo Marcelo Dalbosco

    terça-feira, 5 de fevereiro de 2013 19:46
  • OPa.....chega sim Paulo.......debuguei ,,,,,,, chega os parametros certinhos, retorna os parametros certinhos...(visualizei os parametros no metodo success do ajax com console.log(variavel de retorno)......só da errado qdo eu altero o select das operadoras.....ai até funciona....mas tenho que dar 2 cliques, pois o primeiro tras o form em branco e o segundo os dados do funcionario.....e dai pra frente só dando dois cliques......detalhe, qdo clico a primeira vez no funcionario maria e na seguna no funcionario fabio, os dados da maria estao aparecendo nos campos que eram para aparecer os dados do fabio.....acho que o jquery ou ajax ou sei la quem estão guardando estes dados.....sempre que chamo o controller seto as variaveis para null......e como pode ver nos scripts acima também limpo os campos onde serao inseridos os novos dados  

    $("#identifier").empty();

    ja usei tambem .val(''); e remove(); mas continua dando biziu....rs

    terça-feira, 5 de fevereiro de 2013 23:36
  • Boa noite,

    Cara passei por isso com as extensões do Html.

    No meu caso era um Html.ActionLink troquei para Ajax.ActionLink e chamei meu Popup.

    Tenta fazer um Ajax.BeginForm.


    Fábio Kiatkowski Engenheiro de Software

    quarta-feira, 6 de fevereiro de 2013 00:17
  • Obrigado pela atenção Fábio, mas acho que foge do contexto, trocar de html.beginform para ajax.beginform, pois este formulario só seria submetido apos clicar no botao salvar, e a aplicação esta dando pau antes de eu clicar nesse botão.......concorda comigo que este ajax.beginform, só iria trabalhar qdo eu quisesse enviar os dados do formulario para o servidor? De qquer forma agradeço pelo ideia.....
    quarta-feira, 6 de fevereiro de 2013 13:09
  • Amigo, montei a sua aplicação aqui, e debugando no Chrome, percebi que a sua logica esta um pouquinho errada.....analisando o código fonte da aplicação, pude perceber que a cada interação sobre o select operadoras, estava sendo criado uma nova div "element_to_pop_up", e isto é o que esta gerando as anomalias relatas por você. Sugiro que reescreva sua função teste() da seguinte forma:

    <script type="text/javascript">
        //script responsavel por renderizar a pagina de acordo com a operadora selecionada
        function teste() {
            $("#All").remove();
            //insira esta linha aqui
            $("#element_to_pop_up").remove();
            ids = $("#selectOperator :selected").attr('id');
            $('#funcionario').load("/Funcionario/GetOperadora/"+ ids );
        }
    </script>

    ps. se util, gentileza marcar como resposta.

    • Marcado como Resposta Felipe Mena quarta-feira, 6 de fevereiro de 2013 18:41
    quarta-feira, 6 de fevereiro de 2013 18:09
  • Poxa vida Fabio Junio....nem me atentei para isso.....muito obrigado pela ajuda.......valeu demais...
    quarta-feira, 6 de fevereiro de 2013 18:40