Вопрос Простые примеры реализации Ajax на Rails посоветуйте

Больше
7 мес. 1 нед. назад #1 от cool guy
Видел в нете ряд примеров создания различных Ajax эффектов на Ruby on Rails, но повторить по описанию почему-то не получается. Не могли бы порекомендовать что-то аналогичное, для новичка в Rails? Хочу освоить Ajax применительно к Rails (на php уже кое-что умею).

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

Больше
7 мес. 1 нед. назад #2 от evgenij
на гитхабе кстати, полно примеров реализаций аякса на rails.

Дождались! Fedora 27.

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

Больше
7 мес. 1 нед. назад #3 от serge
Создаем приложение для теста:
rails new ajax_my_test
cd ajax_my_test
rails generate scaffold Staff name:string profession:string
rake db:migrate
rails s

Добавляем
//= require jquery

в application.js , чтобы получилось примерно так:
//= require jquery
//= require rails-ujs
//= require turbolinks
//= require_tree .

Зачем? читаем здесь :

Rails 5.1+
The Rails JavaScript helpers has been rewritten in a new gem called rails-ujs and they use vanilla JavaScript, so jQuery is not a dependency of Rails anymore. Since bootstrap relies on it, install it with bin/yarn add jquery and add //= require jquery to application.js.


Добавляем в Gemfile:
# Use jquery as the JavaScript library
gem 'jquery-rails'

Добавляем в
app/views/staffs

- файл destroy.js.erb, содержащий:
$('.delete_staff').bind('ajax:success', function(){
  $(this).closest('tr').fadeOut();
});

Находим в
app/view/staffs/index.html.erb

строчку
<td><%= link_to 'Destroy', staff, method: :delete, data: { confirm: 'Are you sure?' } %></td>

, которую заменяем на
<td><%= link_to 'Destroy', staff, method: :delete, data: { confirm: 'Are you sure?' },
        :remote => true, :class => 'delete_staff'%></td>

Находим в контроллере метод
def destroy
    @staff.destroy
    respond_to do |format|
      format.html { redirect_to staffs_url, notice: 'Staff was successfully destroyed.' }
      format.json { head :no_content }
    end
  end

, который приводим к следующему (добавляем всего одну строчку):
def destroy
    @staff.destroy
    respond_to do |format|
      format.html { redirect_to staffs_url, notice: 'Staff was successfully destroyed.' }
      format.json { head :no_content }
      format.js   { render :layout => false}
    end
  end


И теперь пробуем создать и затем удалить стаффа.

А я смогу! - А поглядим! - А я упрямый!

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

Больше
7 мес. 1 нед. назад #4 от serge
Да, и после редактирования Gemfile, бундлить не забываем.

А я смогу! - А поглядим! - А я упрямый!

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

Больше
7 мес. 4 дн. назад #5 от Aleksej
Еще один пример работы формы на ajax . Впрочем, ajax он и в африке ajax.

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

Больше
3 мес. 4 нед. назад #6 от yotson

Aleksej пишет: Еще один пример работы формы на ajax .


как выключить в этом примере кнопку на время работы скрипта, если работаю не с materialize а с bootstrap?

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

Больше
3 мес. 4 нед. назад - 3 мес. 4 нед. назад #7 от serge
yotson, ну например:
<button id="btnSubmit" type="submit" class="btn btn-default">Go ahead</button>
<script type="text/javascript" language="javascript">
 	function call() {
 	$('#btnSubmit').prop('disabled', true);
 	  var msg   = $('#form_name').serialize();
        $.ajax({
          type: 'GET',
          url: '/index.html',
          data: msg,
          success: function(data) {
          $('#btnSubmit').prop('disabled', false),
            alert('ГОтово');
          },
          error:  function(xhr, str){
          $('#btnSubmit').prop('disabled', false),
	      alert('Что-то пошло не так: ' + xhr.responseCode);
          }
        });
    }
</script>

как-то так попробуйте.

Еще вариант. Если нужно чтоб кнопка вообще исчезала, то:
<button onclick="style.display='none'">Go ahead</button>

А я смогу! - А поглядим! - А я упрямый!
Последнее редактирование: 3 мес. 4 нед. назад пользователем serge.

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.