Bootstrap error in grails 3.3.2

Question

Previously i was using Bootstrap with Grails 2.5.1 and it was working fine , now I'm using it with Grails 3.3.2 i'm getting the below error in Chrome inspect while accessing the index.gsp:

 Uncaught Error: Bootstrap's JavaScript requires jQuery

the BootStrap files found in assets\javascripts\bootStrap\bootstrap.min.js and assets\stylesheets\bootStrap\bootstrap.min.css

here is index.gsp:

    <!doctype html>
<html>
<head>
    <meta name="layout" content="mainBS"/>
    <title>Welcome to Grails</title>

</head>
<body>

    <content tag="nav">
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Application Status <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">Environment: ${grails.util.Environment.current.name}</a></li>
                <li><a href="#">App profile: ${grailsApplication.config.grails?.profile}</a></li>
                <li><a href="#">App version:
                    <g:meta name="info.app.version"/></a>
                </li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Grails version:
                    <g:meta name="info.app.grailsVersion"/></a>
                </li>
                <li><a href="#">Groovy version: ${GroovySystem.getVersion()}</a></li>
                <li><a href="#">JVM version: ${System.getProperty('java.version')}</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Reloading active: ${grails.util.Environment.reloadingAgentEnabled}</a></li>
            </ul>
        </li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Artefacts <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">Controllers: ${grailsApplication.controllerClasses.size()}</a></li>
                <li><a href="#">Domains: ${grailsApplication.domainClasses.size()}</a></li>
                <li><a href="#">Services: ${grailsApplication.serviceClasses.size()}</a></li>
                <li><a href="#">Tag Libraries: ${grailsApplication.tagLibClasses.size()}</a></li>
            </ul>
        </li>

    </content>

    <div class="svg" role="presentation">
        <div class="grails-logo-container">
            <asset:image src="grails-cupsonly-logo-white.svg" class="grails-logo"/>
        </div>
    </div>

    <div id="content" role="main">
        <section class="row colset-2-its">
            <h1>Welcome to Grails</h1>

            <p>
                Congratulations, you have successfully started your first Grails application! At the moment
                this is the default page, feel free to modify it to either redirect to a controller or display
                whatever content you may choose. Below is a list of controllers that are currently deployed in
                this application, click on each to execute its default action:
            </p>

            <div id="controllers" role="navigation">
                <h2>Available Controllers:</h2>
                <ul>
                    <g:each var="c" in="${grailsApplication.controllerClasses.sort { it.fullName } }">
                        <li class="controller">
                            <g:link controller="${c.logicalPropertyName}">${c.fullName}</g:link>
                        </li>
                    </g:each>
                </ul>
            </div>
        </section>
    </div>

</body>
</html>

also all the images on this page are not showing too, i added this to build.gradle , but didn't work :

   assets {
    minifyJs = true
    minifyCss = true
    includes = ["stylesheets/*"]
    includes = ["javascripts/*"]
    includes = ["images/*"]
    includes = ["fonts/*"]  
}

anything i'm missing here?

score 1 · Answer 1 · answered Jan 15 '18 at 05:34

1

Make sure the hierarchy of js inclusions is as below

answered Jan 15 '18 at 05:34

aRise

139
9

edited the `application.js` but still the same results – Sherif Jan 15 '18 at 16:09
check in firebug if all the necessary js files are loaded upon web load. – aRise Jan 16 '18 at 08:08
i'm using `chrome inspect` is firebug same as it ? – Sherif Jan 18 '18 at 11:34

score 0 · Answer 2 · answered Jan 14 '18 at 15:49

0

You r missing jQuery js which must be included before any other script like bootstrap.js

answered Jan 14 '18 at 15:49

user2018054

11
1

Bootstrap error in grails 3.3.2

2 Answers2