-
Drag and Drop jQuery con PHP y MySQL | Codedrinks http://www.codedrinks.com/ejemplo-de-drag-and-drop-jquery-con-php...
1 de 13 23/03/2015 9:37
-
123456789
101112131415161718192021222324252627282930313233343536373839
-- ------------------------------------------------------- Tabla: tblalumno-- -----------------------------------------------------CREATE TABLE IF NOT EXISTS `tblalumno` ( `idalumno` INT UNSIGNED NOT NULL AUTO_INCREMENT , `paterno` VARCHAR(15) NOT NULL , `materno` VARCHAR(15) NOT NULL , `nombre` VARCHAR(15) NOT NULL , PRIMARY KEY (`idalumno`) )ENGINE = InnoDB; -- ------------------------------------------------------- Tabla: tblidioma-- -----------------------------------------------------CREATE TABLE IF NOT EXISTS `tblidioma` ( `ididioma` INT UNSIGNED NOT NULL AUTO_INCREMENT , `idioma` VARCHAR(15) NOT NULL , PRIMARY KEY (`ididioma`) )ENGINE = InnoDB; -- ------------------------------------------------------- Tabla: alumnoidiomas-- -----------------------------------------------------CREATE TABLE IF NOT EXISTS `alumnoidiomas` ( `idalumno` INT UNSIGNED NOT NULL , `ididioma` INT UNSIGNED NOT NULL , PRIMARY KEY (`idalumno`, `ididioma`) , INDEX `fk_alumnoidiomas_tblAlumno_idx` (`idalumno` CONSTRAINT `fk_alumnoidiomas_tblAlumno` FOREIGN KEY (`idalumno` ) REFERENCES `tblalumno` (`idalumno` ) ON DELETE NO ACTION ON UPDATE NO ACTION, CONSTRAINT `fk_alumnoidiomas_tblidioma1` FOREIGN KEY (`idalumno` ) REFERENCES `tblidioma` (`ididioma` ) ON DELETE NO ACTION ON UPDATE NO ACTION)ENGINE = InnoDB;
Drag and Drop jQuery con PHP y MySQL | Codedrinks http://www.codedrinks.com/ejemplo-de-drag-and-drop-jquery-con-php...
2 de 13 23/03/2015 9:37
-
123456789
10111213
Paterno
-
123456789
101112131415161718192021222324252627282930313233343536373839
#informacion{ width:500px; margin: 0 auto;} form{ width:47s8px; border:1px solid #ddd; padding:10px; float:left;} form label{ width:100%; float:left; margin: 5px 0;} form input{ float:left; margin: 5px 0;} ul{ width:200px; float:left; border:1px solid #ddd; margin:5px; padding:10px; list-style-type: none;} li{ margin:5px 0; background:#ddd; cursor:move; padding:5px; list-style-type: none;}
123
123
Drag and Drop jQuery con PHP y MySQL | Codedrinks http://www.codedrinks.com/ejemplo-de-drag-and-drop-jquery-con-php...
4 de 13 23/03/2015 9:37
-
123456789
1011121314151617181920212223
-
12345
$(document).ready(function(){ $( "#idiomas li, #idiomasseleccionados li" ).draggable({ appendTo: "body", helper: 'clone', });
123456789
$( "#idiomasseleccionados, #idiomas" ).droppable({ accept:'li', activeClass: "ui-state-default", hoverClass: "ui-state-hover", drop: function( event, ui ) { ui.draggable.appendTo(this).fadeIn(); }});
Codedrinks
A 606 personas les gusta Codedrinks.
Me gustaMe gusta
Drag and Drop jQuery con PHP y MySQL | Codedrinks http://www.codedrinks.com/ejemplo-de-drag-and-drop-jquery-con-php...
6 de 13 23/03/2015 9:37
-
123456789
1011121314151617
$("#frmAlumno").submit(function(){ //Funcion para obtener los valores del formulario se explica mas a datos = obtenerDatos(); $.ajax({ url:'guardarAlumno.php', //URL del archivo php que procesa la type:'post', // Los datos se envan mediante el mtodo POST dataType:'json', // La respuesta se obtiene como JSON data:datos // Los datos del formulario }).done(function(respuesta){ //Condicin para verificar si se guardaron o no los datos if( respuesta.estado == true ) alert("La informacin se guard correctamente" else alert("Ocurri un error al guardar la informacin, por fav }); return false; // Se regresa false para el que submit no se ejecute});
123456789
101112131415
function obtenerDatos(){ //Se crea la variable para la lista de idiomas seleccionados var idiomas =""; //Se obtiene todos los elementos li de la lista con id="idiomassel // utilizando el mtodo .each $( "#idiomasseleccionados li" ).each(function (i) { // Se agrega a la variable idiomas el valor del atributo id y // para separar cada idioma idiomas += $(this).attr('id')+","; }); // Se almacenan todos los datos en un arreglo datos = [{name:"accion",value:"guardar"},{name:"paterno" // Se regresa la variable datos con toda la informacion del alumno return datos;}
Drag and Drop jQuery con PHP y MySQL | Codedrinks http://www.codedrinks.com/ejemplo-de-drag-and-drop-jquery-con-php...
7 de 13 23/03/2015 9:37
-
123456789
101112
-
123456789
10111213141516171819202122232425262728
if( $conexion->query($consulta) ){ //Se obtiene el id del alumno que se insert $idalumno = $conexion->insert_id; // Se elimina la ultima coma de la cadena $idiomas = trim($idiomas,','); // Se dividen los valores de la cadena en un arreglo $idiomas = explode(',', $idiomas); // Se recorre el arreglo de idiomas foreach ($idiomas as $idioma) { $consulta = "INSERT INTO alumnoidiomas (idalumno, ididioma) VA // Se ejecuta cada consulta para guardar los idiomas if( $conexion->query($consulta) == FALSE ){ // Se ejecuta este codigo si alguna consulta no se ejecut $respuesta->estado = FALSE; $conexion->rollback(); echo json_encode($respuesta); die(); }}}else{ // Este codigo se ejecuta si la primer consula fall $respuesta->estado = FALSE; $conexion->rollback(); echo json_encode($respuesta); die();}
12345
$respuesta->estado = TRUE; $conexion->commit(); echo json_encode($respuesta); }?>
Drag and Drop jQuery con PHP y MySQL | Codedrinks http://www.codedrinks.com/ejemplo-de-drag-and-drop-jquery-con-php...
9 de 13 23/03/2015 9:37
-
Drag and Drop jQuery con PHP y MySQL | Codedrinks http://www.codedrinks.com/ejemplo-de-drag-and-drop-jquery-con-php...
10 de 13 23/03/2015 9:37
-
if(respuesta.estado == true)
Drag and Drop jQuery con PHP y MySQL | Codedrinks http://www.codedrinks.com/ejemplo-de-drag-and-drop-jquery-con-php...
11 de 13 23/03/2015 9:37
-
Drag and Drop jQuery con PHP y MySQL | Codedrinks http://www.codedrinks.com/ejemplo-de-drag-and-drop-jquery-con-php...
12 de 13 23/03/2015 9:37
-
Drag and Drop jQuery con PHP y MySQL | Codedrinks http://www.codedrinks.com/ejemplo-de-drag-and-drop-jquery-con-php...
13 de 13 23/03/2015 9:37