When changing the form (select / input), you must send the POST values ​​by request. Handlers:

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 

My attempts to build something with JS and form:

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

  • formally, if you send data by Ajax, the form itself is essentially not needed. All the code of your function, which is not tied to anything by the way, can be written as $.post('/', { column: $("#column").val(), filter: $("#filter").val() }); Tie your function to a submission form, or abandon the form as such, and do it simply by clicking on the button - teran
  • The form is just needed. Your example replaces $.ajax.... ? - QWD666
  • Yes, it replaces all sendForm internals. There is no point in the <form> by itself, because you disable its behavior and send the data yourself. All input and selects can perfectly live without the form tag, if you are worried about them - teran
  • Perhaps you do not understand. It is necessary to implement a POST request not by pressing a button, but by changing the contents of the text field \ selector. By the way, how to understand "tie to the submission"? - QWD666

1 answer 1

It is necessary to implement a POST request not by pressing the button, but by changing the contents of the text field \ selector

something like that?

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

for inputa somewhat arbitrary, requests will be sent when you type the text constantly.

  • POST request is sent 2 times: the previous value, and then changed. But the essence is this. But the handler does not work. What could be the error? - QWD666
  • @ QWD666 if by "does not work handler" you mean that the content on the page is not updated, then in this case it should be so. You need to get the result of the query and paste it into the page where it should be. However, it seems to me that the entire page will return to you in its current form, and not just the results themselves. So for POST requests, you should use a different output template, where there will only be result elements. - teran
  • See, when we make a POST request for '/' (the first application of the code), we must execute a query to the database, and the content will be output via the variable that we used in the GET request. Considering that I returned the already sorted label, I don’t understand why the whole table is displayed. - QWD666
  • Tested, but the script crashes after several updates. And in fact, it turned out that for every change in the text field to make a request is not rational. Too long response. Is it possible to make some kind of timer over `$ (" # column "). Change (send);`?. For example, I clicked once and before sending the POST request, the script waits 2 seconds, and then sends everything I wrote. - QWD666