We Keep Coding

Undefined even with null check

listener returns undefined, and I believe in start property. This is an observer object.
var updateP = {
cb: function (event, properties) {
"listener" in window? listener.next(properties):null
},
start: function (listener) {
dataset.on("update", this.cb)
},
stop: function () {
dataset.off("update", this.cb)
},
}

The listener variable is local to the start function, so you can't access it as a global variable.
Move the definition of this.cb inside updateP.start, then it will be able to acecss the lexical variable.
var updateP = {
start: function(listener) {
function asdf(ab) {
console.log(ab)
}
this.cb = function(event, properties) {
listener.next(properties)
};
dataset.on("update", this.cb)
},
stop: function() {
if (this.cb) {
dataset.off("update", this.cb);
}
},
}

Calling a private/nested javascript function from an outer scope

I have my javascript code like this . Inside that I have an init() function and in that function I have an options JSON object and in that object I have a function defined as objectselected(). How I call that function in a button click event
I have tried like this WorkFlow.init().options.Objectselected() but it is not working,
var WorkFlow = {
connectionData: [],
selectedTouchpoints: [],
init: function () {
var options = {
palleteId: "myPaletteElement",
elementId: "playAreaContainer",
TextStoreList: ['One', 'Two', 'Three'],
LinkTextStoreList: $('#drpLinkType option').map(function () {
return this.text;
}).get(),
shapeList: ['RoundedRectangle', 'Circle', 'Rectangle', 'Ellipse', 'Square', 'Diamond', 'Card', 'Database'],
diagramUpdate: function (e) {
},
objectSelected: function (e) {
},
linkUpdate: function (e) {
},
initialize: function () {
}
myGraph = new Graph(options);
options.initialize();
},
}
How to call that function.

One way around is you can return options and than call it.
init: function () {
var options = {
...your code..}
return options;
},
and call it than
var options = WorkFlow.init();
options.Objectselected();

As it stands, you have no access to options because it's a local variable - that is, local to its scope.
To access its contents, you'll need to return it from init().
Think about it:
WorkFlow.init()
Currently this returns undefined, because your init() returns nothing. You're trying to chain like in jQuery, but that relies on the API always returning the instance. Your path finds a dead-end at init().
To fix this, have init() return options - or at least the part of it you want to access from outside - an "export".
So (basic example)
init: function() {
var options {
my_func: function() { }, //<-- we want outside access to this
private: 'blah' //<-- this can stay private - leave it out of the export
}
//return an export, exposing only what we need to
return {
my_func: options.my_func
}
}

You need to return options as it is inside init function's scope
var WorkFlow = {
connectionData: [],
selectedTouchpoints: [],
init: function () {
var options = {
palleteId: "myPaletteElement",
elementId: "playAreaContainer",
TextStoreList: ['One', 'Two', 'Three'],
LinkTextStoreList: $('#drpLinkType option').map(function () {
return this.text;
}).get(),
shapeList: ['RoundedRectangle', 'Circle', 'Rectangle', 'Ellipse', 'Square', 'Diamond', 'Card', 'Database'],
diagramUpdate: function (e) {
},
objectSelected: function (e) {
},
linkUpdate: function (e) {
},
initialize: function () {
}
myGraph = new Graph(options);
options.initialize();
return options;
},
}
And call it as WorkFlow.init().objectSelected();

Building on Patrick's comment, you'd need to return options from the init function:
var WorkFlow = {
connectionData: [],
selectedTouchpoints: [],
init: function () {
var options = {
palleteId: "myPaletteElement",
...
options.initialize();
return options;
},
}

Cannot set property '_renderItem' of undefined with data("ui-autocomplete")

I am having a problem with autocomplete which is keep giving this error and I am unable to figure it out what is causing this issue. I have tried everything on so and still not able to figure it out.
I have bootstrap js and jquery ui also loaded in order of
jquery-1.11.2',
'jquery-ui',
'bootstrap'
$("#search-destination").autocomplete({
minLength: 3,
source: function (request, response) {
var url = "http://localhost/abc/public_html/query/visiting?";
var data = {term: $("#search-destination").val()};
$.getJSON(url, data, function (data) {
// data is an array of objects and must be transformed for autocomplete to use
var array = data.error ? [] : $.map(data.places, function (m) {
var data = {
label: (!isEmpty(m.city)) ? m.title + " (" + m.city + ")" : m.title,
};
return data;
});
response(array);
});
},
focus: function (event, ui) {
},
select: function (event, ui) {
}
}).data("ui-autocomplete")._renderItem = function (ul, item) {
var $a = $("<a></a>").text(item.label);
highlightText(this.term, $a);
return $("<li></li>").append($a).appendTo(ul);
};

How to bind dynamic function to dynamic event

I have a simple jQuery function with optional parameters, All I want is to pass control name, event name and value or function name than bind it to the passed control.
jQuery Function
BindEvents: function (options) {
var defaults = {
Control: null,
Events: null
}
settings = $.extend({}, defaults, options);
if (Events != null) {
$(Control).on(Events['name'], function () {
'How to call passed function';
});
}
}
Calling the Function
$.fn.BindEvents({
Control: "#txtTest",
Events: { "name": "focus", "value": "$.fn.test()" }
});

1) You forgot to use 'settings' prefix:
BindEvents: function (options) {
// defaults do not make sense this way, but they probably have a sane default in your code, right?
var defaults = {
Control: null,
Events: null
}
settings = $.extend({}, defaults, options);
if (settings.Events != null) {
$.each(settings.Events, function(eventName, handler) {
$(settings.Control).on(eventName, handler);
});
}
}
2) call BindEvents with an function reference instead of a string. I also changed the Event object a bit:
$.fn.BindEvents({
Control: "#txtTest",
Events: { "focus": $.fn.test }
});

How to handle an option change in a custom JQuery widget?

I created a widget using JQuery factory. It has an option. The option can be changed after creation of the widget.
How can I handle option change? Is there any events or methods for this?
I want something like this:
$.widget("myWidget", {
options: {
myOption: 'defaultValue'
},
_create: function() {
this.initWidget();
}
initWidget: function() {
//do initialization
}
_onOptionChange: function() {
this.initWidget();
}
}

The solution I found is to override methods _setOption and _setOptions.
_setOptions: function( options ) {
var key;
for ( key in options ) {
this._setOption( key, options[ key ] );
}
return this;
},
_setOption: function( key, value ) {
if (key === "myOption") {
this.initWidget();
}
}