I am using jQuery QueryBuilder plugin. I initiated my queryBuilder then used SQL Parser to set a rule from SQL.
After, I want to set my queryBuilder to read-only which means the queryBuilder will be disabled. You won't be able to add other rules or change the current rule.
Based on documentation, it should be as this but couldn't make it work.
$('#queryBuilder').queryBuilder('setRulesFromSQL', { flags: {
filter_readonly: true,
operator_readonly: true,
value_readonly: true,
no_delete: true },
rules: ["name in ('Alex','Adam')"] });
Any suggestions please what am I doing wrong ? Thank you very much.
$(document).ready(function() {
$('#queryBuilder').queryBuilder({
filters: [
{ id: 'name',
label: 'Name',
type: 'string',
value_separator: ',',
operators: ['in']
}
]
});
// here I set the rule from sql query without ready only feature and it works fine
$('#queryBuilder').queryBuilder('setRulesFromSQL', "name in ('Alex','Adam')");
//Here I want to update the previous method to include read only feature.
//There will be only that rule and you can't change it.
//I couldn't make it work although I believe I did write the correct syntax
$('#queryBuilder').queryBuilder('setRulesFromSQL', { flags: {
filter_readonly: true,
operator_readonly: true,
value_readonly: true,
no_delete: true },
rules: ["name in ('Alex','Adam')"]
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel='stylesheet' href="https://cdn.jsdelivr.net/npm/jQuery-QueryBuilder#2.5.2/dist/css/query-builder.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jQuery-QueryBuilder#2.5.2/dist/js/query-builder.standalone.min.js"></script>
<script src="https://querybuilder.js.org/node_modules/sql-parser-mistic/browser/sql-parser.min.js"></script>
<div id="queryBuilder"></div>
Flags at rule level works for me
https://querybuilder.js.org/#methods
Hopes that helps
Related
I am trying to get a click to open editable content of my dyniamically generated rows in modals, using datatables plugin.
I see an error:
Uncaught TypeError: Cannot read property 'display' of undefined.
I am using the following files apart from jquery and bootstrap.min.js:
<!-- Datatables -> these files are required to make the table headers fixed, sortable etc-->
<link href="../../../vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet">
<link href="../../../vendors/datatables.net-buttons-bs/css/buttons.bootstrap.min.css" rel="stylesheet">
<link href="../../../vendors/datatables.net-fixedheader-bs/css/fixedHeader.bootstrap.min.css" rel="stylesheet">
<link href="../../../vendors/datatables.net-responsive-bs/css/responsive.bootstrap.min.css" rel="stylesheet">
<link href="../../../vendors/datatables.net-scroller-bs/css/scroller.bootstrap.min.css" rel="stylesheet">
My code where I initialize my datatable looks like this:
dtEdit = $('#edit-element').DataTable({
"paging": false,
"info": false,
"bFilter": false,
"bPaginate": false,
retrieve: true,
"processing": true,
columns: [{
'data': 'status'
},
{
'data': '_id'
},
{
'data': 'email'
},
{
'data': 'role'
},
],
responsive: {
details: {
display: $.fn.dataTable.Responsive.display.modal({
header: function ( row ) {
var data = row.data();
return 'Details for '+data[0]+' '+data[1];
}
}),
renderer: $.fn.dataTable.Responsive.renderer.tableAll({
tableClass: 'table'
})
}
}
});
Any pointers please?
P.S. -> I am trying to achieve something like this:
https://datatables.net/extensions/responsive/examples/display-types/bootstrap-modal.html
To fulfill your requirement you should follow the given steps.
1. $(document).ready(function () );i.e. Use jquery DOM when the document is ready.
2. $('.my_button').click(function () );i.e. When you click your button modal should be loaded.
3. $('#mydatatable').DataTable(); i.e. Load the datatable at last inside the body of $(document).ready(function ());
$(document).ready(function ()
{
//When the button is clicked
$('.my_button').click(function () {
//Your code for modal
});<br>
$('#mydatatable').DataTable();
});
I am using to use Datatables to display reports and records. But I am having an issue where the file export buttons and the pagination at the bottom are only showing as links not as buttons.
Here is a screenshot of my screen
This is what I have loaded in my page
<link href="/Vendor/bootstrap/v3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="/Vendor/bootstrap/v3.3.6/js/bootstrap.min.js"></script>
<link href="/Vendor/datatables/v1.10.12/css/dataTables.bootstrap.min.css" rel="stylesheet"/>
<script src="/Vendor/datatables/v1.10.12/js/jquery.dataTables.min.js"></script>
<link href="/Vendor/datatables/v1.10.12/extensions/Buttons/css/buttons.bootstrap.min.css" rel="stylesheet"/>
<script src="/Vendor/datatables/v1.10.12/extensions/Buttons/js/dataTables.buttons.min.js"></script>
<script src="/Vendor/datatables/v1.10.12/extensions/Buttons/js/buttons.flash.min.js"></script>
<script src="/Vendor/datatables/v1.10.12/extensions/JSZip/jszip.min.js"></script>
<script src="/Vendor/datatables/v1.10.12/extensions/pdfmake/build/pdfmake.min.js"></script>
<script src="/Vendor/datatables/v1.10.12/extensions/pdfmake/build/vfs_fonts.js"></script>
<script src="/Vendor/datatables/v1.10.12/extensions/Buttons/js/buttons.html5.min.js"></script>
<script src="/Vendor/datatables/v1.10.12/extensions/Buttons/js/buttons.print.min.js"></script>
Note, that I only want to use the datatable with bootstrap style.
Here is the code that I use to setup the datatable.
$('#reportTable').DataTable({
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
],
columns: [
{ data: 'Category', title: 'Category' },
{ data: 'Svp', title: 'SVP' },
{ data: 'Rvp', title: 'RVP' },
{ data: 'Division', title: 'Division' },
{ data: 'ContactType', title: 'Contact Type' },
{ data: 'TotalRecords', title: 'Total Records' },
]
});
What am I missing here? How can I fix this issue
UPDATED
I fixed the Export buttons but including the following file
Vendor/datatables/v1.10.12/extensions/Buttons/js/buttons.bootstrap.min.js
The only open issue now is the pages at the bottom
You are missing the dataTables.bootstrap.min.js script file include. If you downloaded these files from the official DataTables download page and the file path of the other files can be extrapolated to this one, I'd take a look and see if it exists here:
Vendor/datatables/v1.10.12/js/dataTables.boostrap.min.js
If it doesn't you may have to go back to the download page and make sure you get this script file.
Im using the dojo widget CheckedMultiSelect,how to change the message "0 items(s) selected" to some other message(Ex:Prefrences).
var select = new CheckedMultiSelect({
dropDown: true,
labelText: 'States',
multiple: true,
name: 'state',
onChange: getValues,
required: true
}, "stateSelect");
The label text is set via Dojo's i18n system. The simplest way to override it for an individual select box is to directly modify the resource used to set the label:
select._nlsResources.multiSelectLabelText = 'foo';
You can globally modify the resource by using a loader map to override the nls resource used for CheckBoxMultiSelect widgets. Modify your dojoConfig (or set one up) before loading dojo.js:
<script>
var dojoConfig = {
// ...
map: {
'*': {
'dojox/form/nls/CheckedMultiSelect': 'myApp/someModule'
}
},
// ...
}
</script>
<script src="wherever/dojo.js"></script>
Module myApp/someModule should follow the format of a Dojo nls resource, and contain the same keys under root as the original CheckedMultiSelect nls file:
define({
root: {
multiSelectLabelText: 'foo',
// ...
}
});
In ExtJs 5.1 it is possible to create an Ext.tree.Panel from a Json-object given that the Json-object uses the named values root and children to declare the nesting, for example:
<!-- Example 1 -->
<!DOCTYPE html>
<html>
<head>
<!-- ext imports -->
<script type="text/javascript" language="javascript" src="/ext-5.1.1/build/ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css" href="/ext-5.1.1/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
<script type="text/javascript" src="/ext-5.1.1/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>
<script type ="text/javascript">
Ext.onReady(function(){
var normal_store = {
root:{
expanded: true,
children: [
{ text: "detention", leaf: true },
{ text: "homework", expanded: true, children: [
{ text: "book report", leaf: true },
{ text: "algebra", leaf: true}
] },
{ text: "buy lottery tickets", leaf: true }
]
}
};
console.log(normal_store);
var tree_panel_1 = Ext.create('Ext.tree.Panel', {
title: 'tree_panel_1',
store: normal_store,
rootVisible: true,
renderTo: Ext.getBody()
});
});
</script>
</head>
<body>
</body>
Lets say that I create a string-variable from a xml-file.
Then from the string-variable I create a Json-object.
The only thing I know in advance about the xml-file is, that it is valid xml, but nothing else like tag-names and attributes etc..
I can go from the xml-file to string-variable by using Jquery.
Likewise I can go from string-variable to Json-object by using the Xml-To-Json Library.
Having this Json-Object I have tried to populate an Ext.tree.Panel in a similar fashion as in example 1:
<!-- Example 2 -->
<!DOCTYPE html>
<html>
<head>
<!-- ext imports -->
<script type="text/javascript" language="javascript" src="/ext-5.1.1/build/ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css" href="/ext-5.1.1/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
<script type="text/javascript" src="/ext-5.1.1/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>
<!-- jquery and jsonToXml imports -->
<script type="text/javascript" language="javascript" src="/jquery/jquery-1.11.3.js"></script>
<script src="/xmlToJson/jquery.xml2json.js" type="text/javascript" language="javascript"></script>
<script type ="text/javascript">
Ext.onReady(function(){
//i only know that it is valid xml, but nothing about how many tag types, names, attributes etc.
var xml = $.ajax({type: "GET", url: "path/to/varying.xml", async: false}).responseText;
var json = $.xml2json(xml);
console.log(json);
var tree_panel_1 = Ext.create('Ext.tree.Panel', {
title: 'tree_panel_1',
store: json,
rootVisible: true,
renderTo: Ext.getBody()
});
});
</script>
</head>
<body>
</body>
But, it doesn't show the xml as a tree. I also know why:
ExtJs can only generate such a tree if the Json-object uses the named values root and children to identify the nesting level of the tree which is being produced.
So my questions are:
Question 1: Does anyone know wether it is possible to create trees from general Json-objects in ExtJs using Ext-capabilities like Json-Reader etc. pp.?
If Question 1 is negative: Do I have to write the iteration logic over the Json-object and build the Json-object with the proper named values root and children myself to pass them as a store?
All you need is to convert the result of $.xml2json(xml) (i.e. what you call "general" JSON-object) to JSON object that Ext.tree.Panel can understand — a JSON object with root, children etc. The actual implementation will depend on how your "general" JSON obtained from XML looks like. It will be just a matter of iterating over it and building new JSON. This can be implemented in a custom reader.
I am working on a javascript control for work, and integrating it into a grails plugin. All the plugin simply does is populate the options based on a taglib, which looks like this:
$(document).ready(function() {
var ${name} = $("#${name}").tagInput({
$inputListener: $("#${inputListenerName}"),
$errorHandler: $("#${errorHandler}"),
$domainListener: $("#${domainListenerName}"),
errorClass: "${errorClass}",
validClass: "${validClass}",
caseSensitive: ${caseSensitive},
constraints: {
minSize: ${minSize},
maxSize: ${maxSize},
maxTags: ${maxTags},
validationRegex: "${tagRegex}"
},
errorMessages: {
size: "${sizeErrorMessage}",
regex: "${regexErrorMessage}",
maxTags: "${maxTagsError}"
},
responsive: {
length: ${maxTagLength},
lengthxs: ${maxTagLengthxs},
xsMode: ${xsWidth}
}
});
debugger;
});
Which looks like this when evaluated:
var emailTags = $("#emailTags").tagInput({
$inputListener: $("#invitesInput"),
$errorHandler: $("#inviteErrors"),
$domainListener: $("#null"),
errorClass: "label-danger",
validClass: "label-primary",
caseSensitive: false,
constraints: {
minSize: 1,
maxSize: 255,
maxTags: 100,
validationRegex: "[^#]+#[^#]+\.[^#]+"
},
errorMessages: {
size: "",
regex: "Must be a valid email string.",
maxTags: "You have entered too many recipients. Please send out invites before adding more recipients."
},
responsive: {
length: 50,
lengthxs: 20,
xsMode: 768
}
});
When Chrome hits the debugger statement, I have the correct object. Which is:
tagInput {parseTags: function, clear: function, serialize: function}
If I step out of this, I immediately entry jQuery and my object is instantly turned into
div#emailTags.turningTags
which eventually turns into
<div id="emailTags" name="emailTags" class="turningTags ">…</div>
If it helps, here is the current code for the tagInput object.
https://gist.github.com/anonymous/e785ec24e0c1388cd599
Why is this happening? Why is my object being turned into this HTML element? I have tried changing the name of the variable to no avail, no matter what I change the name of this variable to, it happens every time. I have tried making it a standalone object and not a jQuery function and the same thing STILL keeps happening.