...

View Full Version : Need a little help



Venidrad
09-23-2011, 03:00 PM
Hi,

indeed, I could not be anymore specific in the title, since I do not know what has to be done. I have been trying to do the following:

Create a webpage with a search bar, which leads to a page with two drop boxes. This search bar searches in the database (SQL) and shows a limit range of 10 results matching the input in the above dropbox, it can than be dragged down to the other box, as to select it.

This I've been able to do, with a javascript I found on the internet and slightly modified in order to make the dropboxes.

Now however I cannot workout the final step, I need to get the data (meaning the entry ID's of the selected database items) in a string or so in orde to process them to a new SQL query.

Underneath are my scripts, if anything is left unclear please tell me so, thanks in advance, Venidrad.

index.php


<html>
<body>
<form id="frm_search" name="frm_search" method="POST" action="search.php">
<input type="text" name="string" />
<a href="javascript:document.frm_search.submit();">Submit</a>
</form>
</body>
</html>


search.php


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<?
$keywords = "Drag and drop script,DHTML drag and drop,drag,drop";
@include($_SERVER['DOCUMENT_ROOT']."/config/metatags.inc");
?>
<link rel="stylesheet" href="main.css" type="text/css" />
<script type="text/javascript" src="js/drag-drop-custom.js"></script>
<script type="text/javascript" src="http://static.wowhead.com/widgets/power.js"></script>
</head>
<body>
<div id="wrapper">
<div id="topBox">
<div id="dropContent">
<?
mysql_connect("localhost", "root", "");
mysql_select_db("practice");
$query = mysql_query("SELECT * FROM `item_template` WHERE `entry` LIKE '%".$_POST['string']."%' OR `name` LIKE '%".$_POST['string']."%' LIMIT 0,10;");
$result1 = mysql_fetch_array($query);
$result2 = mysql_fetch_array($query);
$result3 = mysql_fetch_array($query);
$result4 = mysql_fetch_array($query);
$result5 = mysql_fetch_array($query);
$result6 = mysql_fetch_array($query);
$result7 = mysql_fetch_array($query);
$result8 = mysql_fetch_array($query);
$result9 = mysql_fetch_array($query);
$result10 = mysql_fetch_array($query);
echo("
<div id='box1'><a class='dragableBox' href='http://www.wowhead.com/item=$result1[entry]'>$result1[name]</a></div>
<div id='box2'><a class='dragableBox' href='http://www.wowhead.com/item=$result2[entry]'>$result2[name]</a></div>
<div id='box3'><a class='dragableBox' href='http://www.wowhead.com/item=$result3[entry]'>$result3[name]</a></div>
<div id='box4'><a class='dragableBox' href='http://www.wowhead.com/item=$result4[entry]'>$result4[name]</a></div>
<div id='box5'><a class='dragableBox' href='http://www.wowhead.com/item=$result5[entry]'>$result5[name]</a></div>
<div id='box6'><a class='dragableBox' href='http://www.wowhead.com/item=$result6[entry]'>$result6[name]</a></div>
<div id='box7'><a class='dragableBox' href='http://www.wowhead.com/item=$result7[entry]'>$result7[name]</a></div>
<div id='box8'><a class='dragableBox' href='http://www.wowhead.com/item=$result8[entry]'>$result8[name]</a></div>
<div id='box9'><a class='dragableBox' href='http://www.wowhead.com/item=$result9[entry]'>$result9[name]</a></div>
<div id='box10'><a class='dragableBox' href='http://www.wowhead.com/item=$result10[entry]'>$result10[name]</a></div>
");

?>
</div>
</div>
<div id="botBox">
<div id="dropBox" class="dropBox">
<p><b>Drop some boxes on me</b></p>
<div id="dropContent2"></div>
</div>
</div>
<div class="clear"></div>
</div>
<div id="id">
</div>

<div id="debug"></div>
<script type="text/javascript">
function dropItems(idOfDraggedItem,targetId,x,y)
{
if(targetId=='dropBox'){ // Item dropped on dropBox
var obj = document.getElementById(idOfDraggedItem);
if(obj.parentNode.id=='dropContent2')return;
document.getElementById('dropContent2').appendChild(obj); // Appending dragged element as child of target box
}
if(targetId=='topBox'){ // Item dropped on topBox
var obj = document.getElementById(idOfDraggedItem);
if(obj.parentNode.id=='dropContent')return;
document.getElementById('dropContent').appendChild(obj); // Appending dragged element as child of target box
}

}

function onDragFunction(cloneId,origId)
{
self.status = 'Started dragging element with id ' + cloneId;

var obj = document.getElementById(cloneId);
obj.style.border='1px solid #F00';
}


var dragDropObj = new DHTMLgoodies_dragDrop();
dragDropObj.addSource('box1',true,true,true,false,'onDragFunction'); // Make <div id="box1"> dragable. slide item back into original position after drop
dragDropObj.addSource('box2',true,true,true,false,'onDragFunction'); // Make <div id="box2"> dragable. slide item back into original position after drop
dragDropObj.addSource('box3',true,true,true,false,'onDragFunction'); // Make <div id="box3"> dragable. slide item back into original position after drop
dragDropObj.addSource('box4',true,true,true,false,'onDragFunction'); // Make <div id="box4"> dragable. slide item back into original position after drop
dragDropObj.addSource('box5',true,true,true,false,'onDragFunction'); // Make <div id="box5"> dragable. slide item back into original position after drop
dragDropObj.addSource('box6',true,true,true,false,'onDragFunction'); // Make <div id="box6"> dragable. slide item back into original position after drop
dragDropObj.addSource('box7',true,true,true,false,'onDragFunction'); // Make <div id="box7"> dragable. slide item back into original position after drop
dragDropObj.addSource('box8',true,true,true,false,'onDragFunction'); // Make <div id="box8"> dragable. slide item back into original position after drop
dragDropObj.addSource('box9',true,true,true,false,'onDragFunction'); // Make <div id="box9"> dragable. slide item back into original position after drop
dragDropObj.addSource('box10',true,true,true,false,'onDragFunction'); // Make <div id="box10"> dragable. slide item back into original position after drop
dragDropObj.addTarget('dropBox','dropItems'); // Set dropBox as a drop target. Call function dropItems on drop
dragDropObj.addTarget('topBox','dropItems'); // Set topBox as a drop target. Call function dropItems on drop
dragDropObj.init();
</script>
</body>
</html>


The external javascript mentioned was not modified, was too big to quote here and seems irrelevant since it contains non of the new function needed. However, it can be found here http://www.dhtmlgoodies.com/index.html?whichScript=drag-drop-custom

clausrei
09-23-2011, 04:08 PM
Hi,

I would make life easier, and use a search engine, which compiles the data index automatically in and only in javascript or php (ASP.NET ????). Some of the software available for download can create you one or the other by choice.

But I am not an Expert. (I think you can get javascript to communicate with asp.net and therefore with SQL, but this is a bit advanced )

Claus



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum