relacionar efecto sortable a base de datos

Citar

Escrito el 04 May 2011 02:37 pm

Hola, despues detiempo que regreso a los foros regreso or que ha surgido un problema y nesecito una mano, con algo que nunca me lo han pedido y no se como resolverlo tengo el siguente efecto sortable que permite mover items de ubicacion ponerlo en un lugar de la lista aleatoriamente, que es lo que necesito tengi una lista que se grenera de una base de datos la cual la lista se alimenta de un formulario de inserccion, y mediante un a consula (query) genero la lista de los elementos que se emcuentran en la base, la cual se repite con un repetir region. ok hasta alli todo bien, lo que necesito a esa lista generada de la base de datos con su repertir region es adaptarle el efecto de sortable, que cuando se muevna de posiciones los items de la lista tambien se reflejen los cambios en la base de datos para que se muestren los cambios en la parte web donde se muestra la lista, esa lista forma un menu, y es ese menu el que desean cambiar la posición de los items de la lista, voy a colocar el codigo de ejermplo del efecto sortable y a ese efecto como repito nesecito adaptarle el codigo que se genra desde la base de datos esper oque hayan entendido

gracias

el efecto

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>efecto</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>

<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">

<style type='text/css'>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable li span { position: absolute; margin-left: -1.3em; }
</style>

<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){
$(function() {
$( "#sortable" ).sortable({stop:function(event,ui){
alert($( "#sortable" ).sortable('serialize'));
}});
$( "#sortable" ).disableSelection();
});
});
//]]>
</script>

</head>
<body>
<div class="demo">

<ul id="sortable">
<li id='li_1' class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li id='li_2' class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li id='li_3' class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
<li id='li_4' class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
<li id='li_5' class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
<li id='li_6' class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
<li id='li_7' class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>

</div>

</div>

</body>

</html>

Por russos

6 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 04 May 2011 04:45 pm

Pues pon un botón "Guardar cambios" que envie el nuevo orden de la lista al servidor y allí la procesas... o no entendí ni medio cuál es el problema?

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 04 May 2011 06:16 pm

si parece que no entendiste si copias el codigo del codigo del efecto que puse y lo corres en tu navegador veras una lista de items numerados item1 item2 item3 y asi hasta el 7 si seleccionas uno y lo arrastrar a otra posicion sobre cualquier otro item veras que se cambia o se acomoda en la posisicon que tu suletas sequedar en ese sitio eso esta bien eso es lo que quiero, la pregunta es como hag oqueese cambio de posisicon cuando se cambia el orden del item tambien se cambie en la base dde datos pues eso se refleja ne la parte web donde existe un menu, lo que quiero decir es que esa lista se ve un panel donde se listan la cantidad de items que seran lo que serefelja en le menu para que cambie el orden de la lista es decir si quiero poner o mover el item7 en la posisicion del item1 solo tengoi que arrstar el item 7 a la posisicon del item1 y eso sucede, pero eso cambio como se lo digo que tambien suceda en la base de datos que es la genera el menu o lista nose si se entiende la e xplicacion cualquier duda me preguntan

gracias por responder

Por russos

6 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 04 May 2011 07:38 pm

Pues resulta que sí he entendido

.

Asumiendo que cuando dices "base de datos", te refieres a una base de datos que está en el servidor, entonces te diré que hasta que el navegador no comunique los cambios al servidor, el servidor no se enterará de lo que el usuario ha hecho.

Te quedan dos opciones: hacer lo que he dicho en mi mensaje anterior, o bién comunicar los cambios mediante AJAX para que éstos sean "mas o menos" inmediatos. Para hacer esto último, lo mejor es que lo hagas donde en el código que has puesto está el alert().

PD: sería buenísimo que la próxima vez uses signos de puntuación y separación de párrafos; ayuda a la comprensión de texto.

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 04 May 2011 09:06 pm

Hola, ok entiendo lo que me explicas el asunto es que asi explicando, que deveria usar o no no me ayua mucho lo que estoy pidiendo es que por favor me ayuden con un ejemplo, por eso puse el codigo para que sobre ese ejemplo de codigo me ayuden a poner como deveria ir las lineas de codigo del ejemplo que puse con mi conexion de base de datos con la consulta y con la repeticon de registros lo que necsesito es la ayuda con la forma de el desarrollo del codigo como lo pudo acoplar al efecto sortable que coloque, en eso necesito la ayuda

gracias.

Por russos

6 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 05 May 2011 03:24 pm

Entonces tu pregunta concreta es cómo hacer una petición AJAX, bien, pero ¿usando JQuery?, porque esa no es la única implementación de AJAX que hay. De todas formas yo no uso JQuery para AJAX pero puedo mostrarte dónde hay ejemplos:

http://remysharp.com/2007/03/05/jquery-ajaxed-forms/
http://blogs.sitepoint.com/ajax-jquery-3/
http://www.queness.com/post/160/create-a-ajax-based-form-submission-with-jquery

Y la mismísima documentación de JQuery.ajax():

http://api.jquery.com/category/ajax/

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

relacionar efecto sortable a base de datos

Escribe una respuesta rapida