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. |