problemas ajax y modal Twitter Bootstrap

Montes28 · #1 (**permalink**) 19/10/2012, 12:42

hola amigos espero me puedan ayudar

me ecuentro trabajando jquery-plugin-validation http://bassistance.de/jquery-plugins...in-validation/ y con modal de Twitter Bootstrap

tengo un formulario en la modal y lo valido sin problemas el problema que tengo es cuando envio los datos mediante ajax , quiero imprimir los datos que envie en la modal .

Código Javascript:

Ver original<script>
 
$('#adicionar').click(function (){
    //alert ('boton adicionar');
    var dataString = $('#contact-form').serialize();
    alert('Datos serializados: '+dataString);
    $.ajax({ 
    url:'views/cargar_usuarios.php',
        type:'POST',
    data: dataString,
    }).done(function(data) {
    $("#div_tabla_usuario").html(data);
});
});
 
</script>

el alert con los datos serializados lo veo sin problema

el cargar_usuarios.php contiene

Código PHP:

Ver original<?
 
$name = $_POST['name'];
 
?>
 
<div id="div_tabla_usuario">
 
<?
echo $name;
?>
 
</div>

y el body

Código HTML:

Ver original<body>
            <div class="page-header">
                <h1>Prueba</h1>
                            </div>
<a data-toggle="modal" class="btn btn-primary" href="#modalAdicionar"><i class="icon-user icon-white"></i> Nuevo Destinatario</a>
<div id="modalAdicionar" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-header">
              <button type="button" class="close close-add" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h3 id="myModalLabel">Adicionar Nuevo Destinatario</h3>
            </div>
            <div class="modal-body">
            
            <div class="row">
                <div class="span8">
                    <form action="" id="contact-form" class="form-horizontal" method="post">
                      <fieldset>
                      <div class="control-group">
                          <label class="control-label" for="name">Your Name</label>
                          <div class="controls">
                            <input type="text" class="input-xlarge" name="name" id="name">
                          </div>
                      </div>
                        <div class="control-group">
                          <label class="control-label" for="email">Email Address</label>
                          <div class="controls">
                            <input type="text" class="input-xlarge" name="email" id="email">
                          </div>
                        </div>
                        <div class="control-group">
                          <label class="control-label" for="subject">Subject</label>
                          <div class="controls">
                            <input type="text" class="input-xlarge" name="subject" id="subject">
                          </div>
                        </div>
                        <div class="control-group">
                          <label class="control-label" for="message">Your Message</label>
                          <div class="controls">
                            <textarea class="input-xlarge" name="message" id="message" rows="3"></textarea>
                          </div>
                        </div>
             
                   <!-- <button type="submit" class="btn btn-primary btn-large">Submit</button>
                      <button class="btn">Cancel</button>-->
       
                      </fieldset>
                    
                      <div>
             <button type="submit" class="btn btn-success" id="adicionar">Submit</button>
             <button class="btn" data-dismiss="modal" title="cancel-add">Cancelar</button>
            </div>
</form>
</div>
</div>
</div>
</div>
  </body>
</html>

amigos que estoy haciendo mal ? o que me falta

Montes28 · #2 (**permalink**) 19/10/2012, 12:59

cuando doy click a <button type="submit" class="btn btn-success" id="adicionar">Submit</button> y los campos no se llenaron correctamente se activa la validacion y puedo observar por detras de la modal que si aparece el contenido de

Código HTML:

Ver original<div id="div_tabla_usuario">

creo que mi error esta en

Código Javascript:

Ver original<script>
 
$('#adicionar').click(function (){
    //alert ('boton adicionar');
    var dataString = $('#contact-form').serialize();
    alert('Datos serializados: '+dataString);
    $.ajax({ 
    url:'views/cargar_usuarios.php',
    type:'POST',
    data: dataString,
    }).done(function(data) {
    alert(data);
    $("#div_tabla_usuario").html(data);
});
});
 
</script>

Montes28 · #3 (**permalink**) 19/10/2012, 14:56

amigos me funciono de esta manero pero quiero mejorarlo , por favor revisenlo y me dan sus puntos de vista . gracias.

Código Javascript:

Ver original$('#adicionar').click(function (){
  var val = ($("#contact-form").valid()); 
  //alert (val);
  if (val == true) {
        //alert('Campos LLenos');
        var dataString = $('#contact-form').serialize();
        //alert('Datos serializados: '+dataString);
        $.ajax({ 
    url:'views/cargar_usuarios.php',
    type:'POST',
    data: dataString,
    }).done(function(data) {
    //alert(data);
    $("#div_tabla_usuario").html(data);
        $(".input-add").val('');
        $('#modalAdicionar').modal('hide');
    
});
        
        
    } 
    else {
        alert('Campos Vacios');
    }  
  return false;
});

amigos solo me resta limpiar el label de ok

es el script de la validacion

Código Javascript:

Ver original$(document).ready(function(){
 
    // Validate
    // http://bassistance.de/jquery-plugins/jquery-plugin-validation/
    // http://docs.jquery.com/Plugins/Validation/
    // http://docs.jquery.com/Plugins/Validation/validate#toptions
    
        $('#contact-form').validate({
        rules: {
          name: {
            minlength: 2,
            required: true
          },
          email: {
            required: true,
            email: true
          },
          subject: {
            minlength: 2,
            required: true
          },
          message: {
            minlength: 2,
            required: true
          }
        },
        highlight: function(label) {
            $(label).closest('.control-group').addClass('error');
        },
        success: function(label) {
            label
                .text('OK!').addClass('valid')
                .closest('.control-group').addClass('success');
        }
      });
      
});

como lo realizo

me estoy basando en http://alittlecode.com/jquery-form-v...ter-bootstrap/

Montes28 · #4 (**permalink**) 19/10/2012, 23:01

amigos lo solucione este es mi codigo

Código Javascript:

Ver original$('#adicionar').click(function (){
  var val = ($("#contact-form").valid()); 
  
  //alert (val);
  if (val == true) {
        //alert('Campos LLenos');
        var dataString = $('#contact-form').serialize();
        //alert('Datos serializados: '+dataString);
        $.ajax({ 
    url:'views/cargar_usuarios.php',
    type:'POST',
    data: dataString,
    }).done(function(data) {
    //alert(data);
    $("#div_tabla_usuario").html(data);
        $(".input-add").val('');
        $('.control-group').removeClass('success').val();
        $('.control-group').removeClass('error').val();
        $('label').remove('.valid');
        $('#modalAdicionar').modal('hide');
        
    
});
        
        
    } 
    else {
        alert('Campos Vacios');
    }  
  return false;
});