I am using JQuery QueryBuilder in my HTML page. I have followed the installation guide. My HTML head includes 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 says
query-builder.standalone.js:437 Uncaught TypeError: Cannot set property 'queryBuilder' of undefined
All my bower componenets are installed properly.
What am I doing wrong?
Move the script below the builder div 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
});
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With