Блог

Главная - Вопросы по программированию - Отображение элементов по щелчку в ruby on rails

Отображение элементов по щелчку в ruby on rails

#jquery #ruby-on-rails #ruby #view #onclick

#jquery #ruby-on-rails #ruby #Вид #onclick

Вопрос:

У меня есть страница, на которой должны отображаться хорошие ответы после того, как кто-то нажмет на кнопку «я хочу увидеть ответы».

Я сделал значок, который отображается рядом с правильными ответами:

   <% if answer.correct == true %>
    <%= raw @ikona %><p> <%= answer.content %></p>
  <% else %>
  <p><%= answer.content %></p>
      <% end %>
      </div>
  <% end %>

Я хочу отображать его только после того, как пользователь нажмет на кнопку. Это не может привести к перезагрузке страницы, потому что пользователь должен иметь возможность сравнивать то, что они отметили как правильное, с фактическим правильным ответом. Как мне это сделать?

Комментарии:

1. Если вы загружаете весь контент, вы можете сначала скрыть его и показать по щелчку значка, используя простое событие jquery hide / show

2. вы не можете сделать это с помощью Ruby, это логика на стороне клиента, и ее нужно реализовать на Javascript. Читать документ

3. как говорит @Icicle, для этого лучше всего использовать jquery. В railscasts Райана Бейта рассказывается об использовании jquery в rails… railscasts.com/episodes/136-jquery

4. спасибо, я попробую это!

Ответ №1:

Интерфейс

То, что вы просите, это сделать с front-end vs back-end приложения Rails

Функциональность интерфейсного графического интерфейса — это не то, для чего Rails — Rails — это внутренняя система для получения requests и обработки response

Поэтому, чтобы ответить на ваш вопрос, вам в основном нужно использовать jquery интерфейс для отображения нужного содержимого .on("click" . Возникает вопрос о том, как вы хотите, чтобы этот контент отображался (можно использовать Ajax)

jQuery

Javascript работает на стороне клиента (он загружается в браузере) и влияет на DOM (объектную модель документа). Это означает, что каждый HTML-элемент на вашей странице может быть затронут / обработан Javascript, что позволяет создавать «интерактивность» на странице

Для вашего требования «щелкнуть» вы можете сделать это:

 #app/assets/javascripts/application.js
$(document).on("click", "#element", function(){
   // do something here
});

Это привязывает click событие вашего DOM к функциональности, которую вы хотите выполнить, что в основном будет означать загрузку вашего div

** Пожалуйста, обратите внимание, что я использовал делегирование Javascript выше, поскольку Rails обычно не позволяет стандартному javascript работать (turbolinks вызывает так много проблем)

Данные

После того, как вы внедрили click привязку события в свой javascript, вам нужна функциональность, чтобы заставить его делать что-то полезное. У вас есть два варианта:

  1. Ajax (динамически извлекать данные)
  2. Скрытый DIV

—

DIV

В принципе, если вы хотите, чтобы содержимое отображалось при нажатии кнопки, вам нужно будет вызвать это содержимое откуда-нибудь. Самый простой способ — использовать скрытый div, как показано ниже:

 #app/assets/stylesheets/application.css
.hidden { display: none; }

#app/assets/views/controller/your_view.html.erb
<div class="hidden" id="your_id">
   Hidden content
</div>

Это позволит вам затем использовать что-то вроде этого:

 #app/assets/javascripts/application.js
$(document).on("click", function() {
   $("#your_id").show();
});

—

Ajax

Альтернативой будет использование ajax для извлечения необходимых вам данных:

 #app/controllers/controller.rb
respond_to :json, :js, :html


#app/assets/javascripts/application.js
$(document).on("click", "#element", function() {
    $.ajax({
       url: "answers/"   $(this).attr("id")
       success: function(data) {
           // append data to your DOM
       }
    });
});
Метки: