Обновление записи по ajax в БД по клику id div блока, как реализовать?

Question

[Игорь Васильев]

Предыстория: есть кнопка

<a href="#add" id="add" data-method="post" class="btn btn-default"> добавить </a>

При клике через модель должна отправиться информация в базу данных с добавлением новой информации без перезагрузки страницы по айдишнику. Я знаю, что можно передавать информацию по id не используя <form>

Вопрос: Как это реализовать через Pjax? Как выводить в модели передаваемые параметры я знаю, а как без формы по айди через ajax вносить записи в БД пока не знаю.

P.S. в Yii2 есть data команды, которые использует javascript, например, чтобы выйти из админки, в кнопке есть команда data-method="post" без которой не может прерваться сессия, если убрать, вылезет ошибка, так же попадались команды по типу data-pjax
Очевидно разработчики учли такой способ отправки, потому как в подобных кнопках вообще не наблюдается тег form, его там вообще нет. Я также заметил, что в контакте тоже не пользуются формами, всё отправляют блоки, через ajax и javascript. Очевидно используется технология ReactJS, я могу ошибаться. Где брать знания? Где материал по такому способу передачи данных?

Answer 1

[Игорь Васильев]

Для тех, кто искал! Этот метод называется .submit()

<script type="text/javascript">
   $(document).ready(function () {
	   $("#yellow").click(function() {
		         $("#act form").submit();
	   });
   });
</script>

Смысл заключается в том, что вы оборачиваете form в id (чтобы скрипт не реагировал на другие формы) и указываете на что должен реагировать скрипт при заполнении формы, можно использовать .change() или .bind() - если через input, и .click() - если хотите передать через span или div.
Хочу заметить, что с этим заданием хорошо справляется Vue.js

<div id="act">
        <form action="" method="post" data-ajax="post">
             <input type="text" id="yellow" name="param">
             <input type="submit" value="send">
        </form>
   </div>

Подкрепите это всё ajax , скройте кнопку submit, и форма будет отправлять сразу, как только вы кликнули чекбокс, или выбрали селект, или указали цифру, для других решений лучше это не делать.

Answer 2

[Иван Вишневский]

Вы не совсем правильно понимаете, как это всё происходит, мне кажется. Нет такой команды, которая возьмёт и добавит всё в базу. На клиенте вам нужно поймать onclick события(читайте javascript события), потом передать какие-то данные на сервер через XMLHttpRequest / более новый fetch, затем обработать их любым серверным языком, в том числе серверным javascript, и через него добавить их в базу. Если не хочется писать говнокод - лучше не использовать jQuery и прочие тяжеловесные и бессмысленные на данном этапе фреймворки.

Кстати, оборачивать кнопку в ссылку вам не нужно - ссылки нужны только тогда, когда нужно увести пользователя на другую страницу с перерисовкой.

Comments

[Игорь Васильев]

это топорный пример, что там есть id="add" который и будет принимать на себя событие onclick о котором я знаю, что касается приёма и передачи обработчика, тут я плаваю, и я хочу использовать модель в контроллере

public function actionCreate()
{
$model = new MyModel();
$model->param = $this->getModule()->id;
}
чтобы присваивать к переменным значения из БД, с неким содержанием, как в примере выше, а не выводить это во вьюшку в form - тег.

Answer 3

[Артем]

Честно говоря, абсолютно не понятно, что именно вам надо добавлять, и что значит

передавать информацию по id не используя <form>

Давайте начнем с простого - откуда вы будете получать данные?

Comments

[Игорь Васильев]

public function actionCreate()
{
$model = new MyModel();
$model->param = $this->getModule()->id;
}

[Игорь Васильев]

Через контроллер

[Игорь Васильев]

Во вьюшке не будет данных, которые я буду передавать в БД, только кнопка, которая по технологии ajax запишет новую строку в таблицу MySQL

Answer 4

[deemaagog]

используя jquery просто
$.ajax
можете параметром передать свой id

Comments

[Игорь Васильев]

подскажите ссылкой на материал, как по id блока передаётся запись в БД, пожалуйста))