Search code examples
javascriptjqueryalloy-ui

uncaught Reference error YUI is not defined console error

I am using alloyui for fronted , when i trying to use this getting issue.uncaught Reference error YUI is not defined console error. below is code any help. i just updatet this code please look the bellow code .

   <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>{% block title %}Welcome!{% endblock %}</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        {% block stylesheets %}
            <link href="http://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet">
            <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
            <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        {% endblock %}
        <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
        <script>
            YUI().use(
                    'node',
                    'transition',
                    function (Y) {
                        Y.one('.navbar-brand').on(
                                'click', function() {
                                    this.transition(
                                            {
                                                width: '500px'
                                            }
                                    );
                                }
                        );
                    }
            );
        </script>
    </head>
    <body>
        {% block body %}
        <div class="container-fluid">
            <nav class="navbar navbar-default">
                <div class="navbar-header">
                    <a class="navbar-brand" href="{{  path('dashboard.index') }}">NewsDriver</a>
                </div>
                <ul class="nav navbar-nav">
                    <li class="active"><a href="{{  path('dashboard.index') }}">Dashboard</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    {% if is_granted('IS_AUTHENTICATED_FULLY') %}
                        <li><a href="#">{{ app.user.getName() }}</a></li>
                        <li><a href="/logout"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
                    {% else %}
                        <li><a href="/login"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
                    {% endif %}
                </ul>
            </nav>
            {% for flashType, flashMessages in app.session.flashbag.all() %}
                {% for flashMessage in flashMessages %}
                    <div class="alert alert-{{ flashType }}">
                        <button type="button" class="close" data-dismiss="alert">&times;</button>
                        {{ flashMessage }}
                    </div>
                {% endfor %}
            {% endfor %}
            {%  block content %}{%  endblock %}
        </div>
        {% endblock %}
        {% block javascripts %}
            <script src="http://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
            <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
            <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        {% endblock %}
    </body>
</html>
Solution

  • You need to load the aui-min.js script before you run your custom JS code.

    See edited code below:

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>{% block title %}Welcome!{% endblock %}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    {% block stylesheets %}
        <link href="http://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    {% endblock %}
    <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
</head>
<body>
    {% block body %}
    <div class="container-fluid">
        <nav class="navbar navbar-default">
            <div class="navbar-header">
                <a class="navbar-brand" href="{{  path('dashboard.index') }}">NewsDriver</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="{{  path('dashboard.index') }}">Dashboard</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                {% if is_granted('IS_AUTHENTICATED_FULLY') %}
                    <li><a href="#">{{ app.user.getName() }}</a></li>
                    <li><a href="/logout"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
                {% else %}
                    <li><a href="/login"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
                {% endif %}
            </ul>
        </nav>
        {% for flashType, flashMessages in app.session.flashbag.all() %}
            {% for flashMessage in flashMessages %}
                <div class="alert alert-{{ flashType }}">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    {{ flashMessage }}
                </div>
            {% endfor %}
        {% endfor %}
        {%  block content %}{%  endblock %}
    </div>
    {% endblock %}
    {% block javascripts %}
        <script src="http://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    {% endblock %}
    <script>
        YUI().use(
                'node',
                'transition',
                function (Y) {
                    Y.one('.navbar-brand').on(
                            'click', function() {
                                this.transition(
                                        {
                                            width: '500px'
                                        }
                                );
                            }
                    );
                }
        );
    </script>
</body>
</html>