13
respostas

Carregar uma div na mesma pagina

galera eo seguinte, tenho uma tabela que carrega apartir de uma consulta do meu controller,...

nesta tabela tenho um botão detalhes, como faço para esse botão detalhes abrir uma nova tabela abaixo na mesma pagina?

Explicando melhor... eu tenho uma tabela, na tabela tenho um botão. quando eu clicar neste botão eu quero pegar duas variáveis, fazer uma consulta e carregar outra tabela abaixo e nao carregar outra pagina. alguém consegue me ajudar? estou com muita dificuldade.

13 respostas

Oii Emerson, vc está usando AngularJS?

Acredito que vc vai precisarde um ng-if que exibirá a tabela de detalhes apenas quando alguém disparar um método no click do botão detalhes... Ai este método receberia como parâmetro os dados do objeto da linha da tabela. Dentro deste método vc passa os dados para uma propriedade, e desta propriedade você faz bind no template dessa tabela de detalhes.

Veja se vc consegue fazer com essa lógica! :)

desculpa nao ter especificado, e em laravel...

Laravel? Para fazer isto você precisará de Javascript. Você já tem algum javascript na sua aplicação?

tenho uma breve noção de oque fazer... mas como to começando com laravel, estou bem perdido com isso... poderia me dar um direcionamento de como pegar o valor mandar para meu controler fazer todo o processo de verificação e trazer os dados para a div?

minha maior questão é... como trazer os dados da função para dentro da DIV, consegue me ajudar?

oque eu preciso realmente é o seguinte.

Passar dados do Controller para um modal na view Laravel... mas to com muita dificuldade.

Emerson, na view do Laravel, você consegue acessar as variáveis no controller?

acredito que sim mas nao sei como fazer isso... poderia me dar um exemplo para que eu tenha um caminho para seguir?

ja envio as informações para uma função no meu controler.. consigo realizar a consulta e tudo mais... mas nao sei como retornar isso no modal...

Cara, isso é mais simples do que você imagina. Como a Instrutora Vanessa relatou, fazer isso usando Javascript e Ajax seria uma mão na roda. Seria até mais fácil de fazer essa "manipulação", pois o Laravel já disponibiliza o Vue "Out of the box".

Pensando em PHP Puro, você pode colocar uma condição abaixo da tabela usando o @if (igual a Instrutora relatou) do Laravel, e ao clicar no botão você será redirecionado a Controller que irá fazer essa consulta e retornar para a mesma view com esse resultado.

Você pode fazer:

return view('pasta.arquivo', compact('result'));

ou

return view('pasta.arquivo')->with('resultado', $result); 

O problema do ajax e que eu não consegui fazer com que ele entende-se a URL... procurei outros exemplos mas no meu não funciona...

<script>
    $(document).on("click", "#btnInfoCol", function () {
        var info = $(this).attr('data-id');
        var str = info.split('|');
        var op_col = str[0];
        var rec_col = str[1];
        console.log(op_col);
        console.log(rec_col);
        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            type:'post',
            url: '/intranet/Maquinas/horastrabalhadas.php',
            async: true,
            data: {
                'op_col':op_col, 'rec_col': rec_col
            },
            async:false,
            erro: function () {
                alert('Algo deu errado ao carregar as informaçoes. Contate o Administrador!');
            },
            success: function (data) {
                $("#atualiza_recurso").html(data);
            }

        });
    });
</script>

então seguindo sua logica... na minha tabela eu tenho a seguinte situação... um botão que pega os dados e envia para meu controller.

<td><a href="/intranet/ConsultaHoras/{{$op_col}}/{{$rec_col}}" class='btn btn-success fa fa-check-circle' id='btnInfoCol' data-toggle='modal' data-target='#modalInfoMaq'></a></td>

no meu route,

Route::get('/intranet/ConsultaHoras/{op}/{rec}','IntranetController@ConsultaHoras');

e no meu controller eu retorno a consulta do SQL.

return view('maquinas.recurso', compact($ret_hr));

porem... agora que vem o grande problema... como pego esses dados no modal? ja tentei diversas formas e sempre tenho erro... então fiz o tratamento da condição antes de tratar os dados do array...

@if(!empty($ret_rh))

        @else
          Dados não carregados.  
        @endif

porem, mesmo assim a variável $ret_hr sempre esta vazia, algo nao esta certo. mas nao consigo achar.

Desculpe pela demora.

Seria possível subir esse projeto no Github?

Caso sim, eu posso fazer clonar seu repositório e testar, caso não, eu tento fazer um simples exemplo.

Se puder fazer um exemplo seria mais fácil... Obrigado.

Emerson, desculpa pela demora, mas é porque ultimamente estou sem tempo, mas fiz uns exemplos bem simples, mas acredito que seja possível entender o fluxo.

Bitbucket: https://bitbucket.org/MathewsLima/alura-example/src/master/

O Modal eu fiz usando Vue/Axios. No PHP puro eu esqueci de colocar a modal, mas segue o mesmo fluxo, ou seja, coloca um evento de onclick no botão para fazer o fetch dos dados.

Os dados são estátios, dependendo do que você deseja fazer, é só seguir a mesma lógica, alterando o Verbo HTTP.


OBS: A função compact recebe STRING e não a variável em sí.

ERRADO

return view('maquinas.recurso', compact($ret_hr));

CORRETO

return view('maquinas.recurso', compact('ret_hr'));

Provavelmente esse é o motivo da variável sempre chegar como empty/null :)


Qualquer dúvida, responde aí que tento esclarecer melhor.

Isso aqui eu entendi, o porem é... como recebo esse ret_hr ? como uma variável dentro do modal?

ERRADO

return view('maquinas.recurso', compact($ret_hr));

CORRETO

return view('maquinas.recurso', compact('ret_hr'));

peço desculpas mas seu exemplo nao ficou claro, na verdade procurei mas nao consegui encontrar o mesmo.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software