jQuery-QueryBuilder
jQuery-QueryBuilder copied to clipboard
mistic100
Bootstrap 4 support
All other aspects of the QueryBuilder, except Plugins, are working I have already included the following javascript libraries on my page
<script src="js/jQuery.extendext.js"></script>
<script src="js/doT.js"></script>
<script src="js/moment.js"></script>
<script src="js/tether.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/query-builder.js"></script>
Bootstrap version being used is Bootstrap v4.0.0-alpha.2 (http://getbootstrap.com)
My QueryBuilder init looks as follows:
$('#builder').queryBuilder({
plugins: ['bt-tooltip-errors'],
filters: [{
id:"datetime",
label:"datetime",
type:"datetime",
plugin: "datetimepicker"
}]
});
Error received: "Bootstrap Tooltip is required to use "bt-tooltip-errors" plugin"
I had to edit your message with proper syntax, take a look here https://guides.github.com/features/mastering-markdown/#GitHub-flavored-markdown
Thanks a lot for the quick response.
I have now switched to Bootstrap v3.3.7 (http://getbootstrap.com) and the previous error went away. But I am now getting a different error
Uncaught TypeError: $inputs[filter.plugin] is not a function
at QueryBuilder.createRuleInput (query-builder.js:940)
at QueryBuilder.updateRuleFilter (query-builder.js:962)
at Model.update (query-builder.js:652)
at Model.dispatch (jquery-1.10.2.js:5095)
at Model.elemData.handle (jquery-1.10.2.js:4766)
at Object.trigger (jquery-1.10.2.js:5007)
at init.triggerHandler (jquery-1.10.2.js:5697)
at Model.trigger (query-builder.js:2253)
at Rule.set [as filter] (query-builder.js:2309)
at HTMLSelectElement.
This is probably because "datetimepicker" is not loaded when the builder loads
Apart from these javascript libraries, do I need anything else to make sure the datetimepicker is loaded? (I am using jQuery v1.12.3)
<script src="js/jquery.min.js"></script>
<script src="js/jQuery.extendext.js"></script>
<script src="js/doT.js"></script>
<script src="js/moment.js"></script>
<script src="js/tether.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/query-builder.js"></script>
I don't see datetimepicker in your list.... You do know it's not part of the official bootstrap right ?
Please stop commenting "+1", there is a reaction button for this kind of "info". Plus it won't speedup things, at all.
We are planning to use this library but we are using bootstrap 4. Could you give an update on when you are planning to support bootstrap 4? (I could not see any information about this after february...)
Thank you for your work!
Best regards,
Vincent
Still "not planned". Contributions are welcomed.
And people already had it working, only the plugins specifically done for BT 4 are not working.
Thanks for the quick update!
If we are going with your plugin I would be happy to contribute!
Regards,
Vincent
Boostrap 4 is final now: https://blog.getbootstrap.com/2018/01/18/bootstrap-4/, still no plans @mistic100?
So it's been a few months since boostrap 4 came out, already at 4.1.
Most new projects are now using this as default. Any new ideas on supporting BS4?
@alexqhj please read https://github.com/mistic100/jQuery-QueryBuilder/issues/432#issuecomment-350654408
Hello ,
I am using this plugin in Angular 4 , I have install plugin for Bootstrap , Version 3.3.7,Still it gives me an error RROR Error: Bootstrap Tooltip is required to use "bt-tooltip-errors" plugin.
Please suggest solution
ive JUST tried to include querybuilder into a bs4 project now... getting the same error
I've managed to port the tooltips code for bootstrap 4 - it's a pretty simple fix
The current version is failing because it's checking for a fixTitle method that no longer exists in bootstrap 4 as a public method - they changed it to _fixTitle but you can still call it
just search for fixTitle in the .js file and replace them with _fixTitle instead and it all works
if (!$.fn.tooltip || !$.fn.tooltip.Constructor || !$.fn.tooltip.Constructor.prototype._fixTitle) { Utils.error('MissingLibrary', 'Bootstrap Tooltip is required to use "bt-tooltip-errors" plugin. Get it here: http://getbootstrap.com'); }
and
node.$el.find(QueryBuilder.selectors.error_container).eq(0)
.tooltip(options)
.tooltip('hide')
.tooltip('_fixTitle');
Would it be a good idea to roll this into a tiny pull request, so it can be fixed in the "official" version? It's exactly the type of small fix in a dependency that is easily overlooked after an upgrade...
I took a quick stab at trying to make it work with bootstrap 4.2. I did the following which seems to be working
$(function(){
var jqueryQueryBuilder = $('#filters');
var jqueryQueryBuilderDom = jqueryQueryBuilder.queryBuilder({
allow_empty: true,
filters: [/* Add filters here */],
rules: {
condition: 'AND',
rules: []
},
icons: {
add_group: 'fas fa-plus-circle',
add_rule: 'fas fa-plus',
remove_group: 'fas fa-minus-square',
remove_rule: 'fas fa-minus-circle',
error: 'fas fa-exclamation-triangle',
sortable: 'fas fa-exclamation-triangle'
},
templates: {
group: '\
<div id="{{= it.group_id }}" class="rules-group-container"> \
<div class="rules-group-header"> \
<div class="btn-group btn-group-sm float-right group-actions" role="group"> \
<button type="button" class="btn btn-success" data-add="rule"> \
<i class="{{= it.icons.add_rule }}"></i> {{= it.translate("add_rule") }} \
</button> \
{{? it.settings.allow_groups===-1 || it.settings.allow_groups>=it.level }} \
<button type="button" class="btn btn-success" data-add="group"> \
<i class="{{= it.icons.add_group }}"></i> {{= it.translate("add_group") }} \
</button> \
{{?}} \
{{? it.level>1 }} \
<button type="button" class="btn btn-danger" data-delete="group"> \
<i class="{{= it.icons.remove_group }}"></i> {{= it.translate("delete_group") }} \
</button> \
{{?}} \
</div> \
<div class="btn-group btn-group-sm group-conditions" role="group"> \
{{~ it.conditions: condition }} \
<label class="btn btn-primary"> \
<input type="radio" name="{{= it.group_id }}_cond" value="{{= condition }}"> {{= it.translate("conditions", condition) }} \
</label> \
{{~}} \
</div> \
{{? it.settings.display_errors }} \
<div class="error-container"><i class="{{= it.icons.error }}"></i></div> \
{{?}} \
</div> \
<div class="rules-group-body"> \
<div class="rules-list"></div> \
</div> \
</div>',
rule: '\
<div id="{{= it.rule_id }}" class="rule-container"> \
<div class="rule-header"> \
<div class="btn-group btn-group-sm float-right rule-actions" role="group"> \
<button type="button" class="btn btn-danger" data-delete="rule"> \
<i class="{{= it.icons.remove_rule }}"></i> {{= it.translate("delete_rule") }} \
</button> \
</div> \
</div> \
{{? it.settings.display_errors }} \
<div class="error-container"><i class="{{= it.icons.error }}"></i></div> \
{{?}} \
<div class="rule-filter-container"></div> \
<div class="rule-operator-container"></div> \
<div class="rule-value-container"></div> \
</div>'
}
});
// Remove the form-inline class the the library force you into using https://github.com/mistic100/jQuery-QueryBuilder/blob/73cb350b57610d2632e1eda4bb52c27195a303af/src/main.js#L137
jqueryQueryBuilder.removeClass('form-inline');
});
.hide {
display: none !important;
}
I'll update this code if I find a better way
This function is found in the src directory. I'm not a javascript guru. What needs to be done to get these changes applied in the dist? Would be great if this component would work under BS4 by default. I managed to get it working by modifying dist directly. One (minor) change is needed to get fontawesome to work is that fas should be fa like
add_group: 'fa fa-plus-circle',
add_rule: 'fa fa-plus',
remove_group: 'fa fa-minus-square',
remove_rule: 'fa fa-minus-circle',
error: 'fa fa-exclamation-triangle',
sortable: 'fa fa-exclamation-triangle'
@creatapps, thanks for your great work.
@creatapps and @aducom , thanks you so much. I was able to quickly add support of Bootstrap 4 without loosing extra time.
One note. I added some styles to fix the layouts issues when using 'between' operator (2 fields in rule value container.)
.rule-value-container { .form-control { @include media-breakpoint-up(md) { display: inline-block; width: auto; vertical-align: middle; } } }
Here's my solution:
/* Mimic .fa */
.glyphicon {
display: inline-block !important;
font: normal normal normal 14px/1 FontAwesome !important;
font-size: 14px !important;
font-size: inherit !important;
text-rendering: auto !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
}
/* Mimic .fa-check-square-o */
.glyphicon-check:before {
content: '\f046';
}
/* Mimic .fa-plus */
.glyphicon-plus:before {
content: '\f067';
}
/* Mimic .fa-plus-circle */
.glyphicon-plus-sign:before {
content: '\f055';
}
/* Mimic .fa-random */
.glyphicon-random:before {
content: '\f074';
}
/* Mimic .fa-times */
.glyphicon-remove:before {
content: '\f00d';
}
/* Mimic .fa-sort */
.glyphicon-sort:before {
content: '\f0dc';
}
/* Mimic .fa-square-o */
.glyphicon-unchecked:before {
content: '\f096';
}
/* Mimic .fa-warning */
.glyphicon-warning-sign:before {
content: '\f071';
}
.rules-group-header label.btn {
cursor: pointer;
}
/* My custom CSS (Feel free to ignore) */
.query-builder .rules-group-container {
min-height: 20px;
padding: 19px;
margin-bottom: 10px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 14px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
width: 100%;
}
/* Not needed when using Font-Awesome 4.7.. but you will need it with v5 */
/*.pull-right {
float:right;
}*/
And you can find a JS Fiddle here: https://jsfiddle.net/pbauzhmw/2/
Note that if you're using Font Awesome 5, you will need to uncomment the pull-right class above and change the glyphicon class to the following:
.glyphicon {
font-family: 'Font Awesome 5 Pro';
font-weight: 300;
}
Enjoy!
I started to upgrade the project for BootStrap 4 in my fork. I will create a merge request as soon as I finished and tested the code. Till this time stay tuned on my git fork: https://github.com/Tailor993/jQuery-QueryBuilder
@auroraeosrose's answer of replacing fixTitle with _fixTitle works for Bootstrap 5 as well.
@mistic100 Could you please provide an update on when you are planning to support bootstrap 4 as well?
My answer didn't change : not planned, please stop asking.
Query Builder will probably drop Bootstrap entirely before begin compatible with v4 or v5, see #279
That said, this lib is not in my priorities at all, anyone can fork it and take over the developement if willing to.
Amazing! The answer on the linked Stack Overflow answer on #279 is from me :)
I think that there are a handful of answers in this issue that already have the updates to basically make QueryBuilder compatible with Bootstrap 5. @mistic100, I understand that you said that you are thinking about dropping Bootstrap, but there doesn't really seem to be any talk yet about what it would be replaced with.
Boostrap is still quite popular with many devs. I know myself I am working on a BS5/jQuery app that is using jQuery QueryBuilder (I also wrote https://github.com/timgws/QueryBuilderParser/ which is a library that gets ~ 100 downloads per day, which has a fairly hard dependency on this project).
Would you be happy to add me as a contributor to the project, to try and merge in some of the work that @Tailor993 and @gordon-matt and @CrestApps have already done, and release a new major version?
We would need to drop support for IE Classic (which is fine, Microsoft themselves don't even support it anymore for Office 365) because the new Bootstrap does not support it.
When I say drop Bootstrap I mean remove the dependency and use its own style. Of course it should be compatible with Bootstrap plugins (both v4 using jQuery and standalones for v5).
I also want to drop jQuery requirement as opposed to what I said in the other issue (but that was 4 years ago).
Of course that's a long term plan I have currently no time to start.
I'll get in touch and see we can do @timgws
I think that bootstrap is still a very well-used library among web developers. JQuery dependency has been dropped in BS5 too. As Jquery is also still used a lot (I know that there are not a lot of new developments, but if it is good, then why change), but the lib is still very useful, all can be done in bare JavaScript, so that's no real issue. I do hope that new development will at least keep the possibility to be compatible with bootstrap. That is an issue for many devs, maintenance of themes is way more easy then maintaining individual css files. But imho of course. If there is some testing involved, I don't mind putting some time in.