We Keep Coding

Ext.Defer gives getAsynchronousLoad Error

I've just defined a combobox. Firstly it loads a countrylist and when select a value it's fire a change event which doing a ajax query to DB within searching service;
The thing; this configuration works pretty well when I click and open combobox items. But when I'm typing to combobox's field it's fires listener's store.load and because of none of country selected yet, the search query url gives not found errors of course.
{
xtype: 'countrycombo',
itemId: 'countryName',
name:'country',
afterLabelTextTpl: MyApp.Globals.required,
allowBlank: false,
flex: 1,
// forceSelection: false,
// typeAhead: true,
// typeAheadDelay: 50,
store: {
proxy: {
type: 'ajax',
// isSynchronous: true,
url: MyApp.Globals.getUrl() + '/country/list?limit=250',
// timeout: 300000,
reader: {
type: 'json',
rootProperty: 'data'
}
},
pageSize: 0,
sorters: 'description',
autoLoad: true
}
,
listeners: {
change: function (combo, countryId) {
var cityStore = Ext.getStore('cityCombo');
cityStore.getProxy()
.setUrl(MyAppp.Globals.getUrl() + '/city/view/search?query=countryid:'+ countryId);
// Ext.defer(cityStore.load, 100);
cityStore.load();
}
}
},
I've tried several things as you see in code above to set a delay/timeout for load during typing to combobox text field; Ext.defer, timeoutconfig on proxy, typeAhead config on combo but none of them worked!
I thought that Ext.defer is the best solution but it gives this error:
Uncaught TypeError: me.getAsynchronousLoad is not a function at load (ProxyStore.js?_dc=15169)
How can I set a delay/timeout to combobox to fires load function?

Instead of Ext.defer(cityStore.load, 100);
try using this :
Ext.defer(function(){
cityStore.load
}, 300);
If this doest work, try increasing your delay
or you can put a logic before loading
like this :
if(countryId.length == 5){
cityStore.load
}
This will ensure that you Entered the right values before loading
Hope this helps, and Goodluck on your project

well.. I've tried to implement #Leroy's advice but somehow Ext.defer did not fire cityStore.load. So I keep examine similar situations on google and found Ext.util.DelayedTask
So configured the listerens's change to this and it's works pretty well;
listeners: {
change: function (combo, countryId) {
var alert = new Ext.util.DelayedTask(function () {
Ext.Msg.alert('Info!', 'Please select a country');
});
var cityStore = Ext.getStore('cityCombo');
cityStore.getProxy().setUrl(MyApp.Globals.getUrl() + '/city/view/search?query=countryid:'+ countryId);
if (typeof countryId === 'number') {
cityStore.load();
} else {
alert.delay(8000);
}
}
}

Add Annotation to Openseadragon

var viewer = OpenSeadragon({
id: "openseadragon1",
prefixUrl: "images/openseadragon/",
showNavigator: true,
navigatorPosition: "BOTTOM_RIGHT",
tileSources: '/fcgi-bin/iipsrv.fcgi?Deepzoom=<?=$plink?>.jp2.dzi',
crossOriginPolicy: 'Anonymous',
zoomInButton: "zoom-in",
zoomOutButton: "zoom-out",
homeButton: "home",
fullPageButton: "full-page"
});
anno.makeAnnotatable(viewer);
$.ajax({
url: "handlers/H_AnnotationHandler.php",
data: "case_id=<?=$case_id?>&plink=<?=$plink?>&mode=get",
type: "post",
dataType: "json",
success: function(response) {
if (!response.error) {
for (var i=0; i<response.annots.length; i++) {
console.log(response.annots[i].comment);
anno.addAnnotation({
text: response.annots[i].comment,
shapes: [{
type: 'rect',
geometry: {
x: response.annots[i].rect_x,
y: response.annots[i].rect_y,
width: response.annots[i].rect_w,
height: response.annots[i].rect_h
}
}]
});
}
} else {
console.log(response.error);
}
}
});
I can add annotation live : http://annotorious.github.io/demos/openseadragon-preview.html
After user added the annotation, I store in my database. When the user refresh the page, I am loading saved datas from database using ajax call (H_AnnotationHandler.php). Returning data is true, but I could not draw annotation on jpeg2000 image using anno.addAnnotation, how can I draw it ?
Reference : Add annotations API.

You are missing src attribute in anno.addAnnotation method, the thing is that I don't really know what value should go there, there is nothing in documentation about that, the only thing I could find in internet is this plugin:
https://github.com/dgutman/OpenSeadragon-Plugins/tree/master/annotationState_Code
You could try that instead.
EDIT
I actually managed to attach event programatically on the demo page, the open sea dragon module there is registered as a dzi://openseadragon/something, knowing this you can invoke the function
anno.addAnnotation({
src : 'dzi://openseadragon/something',
text : 'My annotation',
shapes : [{
type : 'rect',
geometry : { x : 0.8, y: 0.8, width : 0.2, height: 0.2 }
}]
});
from console (or in your code within the ajax-success loop) and it will be added to the image. Yet, the naming method is pretty... well, I found this in the source code:
annotorious.mediatypes.openseadragon.OpenSeadragonModule.prototype.getItemURL = function(item) {
// TODO implement something decent!
return 'dzi://openseadragon/something';
}
so be assured that this might change in future.

Since you didn't share your code I tried to set it up here: https://jsfiddle.net/peLokacs/3/, please do the necessary changes so I can see the annotations. Also I get a "Annotorious does not support this media type in the current version or build configuration." error, If you managed to save the annotations, then you probably know how to fix that too.
var viewer = OpenSeadragon({
id: "openseadragon-1",
prefixUrl: "https://neswork.com/javascript/openseadragon-bin-2.1.0/images/",
//tileSources: "https://openseadragon.github.io/example-images/highsmith/highsmith.dzi",
tileSources: { type: 'legacy-image-pyramid', levels: [{ url: '0001q.jpg', height: 889, width: 600 }, { url: '0001r.jpg', height: 2201, width: 1485 }, { url: '0001v.jpg', height: 4402, width: 2970 }]},
showNavigator: true,
});

Semantic-ui popup Dynamic content

Semantic-ui ver. 2.0.8.
I currently use the following method to load dynamic content in a pop-up
JAVASCRIPT
var popupContent = null;
var popupLoading = '<i class="notched circle loading icon green"></i> wait...';
$('.vt').popup({
inline: true,
on: 'hover',
exclusive: true,
hoverable: true,
html: popupLoading,
variation: 'wide',
delay: {
show: 400,
hide: 400
},
onShow: function(el) { // load data (it could be called in an external function.)
var then = function(r) {
if (r.status) {
popupContent = r.data; // html string
} else {
// error
}
};
var data = {
id: el.dataset.id
};
ajax.data('http://example.site', data, then); // my custom $.ajax call
},
onVisible: function(el) { // replace popup content
this.html(popupUserVoteContent);
},
onHide: function(el) { // replace content with loading
this.html(popupLoading);
}
});
HTML
<h2 data-id="123" class="vt">10</h2>
<div class="ui popup" data-id="123"></div>
There 's a way to simplify the whole process?
For example with a element.popup ('refresh') after loading the new content?
I tried:
JAVASCRIPT
...
if (r.status) {
$('.ui.popup[data-id="123"]').html(r.data);
}
...
but it does not work.
I also tried using (replace) data-content into h2.vt but nothing.

The only improvement that comes to mind is to make the code a little cleaner (you only really need the onShow event, which fires before the popup shows) and avoid using a global variable (popupContent).
That said, the main idea is mostly the same - when the popup is supposed to show, you replace its content with some fake content (the loading animation), then trigger $.ajax and update the popup content as soon as the request completes.
var popupLoading = '<i class="notched circle loading icon green"></i> wait...';
$('.vt').popup({
inline: true,
on: 'hover',
exclusive: true,
hoverable: true,
html: popupLoading,
variation: 'wide',
delay: {
show: 400,
hide: 400
},
onShow: function (el) { // load data (it could be called in an external function.)
var popup = this;
popup.html(popupLoading);
$.ajax({
url: 'http://www.example.com/'
}).done(function(result) {
popup.html(result);
}).fail(function() {
popup.html('error');
});
}
});

Storing state using 2 instances of the same JQuery plugin

I'm coding a jQuery plugin to build KendoUI grids. Everything was fine until I had to use 2 instances of the plugin in the same page. In this case, I need each instance of the plugin to have its own data.
I've read the jQuery guidelines for storing data with .data(), but when trying to access from outside the code of the plugin to the 'getSelectedItem()' this way:
selectedItemGrid1= $("#Grid1").kendoGrid_extended.getSelectedItem();
selectedItemGrid2= $("#Grid2").kendoGrid_extended.getSelectedItem();
I get the selectedItem of Grid2 in selectedItemGrid1. Here is a simplified version of my plugin code. Basically what I wanted to do is, anytime a row of the grid is selected ("change" event on the kendoGrid definition), store the new selected row inside the plugin, so when the user clicks on a "delete" button, read from the plugin the selected row and call the delete action with the info recovered from the plugin.
$.fn.kendoGrid_extended = function (options) {
var opts = $.extend({}, $.fn.kendoGrid_extended.defaults, options);
opts.controlId = '#' + this.attr('id');
var gridExtended;
var selectedItem;
var instance = $(this);
//Public accessor for the selectedItem object.
$.fn.kendoGrid_extended.getSelectedItem = function () {
return instance.data('selectedItem');
}
opts.gridDataSource = new kendo.data.DataSource({
type: "json",
serverPaging: true,
serverSorting: true,
sort: sortObject,
serverFiltering: true,
allowUnsort: true,
pageSize: opts.pageSize,
group: opts.group,
transport: {
read: {
url: opts.dataSourceURL,
type: 'POST',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
data: function () { return opts.dataSourceParamsFunction(); }
},
parameterMap: function (options) {
return JSON.stringify(options);
}
},
schema: opts.dataSourceSchema,
});
gridExtended = $(opts.controlId).kendoGrid({
columns: opts.gridColumns,
dataSource: opts.gridDataSource,
pageable: {
refresh: true,
pageSizes: true
},
groupable: opts.groupable,
sortable: { mode: "multiple" },
filterable: false,
selectable: true,
scrollable: true,
resizable: true,
reorderable: true,
columnReorder: SetColumnsReorder,
columnResize: SetColumnsResize,
change: function () {
var gridChange = this;
gridChange.select().each(function () {
selectedItem = gridChange.dataItem($(this));
instance.data('selectedItem', selectedItem);
});
}
});
}
The code itself it's a simplified version of my plugin. I know that this may not be the best way to write a plugin as I've read the jQuery guidelines for plugin development. It would be awesome if you could point me in the right direction or tell me why my code is not working. Thanks a lot in advance!

I think you do not need that "public accessor" that you wrote, I think you actually can get it like this:
selectedItemGrid1= $("#Grid1").data('selectedItem);
selectedItemGrid2= $("#Grid2").data('selectedItem);
On a side you do not have to wrap that instance element into a jQuery object. You still be able to use rest of the jQuery methods, check the example.

I finally solved it appending a hidden input with a unique Id to the grid of the helper. On that hidden input I'm storing all the data that I want to be persistent with the Jquery .data().
So if I generate 2 grids using the plugin, each grid will have appended something like this:
<input type="hidden" id="uniqueIdHere" />

Problem with applying jQuery to an element which has been created by jQuery

Here's my code:
$("#ticker-wrapper").rssfeed("http://news.hse.gov.uk/feed/", {
limit: 5,
linktarget: '_blank',
titletag: 'p',
snippet: false,
header: false,
date: false,
content: false
});
$('#js-news').ticker({
controls: false,
titleText: ''
});
Basically, a rssfeed is placed inside the wrapper, I then want .ticker to add a ticker effect to the items pulled through by the .rssfeed.
The problem seems to be that the .rssfeed creates the id #js-news (which is where I want to apply the .ticker). Then it seems the .ticker gets fired before #js-news has been created. Effectively it seems to be trying to apply .ticker to the element which hasn't yet been created which then results in nothing appearing.
I've been looking into jQuery .live() and I can get all the code working on a click command. But I need to create the rss feed and apply the ticker when the page loads. Not quite sure what to do?
------ Edit ------
ah ha!
Seems it works now I've moved the main .rssfeed bulk into the html (out of the .ready) and rewriting the ticker code:
var tickerTryCount = 0;
function addTicker() {
if (tickerTryCount < 5) {
if ($('#js-news').size() > 0) {
$('#js-news').ticker({
controls: false,
titleText: ''
});
} else {
tickerTryCount++;
setTimeout(addTicker, 1000);
}
}
}

Call the ticker() on ajaxStop()
$("#ticker-wrapper")
.rssfeed("http://news.hse.gov.uk/feed/", {
limit: 5,
linktarget: '_blank',
titletag: 'p',
snippet: false,
header: false,
date: false,
content: false
})
.ajaxStop(function() {
$('#js-news').ticker({controls: false, titleText: '' });
});

ah ha!
Seems it works now I've moved the main .rssfeed bulk into the html (out of the .ready) and rewriting the ticker code:
var tickerTryCount = 0;
function addTicker() {
if (tickerTryCount < 5) {
if ($('#js-news').size() > 0) {
$('#js-news').ticker({
controls: false,
titleText: ''
});
} else {
tickerTryCount++;
setTimeout(addTicker, 1000);
}
}
}