Lanza ajax a php desde jquery sortable

babri #1 Sep '14

Tengo unos divs que los puedo mover gracias a jqery y le tengo un alert para cuando muevo uno de ellos ahora quiero hacer que cuando lo mueva llama a un php externo para que almacene en bbdd pero no consigo lanzar el ajax ( no tengo ni idea de ajax).

y el codigo del script para que salte:

<script type="text/javascript">
        $(document).ready(function()
            {
                $("#sortable").sortable(
                    {
                      stop:function(){
                  		alert("Me he movido sin problemas")
                    }
                });
            }
            );
    </script>

Como hago para que en vez de ese alert mande datos a un php para almacenar en bbdd?

Un saludo!

yarviT0 #2 Sep '14

Haz un servicio en PHP que reciba los datos que quieras guardar y llama ese servicio desde JS

En javascript donde queiras enviar
$.ajax({
type: 'POST',
url: 'nombredelservicio.php',
data: {'variable': myval},
});

en tu servidor PHP (nombredelservicio.php)

$myval = $_POST['variable'];

1 respuesta

Merkury #3 Sep '14

#1 #2 A esa llamada de ajax le faltan cosas.

 $.ajax({
     url: <servicio php>,
     type: 'POST',
     data: <porsiquieres mandar parametros>, //El nombre de esta variable en el servicio sera $_POST['mismonombre']
    dataType: 'json', // Importante si mandas datos
    contentType: "application/json; charset=utf-8", // Importante si recibes datos
    success: function (data) {
        //Aqui es donde debes hacer tus acciones (llenar el div, etc) con la respuesta (data)
        }
    },
    error: function (error) {
          console.log(error); //Por si peta sacar el error por consola de jquery
    }
});

1 respuesta

babri #4 Sep '14

No hace nada


	<script type="text/javascript">
    $(document).ready(function()
        {
            $("#sortable").sortable(
                {
                  stop:function(){
              		//alert("Me he movido sin problemas")



										$.ajax({
										            url: /src/ajax/reordenar.php,
										            type: "POST",
										           
										            contentType: "application/json; charset=utf-8", // Importante si recibes datos
										            success: function (data) {
										                 //Aqui es donde debes hacer tus acciones (llenar el div, etc) con la respuesta (data)
										                }
										            },
										            error: function (error) {
										                console.log(error); //Por si peta sacar el error por consola de jquery
										            }
										        });



                }
            });
        }
        );
	</script>

1 respuesta

yarviT0 #5 Sep '14

así de primeras la url no es como si fuera HTML (que nlazas a una iamgen) es decir deberias ser algo del tipo http://www.tuservidor.es/ajax/reordenar.php

Merkury #6 Sep '14

Ademas desde el sortable no vas a poder lanzarlo lo mas seguro, tendras que hacer una funcion e invocar la funcion desde el sortable.

1 respuesta

S

Sarwaz #7 Sep '14

#3 #4

Errores de sintaxis en la url y en la función success

$.ajax({
    url:"/src/ajax/reordenar.php",
    type: "POST",

contentType: "application/json; charset=utf-8", // Importante si recibes datos
success: function (data) {
     //Aqui es donde debes hacer tus acciones (llenar el div, etc) con la respuesta (data)
},
error: function (error) {
    console.log(error); //Por si peta sacar el error por consola de jquery
}
});

#6
Ademas desde el sortable no vas a poder lanzarlo lo mas seguro, tendras que hacer una funcion e invocar la funcion desde el sortable.
Eso da igual.

1 respuesta

Merkury #8 Sep '14

#7 No no da igual, porque $.ajax es una llamada asincrona, con lo que al ejecutarla desde el sortable, posiblemente se lance, y mientras espera la respuesta el sortable se finalice con lo que se pierde le contexto de la llamada $.ajax y tal.

1 respuesta

S

Sarwaz #9 Sep '14

#8 Eso no importa en este ejemplo, y no esta haciendo que falle.

1

eXtreM3 #10 Sep '14

Yo tengo hecho algo parecido, pero con el draggable, imagino que será igual:

            $(".draggable").draggable({
                cursor: "n-resize",
                axis: "y",
                containment: "parent",
                drag: function(event,ui){
                    liveDraggable($(this));
                },
                stop: function(event,ui){
                    liveDraggable($(this));
                }
            });

En liveDraggable(selector) hago cosillas por ajax tal que

$.ajax({
                    url: mi url y mis parámetros,
                    dataType: 'json',
                    success: function( response ) {
                        if(response.status == 'ok'){
                            // cosillas
                        }
                        else{
                            alert("Tu alert cuando hay error");
                        }
                    }
                });

edit: se me olvidaba: por supuesto en la url que invoques debes ofrecer una respuesta por json para que el ajax lo interprete!

php_que_hace_cosas.php

funcion invocada(){
//si todo va bien:
echo json_encode(array('status' => 'ok', 'data' => 'texto si quieres', 'error_message' => null));
}

babri #11 Sep '14

Al final lo que hice fue que guardase por botón y reordene cada vez que muevo

Lanza ajax a php desde jquery sortable

Usuarios habituales

Tags