3

El "success" de la función de envío de AJAX funciona, pero el "url" no hace su funcion de ejecutar el código. Sólo revisa si el directorio existe y entonces va a "success"; Si en la "url" coloco un directorio falso no va a "success".

Para el FORM tengo

<form method="POST" id="botones_estado" name="botones_estado" action="estados/quebueno.php">
  <div class="btn-group btn-group-justified">
    <div class="btn-group">
      <button type="submit" onclick="quebueno();" name="btn_quebueno_estado" class="btn btn-default" value="<?php echo $usuario_posteando['id_posteando']; ?>">Qué bueno</button>
    </div>
  </div>
</form>

Para las funciones tengo

function quebueno(){
	    $('#botones_estado').submit(function() {
	        $.ajax({
	            type: 'POST',
	            url: 'quebueno.php',
	            data: $(this).serialize(),
	            success: function(data) {
	                location.reload(true);
	            }
	        });      
	        return false;
	    });
	}

El codigo PHP que se halla en "quebueno.php" ya lo probé con el ACTION del FORM y trabaja perfecto. Pero quiero que mi pagina EVITE la actualización al enviar el formulario. Alguien que por favor me corrija.

3 respuestas 3

2

Intentalo así:

<form method="POST" id="botones_estado" name="botones_estado" action="?">
  <div class="btn-group btn-group-justified">
    <div class="btn-group">
      <button type="submit" onclick="quebueno();" name="btn_quebueno_estado" class="btn btn-default" value="<?php echo $usuario_posteando['id_posteando']; ?>">Qué bueno</button>
    </div>
  </div>
</form>

function quebueno(){
	    $('#botones_estado').submit(function() {
	        $.ajax({
	            type: 'POST',
	            url: 'estados/quebueno.php',
	            data: $(this).serialize(),
	            success: function(data) {
	                location.reload(true);
	            }
	        });      
	        return false;
	    });
	}

1

Te sugiero quitar el type="submit" del boton y dejarlo type="button"

En tu funcion si lo dejas en submit:

function quebueno(){
    $('#form').submit(function(e) {
        e.preventDefault()//evitas hacer el submit
        $.ajax({
            type: 'POST',
            url: 'estados/quebueno.php',
            data: $('#form').serialize(),
            success: function(data) {
                //location.reload(true);
                console.log("sin refresh");
                //acciones a hacer cuando se recibe la info
            }
        });
    });
}

El e.preventDefault() evitas enviar el formulario ya que vas a hacer el envió por ajax.

O bien puedes dejar tu funcion de esta otra manera y sera la mejor cuando el boton no es submit.

function quebueno(){
  $.ajax({
      type: 'POST',
      url: 'estados/quebueno.php',
      data: $('#form').serialize(),
      success: function(data) {
          //location.reload(true);
          console.log("sin refresh");
          //acciones a hacer cuando se recibe la info
      }
  });
}
5
  • Una pregunta más, que framework debo usar de Jquery? Commented el 3 jun. 2016 a las 16:40
  • pues viendo parece que usas bootstrap dependería de la versión que uses de bootstrap. creo que a partir de la version 3.0.0 se usa jquery-1.9 en la version estable de bootstrap (3.3.6) en la plantilla de ejemplo usa jquery-1.11.3
    – JuankGlezz
    Commented el 3 jun. 2016 a las 17:10
  • como especifica jquery la version .x1 tiene soporte para versiones anteriores de explorer y es mas pesado, en la version 2.x no tiene ese soporte por lo cual es mas lijero
    – JuankGlezz
    Commented el 3 jun. 2016 a las 17:13
  • Intentaré cambiar a 1.11.3 Ya que ninguna de las dos funciones trabajó. Commented el 3 jun. 2016 a las 22:36
  • Acabe de editar en la primera función si dejas el botón como submit con eso debería no hacer un refresh de la pagina
    – JuankGlezz
    Commented el 3 jun. 2016 a las 23:14
1

Intenta colocando la etiqueta button tipo type="button" asi reaccionara a un evento en ves de ir a el action del formulario, algo asi:

<form method="POST" id="botones_estado" action="#?">
  <div class="btn-group btn-group-justified">
    <div class="btn-group">
      <button type="button" onclick="quebueno();" name="btn_quebueno_estado" class="btn btn-default" value="<?php echo $usuario_posteando['id_posteando']; ?>">Qué bueno</button>
    </div>
  </div>
</form>

En la función que recibe los datos del formulario, en este caso el value de el botón, no es necesario llamar al evento submit, utiliza el FomData para el envió de los datos del formulario, a mi parecer es mejor hacerlo de esa manera

function quebueno(){
    // con el FormDAta envias todos los elementos del formulario
    // y los recibes en la pagina php con el name que tengan estos elementos
    // ejemplo $valueBoton = $_REQUEST["btn_quebueno_estado"];

    var  formData = new FormData("form");
        $.ajax({
            type: 'POST',
            url: 'estados/quebueno.php',
            data: formData,
            success: function(data) {
                location.reload(true);
            }
        });      
 }

espero te ayude

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.