query on jquery autocomplete module - javascript

I am using the Jquery based autocomplete module .I have a small doubt in its functionality. My autocomplete data is available in a local JavaScript variable. The autocomplete works fine, but whenever I update this local javascript variable it still uses the old data. Does this module cache the data? How can we go about fixing this.

The jQuery UI autocomplete does not have caching built in however it does make an internal copy of the source for the lookup values. In order to update this internal source you need to call the setter on the source parameter like so:
var source = [
"dog",
"cat"
];
var myAutocomplete = $("#myid").autocomplete({
source: availableTags
});
//Add new items after autocomplete init
source.push("mouse");
//Update the autocomplete with the modified source
myAutocomplete.autocomplete("option", "source", source);
Here is a jsfiddle with it working:
http://jsfiddle.net/enXYS/

Your browser is probably caching the JS file. Ctrl f5 to force clean the browsers cache.

Try smth like: $('input#necessary_input').flushCache();.
Updated (according to the comments below):
Ok. What about simple recreating of autocomplete (firstly remove it, then create with autocomplete function and new data)?

Related

Search a Sencha TreePicker

I am using TreePicker from ExtJS 6.0.2. I would like to know how can I perform a search or query on the Picker data similar to this example - Fiddle. It has this property which is an built-in feature from combo-box:
queryMode: 'local'
I have made the TextField editable and I want to know if there is any inbuilt way to perform a search or do I have to write code to do it manually. For the manual way I tried to capture the change event of the TextField by writing the code for it in the config property of the TreePicker but failed to get the event to be fired. What am I missing here, please guide.
it seems this component has a very simple implementation and doesn't support any search functionality.
You could start to implement your need studying the Ext.form.field.ComboBox source code in order to "copy" only the behaviours you want.
For example you will see there's a picker's method to override to handle the change event. A very very simple "search on change" extension can be added with the following override:
...
onFieldMutation: function(e) {
var me = this,
store = me.getStore(),
rawValue = me.inputEl.dom.value;
store.filter('text', rawValue);
},
...
Fiddle

Add properties to context in cordova plugin for Application Insights

I use cordova plugin with Application Insight named cordova-plugin-ms-appinsights (https://github.com/MSOpenTech/cordova-plugin-ms-appinsights/blob/master/README.md) and I tried to add my properties to context, that through each request application will send additional info, for example code name of my application.
I tried as below:
appInsights.context.application.codename = "code name app";
appInsights.trackEvent("my event");
and this did not work.
Can I add additional info to context?
There are 2 issues:
1) Cordova plugin seems to use an old version of the JS SDK. You can try to update it manually after it pulls down the old one (take the most recent one from https://github.com/Microsoft/ApplicationInsights-JS/blob/master/dist/ai.0.js)
2) The feature that adds data to ALL telemetry items is not released yet. It was implemented recently - see JS SDK commit on github. You can either wait a bit until it's released or get the latest from master and compile it yourself (and take the result from /JavaScript/min/ai.min.js)
A hacky alternative may be to create a wrapper on top of SDK methods like trackEvent() which adds the data you need (I'm sorry for giving you the JS SDK code equivalent as I haven't used cordova plugin myself):
// this is you implementation of custom data to be attached
// to all telemetry items.
// It needs to return JSON - as it's expected format for custom properties.
// In this specific case you'll create a custom property 'hey' with value 'yo'
var getMyDataJson = function() {
return { hey: "yo"};
}
// this is your wrapper, you'll call it instead of appInsights.trackEvent()
var myTrackEvent = function(data) {
var toBeAttachedToAllItems = getMyDataJson();
appInsights.trackEvent(data, toBeAttachedToAllItems);
}
<...>
// somewhere later you track your telemetry
// this will call your getMyDataJson() function which'll attach
// custom data to your event.
myTrackEvent("tracked!")

Sigma.js filter issue

I am using sigma.js along with angular js to build my visualization web app.
Problem statement: I have written code in such a way that when filter criteria changes, filter module will be triggered to filter out nodes based on user selection(see code below).But, Initially for the first time filter works fine without any issue, but later on it doesn't seem to be working. It looks like it is not executing the filter predicate at all.
I tried below possible ways, but couldn't resolve the issue.
1) Destroyed and recreated the filter object for every data change trigger.
2) Unregistered and registered filter predicate.
code snippet:
scope.$watch('filtersettingdata',function(){
s = new sigma({
graph: scope.data['mdata'],
container: element.elementid,
renderer: {
container: document.getElementById(element.elementid),
type: 'canvas'
},
settings: filtersettingdata
});
var filter = new sigma.plugins.filter(s);
filter.nodesBy(
function(n) {
//predicate with new filter values
},'filter_name').apply();
s.refresh();
}
any help/suggestions will be really appreciated.
Thanks in advance.
I'm the author of this plugin.
It is out-dated in the official sigma repository and I don't think it will work with Angular as it is.
It is now released under dual license GNU GPLv3 + commercial here: https://github.com/Linkurious/linkurious.js/tree/linkurious-version/plugins/sigma.plugins.filter
This version works with Angular and I've successfully used it in the projects of my company.
Disclaimer: I work at Linkurious SAS.

Meteor template applying jQuery plugin after rendered

I am displaying a collection of "messages" in my Meteor app. When my template "messages" is rendered, I apply this jQuery plugin called "gridalicious", which basically displays the messages in a pinterest-like format.
All works well, but when I insert a new message, that new message is displayed twice. When I refresh the browser, the duplicate is gone.
I'm applying the plugin as follow
Template.messages.rendered = ->
$("#message_box").gridalicious
width:250
animate:false
selector:".message"
gutter:0
Basically, if I get rid of this plugin, things messages display correctly, without any duplicates.
I'm not sure what would be causing this problem.
yes, i have similar prob like this. for this plugin or same satuation, to avoid it duplicates your template instance you can try make a global variable to handle your message box status, add some condition to decide if this new message's id is already been inside your global status handler and already been rendered, then don't render it twice.
global scope
isAlreadyBeenReneredId = null
Template instance of messages
Template.messages.rendered = ->
if isAlreadyBeenReneredId isnt #data._id
isAlreadyBeenReneredId = #data._id
options =
width: 250
gutter: 0
$("#message_box").gridalicious options
not real code, but some idea you might want to try.
As far as I know, Meteor does not render everything again and again, but only the differences. So I think the problem is, that you call the jQuery plugin multiple times on the same element.
I don't know the plugin, but there seems to be an append method, maybe this could be useful?
Try this:
if (Meteor.isClient) {
Meteor.startup(function () {
$(document).ready(function (){
$("#message_box").gridalicious({
width:250,
animate:false,
selector:".message",
gutter:0
});
});
});
}
Sorry I didn't know how to write the equivalent in coffescript.

Redefining a RequireJS module -- is it possible?

Basically, there is a page that I visit that uses RequireJS. I want to make adjustments to this page, so I went the route of a userscript. While looking at the client-side code I see that there is a module defined as so:
define("settings", [], function() {
return {
SETTINGA: "100",
SETTINGB: "200",
etc.
}
})
I want to add my own item to the settings array, as well as change some settings without having to redefine the module in my userscript (with the changes) and then removing/readding it. Is it possible to just make adjustments to this module?
P.S. I'm using the Script Injection technique to get my userscript to interact with other javascript in the original page.
Also, doing require("settings") in the Javascript console returns an object (not an array), so I can't do things like require("settings")[0] or require("settings").push(...), however I can access the settings by doing require("settings").SETTINGA. So, I'm not sure how to add/redefine settings to this since it is not an array?
Use this:
require('settings').new_property = 'new value';
The reason you can't retrieve or add settings to "the settings array" is that you aren't creating an array to begin with. {foo:bar} is an object literal, not an array literal ([foo,bar]).

Categories

Resources