Como Usar Modal com Ajax


Finalmente, como prometido o primeiro artigo desse site. Várias sugestões interessantes foram lançadas e a área de sugestões ainda está ativa, só que em outro menu ali em cima. Se tiver sugestões ainda pode enviar. Detalhe que agora temos um captcha, para evitar os indesejados bots que nos visitaram algumas vezes. Isso também será um próximo artigo, como fazer para usar o "eu não sou um robô" com Web2py. Nesse primeiro artigo vamos ver uma forma de utilizar modal com Ajax de forma reutilizável e fácil (como tudo no web2py). O Twitter Bootstrap tem o component modal. Mas ele é um componente muito limitado. Por isso eu preferi utilizar esse daqui, o Bootstrap Dialog, [Bootstrap Dialog](https://nakupanda.github.io/bootstrap3-dialog/). Existem várias opções, mas esse é baseado no Bootstrap, portanto não vai quebrar o estilo se seu site utiliza Bootstrap.

Arquivos Necessários

O primeiro passo então é incluir o bootstrap dialog no projeto, o que consiste em simplesmente baixar o javascript e o css da página do projeto no github.

1. [bootstrap-dialog.min.js](https://github.com/nakupanda/bootstrap3-dialog/blob/master/dist/css/bootstrap-dialog.min.css) na pasta static/js. 2. [bootstrap-dialog.min.css](https://github.com/nakupanda/bootstrap3-dialog/blob/master/dist/css/bootstrap-dialog.min.css) na pasta static/css.

Incluir os arquivos no arquivo principal de layout, o layout.html No início do arquivo, depois da inclusão do arquivo boostrap.css, dentro da tag `<head>`

    <link rel="stylesheet" href="{{=URL('static','bootstrap-dialog/css/bootstrap-dialog.min.css')}}"/>

E o arquivo javascript no final do arquivo:

<script src="{{=URL('static','bootstrap-dialog/js/bootstrap-dialog.min.js')}}"></script>

Funções

Vamos também criar um arquivo para conter nossas funções. Na pasta static/js, vamos criar o arquivo modal.js e colocar o seguinte conteúdo:

	function show_modal(url, title){
        bdform = $("#bdform");
        if ( bdform.length == 0){
            bdform = $("<div id='bdform'></div>");
            $("body").append(bdform);
        }

        $("#bdform").load(url, function () {
            web2py_trap_form(url, "bdform");
            BootstrapDialog.show({
                title: title,
                message: $("#bdform"),
                size:BootstrapDialog.SIZE_WIDE,
                autodestroy: true,
                onshown: function(dialogRef){
                    $(".bootstrap-dialog-message div.panel-body input").first().focus();
                }
            });
        });
    }


	function hide_modal() {
	    $.each(BootstrapDialog.dialogs, function(id, dialog){
                            dialog.close();
                        });
}

Depois disso também é necessário incluir o arquivo criado no layout.html.

    <script src="{{=URL('static','js/modal.js')}}"></script>

Conteúdo do Modal

A proposta desse artigo não é só exibir o modal mas sim que o conteúdo seja carregado dentro do modal via Ajax, tornando sua aplicação ainda mais diversificada. Para este exemplo, então, vamos também criar uma função no lado do servidor, num controller para que o conteúdo dela seja exibido no modal, através de um link ou botão. Por exemplo, podemos ter no arquivo controllers/default.py

    def teste_modal():
        form = SQLFORM.factory(Field('nome')).process()
        return dict(form=form)

Exemplo de Uso

Agora tudo está pronto para utilizar nossas funções para iniciar ou fechar o modal. Tendo a função show_modal pronta pra ser utilizada, poderá ser aplicada de varias formas. Podemos criar um um link com apareência de botão que chame nossa função.

    <a class="btn btn-default" onclick="show_modal("{{=URL(c='default', f='teste_modal.load')}}", "Teste")">

O primeiro argumento é a url e pra isso usamos o helper URL. O segundo argumento é o título do modal. É importante também notar que a extensão utilizada é a .load e não .html, pois assim não será carregado o layout inteiro novamente. Se isso ocorrer, além de desfigurar dentro do modal, também vai causar problema no layout da página pois vai reexecutar scripts que só deveriam ser executados uma vez. Outra possibilidade é fechar o modal automaticamente usando o hide_modal. E isso é possível a partir do servidor também através da variável response.js. Qualquer instrução javascript colocada nessa variável será executado quando a resposta chegar no browser.

    def teste_modal():
        form = SQLFORM.factory(Field('nome')).process()
        if form.accepted:
	        response.js ='hide_modal()';
        return dict(form=form) 

Dessa forma, quando a o form for enviado e passar na validação, o modal fechará automaticamente. Se não passar na validação o conteúdo será recarregado dentro do modal, podendo exibir os campos com erros.

Conclusão

É muito fácil criar aplicações com web2py e também muito fácil deixá-las mais ricas usando outros componentes. Algumas melhorias ainda podem ser feitas quanto a exibição de modal com Ajax. Aguarde updates para as melhorias.