Return Response para uma janela modal

[Guevara]

Olá pessoal!
Estou procurando uma forma de retornar a este form num modal caso
ocorra algum erro na validação.

http://postimage.org/image/5fs0t0ky5/

Quando o form é válido a view retorna para a mesma página usando o
reverse:

return HttpResponseRedirect(reverse('detail_display',
args=[display.id]))

O form não é enviado via ajax mas da forma convencional mesmo.

No caso de erro no form não posso usar o reverse pq é feito um reload
na página e o modal some.
Como posso mostrar os erros do form nessa janela modal?
Abraço!

[Elyézer Mendes Rezende]

Já que vc não está usando Ajax, você terá que verificar quando
carregar a página se existe o form com os erros para exibir.

Se estive usando jQuery você poderá verificar se o div com id
meu_form, por exemplo, está presente no DOM e com isso carregar o
modal com o formulário e os erros.

Se não quiser que a página recarregue, a unica forma que vejo é usando ajax.

Qualquer coisa, posta o código que tento ajudar melhor.

Até mais

2012/5/4 Guevara <egueva...@gmail.com>:

> --
> Django Brasil em Google Groups <http://groups.google.com.br/group/django-brasil>
> Associe-se à Python Brasil e suporte nossa comunidade! <http://associacao.python.org.br/>



--
Elyézer Mendes Rezende
http://elyezer.com

[Guevara]

Beleza Elyézer?
A validação dos fields consegui fazer com o jquery-plugin-validation:

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Mas preciso fazer uma validação que é verificar se há postais em
estoque ao efetuar a reposição de postais no display. O estoque é
informado no modal desta forma {{ janela.campanha.estoque }}. Se o
estoque for <= 0 uma mensagem precisa ser exibida no modal alertando.
Como poderia validar este estoque? http://dpaste.com/744292/
Abraço!

On 6 maio, 23:17, Elyézer Mendes Rezende <elyeze...@gmail.com> wrote:
> Já que vc não está usando Ajax, você terá que verificar quando
> carregar a página se existe o form com os erros para exibir.
>
> Se estive usando jQuery você poderá verificar se o div com id
> meu_form, por exemplo, está presente no DOM e com isso carregar o
> modal com o formulário e os erros.
>
> Se não quiser que a página recarregue, a unica forma que vejo é usando ajax.
>
> Qualquer coisa, posta o código que tento ajudar melhor.
>
> Até mais
>

> 2012/5/4 Guevara <eguevara2...@gmail.com>:

[Elyézer Mendes Rezende]

Você poderia fazer algo assim no seu template:

<script>
var estoque = {{ janela.campanha.estoque }};
//document ready
if (estoque == 0) {
// sua lógica
}
</script>

O template será processado no servidor e quando chegar no cliente já
vai ter o número preenchido, dessa forma o javascript consegue
processar a informação corretamente.

Quanto a validação, sempre valide do lado do servidor, pois é fácil
burlar JS do lado do cliente.

Até mais

2012/5/7 Guevara <egueva...@gmail.com>:

[Ernesto Guevara]

Obrigado pela dica Elyézer, mas existem vários forms no template. Se trata de uma tabela, onde no último <td> existe uma janela modal, o usuário clica e se abre um modal com os dados correspondentes de cada janela.

Consegui enviar o form via ajax e receber as mensagens de sucesso e erros, exceto a mensagem de erros existentes no form.

O response desta mensagem de sucesso é mostrado corretamente na janela modal:

data = {'reposicao':'<strong>Janela atualizada com sucesso.</strong>'}
return HttpResponse(simplejson.dumps(data), mimetype='application/json')

Mas para os erros no form não, só aparece uma chave "}" na janela modal.

data = dict((key, [unicode(v) for v in values]) for key, values in form.errors.items())
return HttpResponse(simplejson.dumps(data)) 

O response da views é:

{"reposicao": ["Este campo \u00e9 obrigat\u00f3rio."]}

Imagem: http://postimage.org/image/wccoobh45/

Se eu colocar:

return HttpResponse(simplejson.dumps(data), , mimetype='application/json')

Este é o erro: http://postimage.org/image/qqzgc20dv/

A função JQuery:

$(function () {
    var $modal = $('div').css('display'); /// search in all modals
    if($modal == 'block') { // check the modal as block style
    var $form = $(this).find('form'); // find the form of modal with style block
    var $message = $(this).find('div#message'); // find the form in modal
    $($form).submit(function() { // catch the form's submit event
        $.ajax({ // create an AJAX call...
            data: $(this).serialize(), // get the form data
            type: $(this).attr('method'), // POST
            url: $(this).attr('action'), // the file to call  
            success: function (data) {
                $.each(data, function(key, msg) {
                    $($message).html(msg); // update the DIV message
                    $($form).resetForm(); // reset the form
                });               
            }
        });
        return false;
    });
    };
});

Sabe dizer o pq de não mostrar corretamente a mensagem de erros no form?

Abraço!

[Elyézer Mendes Rezende]

Acho que o problema é que o retorno pode não estar sendo interpretado
como um objeto do Javascript.

Tenta usar o parseJSON [1] na string de retorno para transformá-la em
um objeto depois vc terá que incluir a mensagem de erro no form.

Outra alternativa seria vc retornar um pedaço de HTML com o form e os
erros já escritos na requisição AJAX, com isso vc evitaria um
processamento do lado do cliente para posicionar as mensagens de erro.

Se caso não conseguir eu tento ajudar com algum exemplo prático (que
terei que fazer depois do trabalho)

Até mais

[1] http://api.jquery.com/jQuery.parseJSON/

2012/5/10 Ernesto Guevara <egueva...@gmail.com>:

[Ernesto Guevara]

Obrigado pela ajuda Elyézer!
Fiz umas alterações que deram certo. Coloquei colchetes em todas as mensagens, para ficarem iguais à mensagem enviada pelo forms.

data = {'reposicao':['Reposição efetuada com sucesso.']}

return HttpResponse(simplejson.dumps(data), mimetype='application/json')

E no jquery acesso a mensagem pegando pela indexação:

$($message).html('<strong>'+msg[0]+'</strong>'); // update the DIV

O único incoveniente que apareceu aqui é um warning ao fechar a janela modal:

"String vazia passada para getElementById()."

O botão é este:

<a href="#" class="btn" data-dismiss="modal">Fechar</a>

Não sei de onde vêm esse erro mas não me impede de fechar a janela nem de efetuar as outras ações. Estranho não?

Abraço!

[Elyézer Mendes Rezende]

Pelo que vi vc faz um cache nas suas variáveis do JS, por exemplo:

var $message = $('#message');

Depois do cache vc não precisa usar mais a função $() como em:

$($message).html('<strong>'+msg[0]+'</strong>'); // update the DIV

bastaria:

$message.html('<strong>'+msg[0]+'</strong>'); // update the DIV

Pois $message já é um objeto jQuery.

Não sei se isso pode ter algo a ver com seu problema.

Até mais

[Ernesto Guevara]

Oi Elyézer!
Infelizmente não era isso, fiz essa alteração mas ao fechar a janela modal a mensagem continua.
Abraço!

[Elyézer Mendes Rezende]

O negócio é debugar o JS usando o console e break points para ver o
que exatamente está causando o erro, dessa forma ficará mais fácil de
você encontrar o problema.

Boa sorte

Abraço

2012/5/11 Ernesto Guevara <egueva...@gmail.com>:

[Ernesto Guevara]

Olá Elyézer!
Na hora em que ia fazer o debug o erro desapareceu. Enfirm, se surgir de novo tento resolver pelo firebug.
Abraço!

[Elyézer Mendes Rezende]

Está certo, boa sorte.

Abraço

2012/5/15 Ernesto Guevara <egueva...@gmail.com>: