Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Jquery редактирование блока анкеты (https://javascript.ru/forum/jquery/7849-jquery-redaktirovanie-bloka-ankety.html)

kodiua 22.02.2010 13:52

Jquery редактирование блока анкеты
 
Описание есть анкеты как в системе 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;

?>


Часовой пояс GMT +3, время: 14:49.