Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.02.2010, 13:52
Новичок на форуме
Отправить личное сообщение для kodiua Посмотреть профиль Найти все сообщения от kodiua
 
Регистрация: 19.02.2010
Сообщений: 4

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;

?>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
IE 8 vs jQuery wcp Internet Explorer 5 24.02.2010 10:33
jQuery jTreeMenu plugin Seafnox jQuery 9 12.01.2010 21:55
jquery - Как получить полный путь? kirill.adw jQuery 5 20.11.2009 17:40
JQuery + FireFox NOOB jQuery 4 02.11.2009 18:16
Как правильно подгрузить jQuery Siton jQuery 4 15.06.2009 09:54