Добрый день!
У меня вот какая задача: нужно добавлять, редактировать и удалять данные из базы данных при помощи Ajax.
Я вывожу в браузер данные из базы данных в виде таблицы. Три ячейки содержат текстовые данные и одна ячейка содержит изображение(в базе хранится только имя файла).
С редактированием ячеек с текстовыми данными проблем не возникло, а вот с теми ячейками где у меня картинки я никак не могу справиться.
Принцип такой:
при наведении на ячейку с текстовыми данными появляется поле ввода типа input со значением этой ячейки, меняем это значение на новое и данные по средствам $.ajax отправляются на обработчик там идет редактирование в бд, а в ячейке у нас уже новое значение.
При наведение на ячейку с картинкой появляется кнопка upload file при нажатии на которую происходит загрузка картинки в определенную директорию и отображение ее в этой ячейке.
Все бы хорошо, но мне нужно, чтобы у меня была одна функция, к примеру edit, в которой я мог бы собрать строку для обработчика с изображением(если оно изменилось) и без него если пользователь предпочел его не менять.
На данный момент у меня есть функция загрузки изображения и функция редактирования текстовых данных.
Главное, чтобы страничка не перезагружалась и все происходило на лету.
Вот мой код index файла (тут происходит вывод данных):
<?php
session_start();
include 'db.php';
$query = "SELECT * FROM books";
$result = mysql_query($query) or die('MySql Error' . mysql_error());
?>
<html>
<head>
<title></title>
<script type="text/javascript" src="js/jquery-1.3.2.js" ></script>
<script type="text/javascript" src="js/AjaxUpload.js" ></script>
<script type="text/javascript" src="js/AddEditDelete.js" ></script>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
<body>
<table class="zebra">
<tr>
<th>Author</th>
<th>Title</th>
<th>Photo</th>
<th>Genre</th>
<th> </th>
</tr>
<?php
while ($row = mysql_fetch_array($result)) :
$id = $row['book_id'];
$author = $row['book_author'];
$title = $row['book_title'];
$photo = $row['book_photo'];
$genre = $row['book_genre'];
?>
<tr id="<?php echo $id; ?>" class="edit" name="edit">
<td>
<span id="author_<?php echo $id; ?>" class="text">
<?php echo $author; ?>
</span>
<input type="input" value="<?php echo $author; ?>" class="editbox" id="author_input_<?php echo $id; ?>">
</td>
<td>
<span id="title_<?php echo $id; ?>" class="text">
<?php echo $title; ?>
</span>
<input type="input" value="<?php echo $title; ?>" class="editbox" id="title_input_<?php echo $id; ?>">
</td>
<td>
<img src="uploads/<?php echo $photo; ?>" id="photo_<?php echo $id; ?>" class="text" width="80" height="100">
<div id="upload" >
<span>
Upload File
<span>
</div>
<span id="status" >
</span>
<ul id="files" >
</ul>
</td>
<td>
<span id="genre_<?php echo $id; ?>" class="text">
<?php echo $genre; ?>
</span>
<input type="input" value="<?php echo $genre; ?>" class="editbox" id="genre_input_<?php echo $id; ?>">
</td>
<td>
<a href="index.php" name="delete" id="<?php echo $id; ?>">X</a>
</td>
</tr>
<?php endwhile; ?>
</table>
</body>
</html>
А вот мои скрипты редактирования, удаления и загрузки:
$(document).ready(function()
{
$(".delete").live("click", function()
{
var id = $(this).attr("id");
var tr = $(this).parent().parent();
var operationType = $(this).attr("name");
var dataString = "id="+ id +"&operation_type="+ operationType;
if(confirm("Sure you want to delete? "))
{
$.ajax({
type: "POST",
url: 'delete',
data: dataString,
cache: false,
success: function(event)
{
tr.hide();
event.stopImmediatePropagation();
}
});
return false;
}
});
$(".edit").live("click", function() {
var id = $(this).attr("id");
$("#author_"+ id).hide();
$("#title_"+ id).hide();
$("#genre_"+ id).hide();
$("#photo_"+ id).hide();
$("#author_input_"+ id).show();
$("#title_input_"+ id).show();
$("#genre_input_"+ id).show();
$("#photo_input_"+ id).show();
});
$(".edit").live("change", function(event) {
var id = $(this).attr("id");
var operationType = $(this).attr("name");
var author_val = $("#author_input_"+ id).val();
var title_val = $("#title_input_"+ id).val();
var genre_val = $("#genre_input_"+ id).val();
var dataString = "book_id="+ id +"&book_author="+ author_val +"&book_title="+ title_val +"&book_genre="+ genre_val +"&operation_type="+ operationType;
if(author_val.length > 0 && title_val.length > 0 && genre_val.length > 0) {
$.ajax({
type: "POST",
url: 'edit.php',
data: dataString,
cache: false,
success: function(event)
{
$("#author_"+ id).html(author_val);
$("#title_"+ id).html(title_val);
$("#genre_"+ id).html(genre_val);
event.stopImmediatePropagation();
}
});
} else {
alert("Fill in all fields");
}
});
$(".editbox").live("mouseup", function(event) {
event.stopImmediatePropagation();
});
$(document).mouseup(function() {
$(".editbox").hide();
$(".text").show();
});
$(document).ready(function(){
var uploadButton = $('#upload');
var status = $('#status');
new AjaxUpload(uploadButton, {
action: 'upload.php',
name: 'uploadfile',
onSubmit: function(file, ext){
if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
status.text('Only JPG, PNG or GIF files are allowed');
return false;
}
status.text('Uploading...');
},
onComplete: function(file, response){
status.text('');
if(response==="success"){
$('<li></li>').appendTo('#files').html('<img src="./uploads/'+file+'" alt="" /><br />'+file).addClass('success');
} else{
$('<li></li>').appendTo('#files').text(file).addClass('error');
}
}
});
});
});
в обработчиках редактирования и удаления ничего особенного не происходит.
проверяю пришел ли id (
if($_POST['book_id'])
) и если пришел делаю запрос в бд на редактирование или удаление.
Мне бы хотелось чтобы функция загрузки изображения была частью редактирования.
К сожалению моих знаний не достаточно для компоновки этого воедино.
Очень рассчитываю на совет или помощь.
