magicSuggest is not updating/refreshing data: on ajax success - magicsuggest

Below is the code i'm using to populate data for magicSuggest box. For the first time it is getting correct values in dropdown but on change of dependent dropdown its not changing its data.
$(document).on("change",".specilitydrop", function() {
var select = $(this);
var newVal = select.val();
//alert(newVal);
$.ajax({
type: 'Post',
url : "<?php echo LIVE_SITE; ?>/users/findSubSplProfile/"+newVal,
success: function (data)
{ $('#subSpecialityData').magicSuggest({
width: 495,
sortOrder: 'value',
selectionPosition: 'bottom',
selectionStacked: true,
displayField: 'value',
data: $.parseJSON(data)
});
}
});
});
Thanks in advance

Calling $('#subSpecialityData').magicSuggest multiple times won't create multiple components. Rather it will keep the same component. If you want to set new data every time, you should delete the component and its associated DOM prior to recreating it.

You should pass data by using magicSuggest's option, instead of ajax callback
$('#subSpecialityData').magicSuggest({
width: 495,
sortOrder: 'value',
selectionPosition: 'bottom',
selectionStacked: true,
displayField: 'value',
method: "post",
data: "users/findSubSplProfile/"+newVal
});

Related

nodejs teradata returns "nodeJava_java_math_BigDecimal{}" instead of decimal value in the resultset?

i am running a simple select query. the code runs fine and its returning the resultset as well showing all the column values which are in character format but showing "nodeJava_java_math_BigDecimal{}" insted of decimal format columns ?
var Teradata = require('node-teradata');
var config = {
url: 'jdbc:teradata://abc.com/database=abab',
username: '****',
password: '****',
driver: './jars/',
minPoolSize: 1,
maxPoolSize: 100,
keepalive: {
interval: 60000,
query: 'SELECT 1',
enabled: true
}
};
var teradata = new Teradata(config);
var sql = "select name,QTY from products where id='700018'";
return teradata.read(sql)
.then(function(response) {
console.log(response);
});
the result its printing on console is:
[{name:'Apple Juice',QTY:nodeJava_java_math_BigDecimal{}}]
You can retype the properties of the returned object with the JavaScript types you know you'll be working with, using methods like Number([...]) or .toString()
return teradata.read(sql)
.then(function(response) {
return response.map(respObj => objExtractor(respObj));
});
function objExtractor(teradataObj) {
return {
name: teradataObj.name.toString(),
QTY: Number(teradataObj.QTY).toFixed(0)
}
}
Quoting CraZySacX from here:
When you get back a node-java wrapped object
(nodeJava_java_math_BigDecimal), you have access to all of the
functions exposed by the Java API in both a sync and async form.
For example, the Java 7 BigDecimal API has a function called intValue
Which in your case would be:
return teradata.read(sql)
.then(function(response) {
response[0].QTY.intValue(function(err, intVal){
var newQTY = intVal;
console.log(newQTY);
}
});

FabricJs: Limit grouping to only 1 level deep - Ungroup all objects before grouping

I do not want the user to be able to group a grouped item within another group. My solution to achieve this is basically when the user clicks on the 'Group' button, I am ungrouping everything and then grouping the selection again.
My problem is that when this happens, the items that are ungrouped, become duplicates. One set on the canvas, and one set within the new group.
Here is a video of what I mean...
https://screencast-o-matic.com/watch/cbXQfa2lJg
Here is my code...
export function groupSelectedItems() {
canvas = document.getElementById("c").fabric;
var activegroup = canvas.getActiveGroup();
var objectsInGroup = activegroup.getObjects();
//Ungroup all items first. This will limit grouping to only one level deep.
objectsInGroup.forEach(function(o) {
if(o.type=="group"){
//ungroup items within this group
var items = o.getObjects();
o.destroy();
canvas.remove(o);
items.forEach(function(i) {
canvas.add(i);
activegroup.addWithUpdate(i)
canvas.renderAll();
});
}
});
//Create the group
activegroup.clone(function(newgroup) {
canvas.discardActiveGroup();
objectsInGroup.forEach(function(object) {
canvas.remove(object);
});
canvas.add(newgroup);
newgroup.setControlsVisibility({'tl': false, 'tr': false, 'bl': false, 'br': false, 'ml': false, 'mr': false, 'mb': false, 'mt': false});
}, ['id', 'componentType', 'shape']);
canvas.renderAll();
}
function groupSelectedItems() {
canvas = document.getElementById("c").fabric;
var activegroup = canvas.getActiveGroup();
activegroup.clone(function(newgroup) {
canvas.discardActiveGroup();
activegroup.forEachObject(function(object) {
canvas.remove(object);
});
newgroup.forEachObject(function(object) {
if (object.type == 'group') {
object.destroy();
newgroup.removeWithUpdate(object);
object.forEachObject(function(obj) {
newgroup.addWithUpdate(obj);
})
}
});
canvas.add(newgroup);
}, ['id', 'componentType', 'shape']);
}
Check all the object in group, if any group object is present then ungroup all the object and then add to canvas.

selectize.js dynamically adding options to select

I am trying to use selectize.js library. On document.ready i make a ajax call and get the options to add into select list.
Here is the html for select tag
<select id="select-country-field" name="country-field-list[]" multiple class="demo-default" style="width:50%" placeholder="Select a state...">
<option value="">Select ...</option>
</select>
and here is how I add options on $(document).ready
var $select = $(document.getElementById('select-country-field')).selectize(options);
var selectize = $select[0].selectize;
selectize.addOption({value:1,text:'foo'});
selectize.addItem(1);
selectize.refreshOptions();
I looked at the following question asked but that did not get it to work
Selectize.js manually add some items
Any help?
You can just move your ajax call into selectize load method like that:
$('#select-country-field').selectize({
valueField: 'country',
labelField: 'country',
searchField: 'country',
options: [],
load: function(query, callback) {
if (!query.length) return callback();
$.ajax({
url: 'http:// ajax-call-url',
type: 'GET',
dataType: 'json',
data: {
country: query,
},
error: function() {
callback();
},
success: function(res) {
callback(res);
}
});
}
});
'http:// ajax-call-url' should return array like that:
[{ country: 'USA'}, {country: 'GB'}, {country: 'FR'}, ... ]

ExtJS multiple js

Hi can We call one JS file from one file to another file...Means multiple JS files. I have one panel in JS like this and if I called another JS file ,that should read this PANEL control values.
You can use one js file content in to another js file. Use use like this
//file1.js
var tabs = Ext.createWidget('tabpanel', {
cls: "auto-width-tab-strip",
activeTab: 0,
plain: true,
autoHeight: true,
defaults: {
autoHeight: true,
style: 'min-height:620px; padding:10px;'
},
items: [{
title: 'tab1',
loader: {
url: 'tab1.jsp',
scripts: true,
loadMask: true
}
}]
});
function myFirstFun(){
something
......
......
}
//End of file1.js
You can reuse the above code Some where like this
//file2.js
var panel = Ext.create('Ext.panel.Panel', {
title: 'Forum Search',
height: 300,
width: 600,
renderTo: 'search-panel',
id: 'search-results',
layout: 'fit',
items: tabs
});
Ext.get('someid').on('click', function(){
myFirstFun();
});
//End of file2.js
Like this you can call the file1.js function in to file2.js, But you have include both js files in your html page.
I think this may help you.

YUI dialog - what's the equivalent of postdata when using "form" (not ('async")

I'm creating a dialog with YAHOO.widget.Dialog. The dialog is fired off by clicking on a link, and the function the link uses specifies parameters that finally get added to a postdata option like so:
var myDialog = new YAHOO.widget.Dialog("myDialog", {
fixedcenter: true,
// postmethod: "form",
postdata: propString
});
This works just fine, but now I need to do the same thing but using "form" instead of "async" - and there's no postdata for form submissions.
What's the right way to do this?
(YUI 2.7.0)
Here is an example:
var dlg= new YAHOO.widget.Dialog("objectDlg",{
close: false,
draggable: false,
hideaftersubmit: false,
modal: true,
fixedcenter: true,
visible: false,
constraintoviewport: true,
dataURL: saveObjectURL,
buttons: [{'text': 'Save',handler: function(){
var postdata= ...
this.cfg.setProperty("postdata", postdata); //this is important
this.submit();}, 'isDefault': false},
{'text': 'Cancel', handler: function() {this.cancel();}, 'isDefault': true}] });
dlg.render(document.body);
Hope it is helpful

Resources