twitter bootstrap - jQuery is not working with Chaplin -


i working in backbone framework - chaplin using following list of files:

following of code block in main.js:

paths: {         jquery: 'vendors/jquery/jquery',         underscore: 'vendors/underscore/underscore',         backbone: 'vendors/backbone/backbone',         chaplin: 'vendors/chaplin-0.9.0',                 bootstrap: 'vendors/bootstrap/js/bootstrap.min',                 jqtriggers: 'lib/jquery-triggers'     },  shim: {         underscore: {             exports: '_'         },         backbone: {             deps: ['jquery','underscore'],             exports: 'backbone'         },         bootstrap: {             deps: ['jquery']         },                 jqtriggers: {             deps: ['jquery']         }     }  

following contents in jquery-triggers.js

define(['jquery'], function($) {     $('.dropdown-toggle').dropdown();   }); 

following code block of template file using bootstrap framework:

<div class="navbar navbar-inverse nav">         <div class="navbar-inner">             <div class="container">                 <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">                     <span class="icon-bar"></span>                     <span class="icon-bar"></span>                     <span class="icon-bar"></span>                 </a>                 <a class="brand" href="/">project name</a>                  <div class="nav-collapse collapse">                   <ul class="nav">                       <li class="divider-vertical"></li>                       <li><a href="#"><i class="icon-home icon-white"></i> home</a></li>                                         </ul>                   <div class="pull-right">                     <ul class="nav pull-right">                         <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">welcome, user <b class="caret"></b></a>                             <ul class="dropdown-menu">                                 <li><a href="/user/preferences"><i class="icon-cog"></i> preferences</a></li>                                 <li><a href="/help/support"><i class="icon-envelope"></i> contact support</a></li>                                 <li class="divider"></li>                                 <li><a href="/auth/logout"><i class="icon-off"></i> logout</a></li>                             </ul>                         </li>                     </ul>                   </div>                 </div>             </div>         </div>     </div> 

problem: drop-down 'dropdown' menu not working.

i guess! jquery-triggers.js not loading. because not able see gets loaded on chrome / firefox firebug network / net respectively.

i tried including jquery-triggers.js file in index.html page after require.js inclusion did not worked jquery-triggers.js files gets loaded early.

pass jqtriggers required array whole application.

it loaded everywhere.

require(['application', 'routes', 'jqtriggers'],    function (application, routes) {      var app = new application({      routes: routes,      controllersuffix: '-controller'    });           }); 

Comments

Popular posts from this blog

java - nested exception is org.hibernate.exception.SQLGrammarException: could not extract ResultSet Hibernate+SpringMVC -

sql - Postgresql tables exists, but getting "relation does not exist" when querying -

asp.net mvc - breakpoint on javascript in CSHTML? -