Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > JavaScript

Verplaatsbare div's

Raze - 25/03/2009 22:56
PHP beginner		Hallo, ik heb dus een probleempje met verplaatsbare div's. Het hoort eigenlijk ook een beetje bij PHP (en MySQL). Ik wil op mijn website dat de mensen die meehelpen in hun beheerspaneel een aantal div's kunnen "reorganiseren", verplaatsen dus. Nu heb ik volgende code gebruikt om de div's te kunnen verplaatsen: link even voor de duidelijkheid: op dit moment heb ik nog niet hetgene dat ik zou willen hiermee bedoel ik dat ik dan graag de posities (x- en y-as) zou willen opslaan in een database... maar dat is even bijzaak, aangezien ik maar 1 div kan verplaatsen. Ik heb dus dan maar wat records in een database gezet, en dan dacht ik eraan om via while telkens de volledige code "opnieuw te maken". Maar, nu kan ik alleen de laatste div (het laatste record) verplaatsen. Wat ik dus eigenlijk zou willen zijn een aantal div's op een pagina, die de gebruiker kan verplaatsen en daarna de positie opslaat. Ik heb hier al op gegoogled (oa "div drag javascript php" etc.). Indien iemand met op weg kan helpen (ik zoek geen volledig script, ik zou er graag zelf aan "prutsen" ) maar misschien is er wel iemand die tips heeft ivm de javascript-code, omdat ik hier niet veel van afweet. Sorry voor het lange bericht.

10 antwoorden

Gesponsorde links

Sander1993 - 26/03/2009 07:09
PHP interesse		misschien met AJAX, als je m loslaat doe je GET naar bijv: opslaan.php?x=123&y=134 dus naar de coördinaten, en die sla je dan op.

Raze - 26/03/2009 17:36 (laatste wijziging 26/03/2009 20:24)

PHP beginner

idd dat is idd een goed idee ik ga dat proberen te verwezenlijken

moet er wel even bijzeggen dat ik géén held ben in AJAX dus indien er nog mensen zijn die me op weg kunnen helpen (of misschien nog een andere oplossing weten) --> let me know!

EDIT: ik ben dus begonnen met AJAX en PHP en om te proberen ben ik begonnen met (volgens mij) iets simpels. Toch werkt dit niet:

AJAX-code:

javascript code - Bekijk de code zonder highlighting - Klap code in

                <script type="text/javascript">

function createRequestObject() { 

   var req; 

   if(window.XMLHttpRequest){ 
      req = new XMLHttpRequest(); 
   } else if(window.ActiveXObject) { 
      req = new ActiveXObject("Microsoft.XMLHTTP"); 
   } else { 
      alert('Problem creating the XMLHttpRequest object'); 
   } 

   return req; 

} 
	var http = createRequestObject();
    function sendRequestUpdate(waarde) { 
     
       http.open('get', 'script_test_drag_data.php?id=1&x='+waarde); 
       http.onreadystatechange = handleResponseUpdate; 
       http.send(null); 
     
    } 
</script>

            
<script type="text/javascript">
 
function createRequestObject() { 
 
   var req; 
 
   if(window.XMLHttpRequest){ 
      req = new XMLHttpRequest(); 
   } else if(window.ActiveXObject) { 
      req = new ActiveXObject("Microsoft.XMLHTTP"); 
   } else { 
      alert('Problem creating the XMLHttpRequest object'); 
   } 
 
   return req; 
 
} 
	var http = createRequestObject();
    function sendRequestUpdate(waarde) { 
 
       http.open('get', 'script_test_drag_data.php?id=1&x='+waarde); 
       http.onreadystatechange = handleResponseUpdate; 
       http.send(null); 
 
    } 
</script>
 

en de PHP-code (op script_test_drag_data.php):

php code - Bekijk de code zonder highlighting - Klap code in

<?php
 mysql_connect("localhost", "root", ""); 
    mysql_select_db("test"); 
	
$var_x = $_GET['x'];
$var_id = $_GET['id'];
$query="UPDATE vartest SET x = '".$var_x."' WHERE id =".$var_id;   
mysql_query($query) or die (mysql_error());
?>

<?php
 mysql_connect("localhost", "root", ""); 
    mysql_select_db("test"); 
 
$var_x = $_GET['x'];
$var_id = $_GET['id'];
$query="UPDATE vartest SET x = '".$var_x."' WHERE id =".$var_id;   
mysql_query($query) or die (mysql_error());
?>

Daarnaast heb ik nog een vraag over de code:
ik zou graag 2 variabelen meesturen, die uit aparte velden komen.
Ik weet dat ik dan iets moet aanpassen in de volgende lijn:

javascript code - Bekijk de code zonder highlighting - Klap code in

                       http.open('get', 'script_test_drag_data.php?id=1&x='+waarde); 

http.open('get', 'script_test_drag_data.php?id=1&x='+waarde);

Wat ik moet aanpassen/hoe ik het moet aanpassen, weet ik niet...

iemand een idee?

Sander1993 - 26/03/2009 21:27

PHP interesse

gewoon 2 parameters:

javascript code - Bekijk de code zonder highlighting - Klap code in

                
<script type="text/javascript">

function createRequestObject() { 

   var req; 

   if(window.XMLHttpRequest){ 
      req = new XMLHttpRequest(); 
   } else if(window.ActiveXObject) { 
      req = new ActiveXObject("Microsoft.XMLHTTP"); 
   } else { 
      alert('Problem creating the XMLHttpRequest object'); 
   } 

   return req; 

} 
    var http = createRequestObject();
    function sendRequestUpdate(waardeX,waardeY) { 
     
       http.open('get', 'script_test_drag_data.php?id=1&x='+waardeX+'&y='+waardeY); 
       http.onreadystatechange = handleResponseUpdate; 
       http.send(null); 
     
    } 
</script>


            
<script type="text/javascript">
 
function createRequestObject() { 
 
   var req; 
 
   if(window.XMLHttpRequest){ 
      req = new XMLHttpRequest(); 
   } else if(window.ActiveXObject) { 
      req = new ActiveXObject("Microsoft.XMLHTTP"); 
   } else { 
      alert('Problem creating the XMLHttpRequest object'); 
   } 
 
   return req; 
 
} 
    var http = createRequestObject();
    function sendRequestUpdate(waardeX,waardeY) { 
 
       http.open('get', 'script_test_drag_data.php?id=1&x='+waardeX+'&y='+waardeY); 
       http.onreadystatechange = handleResponseUpdate; 
       http.send(null); 
 
    } 
</script>
 

Raze - 27/03/2009 10:23
PHP beginner		ok, maar het werkt nog steeds niet (onderaan nog steeds "Fout op de pagina"), terwijl het script dat ik uit de tutorial van AJAX livesearch ook hebt geprobeerd, en letterlijk gekopieerd heb, wel werkt.

marten - 27/03/2009 10:24
Beheerder		Heb je een online voorbeeld? Kan ik ff kijken waar de fout weg komt.

Raze - 27/03/2009 10:27 (laatste wijziging 27/03/2009 10:46)
PHP beginner		ok zal het heel even online zetten... ok heb het online gezet: http://netraze.phpnet.us/script_test_drag.php wel 1 opmerking: de div is verplaatsbaar, maar wel maar 1 keer op mijn localhost kan ik heb blijvend verslepen. Ik gebruik scriptalusous met prototype JS library voor het verslepen van de div. EDIT 2: er zat een klein foutje in de php-code (had de verkeerde database geselecteerd), maar dat is nu opgelost er staan dus ook 2 invoervelden, de linkse voor ID en de rechtse voor X, en wat ik zou willen is dus dat wanneer ik daar 2 waarden invoer, onmiddelijk dit geupdate wordt in de database, zonder dat ik daarvoor op "submit" ofzo moet klikken.

marten - 27/03/2009 10:51
Beheerder		Ik zie dat je de functie handleResponseUpdate nog nergens hebt gedefinieerd? Deze roep je wel aan namelijk.

Raze - 27/03/2009 10:58 (laatste wijziging 27/03/2009 11:01)
PHP beginner		ok... maar hoe doe ik dat juist? Moet ik dan een lijntje code gelijk zoiets invoegen ergens: var http = createRequestUpdate(); en vooral, waar moet ik het dan invoegen (bovenaan het script of net boven de functie sendRequestUdate)? EDIT: misschien een idiote vraag, maar, is het wel mogelijk om via AJAX zo'n update te doen? De meeste tutorials en scripts die ik vindt (via google oa), gaan allemaal over data versturen en data terugkrijgen, maar ik wil enkel data versturen.

marten - 27/03/2009 11:00
Beheerder		Ik las dat je het live zoekveld script had bekeken. Hier staat wel in hoe je het moet plaatsen

Raze - 27/03/2009 11:06 (laatste wijziging 27/03/2009 14:44)

PHP beginner

haha, idd marten, er komt schot in de zaak

wanneer ik dus nu eerst een id ingeef en dan de nieuwe waarde, en ik bekijk dan mijn tabel, dan zie ik "undefined" staan bij de id die ik wou wijzigen.

ik ben dus toch op de goede weg (dakzij SiMa, offcourse

)

EDIT: persoonlijk denk ik dat mijn fout ergens zit in het stukje waar ik 2 variabelen wil meesturen (bij het livesearch script wordt namelijk maar 1 waarde meegestuurd).

maar... ik kan mijn fout niet vinden

EDIT 2: ik denk dus dat de fout in één van de volgende lijnen zit:

javascript code - Bekijk de code zonder highlighting - Klap code in

                 function sendRequest(waardeID,waardeX) { 
     
       http.open('get', 'script_test_drag_data.php?id='+waardeID+'&x='+waardeX); 
       http.send(null); 
     
    } 

function sendRequest(waardeID,waardeX) { 
 
       http.open('get', 'script_test_drag_data.php?id='+waardeID+'&x='+waardeX); 
       http.send(null); 
 
    }

javascript code - Bekijk de code zonder highlighting - Klap code in

                <input type="text" size="50" name="id" id="waardeID" onKeyUp="sendRequest(this.value)" /> 
<input type="text" size="50" name="x" id="waardeX" onKeyUp="sendRequest(this.value)" />

<input type="text" size="50" name="id" id="waardeID" onKeyUp="sendRequest(this.value)" /> 
<input type="text" size="50" name="x" id="waardeX" onKeyUp="sendRequest(this.value)" />

want wanneer ik een id ingeef, wordt die bijbehorende waarde wel aangepast, maar naar "UNDEFINED". Dus wanneer ik bv id=4 en x=5 in de desbetreffende zoekvelden ingeef, wordt in de database de inhoud veranderd waar id=4 naar x=UNDEFINED.
-------------------------------------------------------------
EDIT 3:
ik heb mijn code nu aangepast naar hetvolgende:

javascript code - Bekijk de code zonder highlighting - Klap code in

                
<!-- ...AJAX code...
--!>
var http = createRequestObject(); 

    function sendRequest() { 
	var t_ID = document.getElementById('id').value; 
	var t_X = document.getElementById('posX').value; 
	var t_Y = document.getElementById('posY').value; 
       http.open('get', 'script_test_drag_data.php?id='+t_ID+'&x='+t_X+'&y='t_Y; 
       http.send(null); 
     
    } 

<form action="/script_test_drag.php" method="post">
  	<input type="text" size="50" name="id" id="id" />
	<input type="text" size="50" name="posX" id="posX" />
	<input type="text" size="50" name="posY" id="posY" /> 
</form>

            
<!-- ...AJAX code...
--!>
var http = createRequestObject(); 
 
    function sendRequest() { 
	var t_ID = document.getElementById('id').value; 
	var t_X = document.getElementById('posX').value; 
	var t_Y = document.getElementById('posY').value; 
       http.open('get', 'script_test_drag_data.php?id='+t_ID+'&x='+t_X+'&y='t_Y; 
       http.send(null); 
 
    } 
 
<form action="/script_test_drag.php" method="post">
  	<input type="text" size="50" name="id" id="id" />
	<input type="text" size="50" name="posX" id="posX" />
	<input type="text" size="50" name="posY" id="posY" /> 
</form>
 

Gesponsorde links

Dit onderwerp is gesloten.

Actiefste leden van de maand

Actieve forumberichten