View Full Version : Need help with SAJAX

05-05-2006, 12:30 PM

First of al, I think we need a category called AJAX for all our AJAX questions :)

Well this is going to be a long story, but bare with me!

Before I begin more info about sajax can be found here:

Ok here we go,
At my site you can drag and drop an image. When you drop the image, the coordinates are written to a xml file and read again using ajax (checking every second, so it looks like realtime). This way the image stays at the coordinates where it was dropped (else the image would "jump back" to it's starting position on a page refresh).

All this works great, but with 1 image only. Currently, only the coordinates are written away. If 2 or more images are on the page, they will all use the coordinates from xml file. This can be solved (in theory) by adding the ID of the image dragged. So if image with ID TREE is dropped, it saves: tree 234,232 instead of only the coordinates.

Also, saving this coordinates to a file isn't quite handy. Saving it to a db is better, I think. This is what I have got so far:
Every image gets its own id. The id is the usersname. So it seems logical to me to add the coordinates to the user table.

The user table looks like this:

Table name: onlineUser
onlineUserId mediumint(8)
ip int(4)
name varchar(25)
avatar varchar(200)
timestamp timestamp
location varchar(100)

So in xpos and ypos must the coordinates be written to.

In the attachment I have put a zip file containing the php and xml files I think you need. It has page1.php where now the javascript is for the coordinate upload and the xml file.

I think this process can be much more simple using sajax. In short, it has to do this: You move a image and drop it. The new coordinates are saved where the div id = the username. All coordinates are read every second like it is done now with the xml file.

Also I currently have this code to read out and move the image to:

dd.elements.<?php echo $name; ?>.moveTo(xPos, yPos);
updateTimeout = setTimeout("checkPos()", 1000);

If more pics/ users are online it should look like this:

dd.elements.mike.moveTo(xPos, yPos);
dd.elements.john.moveTo(xPos, yPos);
dd.elements.peter.moveTo(xPos, yPos);
updateTimeout = setTimeout("checkPos()", 1000);

Here are john, mike and peter the current users online (cause the name is the id).

All with me yet? Perhaps I dont need SAJAX but only AJAX if so, other solutions are welcome.

I have a demo set up. Note, it's a demo not a fully working, save, perfect demo. Also, its best to check the demo when you are on the page by yourself, else all images will be piled up each other (cause the use the same coordinates)

Step 1: go to http://www.sourceskins.com/test/checkname2.php
Step 2: Fill in you name and submit
Step 3: Choose a image and press submit
Step 4: Click the link that appears. (sometimes you need to click the link and when you are at the new page, click the adress in the adressbar and press enter to die-hard refresh the page)
Step 5: Drag and drop the image. Pressing refresh will show you the image moves to the last dropped coordinates. If you see more images or see the image move while you do nothing, another user is moving the image :)

There are several bugs I need to sort out, like when you exit the page and fill in a new name, you will see the name you used before under the image. It should delete you when you leave the page, but this doesn't happen everytime.

Well I hope you can help me, I would realy like to see this work, dragging all the images, making words with other users :)