Jump to content
  • 0

Загрузка форм в плавающий div

ekkl

Asked by ekkl,

 Share

Question

ekkl Explorer

ekkl

Posted
Posted (edited)

Главный вопрос этого топика не как СДЕЛАТЬ, а как ДЕЛАТЬ.

Понимаю, что каждый может поступать по-своему, как ему удобнее, но все-же хотелось послушать мнения разных людей

Итак. Как на любом сайте я планирую форму добавления/редактирования записей. Хочу, чтобы она появлялась в плавающем div.

Есть два варианта

1) форма уже загружена на странице, на которой есть ссылка на добавление записи. Одна страница, значит может иметь несколько таких загруженных и скрытых форм. Плюсы: форма отображается сразу, не нужно время на загрузку. Минусы: страница может содержать данные. которые не потребуются, что немного замедляет загрузку.

2) форма загружается по ajax. Плюсы: не грузятся не нужные данные. Так как форма генерируется на сервере, могут быть заполнены некоторые поля.(Что важно при редактировании) Минусы: нужно время на загрузку.

Дальше

Обработчик формы. Тоже есть варианты

1) сделать, например, таким: http://mysite.ru/blogs/adblog/somevar

2) или http://mysite.ru/blogs/adblog а, somevar втолкнуть в какой-нить скрытый <input>

Сама ссылка для добавления


<!DOCTYPE html>
<html>
<head>
<title>JS Bin</title>
</head>
<body>
<script type='text/javascript'>

function hclick(hlink) {
	 alert (hlink.href); // естественно здесь процедура подгузки/показа формы и т.д.
}
</script>
<a href='http://site.ru/sitepart/addcomment/some-id' onclick='hclick(this);return false;'>link1</a>
</body>
</html>

Вот тут я смутно представляю, как можно сделать по-другому. (т.е. чтобы обрабатывался клик по ссылке через Джаву скипт. Плюс, как на меня в том, что пользователь видит куда идет ссылка (внизу в браузере), а что она откроется в плавающем div а не

в новой вкладке, думаю беспокоить не будут. Все, же лично мне, когда я навожу на ссылку внизу вижу "javascript:void()" это не особо нравится.

Валидация

для каждой (или почти каждой) формы должна быть валидация на стороне клиента (или это далеко не обязательно?)

Если да, то возле каждой формы должно быть что-то типа


<div class="form">
<script>
$(document).ready(
function(){
$('#someform').addvalidator(
'name' : 'required',
'useremai' : array('email', 'required')
);
});
</script>
<form id='someform'>
<!-- Form data -->
</div>

Если форма грузиться по ajax?

Должен грузиться весь участок кода.

или: правила заспределятся в JSON, а клиентский скрипт из данных JSON выделяет правила (которые помещаются в пустышку) и саму форму, которая и помещается в плавающий div

Ну пока все. думаю вопросы будут еще по ходу. Конечно, я бы мог посмотреть некоторые готовые решения (я так и делаю иногда) но не факт, что там будет хорошо сделано. А иногда там так запутано все, что не распутать.

Буду благодарен за советы или наводки на "правильные" решения.

Edited by ekkl
Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0
klierik Middle Developer

klierik

Posted
Posted

если это одна форма, а не множество для каждой записи, то можно грузить ее сразу с контентом.

а вообще вариантов достаточно много.

можно генерировать форму JS'ом для каждого блока при нажатии на соответствующую кнопку.

можно иметь одно модальное окно и при открытие передавать в него параметр для загрузки данных.

можно для каждого блока грузить форму сразу с сервера.

тут зависит от конкретной ситуации.

Link to comment
Share on other sites
  • 0
rus Explorer

rus

Posted
Posted

1) валидацию элементов форм лучше делать в бэкенде, ибо js может быть и отключен, и не кроссбраузерным, да много чего там может быть.

2) грузить форму можно и через ajax (например в jquery), примеров в нете куча.

3) отправлять данные и принимать ответ - тоже через ajax.

4) много данных (форм) на одной странице - тоже не есть гуд. ну во-первых, это первая предварительная загрузка страницы, а во-вторых, путает управленца формами своим обилием информации.

Link to comment
Share on other sites
  • 0
ekkl Explorer

ekkl

Posted
  • Author
Posted

Ну перед отправкой можно и проверить, а потом на сервере еще раз.

Если отправка по и загрузка ajax - то джаваскрипт никак не может быть отключен. Ну и проверка на клиенте предварительная проверка, которая позволяет избежать "лишних" отправок неправильно заполненных форм.

Да, конечно, я полностью за ajax!

Ну две-три формы на странице это же не много? Из которых, допустим, две скрыты.

Link to comment
Share on other sites
  • 0
rus Explorer

rus

Posted
Posted

я имел ввиду валидацию, когда говорил что js может быть отключен, а как валидация может быть на ajax?

ajax фоном отправляет данные бэкенду, скрипту, который на стороне сервера обрабатывает данные, поэтому к чему лишняя проверка js-ом? пусть себе php проверяет, тем более вы сами говорите что две-три формы ничего не изменят в плане нагрузки на сервер и скорости загрузки страницы.

Link to comment
Share on other sites
  • 0
ekkl Explorer

ekkl

Posted
  • Author
Posted

Я так понимаю, вы за то, чтобы полностью отказаться от проверки на клиенте? Даже если проверять всего лишь на заполнение нужных полей?

Может пытаюсь оптимизировать там, где не нужно, но отправлять форму с незаполненными полями на сервер нормально? При валидации на клиенте можно исключить такую ситуацию, а сервере проверить в любом случае...

Если отказаться от валидации на клиенте это много упрощает, так как не нужен модуль проверки и не нужно вместе с формой грузить правила проверки.

Я не имел в ввиду валидацию НА ajax, я говорил, что если форма подгружается по ajax то ДжаваСкрипт никак не может быть отключён, иначе форма не загрузиться.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Similar Content

    • jksnf
      CSS transition
      By jksnf
      Не работает transition при появлений модального окна:
      <a class="btn">Modal</a> <div class="modal"> <div class="overlay"> <div class="content"> <a class="close">X</a> <h1>Title</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt repellat asperiores rerum animi officiis minus corporis iure voluptate accusantium, ut optio ratione iusto nemo delectus. Quasi illum libero dolorum neque?</p> </div> </div> </div> //scss .modal .overlay{ position: fixed; top: 0;left: 0; width: 100%;height: 100%; background: rgba($color: #000000, $alpha: .8); z-index: 1; display: none; } .modal .content{ width: 500px;height: 200px; position: absolute; top: 50%;left: 50%; transform: translate(-50%, -50%); background-color: #fff; z-index: 2; text-align: center; display: none; a{ line-height: 30px; font-weight: bold; color: #fff; top: -50px;; position: absolute; right: -50px; font-size: 40px; padding: 10px; } h1{ margin-bottom: 20px; } } .modal.active .overlay{ display: block; } .modal.active .content{ display: block; } //Jquery $(document).ready(function(){ $(".btn, .close").click(function() { $(".modal").toggleClass("active") }) }) Я понимаю что на display не работает transition. но и нельзя ставить opacity т.к перекрывает контент сзади него изначально.

      Что делать?
    • IsayR
      Как правильно сделать раскрывающиеся блоки со скрытым содержанием внутри?
      By IsayR
      Всем привет! Подскажите, пожалуйста, как правильно сделать раскрывающиеся блоки со скрытым содержанием внутри? У меня в принципе все работает, блок открывается и закрывается, НО если я нажимаю на блок, а не на стрелочку, она у меня остается в таком же положении(а она должна у меня меняться, когда блок открывается), и получается куча мала, и выглядит это не очень презентабельно. Подскажите, пожалуйста!
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrapper-div"> <div class="div"> <div class="window-one"> <h3 class="title"> Заголовок 1 </h3> <div class="arrow-test"></div> </div> <div class="window-two"> <div class="text">Текст 1</div> </div> </div> </div> <div class="wrapper-div"> <div class="div"> <div class="window-one"> <h3 class="title"> Заголовок 2 </h3> <div class="arrow-test"></div> </div> <div class="window-two"> <div class="text">Текст 2</div> </div> </div> </div> <div class="wrapper-div"> <div class="div"> <div class="window-one"> <h3 class="title"> Заголовок 3 </h3> <div class="arrow-test"></div> </div> <div class="window-two"> <div class="text">Текст 3</div> </div> </div> </div> .div{ border: 1px solid #3A444E; border-radius: 10px; width: 300px; height: 64px; overflow: hidden; } .div.open { height: auto; background: #000; color: #fff; } .window-one { display: flex; align-items: center; justify-content: space-between; } .title { margin-bottom: 20px; } .arrow-test { content: ''; background: url('http://cdn.onlinewebfonts.com/svg/img_387044.png') no-repeat center center / 100%; width: 30px; height: 30px; cursor: pointer; } .arrow-test.open { content: ''; background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Eo_circle_yellow_arrow-up.svg/1024px-Eo_circle_yellow_arrow-up.svg.png') no-repeat center center / 100%; width: 30px; height: 30px; cursor: pointer; } $('.div, .arrow-test').click( function(){ $(this).toggleClass('open')});  
    • Алеся
      Оцените, пожалуйста, работу. Буду благодарна за советы и критику.
      By Алеся
      Всем привет! Хотела бы представить свою работу новичка на обсуждение для получения конструктивной критики и/или советов, взглядов что можно улучшить или изменить, общее впечатление, конечно, тоже интересует.   https://alesia-k.github.io/Tajam-template/
      Обратите, пожалуйста, внимание на:
      - блок "MEET OUR AMAZING TEAM". Немного не нравится как смещаются item при наведении мыши, как будто немного дергаются. Так ли по-вашему это должно работать или такое поведение блока нужно изменить?
      - инпут "subscribe" в футторе. При клике на инпут, немного смещается и сам инпут, и рядом стоящая кнопка. Было бы классно, если бы подкинули идею как сделать, чтобы такого не было.
      - и почему-то при клике на <a href="tel:(+62)2122243333">(+62)21-2224 3333</a>   не идет процесса соединения.
      Заранее спасибо!
    • Only091
      Как сделать постраничную навигацию.
      By Only091
      Помогите пожалуйста, не получается сделать постраничную навигацию. Делал все по урокам. в Итоге получилось сделать два разных каталога один с фильтрами другой с постраничной навигацией. И теперь я пытаюсь объединить два каталога. Но не получается. Сами файлы урока в архике каталог. Буду очень благодарен если мне помогут! catalog.phpcatalogDB.js
      каталог.7z
    • Alexand
      Оцените вёрстку макета — Furniture
      By Alexand
      Здравствуйте дорогие специалисты програмирования.
      Взываю вас о помощи!? Прощу Вас уделите мне своё безценное время. Я который раз выполняю тестовое задание для трудоустройства, а мне постоянно отказывают. Я уже в замешательстве, что же я делаю не так. Я просил их, дать мне хоть какую-то критику, единственное что мне отвечают СЛАБО. Но что именно слабо не говорят!
      Прошу Вас рассмотреть мою из последних тестовую работу и укозать мне ВСЕ мои прогрехи, по полной строгости. Единственная надежда на Вашу благосклонность и доброту.
      Вот ссылка на гитхаб - https:/github.com/ShusevA/ARI-AJAX-Application 
      Требоватие к этой работе https://docs.google.com/document/d/10gLPHDqGNMDSeSQbYfG8RVtXR3XQOrchSBmd50OzJ_s/edit
      С уважением к Вам, за ранее спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept