Кнопка загрузки Ladda в рельсах

У меня есть кнопка отправки в моей форме рельсов, которую я хотел бы изменить на вращающийся значок загрузки, когда пользователь попадает в submit. Мое приложение использует бутстрап, поэтому я следовал примеру here.Кнопка загрузки Ladda в рельсах

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

<%= content_tag :button, :class => "btn btn-u ladda-button", :type => "submit", :data => { :style => 'expand-left' } do %> 
    <span class="ladda-label">Next</span> 
    <span class="ladda-spinner"></span> 
<% end %>

HTML, оказанные выглядит следующим образом:

# in <head> 
<script type="text/javascript"> 
     $(document).ready(function(){ 
      Ladda.bind('.ladda-button'); 
     }); 
</script> 

# submit button at the end of my rails form_for 
<button class="btn btn-u ladda-button" data-style="expand-left" type="submit"> 
    <span class="ladda-label">Next</span> 
    <span class="ladda-spinner"></span> 
</button>

Я включил ladda.js и spin.js в моих активов/JavaScripts папка. ladda-themeless.css включен в мой контроллер таблиц стилей.

Когда я нажимаю следующую кнопку, текст внутри кнопки меняет цвет (на темно-серый). Консоль Chrome теперь отображает следующее сообщение об ошибке:

Uncaught TypeError: undefined is not a function application.js:17884createSpinnerapplication.js:17884instance.start application.js:17577(anonymous function)

источник

2014-11-15 Questifer

Вы используете Ajax? – JTG

@JTG No. Эта форма только завершает базовую функцию сохранения локального объекта. Однако он выводит данные, полученные из формы, через сторонний API через вызов after_commit в модели. – Questifer

Ошибки в консоли? Вы видите, загружается ли css/js в окне просмотра браузеров? – JTG

Оберните

Ladda.bind('input[type=submit]');

часть в $ (документ) .ready обертка. Если вы используете Turbolinks, используйте:

$(document).on('ready page:load', function(){ 
    Ladda.bind('.ladda-button'); 
});

источник

2014-11-15 16:22:01

Я обернул свой оригинальный JS в готовом документе документе, и я все равно получаю тот же результат. Я обновил свой вопрос с вашим предложением в разделе #head JS. – Questifer

Я обновил ответ для привязки к классу вместо кнопки. –

Я связал класс. Я обновляю код q кодом. Однако, когда я нажимаю кнопку, цвет текста изменяется внутри кнопки (шаг в правильном направлении). Теперь я получаю сообщение об ошибке в консоли (добавлен в мой вопрос). Спасибо за продолжение попытки помочь. Должен ли я помещать уменьшенную версию js в папку с моими активами вместо полноразмерных? – Questifer

Кнопка загрузки Ladda в рельсах

ответ

Смежные вопросы