Ajax Advice

davelearning · January 11, 2011

Hi all,

This is more of a general advice request than an actual help topic.

Basically I have a page which is for tagging images, that another developer has written:

<?php

include('../includes/config.php');

if(isset($_GET['del'])){
mysql_query("delete from tags where id = $_GET[del]");
}

if(!isset($_GET['pic'])){
$pic = 1;
} else {
$pic = addslashes($_GET[pic]);
}

if($_POST){
	if($_POST[description]!=""){
		foreach($_POST as $id => $val){
			$$id = addslashes($val);
		}
		mysql_query("
			insert into tags (pictureid,top,`left`,width,height,description) 
			values ($pic,$top,$left,$width,$height,'$description')") or die(mysql_error());
		header("location:demo.php");
	}
}
?>
<html>
<head>
	<script src="./js/jquery.js" language="JavaScript" type="text/javascript"></script>
	<script src="./js/jquery-ui.js" language="JavaScript" type="text/javascript"></script>
	<link type="text/css" href="./css/jquery-ui.css" rel="stylesheet" />
	<script>
		function updateForm(){
			$("#width").val($("#drag").attr("offsetWidth"));
			$("#height").val($("#drag").attr("offsetHeight"));
			$("#top").val($("#drag").attr("offsetTop"));
			$("#left").val($("#drag").attr("offsetLeft"));
		}
		$(document).ready(function(){
			updateForm();
			$("#drag").resizable({
				 stop: function() {
				  	updateForm();
				  }
			});
			$("#drag").draggable({
				  containment: 'parent',
				  stop: function() {
				  	updateForm();
				  }
			});
			$(".tag").hover(
			function () {
			$(this).addClass("tagOn");
			},
			function () {
			$(this).removeClass("tagOn");
			}
			);

		});
	</script>
	<style>
		.tagOn{
			border:1px solid black;
		}
		#taggingArea{
			position:relative;
			width:auto;
			float:left;
		}
		#formArea{
			width:50%;
			float:left;
		}
		#drag{
			position:absolute;
			top:0px;
			width:100px;
			height:100px;
			border:2px solid black;
			background:url('blank.gif');
		}
	</style>
</head>
<body>
<h1>Testing image tagging</h1>
	<div id="taggingArea">
		<img src="<?php echo $pic;?>.jpg" />
		<?php if($_GET['mode']=="edit"){
			?><div id="drag" class="ui-widget-content"></div><?php
		} else {
			$getTags = mysql_query("select * from tags where pictureid = $pic");
			if(mysql_num_rows($getTags)>0){
				while($resTags = mysql_fetch_array($getTags)){
					?>
					<div class=tag style="position:absolute;width:<?php echo $resTags['width'];?>px;height:<?php echo $resTags['height'];?>px;top:<?php echo $resTags['top'];?>;left:<?php echo $resTags['left'];?>;">
						<?php echo $resTags['description'];?>
					</div>
					<?php
				}
			}
		} ?>
	</div>
	<?php if($_GET['mode']=="edit"){ ?>
		<div id="formArea">
			<form method=post>
				<input type=hidden name=pic value="<?php echo $pic;?>">
				<input type=hidden name=width id=width>
				<input type=hidden name=height id=height>
				<input type=hidden name=top id=top>
				<input type=hidden name=left id=left>
				Description : 
				<input type=submit value=save>
			</form>
			<?php
			$getTags = mysql_query("select * from tags where pictureid = $pic");
			if(mysql_num_rows($getTags)>0){
				while($resTags = mysql_fetch_array($getTags)){
					echo "Tag #$resTags[id] $resTags[description] <a href=\"demo.php?del=$resTags[id]\">Delete</a><br />";
				}
			}
			?>
			<a href="demo.php">Go to view mode</a>
		</div>
	<?php } else { ?>
		<div id="formArea">
			<a href="demo.php?mode=edit">Go to edit mode</a>
		</div>
	<?php } ?>
</body>
</html>

Basically what I hope to achieve is for all this to work, as the user would see it, on one page.

Main main point is, how feasible is it to do something like this, and could anyone recommend any good books to get me started in ajax? I have a basic javascript knowledge, so looking at a few scripts I can work out roughly whats going on, but I am far more beginner than anything else!

trq · January 11, 2011

I have a basic javascript knowledge, so looking at a few scripts I can work out roughly whats going on, but I am far more beginner than anything else!

I would use a framework. It makes things allot easier. jQuery is my preferred, http://jquery.com/

Sign In

Ajax Advice

Recommended Posts

davelearning

Link to comment

Share on other sites

trq

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information