Частичная визуализация формы по щелчку, Rails

ProgramBox

Частичная визуализация формы по щелчку, Rails

Post author:admin
Запись опубликована:31 августа, 2022
Post category:Вопросы по программированию

#javascript #ruby-on-rails #renderpartial

Вопрос:

Кажется, я не могу понять это, и я перепробовал несколько форумов. Я хотел бы отображать форму при нажатии на ссылку с помощью javascript. Может ли кто-нибудь показать базовый пример того, как это сделать?

1. для этого вам нужно использовать ajax

2. Как вы реализуете Ajax?

3. если вы просто хотите отобразить форму при нажатии кнопки, то я думаю, что обычный js был бы лучше просто показать вашу форму, как предложил @Luan. Ajax будет хорош, если вам тоже нужно что-то сделать в вашем контроллере.

Ответ №1:

Просто чтобы уточнить @Luan Nico ответ, поскольку вам просто нужно отобразить форму, не делая ничего лишнего в вашем контроллере, вам было бы лучше, если бы вы поместили свою форму внутри тега div, а затем переключили этот div на отображение при нажатии на кнопку.

Исправить:

a. Создайте div и поместите в него свою форму

 <div id="myForm">
  <%= render "your_form" %>
</div>

б. Скрыть этот div с помощью css

 #myform {
  display:none;
}

c. Создайте свою ссылку, чтобы показать ваш from:

 <%= link_to "Your button","#", id: "yourButton" %>

d. Напишите свой js внутри assets/javascript/application.js или создайте новый файл, а затем потребуйте внутри application.js

 $(document).on("click","#yourButton",function(){
  $(#myform).show();
});

1. Благодаря дополнению! Просто чтобы уточнить, если вы собираетесь использовать эту функцию только на одной странице, вы можете добавить ее с javascript_include_tag 'file.js' помощью; в противном случае было бы лучше добавить //= require file в конец вашего application.js файл (который загружается на все страницы).

2. @user233527 можете ли вы получать оповещения из своей функции js? напишите простую alert("working"); внутреннюю функцию js, чтобы узнать, вызывается она или нет

3. Нет, он не вызывается

4. вы используете пользовательский макет? если да, то есть ли у вас javascript_include_tag внутри вашего файла макета? <%=javascript_include_tag "application", "data-turbolinks-track" => true %> а затем требуется ваш файл внутри application.js как //= require jsForm

5. Нет, просто стандартный макет приложения. Я также добавил javascript_include_tag

Ответ №2:

Предполагая, что форма не меняется при нажатии кнопки, просто переключите ее видимость, вы можете поместить всю форму в div, присвоить ей идентификатор, а затем вы можете использовать jquery:

 $('#my-button').click(function (){
  $('#div-id').toggle();
});

Где my-button — это идентификатор кнопки в HTML, а div-id — это идентификатор div в HTML (что-то вроде <button id="my-button">Click me</button> и <div id="div-id"></div> ).
Или вы можете сделать это и с помощью простого JS, если у вас нет jquery (getElementById и т. Д.).

Если форма немного изменится, вы также можете использовать этот метод, но вам нужно будет добавить некоторые условия. В противном случае вам придется использовать AJAX для получения текущих данных.

Просто предупреждение, старайтесь избегать передачи всей формы HTML с помощью вызова ajax, лучший способ — предоставить только данные через json и использовать JS для заполнения HTML данными.

1. Я действительно новичок, каким будет мой тег кнопки? и нужен ли мне метод контроллера для обработки этого?

2. если он просто хочет отобразить форму, тогда обычный js был бы лучше

3. Отредактировано с лучшим объяснением. Вам нужен метод в контроллере, только если вы собираетесь использовать AJAX, то есть только в том случае, если содержимое формы будет меняться каждый раз, когда пользователь нажимает кнопку, потому что данные обновляются в режиме реального времени. В противном случае это должно быть сделано на стороне клиента, не беспокоя контроллер, если ему не нужно отправлять какую-либо новую информацию, чтобы браузер знал, как отобразить новый HTML.

4. Проблема в том, что я использую rails, и в моей папке /assets/javascript/ я помещаю файл с именем jsForm.js : $(‘#my-button’).click(function (){ $(‘#myForm’).toggle(); }); на мой взгляд: <%= button_tag «Моя кнопка», :id => «my-button»%> <div id= «myForm»> <%= render ‘form_basic’ %> </ div> кнопка ничего не делает, и форма по-прежнему отображается

Метки: Частичная визуализация формы по щелчку Rails