javascript - requirejs timing issue - some bootstrap js doesn't work -
i running odd issue ever since starting use requirejs. issue seems happen on sidebar menu items can expanded see sub-menu items. requirejs module called @ end, before
body
tag, , other js on page works fine, not sidebar menu. appreciated since have been battling days!
layout view:
<body> ...ouput ommited brevity <ul class="nav nav-list"> <li> <a href="#" class="dropdown-toggle"> <i class="menu-icon fa fa-desktop"></i> <span class="menu-text"> devices </span> <b class="arrow fa fa-angle-down"></b> </a> <b class="arrow"></b> <ul class="submenu"> <li> <a href="#" class="dropdown-toggle"> <i class="menu-icon fa fa-caret-right"></i> ca spectrum <b class="arrow fa fa-angle-down"></b> </a> <b class="arrow"></b> </li> </ul> </li> </ul> ...output ommited brevity @rendersection("scripts", required: false) </body>
the "dropdown-toggle" class bootstrap.js uses dropdown behavior.
child view has scripts section rendered @ bottom of layout view:
@section scripts { <script data-main="/scripts/dist/app" src="~/scripts/dist/require.js"></script> <script> var ajaxurl = '@url.content(url)'; require(['app'], function () { require(['casnodes-downtime']); }); </script> }
app.js
requirejs.config({ baseurl: "/scripts/dist/", paths: { "requirelib": "./require", "app": "./app", "main": "./main", "jquery": "./jquery-2.1.4", "jqbsace": "./jqbsace", "datatables": "./jquery.datatables", "moment": "./moment", "momenttz": "./moment-timezone", "momentdf": "./moment-duration-format", "datarangepicker": "./daterangepicker/daterangepicker", "highstock": "./highstock", "highmaps": "./highmaps", "bootstrap": "./bootstrap", "aceconcat": "./aceconcat", "jstz": "./jstz-1.0.4.min", "shared": "./controllers/shared1", "usa": "./us-all", // controller modules "casnodes-chronicnodes": "./controllers/casnodes/chronicnodes", "casnodes-downtime": "./controllers/casnodes/downtime", "casnodes-downnodes": "./controllers/casnodes/downnodes", "casnodes-nodedowntime": "./controllers/casnodes/nodedowntime" }, shim: { "highstock": ["jquery"], "jstz": { exports: "jstz" }, "bootstrap": ["jquery"], "aceconcat": ["bootstrap"], "momentdf": ["moment"], "highmaps": ['jquery'], "usa": ['jquery', 'highmaps'] } }); requirejs(["main"]);
main.js
define([], function () { });
casnodes-downtime module
define(["jquery", "moment", "jstz", "momentdf", "momenttz", "datatables", "highstock", "datarangepicker", "aceconcat"], function ($, moment) { $(document).ready(function () { ...output ommited brevity }); });
you should use either
require(['app','casnodes-downtime'], function () { });
or
require(, function () { require('app'); require('casnodes-downtime'); });
don't mix them up.
Comments
Post a Comment