Remotive
16-04-2008, 07:12 PM
Hey guys, I am going to get straight to the point, so here it goes...
I am trying to get the drag, drop and save script from TechTuts to work, I tried alot of things to fix this and for some reason it just won't work, I have fixed all I can but I need some help as it asks me if I want to save it and I click OK it says its saved then I reload and the image has gone and there is no entry in the database, meaning there is a saving problem of course.
So, will you guys help me? If yeah here are the codes...
save.js
function ajaxReq()
{
if (typeof XMLHttpRequest != "undefined") // XMLHttpRequest is supported by the browser...
{
return new XMLHttpRequest(); // Use it.
}
else if (typeof ActiveXObject != "undefined") // Else if the browser supports ActiveXObjects's, IE.
{
return new ActiveXObject("Microsoft.XMLHTTP"); // Use it.
}
else // Else nothing is supported...
{
throw new Error("XMLHttpRequest not supported"); // Show error
}
}
var ajax = ajaxReq();
// Assign an ajax request to the global ajax variable
/*********************************/
function saveGridObjects()
{
var objects = ""; // Create an empty objects string
// Run through the gridObjects array full of all the objects on the grid
for (i = 0; i < gridObjects.length; i += 1)
{
var obj = document.getElementById(gridObjects[i]);
// Get each element
objects +=
"" +
"" + obj.id + "" +
"" + obj.title + "" +
"" + obj.style.backgroundImage + "" +
"" + obj.style.width + "" +
"" + obj.style.height + "" +
"" + obj.style.top + "" +
"\n" + obj.style.left + "\n" +
"" + obj.style.zIndex + "" +
"";
// Add to the objects string a xml type code that tells the php script about the object to save
}
var toggle = new Array("tG",
"tD",
"tE",
"tZ",
"tI");
// This array contains the ids of the 5 toggle boxes in the drag html
for (i = 0; i < toggle.length; i += 1)
{
var obj = document.getElementById(toggle[i]);
objects +=
"" +
"" + obj.id + "" +
"" + obj.checked + "" +
"";
}
// Add the toggle boxes information to the objects string
ajax.open("POST", "grid.save.php", true);
// Open an ajax post to the grid.save.php file
ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// Send ajax request header
ajax.send("object_data=" + objects);
// Send the objects string as $_POST['object_data']
ajax.onreadystatechange = function() // On statechange... ie. when ajax is ready
{
if (ajax.readyState == 4) // When ajax send is complete...
{
var response = ajax.responseText;
alert("Grid Saved!"); // Alert of successful save
}
}
}
/*********************************/
var gridObjects = new Array(); // Empty gridObjects array
function getGridObjects()
{
var gridObjs = document.getElementById("grid").getElementsByTagName("div");
// Get all div elements within the grid element, ie. all objects in grid
gridObjects = new Array(); // Empty gridObjects array
for (i = 0; i < gridObjs.length; i += 1) // Loop through all the gridObjects
{
if (gridObjs[i].id.substr(0, 5) == "drag_") // If object has the drag_ prefix...
{
gridObjects.push(gridObjs[i].id); // Add it to the gridObjects array
}
}
saveGridObjects(); // Run the saveGridObjects function
}
/***************************/
function save()
{
var save = confirm("Do you wish to save all objects currently on the grid?");
// Ask if user wants to save the grid
if (save) // If yes...
{
alert("Saving...nWait for next alert before continuing..."); // Alert that it is saving...
getGridObjects(); // Run the getGridObjects function
}
}
grid.save.php
<?php
require_once "grid.config.php";
$data = $_POST['object_data'];
preg_match_all("/\[array\](.*)\[\/array\]/imU", $data, $parsed, PREG_PATTERN_ORDER);
$parsed_data = array();
foreach ($parsed[1] as $data)
{
$parsed_data[] = $data;
}
$tags = array(
"id",
"title",
"src",
"width",
"height",
"top",
"left",
"zindex"
);
$all_objects = array();
foreach ($parsed_data as $data)
{
$object = array();
foreach ($tags as $tag)
{
preg_match_all("/\[$tag\](.*)\[\/$tag\]/imU", $data, $parse, PREG_PATTERN_ORDER);
$object[] = $parse[1][0];
}
$all_objects[] = $object;
}
$assoc = array();
foreach ($all_objects as $object => $attribute)
{
$info = array();
$info['obj_id'] = $attribute[0];
$info['obj_title'] = $attribute[1];
$info['obj_src'] = $attribute[2];
$info['obj_width'] = $attribute[3];
$info['obj_height'] = $attribute[4];
$info['obj_top'] = $attribute[5];
$info['obj_left'] = $attribute[6];
$info['obj_zindex'] = $attribute[7];
$assoc[] = $info;
}
foreach ($assoc as $object)
{
if (substr($object['obj_title'], 0, 8) != "deleted_")
{
$find_object = mysql_query("SELECT * FROM `object` WHERE `obj_id` = '" . $object['obj_id'] . "'");
if (mysql_num_rows($find_object) == 1)
{
mysql_query("LOCK TABLES `object` WRITE");
mysql_query(
"UPDATE `object` SET `obj_top` = '" . $object['obj_top'] . "'" .
", `obj_left` = '" . $object['obj_left'] . "', `obj_zindex` = '" . $object['obj_zindex'] . "' WHERE `obj_id` = '" . $object['obj_id'] . "'");
mysql_query("UNLOCK TABLES");
}
else
{
mysql_query("LOCK TABLES `object` WRITE");
mysql_query(
"INSERT INTO `object` " .
"(`obj_id`, " .
"`obj_title`, " .
"`obj_src`, " .
"`obj_width`, " .
"`obj_height`, " .
"`obj_top`, " .
"`obj_left`, " .
"`obj_zindex`) " .
"VALUES " .
"('" . $object['obj_id'] . "', " .
"'" . $object['obj_title'] . "', " .
"'" . str_replace(" ", "%20", $object['obj_src']) . "', " .
"'" . $object['obj_width'] . "', " .
"'" . $object['obj_height'] . "', " .
"'" . $object['obj_top'] . "', " .
"'" . $object['obj_left'] . "', " .
"'" . $object['obj_zindex'] . "')");
mysql_query("UNLOCK TABLES");
}
}
else
{
mysql_query("LOCK TABLES `object` WRITE");
mysql_query("DELETE FROM `object` WHERE `obj_id` = '" . $object['obj_id'] . "'");
mysql_query("UNLOCK TABLES");
}
}
preg_match_all("/\[tog\](.*)\[\/tog\]/imU", $data, $parsed, PREG_PATTERN_ORDER);
$parsed_data = array();
foreach ($parsed[1] as $data)
{
$parsed_data[] = $data;
}
$tags = array(
"id",
"value"
);
$all_objects = array();
foreach ($parsed_data as $data)
{
$object = array();
foreach ($tags as $tag)
{
preg_match_all("/\[$tag\](.*)\[\/$tag\]/imU", $data, $parse, PREG_PATTERN_ORDER);
$object[] = $parse[1][0];
}
$all_objects[] = $object;
}
$assoc = array();
foreach ($all_objects as $object => $attribute)
{
$info = array();
$info['tog_id'] = $attribute[0];
$info['tog_value'] = $attribute[1];
$find_object = mysql_query("SELECT * FROM `toggle` WHERE `tog_id` = '" . $info['tog_id'] . "'");
if (mysql_num_rows($find_object) == 1)
{
mysql_query("LOCK TABLES `toggle` WRITE");
mysql_query("UPDATE `toggle` SET `tog_value` = '" . $info['tog_value'] . "' WHERE `tog_id` = '" . $info['tog_id'] . "'");
mysql_query("UNLOCK TABLES");
}
}
?>
Those two files are the ones that save everything. :)
I have mainly fixed the save.js as I said but if there are anymore errors can people please point them out or even better correct them for me? ;)
Any help is MUCH appreciated. :eusa_clap
I am trying to get the drag, drop and save script from TechTuts to work, I tried alot of things to fix this and for some reason it just won't work, I have fixed all I can but I need some help as it asks me if I want to save it and I click OK it says its saved then I reload and the image has gone and there is no entry in the database, meaning there is a saving problem of course.
So, will you guys help me? If yeah here are the codes...
save.js
function ajaxReq()
{
if (typeof XMLHttpRequest != "undefined") // XMLHttpRequest is supported by the browser...
{
return new XMLHttpRequest(); // Use it.
}
else if (typeof ActiveXObject != "undefined") // Else if the browser supports ActiveXObjects's, IE.
{
return new ActiveXObject("Microsoft.XMLHTTP"); // Use it.
}
else // Else nothing is supported...
{
throw new Error("XMLHttpRequest not supported"); // Show error
}
}
var ajax = ajaxReq();
// Assign an ajax request to the global ajax variable
/*********************************/
function saveGridObjects()
{
var objects = ""; // Create an empty objects string
// Run through the gridObjects array full of all the objects on the grid
for (i = 0; i < gridObjects.length; i += 1)
{
var obj = document.getElementById(gridObjects[i]);
// Get each element
objects +=
"" +
"" + obj.id + "" +
"" + obj.title + "" +
"" + obj.style.backgroundImage + "" +
"" + obj.style.width + "" +
"" + obj.style.height + "" +
"" + obj.style.top + "" +
"\n" + obj.style.left + "\n" +
"" + obj.style.zIndex + "" +
"";
// Add to the objects string a xml type code that tells the php script about the object to save
}
var toggle = new Array("tG",
"tD",
"tE",
"tZ",
"tI");
// This array contains the ids of the 5 toggle boxes in the drag html
for (i = 0; i < toggle.length; i += 1)
{
var obj = document.getElementById(toggle[i]);
objects +=
"" +
"" + obj.id + "" +
"" + obj.checked + "" +
"";
}
// Add the toggle boxes information to the objects string
ajax.open("POST", "grid.save.php", true);
// Open an ajax post to the grid.save.php file
ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// Send ajax request header
ajax.send("object_data=" + objects);
// Send the objects string as $_POST['object_data']
ajax.onreadystatechange = function() // On statechange... ie. when ajax is ready
{
if (ajax.readyState == 4) // When ajax send is complete...
{
var response = ajax.responseText;
alert("Grid Saved!"); // Alert of successful save
}
}
}
/*********************************/
var gridObjects = new Array(); // Empty gridObjects array
function getGridObjects()
{
var gridObjs = document.getElementById("grid").getElementsByTagName("div");
// Get all div elements within the grid element, ie. all objects in grid
gridObjects = new Array(); // Empty gridObjects array
for (i = 0; i < gridObjs.length; i += 1) // Loop through all the gridObjects
{
if (gridObjs[i].id.substr(0, 5) == "drag_") // If object has the drag_ prefix...
{
gridObjects.push(gridObjs[i].id); // Add it to the gridObjects array
}
}
saveGridObjects(); // Run the saveGridObjects function
}
/***************************/
function save()
{
var save = confirm("Do you wish to save all objects currently on the grid?");
// Ask if user wants to save the grid
if (save) // If yes...
{
alert("Saving...nWait for next alert before continuing..."); // Alert that it is saving...
getGridObjects(); // Run the getGridObjects function
}
}
grid.save.php
<?php
require_once "grid.config.php";
$data = $_POST['object_data'];
preg_match_all("/\[array\](.*)\[\/array\]/imU", $data, $parsed, PREG_PATTERN_ORDER);
$parsed_data = array();
foreach ($parsed[1] as $data)
{
$parsed_data[] = $data;
}
$tags = array(
"id",
"title",
"src",
"width",
"height",
"top",
"left",
"zindex"
);
$all_objects = array();
foreach ($parsed_data as $data)
{
$object = array();
foreach ($tags as $tag)
{
preg_match_all("/\[$tag\](.*)\[\/$tag\]/imU", $data, $parse, PREG_PATTERN_ORDER);
$object[] = $parse[1][0];
}
$all_objects[] = $object;
}
$assoc = array();
foreach ($all_objects as $object => $attribute)
{
$info = array();
$info['obj_id'] = $attribute[0];
$info['obj_title'] = $attribute[1];
$info['obj_src'] = $attribute[2];
$info['obj_width'] = $attribute[3];
$info['obj_height'] = $attribute[4];
$info['obj_top'] = $attribute[5];
$info['obj_left'] = $attribute[6];
$info['obj_zindex'] = $attribute[7];
$assoc[] = $info;
}
foreach ($assoc as $object)
{
if (substr($object['obj_title'], 0, 8) != "deleted_")
{
$find_object = mysql_query("SELECT * FROM `object` WHERE `obj_id` = '" . $object['obj_id'] . "'");
if (mysql_num_rows($find_object) == 1)
{
mysql_query("LOCK TABLES `object` WRITE");
mysql_query(
"UPDATE `object` SET `obj_top` = '" . $object['obj_top'] . "'" .
", `obj_left` = '" . $object['obj_left'] . "', `obj_zindex` = '" . $object['obj_zindex'] . "' WHERE `obj_id` = '" . $object['obj_id'] . "'");
mysql_query("UNLOCK TABLES");
}
else
{
mysql_query("LOCK TABLES `object` WRITE");
mysql_query(
"INSERT INTO `object` " .
"(`obj_id`, " .
"`obj_title`, " .
"`obj_src`, " .
"`obj_width`, " .
"`obj_height`, " .
"`obj_top`, " .
"`obj_left`, " .
"`obj_zindex`) " .
"VALUES " .
"('" . $object['obj_id'] . "', " .
"'" . $object['obj_title'] . "', " .
"'" . str_replace(" ", "%20", $object['obj_src']) . "', " .
"'" . $object['obj_width'] . "', " .
"'" . $object['obj_height'] . "', " .
"'" . $object['obj_top'] . "', " .
"'" . $object['obj_left'] . "', " .
"'" . $object['obj_zindex'] . "')");
mysql_query("UNLOCK TABLES");
}
}
else
{
mysql_query("LOCK TABLES `object` WRITE");
mysql_query("DELETE FROM `object` WHERE `obj_id` = '" . $object['obj_id'] . "'");
mysql_query("UNLOCK TABLES");
}
}
preg_match_all("/\[tog\](.*)\[\/tog\]/imU", $data, $parsed, PREG_PATTERN_ORDER);
$parsed_data = array();
foreach ($parsed[1] as $data)
{
$parsed_data[] = $data;
}
$tags = array(
"id",
"value"
);
$all_objects = array();
foreach ($parsed_data as $data)
{
$object = array();
foreach ($tags as $tag)
{
preg_match_all("/\[$tag\](.*)\[\/$tag\]/imU", $data, $parse, PREG_PATTERN_ORDER);
$object[] = $parse[1][0];
}
$all_objects[] = $object;
}
$assoc = array();
foreach ($all_objects as $object => $attribute)
{
$info = array();
$info['tog_id'] = $attribute[0];
$info['tog_value'] = $attribute[1];
$find_object = mysql_query("SELECT * FROM `toggle` WHERE `tog_id` = '" . $info['tog_id'] . "'");
if (mysql_num_rows($find_object) == 1)
{
mysql_query("LOCK TABLES `toggle` WRITE");
mysql_query("UPDATE `toggle` SET `tog_value` = '" . $info['tog_value'] . "' WHERE `tog_id` = '" . $info['tog_id'] . "'");
mysql_query("UNLOCK TABLES");
}
}
?>
Those two files are the ones that save everything. :)
I have mainly fixed the save.js as I said but if there are anymore errors can people please point them out or even better correct them for me? ;)
Any help is MUCH appreciated. :eusa_clap