0

При изменении формы(селекта/инпута) необходимо выслать значения POST запросом. Обработчики:

get '/' do
  @result = PhoneBook.all #вывести всю таблицу PhoneBook
  erb :index
end
post '/' do
  @column = params[:column]
  @filter = params[:filter]
  @result = PhoneBook.where("vPhoneBook.`#{params[:column]}` LIKE ?", "#{params[:filter]}%") #Фильтрация запроса. поиск прикрепленный к меню
  erb :index
end

Мои попытки что то сваять с JS'ом и форма:

< script type = "text/javascript" >
  function SendForm() {
    var column = document.getElementById('column').value;
    var filter = document.getElementById('filter').value;
    $.ajax({
      url: '/',
      type: 'POST',
      data: {
        'column': column,
        'filter': filter
      }
    });
  } 
  </script>
<form action="/" class="navbar-form navbar-left" method="POST">
  <div class="form-group">
    <select id="column" name="column" class="form-control">
                  <option  value="OrgStrukture">Организационная структура</option>
                  <option value="housing">Корпус</option>
                  <option value="service">Служба</option>
                  <option value="units">Подразделение</option>
                  <option value="ph_city">Городской номер</option>
                  <option value="ph_cityNew">Новый городской</option>
                  <option value="ph_local">Местный номер</option>
                  <option value="floor">Этаж</option>
                  <option value="note">Примечание</option>
                </select>
    <input id="filter" name="filter" type="text" class="form-control" placeholder="Введите запрашиваемую информацию" value="<%= @filter %>">
  </div>
  <button type="submit" class="btn btn-default">Поиск</button>
  <button onclick="window.print();return false;" class="btn btn-default">Печать</button>
</form>

4
  • формально, если вы отправляете данные аяксом, то сама форма по сути не нужна. весь код вашей функции, которая ни к чему не привязана кстати, можно записать как $.post('/', { column: $("#column").val(), filter: $("#filter").val() }); привяжите вашу функцию к сабмиту формы, либо откажитесь от формы как таковой и делайте это просто при клике на кнопку
    – teran
    Commented 28 февр. 2018 в 7:32
  • Форма как раз и нужна. Ваш пример замещает собой $.ajax.... ?
    – QWD666
    Commented 28 февр. 2018 в 8:43
  • да, замещает все внутренности sendForm. В форме <form> самой по себе смысла нет, ибо вы отключаете ее поведение и самостоятельно отправляете данные. Все инпуты и селекты прекрасно могут жить и без тэга form, если вы за них беспокоитесь
    – teran
    Commented 28 февр. 2018 в 8:45
  • Возможно вы не так поняли. Необходимо реализовать POST запрос не по нажатию кнопки, а по изменению содержимого текстового поля\селектора. К слову, как понять "привязать к сабмиту"?
    – QWD666
    Commented 28 февр. 2018 в 9:33

1 ответ 1

1

Необходимо реализовать POST запрос не по нажатию кнопки, а по изменению содержимого текстового поля\селектора

что-то вроде такого?

function send(){
    $.post("/", {
              column: $("#column").val(),
              filter: $("#filter").val(),
         }, function(content){
           $("#results").html(content); // тут прийдет вся страница
      });
}

$("#column").change(send);
$("#filter").keyup(send);

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

4
  • POST запрос отправляется 2 раза: предыдущее значение, а затем изменненое. Но суть такая. Но не отрабатывает обработчик. В чем может быть ошибка?
    – QWD666
    Commented 28 февр. 2018 в 10:01
  • @QWD666 если под "не отрабатывает обработчик" вы подразумеваете, что не обновляется контент на странице, то в данном случае так и должно быть. вам нужно получить результат запроса и вставить его на страницу куда следует. Однако, мне кажется, в текущем виде вам вернется вся страница целиком, а не только сами результаты. Так что для POST-запросов, вам следует использовать другой шаблон вывода, где будут только элементы результатов.
    – teran
    Commented 28 февр. 2018 в 10:05
  • Смотрите, когда мы делаем POST запрос на '/'(первое приложение кода), у нас должен выполняться запрос к БД, и контент будет выводиться через переменную ту что мы использовали в GET запросе. Учитывая что вернула уже отсортированную табличку мне не понятно, почему отображается вся таблица.
    – QWD666
    Commented 28 февр. 2018 в 10:12
  • Протестировал, однако скрипт падает через несколько обновлений. И на деле оказалось что на каждое изменение текстового поля делать запрос не рационально. Слишком долгий отклик. Можно ли сделать какой-то таймер поверх ` $("#column").change(send);`?.Например я нажал один раз и перед отправкой POST запроса скрипт ждет 2 секунды, а потом отправляет все что я написал.
    – QWD666
    Commented 28 февр. 2018 в 21:26

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.