外部jsファイルを読み込みたい

Question

前提・実現したいこと

外部のjsファイルを読み込みたいのですが、パスの指定方法が間違っているのかエラーが出ます。
どのようにパスを指定すれば読み込めるのか教えて頂けないでしょうか、、

星のreview機能を実装しているのですが、試しにview内に直接<script></script>を書き込みコードを記述したところ星が表示されていました。外部ファイルから呼び出そうとするとエラーが出ます。

発生している問題・エラーメッセージ

GET http://localhost:4000/store_manager/store/2/jquery.raty.js net::ERR_ABORTED 404 (Not Found)

edit:111 Uncaught TypeError: $(...).raty is not a function at edit:111

該当のソースコード

ディレクトリ構造

app1
  ├──assets
  │   ├──javascripts
  │       └─jquery.raty.js ←読み込みたいjsファイル
  │     
  ├──views
  │   ├──store_manager
  │       ├─store
             └─edit.html.erb ←このviewからjquery.raty.jsを呼び出したい

edit.html.erb

<div id=star-rating></div>

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="../../assets/javascripts/jquery.raty.js"></script>　←ここの書き方が分からない
<script>

$('#star-rating').raty({
  path: '/assets/',
  readOnly: true,
  half: true,
  score: function() {
        return $(this).attr('data-score');
  }
});

jquery.raty.js

/*!
 * Raty - A Star Rating Plugin
 *
 * The MIT License
 *
 * author:  Washington Botelho
 * github:  wbotelhos/raty
 * version: 2.9.0
 *
 */

(function(root, factory) {
    if (typeof define === 'function' && define.amd) {
        define(['jquery'], factory);
    }
    else if (typeof module === 'object' && module.exports) {
        module.exports = factory(require('jquery'));
    }
    else {
        factory(root.jQuery);
    }
}(this, function($) {
  'use strict';

  var methods = {
    init: function(options) {
      return this.each(function() {
        this.self = $(this);

        methods.destroy.call(this.self);

        this.opt = $.extend(true, {}, $.fn.raty.defaults, options, this.self.data());

        methods._adjustCallback.call(this);
        methods._adjustNumber.call(this);
        methods._adjustHints.call(this);

        this.opt.score = methods._adjustedScore.call(this, this.opt.score);

        if (this.opt.starType !== 'img') {
          methods._adjustStarType.call(this);
        }

        methods._adjustPath.call(this);
        methods._createStars.call(this);

        if (this.opt.cancel) {
          methods._createCancel.call(this);
        }

        if (this.opt.precision) {
          methods._adjustPrecision.call(this);
        }

        methods._createScore.call(this);
        methods._apply.call(this, this.opt.score);
        methods._setTitle.call(this, this.opt.score);
        methods._target.call(this, this.opt.score);

        if (this.opt.readOnly) {
          methods._lock.call(this);
        } else {
          this.style.cursor = 'pointer';

          methods._binds.call(this);
        }
      });
    },

    _adjustCallback: function() {
      var options = ['number', 'readOnly', 'score', 'scoreName', 'target', 'path'];

      for (var i = 0; i < options.length; i++) {
        if (typeof this.opt[options[i]] === 'function') {
          this.opt[options[i]] = this.opt[options[i]].call(this);
        }
      }
    },




  省略==============================================




    readOnly: function(readonly) {
      return this.each(function() {
        var self = $(this);

        if (self.data('readonly') !== readonly) {
          if (readonly) {
            self.off('.raty').children(this.opt.starType).off('.raty');

            methods._lock.call(this);
          } else {
            methods._binds.call(this);
            methods._unlock.call(this);
          }

          self.data('readonly', readonly);
        }
      });
    },

    reload: function() {
      return methods.set.call(this, {});
    },

    score: function() {
      var self = $(this);

      return arguments.length ? methods.setScore.apply(self, arguments) : methods.getScore.call(self);
    },

    set: function(options) {
      return this.each(function() {
        $(this).raty($.extend({}, this.opt, options));
      });
    },

    setScore: function(score) {
      return this.each(function() {
        if ($(this).data('readonly') !== true) {
          score = methods._adjustedScore.call(this, score);

          methods._apply.call(this, score);
          methods._target.call(this, score);
        }
      });
    }
  };

  $.fn.raty = function(method) {
    if (methods[method]) {
      return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
    } else if (typeof method === 'object' || !method) {
      return methods.init.apply(this, arguments);
    } else {
      $.error('Method ' + method + ' does not exist!');
    }
  };

  $.fn.raty.defaults = {
    cancel:       false,
    cancelClass:  'raty-cancel',
    cancelHint:   'Cancel this rating!',
    cancelOff:    'cancel-off.png',
    cancelOn:     'cancel-on.png',
    cancelPlace:  'left',
    click:        undefined,
    half:         false,
    halfShow:     true,
    hints:        ['bad', 'poor', 'regular', 'good', 'gorgeous'],
    iconRange:    undefined,
    mouseout:     undefined,
    mouseover:    undefined,
    noRatedMsg:   'Not rated yet!',
    number:       5,
    numberMax:    20,
    path:         undefined,
    precision:    false,
    readOnly:     false,
    round:        { down: 0.25, full: 0.6, up: 0.76 },
    score:        undefined,
    scoreName:    'score',
    single:       false,
    space:        true,
    starHalf:     'star-half.png',
    starOff:      'star-off.png',
    starOn:       'star-on.png',
    starType:     'img',
    target:       undefined,
    targetFormat: '{score}',
    targetKeep:   false,
    targetScore:  undefined,
    targetText:   '',
    targetType:   'hint'
  };
}));

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

「外部のjsファイル」とのことですが「GET http://localhost:4000」というと同じマシン上にある別httpサーバーってことでしょうか？
app1/assets/javascripts/jquery.raty.js
ですか？　app でなく app1 ってのが？？ではありますが。
もしRailsでのサーバーであるとすると app配下のfileは直接は読めません。
Railsによってpublicにcopyされた長いハッシュ付きのfile名でアクセスするか
publicに手でcopyしてそれを読むか

でも問題のアプリの app/assets/javascripts にcopyするのが一番簡便ですがなぜしないのでしょう？

Comments

[jun3030]

回答ありがとうございます。

紛らわしくてすみません汗
app1ではなくappでした。

つまりrails sで立ち上げたサーバーだとapp配下のfileは<script src="">では読み込めないという事でしょうか？

例で書くとこのようにjquery.raty.jsを書いて呼び出せば良いという事でしょうか、、
回答の意味がよくわかっていなくてすみません汗
smart-portal-site
├──app
├──bin
├──config
├──db
├──lib
├──log
├──public
- -------- └── jquery.raty.js

[winterboum]

どうしても他サイトから　なら。

Answer 2

パスは、「..」でひとつ上の階層を示します。
なので、下のようになると思います。
<script src="../../../assets/javascripts/jquery.raty.js"></script>