Sanjay Yadav Sanjay Yadav - 17 days ago 7
Javascript Question

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>

Answer

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>
Comments