loading js at the bottom of the page - Uncaught ReferenceError: $ is not defined

stwe commented 7 years ago

loading js at the bottom of the page

the base.html.twig

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>

    {# ... #}

    <div class="container body-container">
        {% block body %}
            <div class="row">
                <div id="main" class="col-sm-9">
                    {% block main %}{% endblock %}
                    <div id="ajax_content"></div>
                    {% block fos_user_content %}{% endblock %}
                </div>

                <div id="sidebar" class="col-sm-3">
                    <div id="sidebar-multiselect-actions"></div>
                    {% block sidebar %}
                    {% endblock %}
                </div>
            </div>
        {% endblock %}
    </div>

    <hr />

    {% block footer %}
        <footer style="text-align: center">
            <div class="container">
                <div class="row">
                    <div id="footer-copyright" class="col-md-12">
                        <p><small>&copy; {{ 'now'|date('Y') }} - stwe</small></p>
                        <p><small>MIT License</small></p>
                    </div>
                </div>
            </div>
        </footer>
    {% endblock %}

    {% block javascripts %}
        <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment-with-locales.min.js"></script>
        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.25/daterangepicker.min.js" charset="UTF-8"></script>
        <script src="//cdn.datatables.net/v/bs/jszip-2.5.0/pdfmake-0.1.18/dt-1.10.13/af-2.1.3/b-1.2.4/b-flash-1.2.4/b-html5-1.2.4/b-print-1.2.4/cr-1.3.2/fc-3.2.2/fh-3.1.2/kt-2.2.0/r-2.1.1/rr-1.2.0/sc-1.4.2/se-1.2.0/datatables.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.1/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
        <script src="//cdn.rawgit.com/noelboss/featherlight/1.7.1/release/featherlight.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>

        <script src="{{ asset('bundles/sgdatatables/js/pipeline.js') }}"></script>

        <script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
        <script src="{{ path('fos_js_routing_js', {'callback': 'fos.Router.setData'}) }}"></script>
    {% endblock %}

    {% block datatables_javascripts %}
    {% endblock %}

    </body>
</html>

an index.html.twig

{% extends '::base.html.twig' %}

{% block main %}
    <h2>Posts</h2>
    {{ sg_datatables_render_html(datatable) }}
{% endblock %}

{% block datatables_javascripts %}
    {{ sg_datatables_render_js(datatable) }}
{% endblock %}

The result of this quick && dirty test: The table works as expected. Nevertheless, the console shows some errors:

jquery

sweoggy commented 7 years ago

Related #535

stephanvierkant commented 7 years ago

@sweoggy is right. I think this issue should be closed.

mshd commented 5 years ago

@stwe @sweoggy Hello, is it possible now to add the daterangefilter to the bottom of the script. Please let me know what I can do, without having to move the JS to the header

mshd commented 4 years ago

I found a solution by putting document.addEventListener("DOMContentLoaded", function(event) { }); around the daterange javascript.

stwe / DatatablesBundle

loading js at the bottom of the page - Uncaught ReferenceError: $ is not defined #613