php - hjælp til drag and drop - Udvikleren.dk - Programmering, webdesign og grafik

Tags: php ajax mysql

Bruger #21454 @ 20.08.16 03:21

Jeg har lidt problemer med et drag and drop script som jeg søger lidt hjælp til.

jeg har en database med to tabeller, en tabel med fysiske servere og en tabel med virtuelle servere, disse to tabeller bliver udskrevet i en drag and drop liste. Nu er det jeg skal bruge lidt hjælp til at opdatere databasen når en af de virtuelle servere skifter plads.

mit script ser således ud:
$('#sortable1, #sortable2').sortable({
axis: 'y',
update: function (event, ui) {
var data = $(this).sortable('serialize');
$.ajax({
data: data,
type: 'POST',
url: 'update.php'
});
}
});

min update.php ser således ud:

<?php require_once('Connections/test.php'); ?>
<?php

$i = 0;

foreach ($_POST['this'] as $value) {
$data = $_POST['data'];

$sql = "UPDATE tbl_virtuelle_servere SET fysiske_server_id = ? WHERE id = ?";
$i++;
}

?>

3 svar postet i denne tråd vises herunder
0 indlæg har modtaget i alt 0 karma

Sorter efter stemmer Sorter efter dato

Bruger #16075 @ 20.08.16 07:45

1.223

nu er du ny her på udvikleren, dine indlæg bliver nemmere at læse, hvis du pakker din code ind i et code tag
(code)
her er code
(/code)
der skal ikke anvendes runde paranteser skal være kantede, rediger gerne dit indlæg og ret det.

forhistorie:
http://www.computerworld.dk/eksperten/spm/1012088
http://www.computerworld.dk/eksperten/spm/1012113
http://www.computerworld.dk/eksperten/spm/1012205

kig lidt på disse link
http://stackoverflow.com/questions/18578252/how-to-make-a-jquery-ui-droppable-list-where-elements-added-to-the-list-are-also
http://www.w3schools.com/html/html5_draganddrop.asp

google php drag and drop jquery 2 lists
http://stackoverflow.com/questions/24922476/jquery-ui-drag-drop-re-order-on-multiple-lists
https://jqueryui.com/sortable/#connect-lists

google jquery drag and drop list example
http://www.dhtmlgoodies.com/scripts/drag-drop-nodes/drag-drop-nodes-demo2.html <-- denne vil jeg kiig på

http://stackoverflow.com/questions/1452866/jquery-drag-and-drop-elements-from-list-into-separate-blocks

google drag and drop ajax php mysql
http://www.codexworld.com/drag-drop-images-reorder-using-jquery-ajax-php-mysql/
http://www.bewebdeveloper.com/tutorial-about-dynamic-drag-and-drop-with-jquery-and-php
https://davidwalsh.name/mootools-drag-ajax

Nu er det jeg skal bruge lidt hjælp til at opdatere databasen når en af de virtuelle servere skifter plads.

får du data over i update.php ??
update.php er meget nem, der har du fået skabelonen i http://www.computerworld.dk/eksperten/spm/1012205?k=8229159

men ellers er den her

Kode

/* Opret et prepared statement */
if ($stmt = $mysqli->prepare('UPDATE `tabel` SET `fornavn`=? WHERE `id`=?')) {
/* Bind parametre */
	$stmt->bind_param('si', $fornavn, $id);
	/* Sæt værdier på parametrene */
	$fornavn = $_POST['fornavn'];
	$id = $_POST['id'];
	/* Eksekver forespørgslen */
	$stmt->execute();
	/* Luk statement */
	$stmt->close();
} else {
/* Der er opstået en fejl */
	echo 'Der opstod en fejl i erklæringen: ' . $mysqli->error;
}

mit script ser således ud:

hvad bruges axis: 'y', ??

hvad står der i data ??

min update.php ser således ud:

hvad får du af data over i update.php ??

hvad er meningen med din foreach ??

hvad bruger du $i til ??

hvor laver du en Prepare/bind, og execute til dit sql ??

ref http://www.computerworld.dk/eksperten/spm/1012205 #0
jeg tror jeg ville nedbryde det komplexe sql statement du har, der henter alle fysiske og virtuelle servere, i 2 functioner.

det jeg ville gøre er at:
PHP/Prepare Statement

(PHP) lave en function der retunerer alle fysiske servere.

(PHP) lave en function der retunerer alle virtuelle servere, på den fysiske server (fysisk server id med som parameter)

(PHP) lave en function der opdaterer en virtuel server

(PHP) lave en liste (UL) med alle de fysiske servere. (kald af function)

(JS/jquery) når man klikke på en fysisk server, laves et AJAX kald, der henter de vireuelle servere på den fysiske server, og udskriver disse i en liste (UL)

(JS/jquery) når en virtuel server trækkes over på en fysisk server, aflæsses fysisk og virtuelle sever id, og der laves et AJAX kald der opdaterer den virtuelle server

Indlæg senest redigeret d. 20.08.2016 09:43 af Bruger #16075

Bruger #21454 @ 25.08.16 06:02

Så er jeg kommet lidt videre men mangler dog lige det sidste..

her er mit script..

Jeg skal nu have printet en array fra databasen med de fysiske servere og tilhørende virtuelle..Kan I hjælpe med det?

JScript kode

 $( function() {  
     $( ".connectedSortable" ).sortable({
       connectWith: ".connectedSortable",
        update : function(event, ui) {
         
             var server = this.id;
             var list_sortable = $(this).sortable('toArray').toString();
 
             //alert("SENDER"+ui.sender);
             // change order in the database using Ajax
 
            //alert("Virtueller servere="+list_sortable);
            //alert("Server"+this.id);
 
            save_sortable(list_sortable,server);
     }
     }).disableSelection();
   });

og mit ajax script

JScript kode

 function save_sortable(list_sortable, server)
         {
               $.ajax({
                  url: "update.php",
                  type: 'POST',
                  //data: serial,
                  data: { server: server, virtualserver: list_sortable },
                  success: function (data) {
                           //alert("Done updating");
                  }
               });
         }

Min update.php ser nu sådan ud:

PHP kode

 $server = $_POST["server"];
 $virtualserver = $_POST["virtualserver"];
 
 
 echo $server;
 echo "<br />";
 echo $virtualserver;
 echo "<br />";
 
 
 $thePostVirtualIdArray = explode(',', $virtualserver);
 
 //Her løber den alle de virtuelle servere igennem der er tilknyttet den enkelte server der er blevet berørt
 
 foreach($thePostVirtualIdArray as $a)
     {
     echo $a;
     echo "<br />";
     }

Bruger #16075 @ 25.08.16 16:34

1.223

Jeg skal nu have printet en array fra databasen med de fysiske servere og tilhørende virtuelle..Kan I hjælpe med det?

den printer da fint din virtual server id ud i din foreach løkke, (du kan se det i browserens udviklings værktøj (F12)), under XHR,

så du skal i dit loop lave et opslag på tbl_virtuelle_servere og et join til tbl_fysiske_servere hvis du også har behov for fysisk server name

du laver 2 ajax kald, der viser hvordan den fysiske server ser ud!!
et kald der viser den server du trækker den virtueller server fra, og
et kald der viser den server du dropper til

dvs din update.php skal
Pseudokode

Kode

hent alle poster på server med en given fysisk server id.
sammenlign thePostVirtualIdArray, med udtræk
opdater ændring

dit design har nogle fejl (selvom det virker):

en UL må ikke være tom, da man så ikke kan flytte virtuelle servere over i den.

antag du har 5 fysiske servere, hvor på der ligger 10 virtuelle servere på hver, det ville være noget rod at vise.

du har dit output (det du echo'er og evt fejlbeskeder) fra update.php stående i data i ajax success, samt i XHR i browseren

function save_sortable(list_sortable, server)
{
$.ajax({
url: "update.php",
type: 'POST',
//data: serial,
data: { server: server, virtualserver: list_sortable },
success: function (data) {
//alert("Done updating");
console.log(data);
}
});
}

browserens udviklings værktøj er uvurderlig, evt med nogle add-on

chrome
https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm

firefox
https://addons.mozilla.org/da/firefox/addon/firebug/
https://addons.mozilla.org/da/firefox/addon/web-developer/

hjælp til drag and drop

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler