Post com Bootstrap Modal e Ajax
09/01/2015
0
Há mais ou menos uma semana estou com um problema que está me tirando boas noites de sono.
Estou utilizando bootstrap modal para renderizar uma PartialView de insercao/alteracao de dados. Quando renderizo a partial view pela primeira vez e faço o post das informações, os dados são inseridos normalmente e o modal é fechado. Quando chamo esse modal pela segunda vez, para realizar um novo cadastro, os dados são gravados no banco de forma duplicada. Se eu chamo o modal mais uma vez e faço um novo cadastro, os dados são salvos triplicados, e assim por diante.
Usando o debug do Chrome, não existe nenhuma mensagem de erro.
Alguem ai pode me ajudar, por favor, a resolver esse problema?
Desde já agradeço!
Thomás Moreira
Posts
09/01/2015
Joel Rodrigues
ASP.NET MVC e Bootstrap - Exibindo views modais
ASP.NET MVC e jQuery UI: Desenvolvendo um CRUD com janelas modais
O segundo está mais completo, a diferença é que usei o Dialog da jQuery UI, mas a lógica é a mesma.
09/01/2015
Thomás Moreira
Obrigado pelas informações!
A principio funcionou. Utilizei seu exemplo com bootstrap.
Porem, eu preciso fazer algumas validações e tratamentos no retorno do metodo e, para isso, uso o Ajax através dos seguintes arquivos:
jquery.validate.unobtrusive.min.js
jquery.validate.min.js
jquery.unobtrusive-ajax.min.js
O fluxo é o seguinte: A partial view do modal, faz um post para o controller. No controller, eu faço o Insert e, tendo sucesso, eu retorno uma Url, via Json. Eu tenho um arquivo js externo que faz o tratamento dessa Url e direciona. As opçoes são as seguintes: O usuário pode Inserir, salvar e continuar no modal com a View preparada para uma nova inserção. O usuario pode inserir, salvar e manter a view com os dados que acabou de inserir, pronto para edição. E por ultimo, o usuário pode simplesmente inserir e automaticamente apos a inserção, fechar a janela e retornar para a View Index.
Antes de implementar o fluxo acima, tudo estava funcionando. Porem, quando precisei referenciar os arquivos js mencionados acima, na minha View Index para implmentar o fluxo normal, o problema voltou a acontecer.
Todos os arquivos js do Jquery, Bootstrap e etc estão no Layout.
Vc saberia uma forma para tratar essa situação?
Obrigado!
12/01/2015
Joel Rodrigues
Em teoria a validação com jQuery Validate não deveria atrapalhar. Para implementar esse fluxo que você descreveu, você pode remover o botão submit do form que fica no modal e no lugar dele colocar um botão qualquer fora do form (no footer do modal). Neste botão, você submeteria os dados via Ajax, receberia o retorno e tomaria a decisão adequada (na função done() da chamada $.ajax, por exemplo), sem fechar o modal.
Não sei se entendi bem seu problema, mas para implementar o que você descreveu, eu procederia dessa forma.
04/08/2016
Eder
Estou enfrentando o mesmo problema, consegui resolver a questão do submit mas quando salvo a terceira vez ele envia os dados pelo ajax mas não dá retorno, a partir daí ele não executa mais.
Tem ideia como posso resolver?
Segue o código javascript:
function verificaprecadastro(){ var frm = $('#pessoanova'); if ($("#jaexistecli").val() == 1) { bootbox.alert("Atenção! Já existe uma pessoa cadastrada com esses Nome!"); $("#nomegp").addClass("has-error"); //$("#nome").focus() return false; } if ($("#nome").val() < 1) { bootbox.alert("Por favor, informe o nome do Cliente!"); $("#nome").focus() return false; }else{ $("#btnsalvar").attr('value', 'Aguarde...'); $("#btnsalvar").prop("disabled", true); $.ajax({ type: frm.attr('method'), url: frm.attr('action'), data: frm.serialize(), success: function (data) { var dataOld = $("#clientes").select2('data'); dataOld.push({id: data, Nome: $("#nome").val()}); $("#clientes").select2("data", dataOld, true); $('#precadastro').modal('hide'); frm.trigger("reset"); $("#btnsalvar").attr('value', 'Salvar'); $("#btnsalvar").prop("disabled", false); } }); }
Clique aqui para fazer login e interagir na Comunidade :)