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 :)
