0

Desenvolvi um formulário, quando o usuário clicar no botão enviar aparece um GIF e depois tem que aparecer um modal falando que as informações foram enviadas até ai tudo bem o GIF funciona normal porem quando o formulário e submetido o GIF some e o POPUPnão aparece gostaria de saber se estou fazendo algo errado segue meu código Javascript:

 $("#submit-btn").click(function (e) {
    e.preventDefault();

    var data = $('form').serializeArray();

    if ($(this).hasClass('btn-warranty')) {
        var inputRangeValue = $('.final-value').first().text();
        var specialty = {name: 'specialty', value: $('#specialty').val()};
        var value = {name: 'value', value: inputRangeValue + '000'};
        data.push(specialty);
        data.push(value);
    }

    if ($(this).hasClass('btn-indenizometro')) {
        var question_1 = $('input[name=question_1]:checked').val();
        var question_2 = $('input[name=question_2]:checked').val();
        var question_3 = $('input[name=question_3]:checked').val();
        //var reason =  {name: 'reason', value: sessionStorage.tipo };
        var monthly = {name: 'monthly', value: $('#monthly-value').text()};

        data.push(question_1);
        data.push(question_2);
        data.push(question_3);
        data.push(monthly);
        //data.push(reason);
    }

    var product = {name: 'product', value: window.location.pathname};
    data.push(product);
    $('.loaderImage').show();
    //Ajax post data to server
    $.ajax({
        type: 'POST',
        url: '/request',
        data: data,
        dataType: 'json',
        success: function (data) {
            $('.loaderImage').hide();
            $('#modal-success').modal('show');
            $('form')[0].reset();
        },
        error: function (data) {
            //console.log(data);
        }
    });
});

OBS: só lembrando que o modal que to usando é do boostrap

4
  • O que você quer fazer com um modal dentro de uma callback do JQuery?
    – user86792
    Commented 11/08/2017 às 18:03
  • 1
    tipo quando eu clico em enviar aparece um gif no botão porque demora muito para enviar o form ai implementei essa gif mais ai quando o form e enviado ela some ai o popup teria que aparecer mais ele não aparece Commented 11/08/2017 às 18:16
  • Abre o console do Chrome e vê se tem um erro qualquer. Vê essa simulação que eu fiz. Aparentemente seu código não possui nada errado. Troca .click() por .on( "click", function () { ... });
    – user86792
    Commented 11/08/2017 às 18:34
  • Eu ainda vou acrescentar o seguinte: usando modals é uma péssima ideia para notificação. Eles são intrusivos e atrapalham, além disso é um click a mais pra mim, o usuário. Use algo como NotifyJS, bem mais elegante e é só uma notificação.
    – user86792
    Commented 11/08/2017 às 18:52

1 Resposta 1

1

Sua logica não está errada, mas creio que isto seja um problema de carregamento onde o id $('#modal-success') não foi reconhecido.

$(document).ready(function(){
        $(#botao).click( function(){
            $('.loaderImage').show();
            //Ajax post data to server
            $.ajax({
            type: 'POST',
            url: '/request',
            data: data,
            dataType: 'json',
            success: function (data) {
                $('.loaderImage').hide();
                $('#modal-success').modal('show');
                $('form')[0].reset();
            },
            error: function (data) {
                //console.log(data);
            }
        });
    });
});

O evento ready dispara o carregamento do código JavaScript depois que todo o documento HTML for carregado, evitando assim que algum elemento não seja reconhecido. Fiz alguns teste em casa com base no seu exemplo e funcionou

6
  • amigo vou atualizar meu códifo para ver ser toda a chave como está Commented 11/08/2017 às 18:21
  • ta la atualizei o js Commented 11/08/2017 às 18:21
  • Este código está em arquivo separado certo? Commented 11/08/2017 às 18:30
  • isso mesmo esta em um arquivo chamado app.js Commented 11/08/2017 às 18:33
  • Então agora pegue todo o código deste arquivo e coloque dentro do $(document).ready( function(){ ...todo o seu codigo }); Commented 11/08/2017 às 18:39

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .