Geek asks and answers

Enable jQuery in Symfony2

I am new to Symfony2 framework and do not fully understand how to work with javascripts and how to include them in a better way.

What I need: include a jQuery script on every page.

What I have: I have a general layout:

<!DOCTYPE html>
<html>
    <head>
        {% block javascripts %}{% endblock %}
    </head>
    <body>
        {% block body %}{% endblock %}

    </body>
</html>

In the case of hosting jquery.js. What about websites / packages / jquery ? Or are there special jquery special packages? Should I use asset () and how?

+5
source share
4 answers

Assuming your jquery.min.js is placed under src/Acme/FooBundle/Resources/public/js/

you can use

<script type="text/javascript" src="{{ asset('bundles/acmefoo/js/jquery.min.js') }}"></script>

or

{% javascripts
    '@AcmeFooBundle/Resources/public/js/jquery.min.js'
%}
    <script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}

In the template of your branch.

Make sure you install assets later or run this command

php app/console assets:install web --symlink
+13
source

There are several ways to incorporate jQuery into a Symfony project. You can:

1. jQuery (Bower)

Symfony :

Bower - , Bootstrap jQuery.

Bower , npm ( node):

npm install -g bower

Symfony:

, JavaScript, CSS .

, jQuery web/, . , , .bowerrc Symfony :

{
    "directory": "web/assets/vendor/"
}

bower init , bower.json, . , ( "globals" ).

Bower jQuery :

bower install --save jquery

jQuery :

<script src="{{ asset('assets/vendor/jquery/dist/jquery.min.js') }}"></script>

Bower "lock" , , Composer. , , , Bower, .gitignore. , : bower/bower # 1748.

2. jQuery Composer

Composer PHP, jQuery.

Composer , components/jquery, component-installer:

composer require robloach/component-installer

composer.json, :

"require": {
    "components/jquery": "3.1.1"
},
"config": {
    "component-dir": "web/assets/vendor"
},

composer install. jQuery web/assets/vendor.

jQuery :

<script src="{{ asset('assets/vendor/jquery/jquery.min.js') }}"></script>

3. jQuery CDN

, CDN Google:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

CDN, .

:

, ( jQuery) , jQuery. , , :

+7

. , <script> , :

<script type="text/javascript" src="{{ asset('bundles/acmefoo/js/jquery.min.js') }}"></script>


{% javascripts '@AcmeFooBundle/Resources/public/js/jquery.min.js' %}
    <script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}

script .

0

symfony .

:

, , , (bmatzner/jquery-bundle) .

php composer.phar require bmatzner/jquery-bundle:2.* jQuery 2.x

php composer.phar require bmatzner/jquery-bundle:1.* jQuery 1.x

AppKernel:

/* /app/AppKernel.php */

class AppKernel extends Kernel
{
    public function registerBundles()
    {
        $bundles = [
            new Bmatzner\JQueryBundle\BmatznerJQueryBundle(),
    ///...

:

php bin/console assets:install --symlink web

:

<!-- /app/Resources/views/base.html.twig -->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}{% endblock %}
        <script type="text/javascript" src="{{ asset('bundles/bmatznerjquery/js/jquery.min.js') }}"></script>
        <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
    </head>
    <body>
        {% block body %}{% endblock %}
        {% block javascripts %}{% endblock %}
    </body>
</html>

Clear cache:

php bin/console cache:clear --env=dev
php bin/console cache:clear --env=prod
0
source

More articles:


All Articles