1

Rails アプリに問題があります。2 つのスクリプトがあり、お互いが機能しません。まず、algolia 検索エンジン スクリプト (これはうまく機能しています)

app/assets/javascript/algolia.js で:

  $(document).ready(function() {
    // Replace the following values by your ApplicationID and ApiKey.
    var algolia = new AlgoliaSearch('MYAPPID', 'MYAPPPWD');
    // replace YourIndexName by the name of the index you want to query.
    var index = algolia.initIndex('Pin');

    // Mustache templating by Hogan.js (http://mustache.github.io/)
    var template = Hogan.compile('<div class="hit">' +
      '<a href="http://0.0.0.0:3000/pins/{{{slug}}}">'
     +
      '<div class="name">' +
        '{{{ _highlightResult.description.value }}} ' +
      '</div>' +
      '</a>' +
      '</div>');


    // typeahead.js initialization
    $('#user-search').typeahead(null, {
      source: index.ttAdapter({ hitsPerPage: 5 }),

      displayKey: 'description',
      templates: {
        suggestion: function(hit) {

          // select matching attributes only
          hit.matchingAttributes = [];
          for (var attribute in hit._highlightResult) {
            if (attribute === 'name' || attribute == 'company') {
              // already handled by the template
              continue;
            }
            // all others attributes that are matching should be added in the matchingAttributes array
            // so we can display them in the dropdown menu. Non-matching attributes are skipped.
            if (hit._highlightResult[attribute].matchLevel !== 'none') {
              hit.matchingAttributes.push({ attribute: attribute, value: hit._highlightResult[attribute].value });
            }
          }

          // render the hit using Hogan.js
          return template.render(hit);

        }
      }
    });
  });

そして、 magnific-popup-gemを使用してポップアップをロードするスクリプト

 $(function() {
          $('.please-login').magnificPopup({
          type: 'inline',
          preloader: false,
          focus: '#username',
          modal: true
          });
          $(document).on('click', '.please-login-dismiss', function (e) {
          e.preventDefault();
          $.magnificPopup.close();
          });
          });

これらの行が壮大なポップアップを作っているように見えますが、機能しません。

 <script src="//cdn.jsdelivr.net/jquery/1.11.1/jquery.min.js"></script>
    <!-- Typahead.js is used to display the auto-completion menu -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.4/typeahead.bundle.min.js"></script>
    <!-- Hogan.js is used to render the hits using Mustache.js templating -->
    <script src="//cdn.jsdelivr.net/hogan.js/3.0.0/hogan.common.js"></script>
    <!-- Algolia -->
    <script src="//cdn.jsdelivr.net/algoliasearch/latest/algoliasearch.min.js"></script>

どうすればこれを修正できますか？

4

2 に答える 2

2

jquery に依存するすべてのスクリプトの前に、jquery が一度だけ読み込まれることを確認してください。

Jquery はすでにレールによってロードされているはずなので、おそらくこの行は必要ありません。

<script src="//cdn.jsdelivr.net/jquery/1.11.1/jquery.min.js"></script>
于 2014-11-09T14:10:37.067 に答える
0

2 番目のファイルが適切にロードされていることを確認してください。

次の行が存在するかどうかを確認
します: application.css:
*= require magnific-popup

application.js:
//= magnific-popup が必要

Web コンソールを firefox の firebug として、または chrome のベース コンソールとして使用し、Sources -> localhost -> assets を探して、ファイルが見つかるかどうかを確認します。

見つからない場合: リンクに問題があります (スペルミスや基本的な何かの間違い) 見つかった場合: スクリプトに問題があります (css クラスが存在することを確認し、Web コンソールでデバッガーを使用してください)

于 2014-11-09T14:13:07.570 に答える