Описание есть анкеты как в системе mamba.ru
Задача оптимизировать редактирование, что б на одной странице и удобно для пользователя.
Прошу проверить мою реализацию на JQuery и указать на все недостатки, ошибки javascript кода и ошибки касающиеся оформления.
Либо примеры более простых реализаций, может библиотек и тд.
рабочий вариант
http://kodiua.ru/java/ajax/
Код
index.php
<!DOCTYPE html>
<html>
<head>
<style>
#profile {background:#fbf9eb; width:280px; border:1px #422f10 solid; padding:20px 10px 20px 20px; }
.lable_main span{background:#c0c0c0; color:#fff; padding: 4px;}
.lable_main { margin:0px 0px 14px 0px; margin-left: -14px;}
.form_in{padding:0; margin:0;}
#loading {display:none;}
</style>
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
</head>
<body>
<div id="profile">
<?php for ($i = 5; $i <= 8; $i++) {?>
<div class="lable_main"><span>Название блока<?php echo$i; ?></span>
<input type="hidden" name="<?php echo$i; ?>" />
<a href="javascript:void(0);" class="edit_fields">Редактировать блок</a>
</div>
<span class="field_loop" >
Текст кcоторый будет заменяться ajax ответом
</span><br /><br />
<?php } ?>
</div>
<script>
$(document).ready(function() {
$("a.edit_fields").click(function () {
var url_get_value = $(this).prev('input').attr('name');
//id редактируемого блока, изначально храниться в скрытом input перед <a >Редактировать</a>;
var answer_container=$(this).parent().next('');
//Ccылка на контейнер ответа class="field_loop";
$(this).hide();
//hide <a >Редактировать</a>
answer_container.text("Подключение к серверу...");
//На случай если сервер тянет с ответом, что б пользователь не волновался, что ничего не происходит;
//Запрос ajax.php?id=N
$.ajax({
type: "GET",
url: "ajax.php",
data: "id="+url_get_value,
success: function(msg){
answer_container.text('');
//Очистка содежимого контейнера;
answer_container.append(msg);
//Вставка результаов запроса (форма редактирования выданая ajax.php);
var div='<div id="targetDiv' + url_get_value + '"></div>';
answer_container.append(div);
//Контейнер для ответа ajax.php после отправки данных;
div='#targetDiv'+url_get_value;
var form_name='#field_update'+url_get_value;
// bind form using 'ajaxForm'
$(form_name).ajaxForm({target:div, beforeSubmit: showRequest, success:showResponse});
//beforeSubmit - срабатывает когда нажимаем отправить
//success - срабатыает после получения ответа
}
});
});
function showResponse(responseText, statusText) {}
function showRequest(formData, jqForm) {
$(jqForm).parent().prev().children('a').show();
// находим ссылку редактировать (зависит от того в какой блок вложена ссылка)
$(jqForm).next().text("Обновление данных...");
//на случай если сервер тянет с ответом
$(jqForm).hide();
//скрываем форму
}
});
</script>
</body>
</html>
ajax.php эмулятор скрипта который будет добавлять в mySQL
<?php
sleep('2');
//иметируем подвисания на серваке при большой загрузке и тормозах mySQL
$v = true;
$id = $_GET['id'];
if (isset($_POST['text'])){
$text = $_POST['text'];
$id = $_POST['id'];
$v = false;}
if ($v){?>
<form name="field_update" id="field_update<?php echo $id; ?>" method="post" class="form_in" action="ajax.php">
<input type="hidden" value='<?php echo $id; ?>' name='id' />
id=<?php echo $id; ?>:<input type="text" value='' name='text' /><br />
<input type="submit" name="Submit" value="Сохранить" />
</form>
<?
}else
echo 'text= '.$text." id= ".$id;
?>
