JQuery QueryBuilder not working

Question

I am using jQuery QueryBuilder on my HTML page. I have completed the installation guide. In my head, HTML has the following

<script src="bower_components/jquery/dist/jquery.min.js"></script> <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script> <script src="bower_components/moment/moment.js"></script> <script src="bower_components/jquery-extendext/jQuery.extendext.js"></script> <link href="bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet" type="text/css" /> <link href="bower_components/jQuery-QueryBuilder/dist/css/query-builder.default.css" rel="stylesheet" type="text/css" /> <script src="bower_components/jQuery-QueryBuilder/dist/js/query-builder.standalone.js"></script> 

My body has

 <div id="builder"></div> 

But when I use

 <script> $('#builder').queryBuilder({ filters: [ ... ] }); </script> 

My Chrome console reports

 query-builder.standalone.js:437 Uncaught TypeError: Cannot set property 'queryBuilder' of undefined 

All components of my bower are installed correctly.

What am I doing wrong?

Answer 1

Move the script under the div builder element

 <div id="builder"></div> <script> $('#builder').queryBuilder({ filters: [{id:1}] // You need to implement this }); </script> 

or use jquery document.ready

  $(document).ready(function(){ $('#builder').queryBuilder({ filters: [{id:1}] // You need to implement this }); })