BootstrapValidator y envio de formas via ajax

[JessicaTJ]

Hola chicos, tengo este codigo

Código Javascript:

$(document).ready(function() {
    $('#newsForm').bootstrapValidator({
            // Only disabled elements are excluded
            // The invisible elements belonging to inactive tabs must be validated
            excluded: [':disabled'],
            trigger: 'focus blur keyup',
            feedbackIcons: {
                valid: 'icon-ok',
                invalid: 'icon-remove',
                validating: 'icon-refresh'
            },
            fields: {
                //field data here.
            }
        })
        // Called when a field is invalid
        .on('error.field.bv', function(e, data) {
            // data.element --> The field element
 
            var $tabPane = data.element.parents('.tab-pane'),
                tabId    = $tabPane.attr('id');
 
            $('a[href="#' + tabId + '"][data-toggle="tab"]')
                .parent()
                .find('i')
                .removeClass('fa-check')
                .addClass('fa-times');
        })
        // Called when a field is valid
        .on('success.field.bv', function(e, data) {
            // data.bv      --> The BootstrapValidator instance
            // data.element --> The field element
 
            var $tabPane = data.element.parents('.tab-pane'),
                tabId    = $tabPane.attr('id'),
                $icon    = $('a[href="#' + tabId + '"][data-toggle="tab"]')
                            .parent()
                            .find('i')
                            .removeClass('fa-check fa-times');
 
            // Check if the submit button is clicked
            if (data.bv.getSubmitButton()) {
                // Check if all fields in tab are valid
                var isValidTab = data.bv.isValidContainer($tabPane);
                $icon.addClass(isValidTab ? 'fa-check' : 'fa-times');
            }
        }).on('success.form.bv', function(e) {
            e.preventDefault();
            var $form = $(e.target);
            var bv = $form.data('bootstrapValidator');
              $.post($form.attr('action'), $form.serialize(), function(result) {
                // ... Falta lo de aqui U.U ...
            }, 'json');
        });
    });
 

Y hasta ahi llegue XD la verdad no se como manejar esa parte de bootstrapvalidator, he tratado hacer el envio ajax por fuera pero obviamente me genera errores, alguien lo ha utilizado y hecho esto?

¡Agradecere mil su ayuda!

[Djoaq]

Hola acabo de responder una pregunta que te puede servir.
Un saludo
http://www.forosdelweb.com/f179/prob...datos-1110111/

[JessicaTJ]

Iniciado por Djoaq

Hola acabo de responder una pregunta que te puede servir.
Un saludo
http://www.forosdelweb.com/f179/prob...datos-1110111/

Muchas gracias por tu respuesta Djoaq, intente como indicas pero cuando doy click en el boton de envio, la forma se me queda "tildeada" no hace nada y el boton se queda en estado de "click", alguna idea de porque podria pasar esto disculpa?

[JessicaTJ]

Ya logre hacer que envie la forma, pero ahora, no me actualiza si el resultado es positivo:

Código Javascript:

$(document).ready(function() {
    $('#newsForm').bootstrapValidator({
            // Only disabled elements are excluded
            // The invisible elements belonging to inactive tabs must be validated
            excluded: [':disabled'],
            trigger: 'focus blur keyup',
            feedbackIcons: {
                valid: 'icon-ok',
                invalid: 'icon-remove',
                validating: 'icon-refresh'
            },
            fields: {
                //field data here.
            }
        })
        // Called when a field is invalid
        .on('error.field.bv', function(e, data) {
            // data.element --> The field element
 
            var $tabPane = data.element.parents('.tab-pane'),
                tabId    = $tabPane.attr('id');
 
            $('a[href="#' + tabId + '"][data-toggle="tab"]')
                .parent()
                .find('i')
                .removeClass('fa-check')
                .addClass('fa-times');
        })
        // Called when a field is valid
        .on('success.field.bv', function(e, data) {
            // data.bv      --> The BootstrapValidator instance
            // data.element --> The field element
 
            var $tabPane = data.element.parents('.tab-pane'),
                tabId    = $tabPane.attr('id'),
                $icon    = $('a[href="#' + tabId + '"][data-toggle="tab"]')
                            .parent()
                            .find('i')
                            .removeClass('fa-check fa-times');
 
            // Check if the submit button is clicked
            if (data.bv.getSubmitButton()) {
                // Check if all fields in tab are valid
                var isValidTab = data.bv.isValidContainer($tabPane);
                $icon.addClass(isValidTab ? 'fa-check' : 'fa-times');
            }
        }).on('success.form.bv', function(e) {
              submit();
        });
    });
    
function submit(){
      $('#newsForm').submit(function(){
              $.post("enviar_datos.php", $('#newsForm').serialize(),function(data){
                         if (data.success){
                            $('#newsForm').find('.well').slideUp('normal', function (){
                            $('#newsForm').html(data);
                            });
                         }else{
                                    window.alert('Failed');
                         }
              }, 'json');
              return false;
   });
}
 

help please? :3

[Djoaq]

Recuerda usar json_encode para devolver desde php !
Un saludo!

Código Javascript:

.on('success.form.bv', function(e) {
            // Prevent form submission
            e.preventDefault();
          var datos_registro = $('.registro_alta').serialize();
            $.ajax({
            type : 'POST',
            data : datos_registro,
            url  : 'cacadevaca.php',
            success: function(res){ 
                if(res == 0){
                   //codigo si recibes si se ha hecho el insert ok
                }
                else if(res == 1){
                        //codigo si falla algo si se ha hecho el insert ok         
                }
 
                else{
                    alert('Problemas');
                }
            }
            });
 
        });
 

[Djoaq]

Se me duplico el post Sorry! :D

[JessicaTJ]

Al utilizar tu codigo Djoaq, me inserta de igual manera el formulario correctamente, pero me devuelve el alert de Problemas, hay alguna mala configuracion en el mismo disculpa?

[Djoaq]

Hola Jessica, no hay mala configuración, esto es porque tu debes hacer un echo json encode 0 en el momento que hagas el insert en bd y prepares un or die echo json encode 1 si fallará el insert.
Y si el insert no se hiciese entonces algo va mal...
En realidad mejor cambialo al revés 0 si falla que cero seria la analogia de false y 1 si se inserta que sería true, pero el código tal como está si imprimes el json desde tu php con valor 0 entrará en el success del ajax.
Un saludo!

[JessicaTJ]

Código Javascript:

.on('success.form.bv', function(e) {
            // Prevent form submission
            e.preventDefault();
            var datos_registro = $('#newsForm').serialize();
            $.ajax({
            type : 'POST',
            data : datos_registro,
            url  : 'enviar_datos.php',
            success: function(data){
                $('.well').find('ul').slideUp('slow', function (){
                $('.well').html(data);
                })
            },
            error: function(data) {
                alert('Error al insertar datos.');
            }
        });
    });
 

Quedo al final asi, y ahora si me da bien el resultado y envia los datos del formulario, en caso de error me regresa los datos el php por medio del atributo data ^.^

¡Mil gracias!