1

ここでは少し初心者で、この問題で 1 日以上頭が痛くなりました。私は userfrosting をフレームワークとして使用しており、Web ページ用の通常の twig ファイルを使用しています。

小枝のフォームに日付ピッカー（bootstrap-datepicker.jsは機能していません。jquery-uiを使用した現在の反復もありません）を含めようとしていますが、何をしても取得できません仕事！

基本的なセットアップは次のとおりです。

{% block head %}
    {{ parent() }}
    <script src="{{site.uri.js}}/jquery-1.11.2.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <script src="{{site.uri.js}}/custom.js" ></script>
{% endblock %}

{% block content %}
.... {{boring stuff missed out}}
<form class="form-inline" role="form">
.... {{boring stuff missed out}}
<div class="form-group row">
    <label for="datepicker" class="col-sm-3 form-control-label">Subject Date:</label>
    <div class="col-sm-6">
        <input type="date" class="form-control" id="datepicker" />
    </div>
</div>
.... {{boring stuff missed out}}
</form>
.... {{boring stuff missed out}}
{% endblock %}

{% block javascripts %}
<script type="text/javascript">
    $(document).ready(function() {
        $("#datepicker").datepicker();
    });
</script>
{% endblock %}

ボックスはページ上にあり、日付などを入力できますが、クリックしても何も表示されません (カレンダーが表示されるはずです)。

誰にもアイデアはありますか？私は完全に途方に暮れています。さまざまなバージョンをローカルで試してみましたが (ご覧のとおり、現在) CDN で試しましたが、何も機能しません。私は経験豊富な Web 開発者などではないので、おそらく基本的なものであると確信していますが、アドバイスや実際の例はありがたく受け取られます!

4

2 に答える 2

1

Uh! facepalm

Well, after some digging and serious consideration of the inspector output (thanks CTRL-SHIFT-I!) it turns out to be a simple case of script loading order and multiple scripts being loaded.

私が作成していたテンプレートにロードするように依頼したものの上に、小枝がスクリプトのバケツロード全体をロードすることに気づきませんでした。ページのインスペクター出力を確認した後で初めて、2 つの異なるバージョンの jQuery をロードしようとしていて、独自のカスタム スクリプトが順不同でロードされていることがわかりました。ここでロードしていました。

{% block head %}
  {{ parent() }}
  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
  <script src="{{site.uri.js}}/custom.js" ></script>
{% endblock %}

そのブロックはスタイルシート用に予約する必要があります。代わりに、ここにロードする必要があります。

{% block page_scripts %}
  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
  <script src="{{site.uri.js}}/custom.js"></script>
{% endblock %}

...すべてのデフォルトの Bootstrap および userfrosting スクリプトの後にロードされるようにします。

于 2016-03-20T12:19:12.507 に答える