Кнопка AJAX на Rails-приложении

Question

Это мое приложение здесь: http://mighty-brushlands-6367.herokuapp.com/ Он отображает шутки, выбранные случайным образом из базы данных. Но тогда я хочу, чтобы это было сделано AJAX без обновления. Поэтому я ищу какую-то помощь, чтобы узнать, как это сделать. Так выглядит кнопка. Я использую Twitter Bootstrap.

<div><blockquote class="pull-left"> 
      <p id="mycontainer"><%= @l.content %> </p> 
      <small><%= @l.author %> </small> 
      <button class="btn btn-mini", "pull=right" type="button">Następny -></button> 

     </blockquote></div> 
     </div> 

Но теперь я совершенно смущен здесь. Причина. Я действительно не знаю, как добавить код к кнопке, которая находится внутри тега начальной загрузки. Я проверяю этот пост Attaching functionality to a button in rails 3 и другие на google, но все они имеют дело с формами, а не с кнопкой. Любая помощь, пожалуйста? Я новичок: D

Если это помогает мой контроллер выглядит следующим образом:

class KalendarController < ApplicationController 

    def next 
    @l = Joke.find_by(id: rand(1..Joke.count)) 
    #@l = Joke.find_by_id(@l) 
    end 

    def show 
    #random_id = Joke.all.sample 
    @l = Joke.find_by(id: rand(1..Joke.count)) 
    #@l = Joke.find_by_id(@l) 

    @t = Time.now.strftime("%A") 
    @week = Date.today.cweek % 2 == 0 ? "#{trans} " "PARZYSTY" : "NIEPARZYSTY" 
    end 


    def trans 
    @t = Time.now.strftime("%A") 
    if @t == "Monday" 
     "Poniedziałek" 
    elsif @t == "Tuesday" 
     "Wtorek" 
    elsif @t == "Wednesday" 
     "Środa" 
    elsif @t == "Thursday" 
     "Czwartek" 
    elsif @t == "Friday" 
     "Piątek" 
    elsif @t == "Saturday" 
     "Sobota" 
    elsif @t == "Sunday" 
     "Niedziela" 
    end 
    end 

    def rnd 
    (0..4).to_a.sample 
    end 


end 

Answer 1

Вот суть я создал с указанием соответствующих частей вашего приложения просто использовать button_to и шаблон JS для обновления вида

https://gist.github.com/andyh/0c28abb7124fb283a924

Единственное, что отсутствует является установка классов на самой кнопке

Answer 2

На основе комментариев нить, я считаю, что главное, чтобы помнить о том, что запрос GET осуществляется через AJAX в основном ничем не отличается от аналогичного запроса, сделанного через браузер. Главное отличие заключается в том, что он не обновляет всю страницу (если только ваш JavaScript не делает что-то с этим эффектом), и, конечно, это «асинхронно», так что операции происходят за пределами обычного потока программы, а браузер не заблокирован , Обратите внимание, что запрос AJAX можно сделать синхронным, но это еще одна история, и здесь это не актуально.

Имея это в виду, я собираюсь добавить еще немного ясно ID атрибуты вашего HTML, так что мы можем легко найти их после того, как успешно делает наш запрос AJAX (который я покажу ниже):

<div id="joke_section"> 
    <blockquote class="pull-left"> 
    <p class="content_container"><%= @l.content %> </p> 
    <small class="author_container"><%= @l.author %> </small> 
    <button id="next_joke" class="btn btn-mini", "pull=right" type="button">Następny -></button> 
    </blockquote> 
</div> 

затем мы добавим onClick к кнопке (я предполагаю, вы бы это в функции $(document).ready):

$("#next_joke").click(function(event){ 
    // ajax request goes here. See below. 
}) 

Как я сказал, так как запрос AJAX почти такой же, как обычный запрос HTTP, мы можем просто указать запрос целевой URL-адрес на какой-то путь, на который будет реагировать ваше приложение Rails. Если вы еще не сделали этого, вам нужно что-то вроде этого в файле routes.rb:

get 'jokes/next' => "kalendar#next" 

Примечание: Вы можете назвать URL-путь, пожалуйста, что в конечном итоге имеет значение, которое controller#action он указывает.

Это запрос AJAX с помощью JQuery (есть и другие способы, чтобы выпалить запрос AJAX, я считаю, это самый простой):

$.ajax({ 
    url: "jokes/next", 
    type: "GET", // This is default. Showing it for demonstration purposes. 
    dataType: "json" // Tell the server we want to receive a JSON object 
    success: function(jokeJson, textStatus, jqXHR){ 
     $jokeSection = $("#joke_section") 

     // Replace container contents with Joke JSON data 
     $jokeSection.find("p.content_container").html(jokeJson.content); 
     $jokeSection.find("p.author_container").html(jokeJson.author); 
    } 
}); 

Вы можете найти все, что вы когда-либо хотели знать о jQuery AJAX request here. Проверьте это, чтобы узнать, какие варианты доступны, и что они все делают. Это, безусловно, стоит смириться, по крайней мере.

Короче говоря, функция успеха выполняется, если запрос возвращен правильно, и, как я уже писал выше, мы заменяем содержимое ваших контейнеров элементами возвращаемого объекта JSON.

Наконец, для того, чтобы сделать в JSON, запрашиваемую ваш звонок AJAX, вы можете просто сделать это:

def next 
    respond_to do |format| 
     format.json { render json: Joke.find_by(id: rand(1..Joke.count)) } 
    end 
end 

Примечание о respond_to блока и format.json: должны гарантировать, что действия реагирует только на JSON запрос и возвращает 406 Not acceptable для любого другого формата.

Answer 3

Я не ожидаю, чтобы получить ответ на этот, потому что я просто хотел вас через переписывать код с немного больше утонченности на день-оф-недели материал:

def trans 
    days = ["Niedziela", "Poniedziałek", "Wtorek", "Środa", "Czwartek", "Piątek", "Sobota"] 
    @t = Date.today.wday 
    days[@t] 
end