jquery 如何在Symfony 6中安装select2

wbrvyc0a  于 2023-11-17  发布在  jQuery
关注(0)|答案(1)|浏览(151)

我试图重新电镀一个表单字段与select 2多选择框（pillbox）。
我想使用CDN安装select 2：https://select2.org/getting-started/installation#using-select2-from-a-cdn
问题是，当我运行我的项目时，它看起来根本没有读取select 2。
下面是我如何将select 2添加到我的基本模板中：

<!doctype html>
<html lang="en">

<head>
    <title>{% block title %}ZZZCG{% endblock %}</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="description" content="">
    <meta name="author" content="Exploring d.o.o.">

    <link rel="icon" href="{{ asset('build/images/admin/favicon.ico') }}" type="image/x-icon">
    
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

    {{ encore_entry_link_tags('admin') }}
    {{ encore_entry_link_tags('tables') }}

    {% block stylesheets %}{% endblock %}

</head>
<body data-theme="light">

<div id="body" class="theme-orange">
    <!-- Page Loader -->
    <div class="page-loader-wrapper">
        <div class="loader">
            <div class="m-t-30"><img src="{{ asset('build/images/site/ZZZCG_logo.png') }}" width="40" height="40"
                                     alt="Mooli">
            </div>
            <p>Molimo Vas sačekajte...</p>
        </div>
    </div>

    <div class="themesetting">
        <a href="javascript:void(0);" class="theme_btn" style="display: none"><i class="fa fa-gear fa-spin"></i></a>
        <ul class="list-group">
            <li class="list-group-item">
                <ul class="choose-skin list-unstyled mb-0">
                    <li data-theme="green">
                        <div class="green"></div>
                    </li>
                    <li data-theme="orange">
                        <div class="orange"></div>
                    </li>
                    <li data-theme="blush">
                        <div class="blush"></div>
                    </li>
                    <li data-theme="cyan" class="active">
                        <div class="cyan"></div>
                    </li>
                    <li data-theme="timber">
                        <div class="timber"></div>
                    </li>
                    <li data-theme="blue">
                        <div class="blue"></div>
                    </li>
                    <li data-theme="amethyst">
                        <div class="amethyst"></div>
                    </li>
                </ul>
            </li>
            <li class="list-group-item d-flex align-items-center justify-content-between">
                <span>Light Sidebar</span>
                <label class="switch sidebar_light">
                    <input type="checkbox">
                    <span class="slider round"></span>
                </label>
            </li>
            <li class="list-group-item d-flex align-items-center justify-content-between">
                <span>Gradient</span>
                <label class="switch gradient_mode">
                    <input type="checkbox" checked="">
                    <span class="slider round"></span>
                </label>
            </li>
            <li class="list-group-item d-flex align-items-center justify-content-between">
                <span>Dark Mode</span>
                <label class="switch dark_mode">
                    <input type="checkbox">
                    <span class="slider round"></span>
                </label>
            </li>
            <li class="list-group-item d-flex align-items-center justify-content-between">
                <span>RTL version</span>
                <label class="switch rtl_mode">
                    <input type="checkbox">
                    <span class="slider round"></span>
                </label>
            </li>
        </ul>
    </div>

    <!-- Overlay For Sidebars -->
    <div class="overlay"></div>

    <div id="wrapper">
        <!-- Page top navbar -->
        <nav class="navbar navbar-fixed-top">
            <div class="container-fluid">
                <div class="navbar-left">
                    <div class="navbar-btn">
                        <a href="#">ZZZCG</a>
                        <button type="button" class="btn-toggle-offcanvas"><i class="fa fa-align-left"></i></button>
                    </div>
                </div>
                <div class="navbar-right">
                    <div id="navbar-menu">
                        <ul class="nav navbar-nav">
                            {% if lang is defined %}
                                <li class="language-menu hidden-xs">
                                    <img src="{{ asset('build/images/admin/flags/'~lang~'.png') }}" alt="lang"
                                         class="nav-item-flag">
                                    {{ languages[lang].name }}
                                </li>
                            {% endif %}
                            <li class="hidden-xs"><a href="javascript:void(0);" id="btnFullscreen" class="icon-menu"><i
                                            class="fa fa-arrows-alt"></i></a></li>
                            <li><a href="{{ path('app_logout') }}" class="icon-menu"><i class="fa fa-power-off"></i></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </nav>

        <!-- Main left sidebar menu -->
        <div id="left-sidebar" class="sidebar">
            <a href="#" class="menu_toggle"><i class="fa fa-angle-left"></i></a>
            <div class="navbar-brand">
                {#                <a href="{{ path('admin_default') }}"><img src="{{ asset('build/images/site/ZZZCG_logo.png') }}" #}
                {#                                                           alt="Logo"></a> #}
                <a href="{{ path('admin_default', { 'lang' : lang }) }}"><img
                            src="{{ asset('build/images/site/ZZZCG_logo.png') }}" alt="Logo"
                            class="img-fluid logo"><span>ZZZCG</span></a>
                <button type="button" class="btn-toggle-offcanvas btn btn-sm float-right"><i
                            class="lnr lnr-menu fa fa-chevron-circle-left"></i></button>
            </div>
            <div class="sidebar-scroll">
                <div class="user-account">
                    <div class="user_div">
                        <img src="{{ asset('build/images/admin/user.png') }}" class="user-photo"
                             alt="User Profile Picture">
                    </div>
                    <div class="dropdown">
                        <span>Zdravo,</span>
                        <a href="javascript:void(0);" class="dropdown-toggle user-name" data-toggle="dropdown">
                            <strong>
                                {% if app.user.firstName or app.user.lastName %}
                                    {{ app.user.firstName }} {{ app.user.lastName }}
                                {% else %}
                                    {{ app.user.email }}
                                {% endif %}
                            </strong></a>
                        <ul class="dropdown-menu dropdown-menu-right account vivify flipInY">
                            <li><a href="{{ path('profile_details') }}"><i class="fa fa-user"></i>Moj Profil</a></li>
                            <li><a href="{{ path('app_logout') }}"><i class="fa fa-power-off"></i>Odjavite se</a></li>
                        </ul>
                    </div>
                </div>
                <nav id="left-sidebar-nav" class="sidebar-nav">
                    <ul id="main-menu" class="metismenu animation-li-delay">
                        <li><a href="{{ path('admin_default', { 'lang': lang }) }}"><i class="fa fa-dashboard"></i>
                                <span>Pregled</span></a>
                        </li>
                        {#                        <li> #}
                        {#                            <a href="#"><i class="fa fa-dashboard"></i> <span>Proizvodi</span></a> #}
                        {#                        </li> #}

                        <li>
                            <a href="#" class="has-arrow"><i class="fa fa-file-text"></i><span>Stranice</span></a>
                            <ul>
                                {% for lang in languages.available %}
                                    <li>
                                        <a href="{{ path('pages_list',{'lang': lang}) }}"><img
                                                    src="{{ asset('build/images/admin/flags/'~lang~'.png') }}"
                                                    class="nav-item-flag">
                                            <span>{{ languages[lang].name }}</span></a>
                                    </li>
                                {% endfor %}
                            </ul>
                        </li>

                        <li>
                            <a href="#" class="has-arrow"><i class="fa fa-sliders"></i><span>Slideri</span></a>
                            <ul>
                                {% for lang in languages.available %}
                                    <li>
                                        <a href="{{ path('sliders_list',{'lang': lang}) }}"><img
                                                    src="{{ asset('build/images/admin/flags/'~lang~'.png') }}"
                                                    class="nav-item-flag">
                                            <span>{{ languages[lang].name }}</span></a>
                                    </li>
                                {% endfor %}
                            </ul>
                        </li>
                        {% if enable_blog %}
                            <li>
                                <a href="#" class="has-arrow"><i class="fa fa-book"></i><span>Aktuelno</span></a>
                                <ul>
                                    {% for lang in languages.available %}
                                        <li>
                                            <a href="{{ path('blogs_list',{'lang': lang}) }}"><img
                                                        src="{{ asset('build/images/admin/flags/'~lang~'.png') }}"
                                                        class="nav-item-flag">
                                                <span>{{ languages[lang].name }}</span></a>
                                        </li>
                                    {% endfor %}
                                </ul>
                            </li>
                            <li>
                                <a href="#" class="has-arrow"><i class="fa fa-book"></i><span>Aktivnosti</span></a>
                                <ul>
                                    {% for lang in languages.available %}
                                        <li>
                                            <a href="{{ path('activities_list',{'lang': lang}) }}"><img
                                                        src="{{ asset('build/images/admin/flags/'~lang~'.png') }}"
                                                        class="nav-item-flag">
                                                <span>{{ languages[lang].name }}</span></a>
                                        </li>
                                    {% endfor %}
                                </ul>
                            </li>
                        {% endif %}
                        <li>
                            <a href="{{ path('gallery_list',{'lang': 'en' }) }}"><i class="fa fa-image"></i><span>Galerije</span></a>
                        </li>

                        <li>
                            <a href="#" class="has-arrow"><i class="fa fa-file"></i><span>Dokumenta</span></a>
                            <ul>
                                {% for lang in languages.available %}
                                    <li>
                                        <a href="{{ path('docs_list',{'lang': lang}) }}"><img
                                                    src="{{ asset('build/images/admin/flags/'~lang~'.png') }}"
                                                    class="nav-item-flag">
                                            <span>{{ languages[lang].name }}</span></a>
                                    </li>
                                {% endfor %}
                            </ul>
                        </li>
                        <li class="header">Sistem</li>
                        <li>
                            <a href="{{ path('users_all_users') }}"><i class="fa fa-user"></i>
                                <span>Korisnici</span></a>
                        </li>
                    </ul>

                </nav>
            </div>
        </div>

        <!-- Main body part  -->
        <div id="main-content">
            <div class="container-fluid">
                {% block body %}{% endblock %}
            </div>
        </div>
    </div>
</div>

{% if hasWysiwyg|default(0) %}
    {{ include("admin/tinymceFileUpload.twig") }}
{% endif %}

{{ encore_entry_script_tags('admin') }}
{{ encore_entry_script_tags('tables') }}

{% block javascripts %}{% endblock %}
{% if hasWysiwyg|default(0) %}
    <script src="{{ asset('build/vendor/tinymce/jq/jquery.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('build/vendor/tinymce/tinymce.min.js') }}"></script>
    <script type="text/javascript">
        window['TINYMCE_PATH'] = '{{ asset('build/vendor/tinymce/jquery.tinymce.min.js') }}';
        window['TINYMCE_CONTENT_CSS'] = '{{ asset('build/vendor/tinymce/wysiwyg-reset.css') }}';
        window['TINYMCE_DEV'] = {{ is_granted('ROLE_DEVELOPER') ? 1 : 0 }};
    </script>
    <script type="text/javascript" src="{{ asset('build/vendor/tinymce/tinymce.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('build/vendor/tinymce/jquery.tinymce.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('build/vendor/tinymce/tinymce-init.js') }}"></script>
{% endif %}
</body>
</html>

字符串
下面是我的create.html.twig文件，其中包含表单（我使用了select 2文档中给出的示例）：

{% extends 'admin/template.html.twig' %}
{% form_theme form 'bootstrap_4_layout.html.twig' %}
{% set hasWysiwyg = true %}
{% block title %}Kreirajte novu stranicu{% endblock %}

{% block body %}
    <div class="row pt-2">
        <div class="col-lg-12 col-md-12 col-12">
            <div class="card">
                <div class="header">
                    <h2>Kreirajte novu stranicu
                        {% if lang is defined %}
                            <span class="pl-2">
                                        <img src="{{ asset('build/images/admin/flags/'~lang~'.png') }}" alt="lang"
                                             class="nav-item-flag">
                                        {{ languages[lang].name }}
                                    </span>
                        {% endif %}
                    </h2>
                </div>
                <div class="body">
                    {{ form_start(form, {'attr': {'novalidate': 'novalidate'}} ) }}

                    {{ form_row(form.title, { 'label' : 'Naslov'}) }}
                    {{ form_row(form.subtitle, { 'label' : 'Podnaslov'}) }}
                    {{ form_row(form.text, { 'label' : 'Sadržaj'}) }}
                    {{ form_row(form.children, { 'label' : 'Podstranice'}) }}

                    <select class="js-example-basic-multiple" name="states[]" multiple="multiple">
                        <option value="AL">Alabama</option>
                        <option value="WY">Wyoming</option>
                        <option value="IL">Illinoise</option>
                    </select>

                    <button type="submit" class="btn btn-primary">Kreirajte stranicu</button>
                    <a href="{{ path('pages_list',{'lang':lang}) }}" class="btn btn-default">Nazad</a>

                    {{ form_end(form) }}
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    <script>
        $(document).ready(function() {
            $('.js-example-basic-multiple').select2();
        });
    </script>
{% endblock %}

型
这是它在我的网站上的显示方式。正如你所看到的，它没有正确显示，我不确定我错过了什么部分.
Image of the select2 form in my CMS
下面是我的TextPage实体的表单：

<?php

    namespace App\Form;

    use App\Entity\TextPage;
    use Symfony\Bridge\Doctrine\Form\Type\EntityType;
    use Symfony\Component\Form\AbstractType;
    use Symfony\Component\Form\Extension\Core\Type\TextType;
    use Symfony\Component\Form\FormBuilderInterface;
    use Symfony\Component\OptionsResolver\OptionsResolver;

    class TextPageType extends AbstractType
    {
        public function buildForm(FormBuilderInterface $builder, array $options): void
        {
            $builder
                ->add('title', TextType::class)
                ->add('subtitle', TextType::class)
                ->add('text', WysiwygType::class)
                ->add('children', EntityType::class, [
                    'class'        => TextPage::class,
                    'choice_label' => 'title',
                    'multiple'     => TRUE,
                    'expanded'     => FALSE
                ]);
        }

        public function configureOptions(OptionsResolver $resolver): void
        {
            $resolver->setDefaults([
                                       'data_class' => TextPage::class,
                                   ]);
        }
    }

型
我真的很感激你的帮助！

jquery

1条答案

按热度按时间
yzuktlbb

yzuktlbb1#

我修复了这个问题。这是我初始化和声明CDN的方式。CDN应该在jQuery之后初始化。

赞(0）分享  回复(0）举报  2023-11-17
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com