Hi guys, I am building a draggable list application using scriptaculous and have run into a bit of a wall!
I have got it working to create a sortable draggable list from 1 input but cant seem to work out how to pass 2 inputs into my DB, I think this should be pretty simple but cant seem to figure it out. Here is the relevant snipits of code (I think)
SQL Script:
CREATE TABLE chunks (
id INT UNSIGNED NOT NULL AUTO_INCREMENT,
order_no INT UNSIGNED NOT NULL default '0',
title VARCHAR(43) NOT NULL default '',
description VARCHAR(2000) NOT NULL default '',
PRIMARY KEY (id)
);
Index.php
<!-- start sidebar1 -->
<div id="sidebar1" class="sidebar">
<ul>
<li id="editChunkModule">
<form name="textNewChunk">
<h2>Create New Chunk</h2>
<div>
<h3>Chunk Name</h3>
<input type="text" id="txtNewChunkTitle" name="txtNewChunkTitle" length="42"/>
</div>
<br />
<div>
<h3>Chunk Description</h3>
<textarea name="txtNewChunkContent" id="txtNewChunkContent" cols="30" rows="15"></textarea>
</div>
<br />
</form>
</ul>
</div>
<!-- end sidebar1 -->
<!-- start picbar1 -->
<div id="picbar1" class="picbar">
<ul>
<li id="chunkMovement">
<div id="plusBut1">
<input type="image" src="../images/plusNoGlow.png" name="submit" id="submit" width="30" height="30" onclick="process('txtNewChunk', 'addNewChunk')"/>
</div>
<br /><br />
<div id="arrowBut1">
<input type="image" src="../images/arrowNoGlow.png" name="reedit" id="redit" width="30" height="30"/>
</div>
</li>
</ul>
</div>
<!-- end picbar1 -->
From the javascript:
// Send request to server
function process(content, action)
{
if (xmlHttp) // Checks xmlHttp is valid
{
params = "";
content = encodeURIComponent(content);
if (action == "recreateList")
{
params = "?content=" + serialise(content) + "&action=recreateList";
}
else if (action == "addNewChunk")
{
var newChunk = trim(encodeURIComponent(document.getElementById(content).value));
if (newChunk) // makes sure Chunk isnt null
params = "?content=" + newChunk + "&action=addNewChunk";
}
else if (action =="delChunk")
{
params = "?content=" + content + "&action=delChunk";
}
if (params) cache.push(params); // checks params isnt null then adds to cache for sending
try // try connecting to server
{
// check cache is not empty and connection is available
if ((xmlHttp.readyState == 4 || xmlHttp.readyState == 0) && cache.length>0)
{
var cacheEntry = cache.shift();
// initiate the request
xmlHttp.open("GET", "dndChunkList.php" + cacheEntry, true);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.onreadystatechange = executeStateChange;
xmlHttp.send(null);
}
else
{
setTimeout("process();", 1000);
}
}
catch (e)
{
displayError(e.toString());
}
}
}
And finally the chunkslist.class.php - this is where I think the problem is, I have tried 2 different methods for doing this and have left both in in case 1 is right - see $title and $description
// Handles Server Processing
public function Process($content, $action)
{
switch($action)
{
case 'addNewChunk':
$title = $row["txtNewChunkTitle"];
$description = $_POST["txtNewChunkContent"];
$title = trim($this->mysqlConnection->real_escape_string($title));
$description = trim($this->mysqlConnection->real_escape_string($description));
if ($chunk)
{
$result = $this->mysqlConnection->query('SELECT (MAX(order_no) + 1) ' . 'AS order_no FROM chunks');
$row = $result->fetch_assoc();
$order = $row['order_no'];
if (!$order) $order = 1;
$result = $this->mysqlConnection->query
('INSERT INTO chunks (order_no, title ,description) ' . 'VALUES ("' . $order . '", "' . $title . '" , "' . $description . '")');
$recreatedList = $this->BuildChunksList();
return $recreatedList;
}
break;
Many thanks for any help, really hope to get this sorted soon as its driving me mad!!
On another note, does anyone know howto be able to "select" an item from the sortable list onClick in order to be able to add it to another list as a link or be able to send it back to be edited - would be amazingly grateful if someone did have some idea's about this as thats the next task for me!
Can supply more code or URL if needed.
Thanks