selectize.js reload dropdown - javascript

I have a dropdown with id "selectCountry" filled by ajax and on success I just bind the Selectize.
$('#selectCountry').selectize({
create: true,
sortField: 'text'
});
When I rebind my original dropdown by ajax and try to reload/rebind or refreshed the old selectize auto complete box on success, there would be no change on old list.
Is there any way to reload or refresh selectize dropdown? I had try "clearOptions()" and "refreshOptions()".
P.S, I don't want to directly bind the selectize from ajax.
OK, now I am adding working example for this issue on jsfiddle
Please help me :( any suggestion would be great for me.
Thanks alot

Some how, I found the answer and its working here
just add this line of code and its working.
$('#select-tools').selectize()[0].selectize.destroy();

Looks like you also opened an issue on the project, which isn't, IMHO, a good usage of the issues of the project.
I answered there, I will repeat the answer here in case it can be useful to other people.
You should not re-create the Selectize component out of the original tag. You should use it to update its options, using clearOptions() as you guessed, then addOption() (despite the singular, it accepts an array).
I updated your fiddle (+1 for making one) to show this: https://jsfiddle.net/m06c56y0/20/
The relevant part is:
var selector;
$('#button-1').on('click', function () {
selector = $('#select-tools').selectize({
maxItems: null,
valueField: 'id',
labelField: 'title',
searchField: 'title',
options: [{
id: 1,
title: 'Spectrometer',
url: 'http://en.wikipedia.org/wiki/Spectrometers'
}, {
id: 2,
title: 'Star Chart',
url: 'http://en.wikipedia.org/wiki/Star_chart'
}],
create: false
}).data('selectize');
});
$('#button-2').on('click', function () {
console.log(selector);
selector.clearOptions();
selector.addOption([{
id: 1,
title: 'Spectrometer',
url: 'http://en.wikipedia.org/wiki/Spectrometers'
}, {
id: 3,
title: 'Electrical Tape',
url: 'http://en.wikipedia.org/wiki/Electrical_tape'
}]);
});

You can also do this:
$('#whateverYouCalledIt').selectize()[0].selectize.clear();
for just clearing what has been selected. It will not clear your select list.

Related

How can I collapse only one each time using #coreui-react?

Using the component AppSidebarNav, is it possible to only collapse once each time? I don't find anything in the documentation about that, some one already come to this problem?
my problem is: I have a lot of buttons with "childrens" (can collapse), and if the user click in serious buttons create a giant scroll bar, so how can I do with this component? Or I need to try another component?
I try to use the attributes but still not work.
{
name: 'user',
icon: 'fa fa-building',
children: [
{
name: 'Lista',
url: '/user',
icon: 'fa fa-bars',
atributes:{"data-target":"toggle"}
},
{
name: 'Adicionar',
url: '/user/new',
icon: 'fa fa-plus',
atributes:{"data-target":"toggle"}
},
],
},
I am using coreUI in a project and the AppSiderNav did not work well when I inserted a json query as a parameter to create the AppSideNav items .. I changed that component by MetisMenu .. and it works well ...

How can I drag jqgrid edit form properly?

When I drag a edit form, the position of the form is not valid.
Always it starts from position (0,0) to the window.
Its position is not relative to mouse cursor position.
How can I fix this?
These are my code.
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
$("#jqGrid").jqGrid({
url: url,
mtype: "GET",
postData: data,
datatype: "jsonp",
colModel: [
{ label: 'd_id', name: 'd_id', width: 15, key: true, hidden: true},
{ label: 'driver', name: 'd_name', width: 30, align:"center", editable: true, editoptions: {size: 40} },
{ label: 'phone', name: 'd_phone', width: 30, align:"center", editable: true, editoptions: {size: 40} },
{ label: '', name: '' }
],
viewrecords: true,
autowidth: true,
height: '100%',
rownumbers: true,
rownumWidth: 25,
rowNum: 20,
editurl: g_base_url + 'driver/edit',
pager: "#jqGridPager",
loadError : function(xhr,st,err) {
},
loadComplete: function () {
},
onCellSelect: function(rowid, iCol, cellcontent, e) {
}
});
and my jqgrid version is 4.8, jquery version is jquery-1.11.2 and jquery-ui version is 1.11.4.
please visit jqgrid demo and click edit button ("+" symbol in the page bar) and drag edit form serveral times. You can find its position always starts at pos (0,0).
demo link is http://www.guriddo.net/demo/guriddojs/edit_add_delete/edit_template/index.html
The problem which you describes seems be a bug in Guriddo jqGrid JS 4.8.x. I tried other demos and many from there have the same problem. So I would recommend you to post bug report to Guriddo forum at least if you purchased the licence for Guriddo jqGrid JS.
I develop free fork of jqGrid under the name free jqGrid (see the readme and the wiki). You can try it directly from CDN. If you uses grid inside of jQuery UI modal dialog then you should use the latest code posted after publishing free jqGrid 4.8. The problem was reported in the answer and I included new option onTop option in free jqGrid.
$.jgrid.jqModal = $.jgrid.jqModal || {};
$.extend(true, $.jgrid.jqModal, {toTop: true});
So you can use for example the URLs http://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.css, and http://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js (the locales like http://cdn.jsdelivr.net/free-jqgrid/4.8.0/js/i18n/grid.locale-en.js or http://rawgit.com/free-jqgrid/jqGrid/master/js/i18n/grid.locale-en.js are optional in free jqGrid).
I will try later to modify the code of dialogs used by jqGrid so that the situation where onTop: true will be detected and the option will be set automatically if required. I don't want to make it default because of some reasons. I analyzed the code of jqGrid 4.7 and make many changes. One problem way that all dialogs like Edit form stay in memory in jqGrid. If one close the dialog it will be just hidden. The event handler used in the dialogs, like onClick handler references DOM element of grid and other objects. There are some other disadvantages. So I make so that on closing of dialog in free jqGrid the form will be completely distorted. The default settings toTop: false makes all elements of the grid inclusive all dialogs be created as children of gbox div constructed over the grid. So one can remove from the page all elements created by jqGrid just by removing gbox. The problem is only that the overlay should be probably moved on top of the page (be children of <body>) like the dialog itself if one have the grid inside of another modal dialog. I hope I will find the perfect solution later. Till the time you can just set toTop: true option either for edit form or globally like in the code above.

Auto-File upload after selecting file in Sencha Touch 2.3

I have a Sencha Touch 2.3 application that I am helping develop. One of the features I want to implement is uploading a file that I then do various things with using PHP in the back-end. However, I cannot find a way that works to actually complete the upload (or even show a dialog box to select a file to upload!)
I have a navigation bar that looks like the following:
...
navigationBar: {
docked: 'top',
id: 'mainAdminToolbar',
items: [
{ ...
},
{
align: 'right',
hidden: true,
text: 'Import',
itemId: 'ImportBtn',
}
]
...
In my main controller file, I have the following:
ImportBtn: "adminMain #ImportBtn",
"adminMain #ImportBtn": {
tap: "onImportTap"
},
...
I looked at the a lot of examples (such as this one and this one), but I can get none of them to work. I believe the latter might be for a more updated version of the framework, too, but I cannot update as of right now and have to work with version 2.3
What I want to do is the following:
Have a user click the button
Have a dialog window pop up in which a user can select a file
Have the file auto-upload after being selected
Do various server-side things with the file
How can I achieve this using Sencha Touch 2.3?
Try to use
xtype: 'filefield' and it's 'updatedata' event
To select file you can write something like this
{
xtype: 'filefield',
itemId: 'ImportBtn',
listeners: {
change: function (button, newValue, oldValue, eOpts) {
alert(newValue);
}
}
}
And after selecting the file you can get it with this (It works fine in 2.4)
var file = [your-filefield].getComponent().input.dom.files[0];
Here is more about filefield
http://docs.sencha.com/touch/2.3.0/#!/api/Ext.field.File

Dynamically adding an item to a toolbar in sencha touch

i have a toolbar which is set up like so:
MyApp.Guide.channelbar = new Ext.Toolbar({
items: [
{
text: 'loading...',
ui: 'plain',
disabled: true
}
]
});
It displays on the screen as expected, and looks just fine. So later on, i make a JSONP request and in the callback, i try to remove the loading item and insert a segmented button like so:
MyApp.Guide.channelbar.items.add(
new Ext.SegmentedButton({
name: 'testseg',
items: [{text:'test a'},{text:'test b'}]
}));
Now i'm certain that callback is getting called, because in chrome's console i do the following to confirm that the item has been added:
MyApp.Guide.channelbar.items.items[1].name
But it just doesn't get updated on the screen. What am i missing?
are you calling doLayout after adding the item?
try using the your-classthe update method of the tab panel,this will help you out
easily

EXTJS scope problem

This is a novice question. Hopefully this example can educate myself and others As well as fix my problem.
I have an EXTJS layout that is very similar to the EXTJS complex layout example. A TabPanel is the center piece of this layout. One of the tabs renders a GridPanel that displays some data. I want to click on an Edit icon in the table and open up a separate tab to do the editing.
Here are my issues:
1. If mainTabPnl is defined in view_main.js and the handler in grid.js, how do I add a tab to mainTabPnl? This seems like a scope issue.
2. In the following Firefox line, 't' is undefined. Why?
var t = Ext.getCmp('main-tab-panel');
3. If I try to id my tabs, my whole layout goes haywire. What's happening here?
(see 'center2' tab). I thought that if I could do an Ext.getCmp('center2') I could render something in in from a separate handler.
Thanks for any help on this....
// file: view_main.js
var mainTabPnl = new Ext.TabPanel({
region: 'center',
id: 'main-tab-pnl',
deferredRender: false,
activeTab: 0,
items: [{
contentEl: 'center2',
//id: 'center2', /*!!! screen goes haywire!! why? !!!*/
title: 'Main Panel',
autoScroll: true
}, {
contentEl: 'center1',
title: 'Close Me',
closable: true,
autoScroll: true
}]
})
// file: grid.js
var columns = [{
// Column Headers
//...
},{
header: 'Actions',
id: 'actions',
xtype: 'actioncolumn',
width: 50,
items: [{
icon : '/site_media/icons/application_edit.png',
tooltip: 'Edit Record',
handler: function(grid, rowIndex, colIndex) {
alert("Add-Tab "); // The alert works..
/* but mainTabPnl is not defined */
mainTabPnl.add({
title: 'New Tab',
iconCls: 'tabs',
html: 'Tab Body <br/><br/>',
closable:true
}).show();
}
}];
}];
Collect all your UI initialization code into a single call to Ext.onReady made from a single file. This will ensure that the ExtJS library is fully initialized before you begin building your widgets and that interacting widgets are instantiated in the proper order.
Specific answers:
1: There is no "scoping issue" between multiple JS files pulled into the same page through standard includes. Global symbols defined in each file populate the same window object.
2: 'main-tab-panel' doesn't exist yet at the time of that call. Putting all UI initialization into the same Ext.onReady call will prevent this from happening.
3: You are creating a DOM node with an ID identical to that which you are already using for contentEl.

Categories

Resources