I can't get any of the ui configs to be responded to. The one that's really irking me is select_limit. This is my tree:
$('#jstree_demo_div').jstree({ 'core': {
'data': [
'Simple root node',
{
'text': 'Root node 2',
'state': {
'opened': true,
'selected': true
},
'children': [
{ 'text': 'Child 1' },
'Child 2'
]
}
],
'ui': {
'select_limit': 1,
"select_multiple_modifier": "alt"
},
'plugins': ['ui']
} });
My tree displays just fine and I can interact with it, I just can't for the life of me to get select_limit to be adhered to. Similarly, select_multiple_modifier isn't getting adhered to either. I must be doing some setup piece wrong, can anyone help?
Thanks!!!
I've answered my own question...jsTree the select_limit feature is no longer supported, and nobody has bothered to update the documentation. There are probably plenty of features that are no longer supported.
Summary: Out of date documentation. Use jsTree at your own risk.
You can use multiple item of the core:
"core": {
"multiple": false
}
Related
In our old version of tinymce we used to have nested dropdown in image_list in insert/edit image plugin, see the attached image. But recently we migrated to tinymce 5.4.2 and since then it's not working.
Old code:
tinymce.init({
selector: 'textarea',
plugins: 'image',
menubar: 'insert',
toolbar: 'image',
image_list: [
{
title: "LearnCenter", menu: [{ title: 'Logo', value: 'Logo' }]
},
{
title: "UserAccount", menu: [{ title: 'Photo', value: 'Photo' }]
}
]
});
Above code is not working anymore so we made changes, see below code:
image_list: [{ title: 'Logo', value: 'Logo' },
{ title: 'Photo', value: 'Photo' }]
But after this code change, nest dropdown is gone. Is there any way by which we can have same functionality that we used to have. See the attached image for expected functionality.
This feature, using TinyMCE 4.x JSON structure, is set to return in TinyMCE 5.5, which, as of the time of posting this, is scheduled to be available later this month.
I have a form with two chained comboboxes. The first chained combobox dictates the values that appear in the second. I have forceSelection:true on the second combobox so that when a user changes the first combo, the second will be set blank because it no longer will be a valid option. The chained combos function as expected but when I load a record into this form using getForm().loadRecord(record) the value for the first combo is set properly but the second is not unless I set forceSelection:false.
The following fiddle should make things pretty clear: sencha fiddle
Clicking "Load Record" should load in Fruits/Apple, but only Fruits is shown. Clicking "Load Record" a second time achieves the desired result. If you comment out forceSelection: true it works as expected but then the chained combos don't function as desired. Is there anything I'm doing wrong here?
It is not so easy. What is happening when you are running form.loadRecord(rec).
you set the FoodGroup combobox
you set the FoodName combobox. BUT the value is not there, because your filter did not switch to appropriate food groups. That is why commenting force selection helps. (That is why commenting filter also help).
turned on the filter of food names. Store now have new values.
You are clicking the button second time. The first combobox value is the same, filters are not trigged (triggered?), you already have appropriate values in the second store and the value is selected.
How to fix:
The fix is ugly. You can listen on store 'refresh' (it means the filters are triggered) and then set the second value (or set the values again).
Ext.define('Fiddle.view.FormModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.fiddle-form-model',
stores: {
foodgroups: {
fields: ['name'],
data: [{
foodgroupname: 'Fruits'
}, {
foodgroupname: 'Vegetables'
}]
},
foods: {
fields: ['foodgroupname', 'foodname'],
filters: {
property: 'foodgroupname',
value: '{selectedFoodgroup.foodgroupname}'
},
data: [{
foodname: 'Apple',
foodgroupname: 'Fruits'
}, {
foodname: 'Banana',
foodgroupname: 'Fruits'
}, {
foodname: 'Lettuce',
foodgroupname: 'Vegetables'
}, {
foodname: 'Carrot',
foodgroupname: 'Vegetables'
}]
}
}
});
Ext.define('Fiddle.view.Form', {
extend: 'Ext.form.Panel',
xtype: 'fiddle-form',
viewModel: {
type: 'fiddle-form-model'
},
title: 'Combos',
items: [{
xtype: 'combo',
itemId: 'FoodGroup', // To access FoodGroup
displayField: 'foodgroupname',
bind: {
store: '{foodgroups}',
selection: '{selectedFoodgroup}'
},
valueField: 'foodgroupname',
forceSelection: true,
name: 'foodgroup',
fieldLabel: 'Food Group',
value: 'Vegetables'
}, {
xtype: 'combo',
itemId: 'FoodName', // To access FoodName
bind: {
store: '{foods}'
},
queryMode: 'local',
forceSelection: true, //COMMENTING THIS OUT ACHIEVES DESIRED LOAD RECORD BEHAVIOR
displayField: 'foodname',
valueField: 'foodname',
name: 'food',
fieldLabel: 'Food',
value: 'Carrot'
}],
buttons: [{
text: 'Load Record',
handler: function (btn) {
// OUR UGLY FIX
var form = btn.up('form'),
foodGroupComboBox = form.down('combobox#FoodGroup'),
foodNameComboBox = form.down('combobox#FoodName'),
record = Ext.create('Ext.data.Model', {
foodgroup: 'Fruits',
food: 'Apple'
});
foodNameComboBox.getStore().on('refresh', function (store) {
form.loadRecord(record);
}, this, {
single: true
})
form.loadRecord(record);
}
}]
});
Ext.application({
name: 'Fiddle',
launch: function () {
var form = new Fiddle.view.Form({
renderTo: document.body,
width: 600,
height: 400
});
}
});
I am using more than one pie chart from amCharts on a single page, when the page is loading the animation is not working, and I want it to work. Below is my code which is used to render chart.
var Piechart132 = AmCharts.makeChart('div132', {
labelsEnabled: false,
autoMargins: false,
marginTop: 0,
marginBottom: 0,
marginLeft: 0,
marginRight: 0,
pullOutRadius: 0,
type: 'pie',
theme: 'dark',
dataProvider: [
{ country: 'Banking', litres: 300000000 },
{ country: 'Carpenter', litres: 349500000000 },
{ country: 'Doctor', litres: 433650000000 },
{ country: 'Gas', litres: 108326000000 },
{ country: 'Mechanic', litres: 366450000000 }
],
outlineThickness: 1,
outlineAlpha: 1,
legend: { enabled: true, valueText : '' },
outlineColor: undefined,
titles: [{ text: 'Industry wise Exposure' }],
valueField: 'litres',
titleField: 'country',
balloon: { fixedPosition: true }
});
One more than I want to mention that same code when I execute on Fiddle, it is working fine, it might be possible that there is any other conflict but I can't find it anyway. I've even tried to insert startDuration and set its value to20` so that at least I can see what the problem is but still nothing.
The pie charts definitely do animate when multiple charts are on the same page, however they might all bog down the browser if they're all initialized at once, leading to a choppy experience where the animation runs too quickly or are so choppy that they appear to not work. You may want to consider a lazy-loading technique in which you use each chart's init event to initialize the next chart after a delay, or the lazy load techniques described in the AmCharts knowledge base links below:
https://www.amcharts.com/kbase/lazy-loading-120-charts-page/
https://www.amcharts.com/kbase/make-the-charts-lazy-initialize-only-when-they-scroll-into-view/
I'm using jsTree as a navigation menu, and after clicking any of the links the page reloads over and over... I've searched all day for an answer to this and would very much appreciate a hand.
$('#NavTreeContainer').jstree({
'core': {
'themes': {
'name': 'default',
'responsive': true,
'stripes': true,
'dots': true,
'icons': false
}
},
'state' : { 'key' : 'navTree' },
'plugins' : [ 'state' ]
}).on('select_node.jstree', function(e, data) {
document.location = data.instance.get_node(data.node, true).children('a').attr('href');
});
$('#ExpandAllNavTreeButton').click(function() {
$('#NavTreeContainer').jstree('open_all');
});
$('#CollapseAllNavTreeButton').click(function() {
$('#NavTreeContainer').jstree('close_all');
});
I was able to get this functionality working by only binding the select node event after the tree state has been restored;
$('#jstree_id').jstree({
"state": { "key": "jstree_id" },
"plugins": ["state"]
}).on('restore_state.jstree', function () {
$('#jstree_id').on('select_node.jstree', function (e, data) {
var href = data.node.a_attr.href;
document.location.href = href;
});
});
If you already solved this I hope it helps someone else.
I'm struggling to get action links into my resource to fulfill HATEOAS.
I would like to create a new resource based on an existing resource and still fulfill a sound hypermedia strategy. In my case, append an existing test request on a generic server side job queue.
My current flow (simplified for clarity) for doing this does not use hypermedia to link the action of actually queuing the test_request (creating a job resource on the jobs collection).
Create test_request resource
POST http://example.org/api/v1/test_request
{
'name': 'Some example tests',
'test': 'test1'
}
201, CREATED
{
'id': 3
'name': 'Some example tests',
'test': 'test1',
'links': [
{
'rel': 'self',
'href': 'http://example.org/api/v1/test_request/3',
'method': 'GET',
},
{
'rel': 'remove',
'href': 'http://example.org/api/v1/test_request/3',
'method': 'DELETE',
}]
}
Generate a job resource
POST http://example.org/api/v1/jobs
{
'type': 'test_request',
'id': 3
}
201, CREATED
{
'id': 12,
'type': 'test_request',
'status': 'new',
'links': [
{
'rel': 'self',
'href': 'http://example.org/api/v1/jobs/12',
'method': 'GET',
},
{
'rel': 'remove',
'href': 'http://example.org/api/v1/jobs/12',
'method': 'DELETE',
}]
}
To fulfill Hypermedia criteria on my REST API I'm really tempted to add an action link on the test_request resource so that a new job resource is created for the same.
Modified test_request representation
{
'id': 3
'name': 'Some example tests',
'test': 'test1',
'links': [
{
'rel': 'self',
'href': 'http://example.org/api/v1/test_request/3',
'method': 'GET',
},
{
'rel': 'remove',
'href': 'http://example.org/api/v1/test_request/3',
'method': 'DELETE',
},
{
'rel': 'http://example.org/rels/queue',
'href': 'http://example.org/api/v1/test_request/3/queue',
'method': 'PUT',
}]
}
So, the first examples are (hopefully) RESTful were my second approach with the queue action are maybe more unRESTful. However, it's really nice to have a link in the test_request representation that clearly states an action to make the next transition.
What's best practice here?
Your question isn't super clear, so i'm gonna go with my interpretation of what you're asking, maybe that can help get an answer.
The root question is a domain question that only you can really answer. Can and should a Test exist without being part of a job? You need to think through your use cases and make a decision. If a test is a weak entity, then you should only allow the creation through the jobs.
Regarding your strive for RESTful architecture. I would suggest eliminating the concept of the id field from your API. The self link is the ID. When you create the job you can provide the collection of links to the tests that you want to be included in the job. Something like
POST http://example.org/api/v1/jobs
{
'type': 'test_request',
'links': [
{
rel : "test",
href : "http://example.org/api/v1/test_request/3",
},
{
rel : "test",
href : "http://example.org/api/v1/test_request/4",
}
]
}
Note: i'm unsure how your hypertext format deals with multiple links for the same relationship...i made a guess.
It's my opinion that Primary Keys and Foreign Keys should never exist in a RESTful API. Links should always be used.