By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,854 Members | 849 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,854 IT Pros & Developers. It's quick & easy.

Ajax Help img src Images in dd.php

P: 4
I successfuly installed dd.php and sajax.php files. It runs fine, but I would like to link the $items to an image. I called the field in mysql with the link "pic". Any help would be AWESOME!!! I've run out of ideas.

Here's the script

[PHP]<?php
/*
CREATE TABLE `layout` (
`set` varchar(50) NOT NULL default '',
`item` varchar(50) NOT NULL default '',
`order` int(9) NOT NULL default '0',
PRIMARY KEY (`set`,`item`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

--
-- Dumping data for table `layout`
--

INSERT INTO `layout` VALUES ('right_col', 'Seven', 0);
INSERT INTO `layout` VALUES ('right_col', 'Six', 0);
INSERT INTO `layout` VALUES ('center', 'Four', 0);
INSERT INTO `layout` VALUES ('center', 'Two', 0);
INSERT INTO `layout` VALUES ('center', 'Three', 0);
INSERT INTO `layout` VALUES ('left_col', 'Five', 0);
INSERT INTO `layout` VALUES ('left_col', 'One', 0);
INSERT INTO `layout` VALUES ('sajax1', 'Item 1', 0);
INSERT INTO `layout` VALUES ('sajax2', 'Item 2', 0);
INSERT INTO `layout` VALUES ('sajax2', 'Item 3', 0);
*/


mysql_connect('localhost', 'xxxx', 'xxxx');
mysql_select_db('flying_sort');
function parse_data($data)
{
$containers = explode(":", $data);
foreach($containers AS $container)
{
$container = str_replace(")", "", $container);
$i = 0;
$lastly = explode("(", $container);
$values = explode(",", $lastly[1]);
foreach($values AS $value)
{
if($value == '')
{
continue;
}
$final[$lastly[0]][] = $value;
$i ++;
}
}
return $final;
}

function update_db($data_array, $col_check)
{

foreach($data_array AS $set => $items)
{
$i = 0;
foreach($items AS $item)
{
$item = mysql_escape_string($item);
$set = mysql_escape_string($set);

mysql_query("UPDATE layout SET `set` = '$set', `order` = '$i' WHERE `item` = '$item' $col_check");
$i ++;
}
}
}

// Lets setup Sajax
require_once('Sajax.php');
sajax_init();
// $sajax_debug_mode = 1;

function sajax_update($data)
{
$data = parse_data($data);
update_db($data, "AND (`set` = 'sajax1' OR `set` = 'sajax2' OR `set` = 'sajax3'");
return 'y';
}

sajax_export("sajax_update");
sajax_handle_client_request();


if(isset($_POST['order']))
{
$data = parse_data($_POST['order']);
update_db($data, "AND (`set` = 'left_col' OR `set` = 'right_col' OR `set` = 'center')");
// redirect so refresh doesnt reset order to last save
header("location: dd.php");
exit;
}

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html><head><title>Drag Drop</title>


<style type="text/css">
#left_col {
width: 180px;
float: left;
margin-left: 5px;
}

#center {
width: 180px;
float: left;
margin-left: 5px;
}

#right_col {
width: 180px;
float: left;
margin-left: 5px;
}

#sajax1 {
width: 180px;
float: left;
margin-left: 5px;
}

#sajax2 {
width: 180px;
float: left;
margin-left: 5px;
}

form {
clear: left;
}

body {
background: #FCFEF4 repeat-x;
margin: 10px 10px 10px 10px;
font-family: Arial, Verdana, Helvetica;
font-size: 76%;
color: #3F3F3F;
text-align: left;
}

h2 {
color: #7DA721;
font-weight: normal;
font-size: 14px;
margin: 20px 0 0 0;
}

br {
clear: left;
}
</style>

<link rel="stylesheet" href="dd_files/lists.css" type="text/css">
<script language="JavaScript" type="text/javascript" src="dd_files/coordinates.js"></script>
<script language="JavaScript" type="text/javascript" src="dd_files/drag.js"></script>
<script language="JavaScript" type="text/javascript" src="dd_files/dragdrop.js"></script>
<script language="JavaScript" type="text/javascript"><!--
<?php
sajax_show_javascript();
?>
function confirm(z)
{
window.status = 'Sajax version updated';
}

function onDrop() {
var data = DragDrop.serData('g2');
x_sajax_update(data, confirm);
}

window.onload = function() {

var list = document.getElementById("left_col");
DragDrop.makeListContainer( list, 'g1' );
list.onDragOver = function() { this.style["background"] = "#EEF"; };
list.onDragOut = function() {this.style["background"] = "none"; };

list = document.getElementById("center");
DragDrop.makeListContainer( list, 'g1' );
list.onDragOver = function() { this.style["background"] = "#EEF"; };
list.onDragOut = function() {this.style["background"] = "none"; };

list = document.getElementById("right_col");
DragDrop.makeListContainer( list, 'g1' );
list.onDragOver = function() { this.style["background"] = "#EEF"; };
list.onDragOut = function() {this.style["background"] = "none"; };

list = document.getElementById("sajax1");
DragDrop.makeListContainer( list, 'g2' );
list.onDragOver = function() { this.style["background"] = "#EEF"; };
list.onDragOut = function() {this.style["background"] = "none"; };
list.onDragDrop = function() {onDrop(); };

list = document.getElementById("sajax2");
DragDrop.makeListContainer( list, 'g2' );
list.onDragOver = function() { this.style["background"] = "#EEF"; };
list.onDragOut = function() {this.style["background"] = "none"; };
list.onDragDrop = function() {onDrop(); };
};

function getSort()
{
order = document.getElementById("order");
order.value = DragDrop.serData('g1', null);
}

function showValue()
{
order = document.getElementById("order");
alert(order.value);
}
//-->
</script></head>

<body>

<h2>Form update</h2>
<p>This shows the order being updated in the DB when the submit button is clicked.</p>
<br />
<ul id="left_col" class="sortable boxy">
<?php
$r = mysql_query("SELECT * FROM layout WHERE `set` = 'left_col' ORDER BY `order` ASC");
while($rw = mysql_fetch_array($r))
{
echo '<li id="'.$rw['item'].'">'.$rw['item'].'</li>';
}
?>
</ul>


<ul id="center" class="sortable boxy">
<?php
$r = mysql_query("SELECT * FROM layout WHERE `set` = 'center' ORDER BY `order` ASC");
while($rw = mysql_fetch_array($r))
{
echo '<li id="'.$rw['item'].'">'.$rw['item'].'</li>';
}
?>

</ul>


<ul id="right_col" class="sortable boxy">
<?php
$r = mysql_query("SELECT * FROM layout WHERE `set` = 'right_col' ORDER BY `order` ASC");
while($rw = mysql_fetch_array($r))
{
echo '<li id="'.$rw['item'].'">'.$rw['item'].'</li>';
}
?>
</ul>

<form action="" method="post">
<br />
<input type="hidden" name="order" id="order" value="" />
<input type="submit" onclick="getSort()" value="Update Order" />
</form>



<h2>(S)Ajax Example</h2>
<p>In this example the fields are updated automatically in the DB when the item is dropped, using the AJAX method (SAJAX to implement with PHP)</p>
<br />

<ul id="sajax1" class="sortable boxy">
<?php
$r = mysql_query("SELECT * FROM layout WHERE `set` = 'sajax1' ORDER BY `order` ASC");
while($rw = mysql_fetch_array($r))
{
echo '<li id="'.$rw['item'].'">'.$rw['item'].'</li>';
}
?>
</ul>

<ul id="sajax2" class="sortable boxy">
<?php
$r = mysql_query("SELECT * FROM layout WHERE `set` = 'sajax2' ORDER BY `order` ASC");
while($rw = mysql_fetch_array($r))
{
echo '<li id="'.$rw['item'].'">'.$rw['item'].'</li>';
}
?>

</ul>

<br />
<br />
<p>View the <a href="dd.phps">source php</a> code (code for <a href="Sajax.phps">Sajax.php</a>).<br />
<a href="dd.zip">Download Files</a> | <a href="http://www.cyberdummy.co.uk/2005/07/13/multi-list-drag-and-drop/">Comments</a></p>

<h2>Update (18 July 05)</h2>
<p>Simplified code (no more deleting items) made little more secure.</p>

<h2>Update (15 July 05)</h2>
<p>Added a grouping feature so you can have groups of lists to drag between and not let them get mixed.
<br />Added a Sjax example implementation.
</p>

<h2>Update (14 July 05)</h2>
<p>Now no need for a trash container implemented a bounce back feature.</p>



</body></html>[/PHP]
Nov 2 '06 #1
Share this Question
Share on Google+
1 Reply


acoder
Expert Mod 15k+
P: 16,027
Include the images within the LI elements. When the image locations need to be stored, pass the src properties of the images.
May 27 '08 #2

Post your reply

Sign in to post your reply or Sign up for a free account.