I cannot get jQuery QueryBuilder to work in my index.html
Question
I need to use the QueryBuilder plugin from jQuery for my project, so I downloaded the files I needed as specified in the overview web page http://mistic100.github.io/jQuery-QueryBuilder/ I then set up a simple page using the code below but when I run it nothing happens. What am I missing.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery QueryBuilder</title>
<script src="Scripts/doT.js"></script>
<script src="Scripts/jQuery.extendext.js"></script>
<script src="Scripts/query-builder.js"></script>
<script src="Scripts/moment.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/jquery-2.1.4.js"></script>
</head>
<body>
<div id="builder"></div>
<script>
var myFilters = [{
id: 'column1',
label: 'Column 1',
type: 'string'
}, {
id: 'column2',
label: 'Column 2',
type: 'double'
}, {
id: 'column3',
label: 'Column 3',
type: 'boolean'
}];
$('#builder').queryBuilder({
filters: myFilters
});
</script>
</body>
</html>
My project looks like this
4 answers
solution1
2 2015-11-17 17:38:58
I've never used this plugin before, but if it is a JQuery plugin, then the JQuery Library will need to be loaded FIRST. Since the browser will stop and read the entire library before moving on, make sure the JQuery Library appears first. That way, the library is loaded before it tries to load the plugin. Hope that works for you!!!
solution2
2 ACCPTED 2015-11-17 17:41:05
我相信您需要在插件之前加载Jquery。
solution3
0 2016-05-22 21:33:51
You'll need to include Bootstrap, jQuery and the dependencies first so you have to work with:
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/jquery-2.1.4.js"></script>
<script src="Scripts/jQuery.extendext.js"></script>
<script src="Scripts/doT.js"></script>
<script src="Scripts/moment.js"></script>
<script src="Scripts/query-builder.js"></script>
That said - if you use the standalone version:
<script src="Scripts/query-builder.standalone.js"></script>
then you don't have to include:
<script src="Scripts/jQuery.extendext.js"></script>
<script src="Scripts/doT.js"></script>
as those two dependencies are included in the standalone version.
Just make sure you have the standalone version uploaded to your server ;)
Btw - you can best use the minified versions of these scripts to reduce page load times.
solution4
0 2017-02-15 12:08:37
Here is another working way.
- Include all CSS files from jQuery-QueryBuilder\\dist\\css to VS Content folder.
- Add Bootstrap 3+ version css file into VS Content folder.
- Add doT.js, jQuery.extendext.js, moment.js, jquery-3.1.1.min.js and query-builder.standalone.js into VS Scripts folder.
In _layout.cshtml page, add following paths;
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>@ViewBag.Title - My ASP.NET Application</title> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/bootstrap") <script src="~/Scripts/doT.js"></script> <script src="~/Scripts/jQuery.extendext.js"></script> <script src="~/Scripts/moment.js"></script> <link href="~/Content/bootstrap.min.css" rel="stylesheet" /> <script src="~/Scripts/jquery-3.1.1.min.js"></script> <link href="~/Content/query-builder.default.css" rel="stylesheet" /> <script src="~/Scripts/query-builder.standalone.js"></script>
and your view page look like this,
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<body>
<div id="builder"></div>
<script>
var myFilters = [{
id: 'column1',
label: 'Column 1',
type: 'string'
}, {
id: 'column2',
label: 'Column 2',
type: 'double'
}, {
id: 'column3',
label: 'Column 3',
type: 'boolean'
}];
$('#builder').queryBuilder({
filters: myFilters
});
</script>
</body>
and your result should be,
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.