I was trying to figure out how to add an icon to connection. This is what I intend to do:
When a user hovers over a connection, a trash icon should appear above/below the connection
When the user clicks on it, it should delete that connection
Right now, to add the trash icon to the connection, I use the following code to add a connectorOverlay.
["Custom",{create:function(component){
return $('<img class="delete-connection" style="display:block;" src="../static/img/Delete.png">');
},location:0.5
}]
I'm trying to add an event to the icon to delete the connection on click through
$('.delete-connection').click(function(){
//jsplumb.detach code goes here
})
But it is invoking the connection click event rather than the event for icon.
As per the answer suggested, I tried the following code:
$(document).on('click','.delete-connection',function(){
console.log('hit')
//detach connection code goes here
});
Please correct me if I'm making a mistake in code.
The jsfiddle link for the question: jsfiddle.net/cipher42/p9gdc4vm
Connections are created dynamically and hence, the overlays might not be present in the DOM when you're attaching the click handler to the delete icon overlay.
Try to attach the click handler as below :
$(document).on('click','.delete-connection',function(e){
//detach the connection here
});
There are many reasons as to why the fiddle in the question doesn't work.
Overlay <img> tag was not having delete-connection class. The correct attribute to give overlays an class is cssClass.
["Custom", {
create: function (component) {
return $('<img style="display:block;" src="https://lh6.ggpht.com/5I4BgwoxVAZH5vcPXwdjuNQ6Ellx9YCGgOYif7o2rMwJ2X7sCV96CqXy3OG4XCfwwhGm2C4=w20">');
},
location: 0.5,
cssClass: 'delete-connection'
}]
The fiddle was throwing error on jsPlumb.animate & hence, the click handler was never attached in the first place.
Here is a working fiddle : http://jsfiddle.net/nitincool4urchat/p9gdc4vm/9/
References:
http://api.jquery.com/on/
We can add events like this:
["Custom", {
create: function (component) {
return $('<img style="display:block;background-color:transparent;" src="img/delete.png">');
},
location: 0.5,
cssClass: 'delete-connection',
events:{
click:function(params) {
alert("hello!");
}
}
}]
Related
I have two ViewController.
The first one fires an event if I select an item in a treepanel :
// treeController
onItemSelection: function(treeview, record) {
var me = this,
controller = me.getView().getController();
...
controller.fireEvent('myEvent', record);
}
The second one is listening to this event.
The controller is responsible for uploading a file to a specified url.
This url is set by the onMyEvent-function.
// uploadController
...
listen: {
controller: {
'*': {
myEvent: 'onMyEvent'
}
}
},
defaultUrl: 'foo/bar/{id}',
currentUrl: null,
onMyEvent: function(record) {
var me = this;
me.currentUrl = me.defaultUrl.replace('{id}', record.getId());
},
onUploadClick: function (form) {
var me = this;
if (form.isValid()) {
form.submit({
url: me.currentUrl,
...
});
}
},
...
What I want to achieve:
I select an item in the treepanel
-> the event is fired, the onMyEvent-function has been executed.
I click on the button to open the uploadView (the view which is connected to the controller). After that I'll click on the fileupload-button, select a file and click on the uploadbutton.
After the uploadbutton has been pressed, the controller should call the onUploadClick-function and use the previous placed url (currentUrl) for the upload.
The problems I'm facing:
Selecting an item in the treepanel fires the event, but the uploadController is not executing the onMyEvent-function.
When I open the uploadView first and select afterwards a node in the panel, the onMyEvent-function is executed.
When I use the second approach and try to upload the file, I get an error which tells me I haven't specifed the url (its null).
How can I accomplish the process without using the mentioned workaround for 1.?
Thanks in advance.
Your event myEvent is in UploadController. However, controller.fireEvent('myEvent', record); would try to find and fire it in TreeController.
Root cause of this issue is that controller = me.getView().getController(); is going to give you back this/instance of TreeController. When you do me.getView(),it gives you TreeView and me.getView().getController() is going to give you back an instance of TreeController and you need an instance of UploadController cause myEvent is an event of UploadController.
The reason you're able to fire the event when you open UploadView first is cause you're already in UploadController.
Hope that helps!
im busy with creating a bookmaker extension in safari and running up against the following issue. In my popover i've a iframe which includes a button. When that button (submit button) is clicked the following message must be send:
window.addEventListener('message', function(e){
if(e.data.command == 'closeSymbalooBookmarker'){
window.setTimeout(function(){
window.close();
}, 2000);
}
});
as you can see this close the popover in 2 seconds (the above script is made in chrome extension).
I need to send a message from the inject script to a popover so i can close the popover in the popover window. Or is there some other way to that?
Thank u.
The global page is the best place to receive messages from an injected script.
Do something like this:
global.js
safari.application.addEventListener('message', handleMessage, false);
function handleMessage(msg) {
if (msg.name === 'hidepopover') {
safari.extension.popovers[0].hide()
}
}
injected.js
setTimeout(function() {
safari.self.tab.dispatchMessage('hidepopover');
}, 2000);
I have read the SO question: Controller for Buttons Sencha Touch 2 [Solved] to achieve tapping the button. It works!
Unfortunately, I need tapping on the container, not the button. Once I change xtype:'container', to xtype:'button', it taps fine and I see the console.log message so everything works fine. Once I change it back to xtype:'container', it stops working, there is no console.log message.
So, my question is: how to make tap event working for my xtype:'container'? Why does it work for buttons only? Am I missing something?
P.S. As far as I see there is no tap event for container. What's the solution then? Would making a button to have several strings of a text and a background be a solution?
OK, based on your answers, it is still unclear, how to make the button look like the container. The container is an image with two strings above. Here is my container:
{
xtype:'container',
cls:'home-img',
id: 'home-img',
layout : {
type : 'vbox',
align: 'middle'
},
items:[
{ xtype:'container',
html:'Your current rate is:'
},
{ xtype:'container',
tpl:'{rate}'
}
],
},
Once I replace xtype:'container', with xtype:'button', I'm having difficulties to show {rate} parameter and unable to make two strings.
I'm not a pro at sencha touch, but in this case i think you need a listener on the element.
this is what works for me:
Ext.define('RSSFramework.view.ListContainer', {
extend: 'Ext.Container',
config: {
layout: {
type: 'fit'
},
listeners:[
{
element: 'element',
event: 'tap',
fn: function() {
console.log('TAP!');
}
}
]
}
});
In Sencha, there is no tap event available for a container. A container basically works like something which can hold different inner components/elements. However, you can indeed workaround if you want a tap event to be placed on container. As you have mentioned, you can go ahead and create a button, set a background, and set some strings (But that's not what a button should be used for, though). Or you can just set HTML with the desired string and background, make it a div and set Onclick event on it.
When editing my grid, if I click outside the grid, the box I was editing is still editable. How do I get the edited cell to "complete" the edit when it looses focus?
The following code will save the current edit.
Slick.GlobalEditorLock.commitCurrentEdit();
You'll need to place this inside an event handler that you think should trigger the save. For example, if you're using the sample text editor plugin, I believe an editor-text CSS class is added to the input field that's created when you're editing a cell so something like this should work:
$('#myGrid').on('blur', 'input.editor-text', function() {
Slick.GlobalEditorLock.commitCurrentEdit();
});
I found that I needed to wrap clav's handler in a timeout:
$("#myGrid").on('blur', 'input.editor-text', function() {
window.setTimeout(function() {
if (Slick.GlobalEditorLock.isActive())
Slick.GlobalEditorLock.commitCurrentEdit();
});
});
to avoid errors like:
Uncaught NotFoundError: An attempt was made to reference a Node in a context where it does not exist.
when using the keyboard to navigate. Presumably the new blur handler fires before SlickGrid can do its own handling and this causes problems.
Unfortunately, probably due to differences in event processing, Grame's version breaks keyboard navigation in chrome.
To fix this, I added another check to only commit the edit, if the newly focused element is not another editor element within the grid (as the result of keyboard navigation):
$('#grid').on('blur.editorFocusLost', 'input.editor-text', function() {
window.setTimeout(function() {
var focusedEditor = $("#grid :focus");
if (focusedEditor.length == 0 && Slick.GlobalEditorLock.isActive()) {
Slick.GlobalEditorLock.commitCurrentEdit();
}
});
});
This seems to work in current versions of firefox, chrome and ie.
I'm having some trouble with blur and click events in backbone. I have a view (code below) that creates a little search entry div with a button. I pop open this div and put focus on the entry field. If someone clicks off (blur) I notify a parent view to close this one. If they click on the button I'll initiate a search.
The blur behavior works fine, however when I click on the button I also get a blur event and can't get the click event. Have I got this structured right?
BTW, some other posts have suggested things like adding timers to the div in case its being closed before the click event fires. I can comment out the close completely and still only get the blur event. Do these only fire one at a time on some kind of first-com-first-served basis?
PB_SearchEntryView = Backbone.View.extend({
template: _.template("<div id='searchEntry' class='searchEntry'><input id='part'></input><button id='findit'>Search</button></div>"),
events: {
"click button": "find",
"blur #part": "close"
},
initialize: function(args) {
this.dad = args.dad;
},
render: function(){
$(this.el).html(this.template());
return this;
},
close: function(event){ this.dad.close(); },
find: function() {
alert("Find!");
}
});
I am not sure what the problem was, but here is the jsbin code.