We Keep Coding

ImageMapster javascript plugin tooltip isn't showing the right position

So I'm making use of the plugin ImageMapster and I'm making use of the tooltips.
Problem:
The problem I have with this plugin is when I use the tooltip it relocate completely different as you can see here below
As you see i hover over the dark orange section and the tooltip is right in the middle of the image with the text "Te huur".
Here is a example of the section i hover:
And the javascript:
$('#finder-image').mapster({
fill: true,
fillColor: 'ffffff',
fillOpacity: 0,
strokeWidth: 3,
singleSelect: false,
isSelectable: false,
scaleMap: true,
altImage: '{{asset('images/map2.svg')}}',
selected: true,
showToolTip: true,
toolTipContainer: '<div class="tooltip-wrapper"></div>',
mapKey: 'name',
render_highlight: {
fillOpacity: 1
},
onMouseover: function (options) {
$("#finder-" + options.key).children().css('color', "#EF8000");
$("#finder-" + options.key).children().css('font-weight', "bold");
},
onMouseout: function (options) {
$("#finder-" + options.key).children().css('color', "black");
$("#finder-" + options.key).children().css('font-weight', "normal");
},
areas: [
{
key: '21',
toolTip: '<img src
{{asset('/images/finder/icon_huur_1.png')}}" class="img-responsive pop-image">'
}
]
});
Pointing out:
Sometimes when I hover on the sections I get a error. The error is as follows :
Uncaught TypeError: Cannot read property '0' of undefined
at showToolTip (jquery.imagemapster.js:4467)
at m.AreaData.showToolTip (jquery.imagemapster.js:4559)
at m.AreaData.<anonymous> (jquery.imagemapster.js:2733)
at Function.each (jquery.js:374)
at HTMLAreaElement.mouseover (jquery.imagemapster.js:2731)
at HTMLAreaElement.me.mouseover (jquery.imagemapster.js:2925)
at HTMLAreaElement.dispatch (jquery.js:4435)
at HTMLAreaElement.r.handle (jquery.js:4121)
This is a error in the ImageMapster js itself, it says that variable corners/the tooltip isn't set.
Jquery.imagemapster.js:

As for the Uncaught TypeError: Cannot read property '0' of undefined error
The image inside the tooltip is not loaded on initial page load. This means that the image is being loaded as soon as you hover the tooltip (for the first time).
Because the image is not loaded as soon as the area is hovered the plugin can't define a height/width based on the data inside the toolTipContainer.
If you add an element with an initial size (which has no http request loading time such as text) inside the tooltip it will work.
For example
{
key: '1',
toolTip: '<img src="{{asset('/images/finder/icon_kaart_0.png')}}" class="img-responsive pop-image"><div style="visibility: hidden;">Area</div>'
},

How to remove sorting on ui-grid before reload another data set ui-grid

Im using ui-grid to load my data set. Here is my requirment;
step 01: I want to load dataset_01 (scope.gridOptions.data = res_01;).
step 02: I want to sort by First Name (Click by firstname column).
step 03: Click an external button and Reload ui-grid with an another data set (scope.gridOptions.data = res_02;).
Here is my result:
I dont want sort by First Name here for second dataset.
I want data without sorting. How can I do it ?
Expected result:
So I want to reload second data set without sorting (Means I want to remove first sorting before load second data set). how can I reset my ui-grid before load next data set (scope.gridOptions.data = res_01;).
How can I do it ?
Thank you. :)

You can set the sort property of your columnDefs to:
sort: {
direction: undefined,
}
and call for grid refresh using $sope.gridApi.core.refresh() after. This should re-render the whole grid and get rid of the sorting.

Visit this page: http://ui-grid.info/docs/#/api/ui.grid.core.api:PublicApi
After having instantiated your gridApi, you can just call:
$scope.gridApi.core.refresh();
Hope that helps! :)

Create your gridoption like this
example
$scope.gridOptions = {
useExternalPagination: true,
useExternalSorting: false,
enableFiltering: false,
enableSorting: true,
enableRowSelection: false,
enableSelectAll: false,
enableGridMenu: true,
enableFullRowSelection: false,
enableRowSelection: false,
enableRowHeaderSelection: false,
paginationPageSize: 10,
enablePaginationControls: false,
enableRowHashing: false,
paginationCurrentPage:1,
columnDefs: [
{ name: "FristName", displayName: "Frist Name", width: '6%', sort: { direction: undefined } },
]
};
after that you can remove the sorting where you want using below code
$scope.RemoveSorting = function ()
{
$scope.gridOptions.columnDefs.forEach(function (d) {
d.sort.direction = undefined;
})
}

ExtJS Hide tab on close, not delete

I have the following code which creates a tab inside of a tabpanel:
id: 'tabs',
region: 'center',
xtype: 'tabpanel',
autoDestroy: false,
items:[{
xtype: 'country-rate-grid',
id: 'LegalCompliance',
title: 'Legal Compliance',
store: 'RateManagement.store.LegalRateStore',
hidden: true,
closable: true,
listeners: {
'close': function(tab, eOpts) {
tab.hide();
}
}
}
When I close the tab via the X button, and then try to re-open it via tabs.child('#'+record.data.id).tab.show();, I get this error in the console:
Uncaught TypeError: Cannot read property 'tab' of null
It looks like it is deleting the tab instead of hiding it. How can I just show and hide my tabs instead of deleting them from the DOM when someone clicks the close button on the tab?

Quoting Ext JS 4.2.2 docs:
Note: By default, a tab's close tool destroys the child tab Component and all its descendants. This makes the child tab Component, and all its descendants unusable. To enable re-use of a tab, configure the TabPanel with autoDestroy: false.
EDIT: Ok, now I think I get what you're trying to do and where it went wrong. I've looked up the code and it looks like autoDestroy: false does not in fact destroy a container's child, but it detaches that child from the document body and removes it from the container's children collection. That's why you're seeing it disappearing from the DOM. The DOM nodes are not lost however, and are appended to the detached body element that is available through Ext.getDetachedBody(). That's also why you can't refer to the component by calling tabs.child(blah) - the tab has been removed from there.
So if you're trying to kind of hide a tab panel upon closing, to be able to show it again, you'd have to re-insert it back into the tab panel:
Ext.onReady(function() {
var tabs = Ext.create('Ext.tab.Panel', {
renderTo: document.body,
width: 300,
height: 200,
autoDestroy: false,
items: [{
id: 'foo',
title: 'Foo',
closable: true,
html: 'foo bar'
}, {
id: 'bar',
title: 'bar',
closable: false,
items: [{
xtype: 'button',
text: 'Bring foo back!',
handler: function() {
var foo = Ext.getCmp('foo');
foo.ensureAttachedToBody();
tabs.insert(foo);
}
}]
}]
});
});
foo.ensureAttachedToBody() will re-attach the DOM nodes for that panel back to the document body, and then we insert it into the tab panel as if nothing had happened. Voila.

ExtJS buttons won't accept "id" config parameter?

I need specific IDs on ExtJS generated window buttons, but I'm having trouble specifying the ID. The documentation claims that this should be possible, but I still get an autogenerated id when I specify my own.
What gives?
dialog = new Ext.Window({
closeAction:'hide',
plain: true,
buttons: [
{
id: 'my-dialog',
text: 'Done',
handler: function() {
dialog.hide();
}
}
],
items:new Ext.Panel({
applyTo:'add-document-popup-panel'
}),
title: 'Add Documents',
layout: 'fit',
resizable: false,
draggable: false,
width: 300,
height: 300,
modal: true
});
}
dialog.show(this);

Check this topic: http://www.sencha.com/forum/showthread.php?24433-CLOSED-Cannot-assign-id-to-button-extjs-bug
The id of the container of the button is set, not the HTML button itself.

The id you specify is assigned to the button component (specific to extjs) and not necessarily to the underlying html button.
Does Ext.getCmp('my-dialog') successfully return the extjs button component?

The ID is set, but not on the actual button element. One of the containers is set with the correct id, and you can probably key off of this to get at whatever you need.

I had the same problem and I confirm:
The ID is set in the button's TABLE container.
Ext.getCmp('my-button') returns the extjs button component (object with xtype="button" and id="my-button").

Dojo - Adding dijit to a closed TitlePane

When the open property of TitlePane is set to false, I can't add an widgets dynamically to the content.
For example, the following code does not work.
var tp = new dijit.TitlePane({
title: "Title Pane"
, content: ""
, open: false
})
var tabs = new dijit.layout.TabContainer({
region:"center"
, content:"Service Details"
, tabStrip: true
}).placeAt(tp.containerNode);
But when the open property is set to true, the tab container appears.
var tp = new dijit.TitlePane({
title: "Title Pane"
, content: ""
, open: true
})
var tabs = new dijit.layout.TabContainer({
region:"center"
, content:"Service Details"
, tabStrip: true
}).placeAt(tp.containerNode);
How can I add widgets to a TitlePane when the open property set to false?

Are you sure you're calling startup properly on your programmatically-created widgets? The following works for me whether open is true or false:
dojo.require('dijit.TitlePane');
dojo.require('dijit.layout.TabContainer');
dojo.require('dijit.layout.ContentPane');
dojo.ready(function() {
var tp = new dijit.TitlePane({
title: "Title Pane",
content: "",
open: false
}).placeAt(dojo.body());
var tabs = new dijit.layout.TabContainer({
region: "center",
content: "Service Details",
tabStrip: true
}).placeAt(tp.containerNode);
tabs.startup();
tabs.addChild(new dijit.layout.ContentPane({
title: 'foo', content: 'bar'
}));
//putting this after adding the tabcontainer
//avoids problems when open is initially true
tp.startup();
});
To clarify on calling startup:
Generally, any time you programatically create a widget, you need to manually call its startup. However...
The general exception to this is when dealing with children of container or layout widgets (in this case dijit.TitlePane which extends dijit.layout.ContentPane, which behaves like a layout widget) - these look for children to call startup on when they are started themselves (or in the case of ContentPane, also when new content is set/loaded).
Container widgets (not ContentPane, but e.g. BorderContainer, StackContainer and its subclasses such as AccordionContainer and TabContainer) also call startup on children added after the container is already started.