Я пытаюсь получить загрузочный javascript, работающий в моем приложении rails 4.

Я задал эти вопросы, но не смог получить помощь.

https://stackoverflow.com/info/33685338/rails-with-bootstrap-tabs
https://stackoverflow.com/info/33852687/rails-4-bootstrap-date-picker

Я все больше чувствую себя побежденным этой проблемой. Это удручает, что бутстрап описывается как простой инструмент для рельсов. Я был бы рад заплатить 100 долларов США, если кто-то может помочь решить эту проблему.

Моя проблема связана с функциями javascript. Мои вкладки не работают. Когда вы нажимаете на ссылку, ничего не происходит. Кроме того, выбор даты не работает (я ожидал, что календарь выберет дату одним щелчком).

В моем файле gem у меня есть:

gem 'sass-rails', '~> 5.0'
gem 'bootstrap-sass', '~> 3.3.5'
gem 'font-awesome-sass', '~> 4.4.0'
gem 'bootstrap-slider-rails'
gem 'bootstrap-datepicker-rails'
gem 'jquery-rails'

В моем приложении application.html.erb у меня есть:

<link href='http://fonts.googleapis.com/css?family=Quicksand|Roboto:300' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="p:domain_verify" content="44c82789b3dcecac427e4b65123fb68d"/>
        <title><%= content_for?(:title) ? yield(:title) : "RE" %></title>
    <meta name="description" content="<%= content_for?(:description) ? yield(:description) : "Ae" %>">
          <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => false %>
          <%= javascript_include_tag "application", "data-turbolinks-track" => false %>
          <%= csrf_meta_tags %>
          <%= favicon_link_tag %>
          <script src="https://www.google.com/jsapi"></script>
          <script src="https://www.youtube.com/iframe_api"></script>

Turbolinks выключен, потому что я использую olark.

В моей папке stylesheets у меня есть файлы:

application.css.scss:

 *= require_framework_and_overrides.css.scss
 *= require bootstrap-datepicker
 *= require_self
 *= require_tree .
 */

Следуя приведенным ниже комментариям, я изменил этот файл на имя application.scss и изменил порядок и ссылаясь на:

*= require_tree .
 *= require_self
 *= require framework_and_overrides.css.scss
 *= require bootstrap-datepicker
 */

framework_and_overrides.css.scss

@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";
@import "bootstrap-slider";

В моей папке javascript у меня есть файл:

application.js:

 //= require jquery
//= require jquery_ujs
//= require underscore
//= require gmaps/google
//= require bootstrap-slider
//= require bootstrap-sprockets
//= require bootstrap-datepicker
//= require_tree .

project_dates.coffee.js

 $(document).on "focus", "[data-behaviour~='datepicker']", (e) ->
 - $(this).datepicker
 - format: "dd-mm-yyyy"
 - weekStart: 1
 - autoclose: true

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

<div class="containerfluid">

        <div class="row" style="margin-top:50px">
            <div class="col-xs-10 col-xs-offset-1">
                <ul class="nav nav-tabs nav-justified">
                    <li role="presentation" class="active"> <a href="#terms" aria-controls="terms" role="tab" data-toggle="tab">Terms</a></li>
                    <li role="presentation"> <a href="#privacy" aria-controls="privacy" role="tab" data-toggle="tab">Privacy</a></li>
                    <li role="presentation"> <a href="#licence" aria-controls="licence" role="tab" data-toggle="tab">Licence</a></li>
                    <li role="presentation"> <a href="#trust" aria-controls="trust" role="tab" data-toggle="tab">Trust</a></li>
                    <li role="presentation"> <a href="#reliance" aria-controls="reliance" role="tab" data-toggle="tab">Reliance</a></li>
                    <li role="presentation"> <a href="#pricing" aria-controls="pricing" role="tab" data-toggle="tab">Pricing</a></li>

                </ul>   
            </div>

        </div>


    <div class="row">
        <div class="col-xs-10 col-xs-offset-1">
            <div class="intpolmin" style="margin-top: 50px; margin-bottom: 30px"> 
             We give meaning to other words used in these terms and policies throughout, and identify those words as having an ascribed meaning, with <em>emphasised</em> text.
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-8 col-xs-offset-2">
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="terms"><%= render 'pages/legalpolicies/terms' %></div>
                <div role="tabpanel" class="tab-pane" id="privacy"><%= render 'pages/legalpolicies/privacy' %></div>

                <div role="tabpanel" class="tab-pane" id="licence"><%= render 'pages/legalpolicies/licence' %></div>
                <div role="tabpanel" class="tab-pane" id="trust"><%= render 'pages/legalpolicies/trust' %></div>

                <div role="tabpanel" class="tab-pane" id="reliance"><%= render 'pages/legalpolicies/reliance' %></div>
                <div role="tabpanel" class="tab-pane" id="pricing"><%= render 'pages/legalpolicies/pricing' %></div>

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

Ничего не происходит, когда вы нажимаете на ссылки.

В моей форме дат проекта у меня есть это поле формы:

<%= f.date_select :start_date, :label => "When does this project begin?", 'data-behaviour' => 'datepicker', order: [:day, :month, :year] %>

Он не делает выбор даты. Вместо этого это всего три отдельных поля для d/m/y. Кроме того, метка не отображается, но я могу обойти эту проблему.

Что-то не так с моей настройкой?

Когда я меняю приложение application.js для удаления:

//= require bootstrap

Затем js работает так, что, когда вы нажимаете одну из ссылок вкладки сверху, она перескакивает длинную страницу текста до точки, где начинается соответствующий текст. Это не то, что я хочу. Я хочу щелкнуть по ссылке на вкладке и для этого вызвать соответствующее частичное отображение под ссылками (и все остальные частичные, чтобы не отображать).

Нет изменений в задаче выбора даты, которая возникает в результате этого изменения в application.js

Когда я пытаюсь добавить:

Bundler.require(:default, Rails.env)

в мой config/application.rb(в соответствии с этим сообщением Жесткий диск Bootstrap-sass Javascript не работает в Rails 4)

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

Когда я пытаюсь добавить

//= require bootstrap-sprockets

к моему application.js(после jquery), js перестает работать - поэтому, когда я нажимаю ссылку в меню вкладок, ничего не происходит

Я знаю, что руководство пользователя для https://github.com/twbs/bootstrap-sass говорит:

bootstrap-sprockets and bootstrap should not both be included in application.js.

По этой причине я удалил bootstrap из своего приложения .js.

Я также знаю, что руководство пользователя для этого драгоценного камня говорит:

Do not use *= require in Sass or your other stylesheets will not be able to access the Bootstrap mixins or variables.

У меня все еще есть это в моем приложении application.css.scss:

 *= require_framework_and_overrides.css.scss
 *= require bootstrap-datepicker
 *= require_self
 *= require_tree .
 */

Я прочитал документацию о драгоценных камнях, так как я делаю что-то неправильно, сохраняя эти файлы в моем css, но документация gem не говорит вам, что использовать вместо этого.

В нем говорится:

Then, remove all the *= require_self and *= require_tree . statements from the sass file. Instead, use @import to import Sass files.

Как вы это делаете?

Весь файл gem скопирован ниже:

source 'https://rubygems.org'


# ------------------ Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.2.4'


# ------------------ Use postgresql as the database for Active Record
gem 'pg'

# ------------------ Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
gem 'bootstrap-sass', '~> 3.3.5'
gem 'font-awesome-sass', '~> 4.4.0'
gem 'bootstrap-slider-rails'
gem 'bootstrap-datepicker-rails'

# ------------------ Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'


# ------------------ Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.1.0'

# ------------------ See https://github.com/rails/execjs#readme for more supported runtimes
gem 'therubyracer', platforms: :ruby

# ------------------ Use jquery as the JavaScript library
gem 'jquery-rails'


# ------------------ Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
# gem 'turbolinks'


# ------------------ Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'


# ------------------ bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0', group: :doc

# ------------------ Use ActiveModel has_secure_password
gem 'bcrypt', '~> 3.1.7'

# ------------------ Use Unicorn as the app server
# gem 'unicorn'

# ------------------ Use Capistrano for deployment
# gem 'capistrano-rails', group: :development


# ----------- USERS

# ------------------ authentication

gem 'devise', '3.4.1'
gem 'devise_zxcvbn'
gem 'omniauth'
gem 'omniauth-oauth2', '1.3.1'
gem 'omniauth-google-oauth2'
gem 'omniauth-facebook'
gem 'omniauth-twitter'
gem 'omniauth-linkedin-oauth2'
gem 'google-api-client', require: 'google/api_client'
# gem 'oauth2'
# ------------------ authorisation

gem 'pundit'

# ------------------ user roles

# ------------------ messaging

# ------------------ money

gem 'money-rails'

# ----------- CONTENT

gem 'state_machine'
gem 'acts_as_approvable'


# ------------------ file uploads
gem 'carrierwave'
gem 'mini_magick'
gem 'simple_form'

# ------------------ video
gem 'yt', '~> 0.25.5'
gem 'vimeo'

# ------------------ organisation
gem 'acts-as-taggable-on', '~> 3.4'

# ------------------ search

# ----------- OTHER

# ------------------ security

gem 'figaro'

# ------------------ performance
gem 'rails-observers'
gem 'high_voltage', '~> 2.4.0'

# ------------------ location

gem 'geocoder'
gem 'gmaps4rails'
gem 'underscore-rails'

gem 'country_select'

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug'
end

group :development do
  # Access an IRB console on exception pages or by using <%= console %> in views
  gem 'web-console', '~> 2.0'

  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
end

group :production do
  gem "rails_12factor"
end

ruby "2.2.2"

Просмотр этого видео - https://gorails.com/episodes/styling-with-bootstrap-sass

Настройка выглядит очень просто, но этот учебник не вносит изменения в файл, чтобы удалить ссылки, требуемые, как предлагает документация по драгоценным камням (но это я еще не сделал), но этот учебник по-прежнему работает, чтобы заставить загрузочную работу работать. Кто-нибудь может увидеть, что я могу попробовать? На грани...

Как вы можете видеть - я пробовал это уже больше года. Я участвовал в ежемесячных встречах, платных кодовых наставниках и нанятых подрядчиках, которые не смогли помочь. Надеюсь на чудо на этой доске. Bootstrap Sass с рельсами 4

ПОСЛЕДУЮЩИЙ РЕЗЕРВНЫЙ РЕШЕНИЕ НИЖЕ:

Итак, теперь у меня есть:

таблицы стилей следующим образом:

application.css

 *= require_tree .
 *= require_self
 */

custom.css.scss

@import "bootstrap-sprockets";
@import "bootstrap";

framework_and_overrides.css.scss:


@import "font-awesome-sprockets";
@import "font-awesome";
@import "bootstrap-slider";

Файлы javascript:

application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .

application.html.erb:

<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => false %>
              <%= javascript_include_tag "application", media: 'all', "data-turbolinks-track" => false %>

Gemfile:

gem 'sass-rails', '~> 5.0'
gem 'bootstrap-sass', '~> 3.3.5.1'
gem 'font-awesome-sass', '~> 4.4.0'
gem 'bootstrap-slider-rails'
gem 'bootstrap-datepicker-rails'

Когда я сохраняю все это и выполняю предложенные шаги, никаких изменений в этом не происходит. Я нажимаю ссылку в ссылках на вкладке вверху, маленькая рамка внизу экрана говорит "перейдите на # [имя закладки ссылки] на этой странице, но ничего не происходит.