Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need a little help

    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
    Code:
    <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
    Code:
    <!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.ht...ag-drop-custom

  • #2
    New Coder
    Join Date
    Sep 2011
    Location
    United Kingdom
    Posts
    74
    Thanks
    2
    Thanked 3 Times in 3 Posts

    choose another search engine.

    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •