I try to show context menu jstree on hover event with using api context menu plugin, but it doesn't work. Have you any idea how to do this?
I had to implement the same thing. Here's what I ended up doing:
var $treeView = "myTreeList";
$treeView.jstree({
/* options */
})
.on('loaded.jstree', function() {
$(".myTreeList a").hover(
function(){
$treeView.jstree("show_contextmenu", $(this));
}
);
})
I just hooked up a hover event to every anchor in the tree when the loaded event fired (don't try to use the li elements or the event on a child will fire along with all it's ancestors). You could also use "on" instead of just hover and you wouldn't need to do this in the loaded event handler but that's what worked for me.
Related
I have an input element inside a Jquery-UI selectable element. And I want to fire the blur event when clicking outside the input, but it's not possible, because of the container, the selectable element stops propagating the mousedown.
Example here.
How can I fire the blur event?
I come across these problems a lot while working on complex UI stuff, here give this a try:
http://jsfiddle.net/LNtqE/5/
What the code is doing is registering a psuedo-blur event to the document that will only fire once, then unbind itself. The event will only fire if the target is NOT the input that registered it... this could work for all inputs, or specific ones depending on what you feed to the selector :)
$(document).ready(function(){
$('#selectable').selectable({});
$("input").on("focus", function(e) {
var $input = $(this);
$(document).on("mouseup", function(e2) {
if( !$(e2.target).is( $input )) {
$input.trigger("blur");
$(this).off(e2);
}
});
});
});
$(document).on("pagebeforeshow", function(event) {
$("#mybtn").on("click", function(e) {
$.mobile.showPageLoadingMsg();
$.mobile.changePage("twitter.html", {
reloadPage: false, changeHash: true,
});
$('#mybtn').unbind('');
});
});
Can u tell me why Unbind is important in Jquery mobile and Please tell me best way To unbind events.I used Following way to bind and unbind events.Is that ok
Have a look at this example: NO UNBIND USED
CODE
$("#page2").on("pagebeforeshow", function(){
$("#testBtn").on("click", function(){
alert("Hi!");
});
});
If you go from page 1 to page 2, and then click the button named Click me you will see that the alert "Hi!" is shown properly. The event was binded on pagebeforeshow, till now everything is ok.
Now go back to page1, and then load again page2, click again the Click me button.. you will see that the alert is shown 2 times! and this is WRONG. That's why you need to unbind the event BEFORE you bind it again.
Basically, every time you load page2, you bind a new event to the button.. so, if you load 10 times that page, you will have 10 events binded to the button, that will fire once the button is clicked.
Here's a working fiddle with the unbind (to unbind the event, I used off()): UNBIND USED
CODE
$("#page2").on("pagebeforeshow", function(){
$("#testBtn").off("click").on("click", function(){
alert("Hi!");
});
});
have a look here to understand why I used off() instead of unbind(), and also here if you wat to see how off() works
I hope this helps to clarify your doubts..
I create a new jQuery element after the mouse is in a down position and before it is released. (After mousedown).
I would like to programmatically trigger dragging on the new element using jQuery UI, so that it will automatically begin dragging with my mouse movement. I don't want to have to release and then click the mouse again.
I have tried the following...
var element = $("<div />");
element.appendTo("body").draggable().trigger("mousedown");
...however this does not work.
Does anyone have any suggestions on how to accomplish this?
UPDATE: After some searching the poster of this question has the identical problem. However the suggested solution, which boils down to...
$("body").on("mousedown", function(e) {
$("<div />").draggable().appendTo("body").trigger(e);
});
...no longer works in the latest versions jQuery and jQuery-UI, and instead generates a Maximum Call Stack Exceeded error.
The draggable plugin expects its mousedown events to use its namespace and to point to the draggable object as the target. Modifying these fields in the event works with jQuery 1.8.3 and jQuery UI 1.9.2.
$("body").on("mousedown", function(e) {
var div = $("<div />").draggable().appendTo("body");
e.type = "mousedown.draggable";
e.target = div[0];
div.trigger(e);
});
Demo here: http://jsfiddle.net/maCmB/1/
UPDATE:
See fuzzyBSc's answer below. It's the proper way to do this.
This is totally a hack, but it seems to do the trick:
var myDraggable = $('#mydraggable').draggable();
// Yeah... we're going to hack the widget
var widget = myDraggable.data('ui-draggable');
var clickEvent = null;
myDraggable.click(function(event){
if(!clickEvent){
widget._mouseStart(event);
clickEvent = event;
}
else {
widget._mouseUp(event);
clickEvent = null;
}
});
$(document).mousemove(function(event){
console.log(event);
if(clickEvent){
// We need to set this to our own clickEvent, otherwise
// it won't position correctly.
widget._mouseDownEvent = clickEvent;
widget._mouseMove(event);
}
});
Here's the plunker
My example uses an element that already exists instead of creating one, but it should work similarly.
Create your draggable function on mouseover
$('#futureDragableElement').mouseover(function() {
$(this).draggable();
});
As the draggable initialization has already be done, your first mouse click will be taken into account
You have to bind the mousedown event to the element in question, then you can trigger the event.
From http://api.jquery.com/trigger/
Any event handlers attached with .bind() or one of its shortcut
methods are triggered when the corresponding event occurs. They can be
fired manually, however, with the .trigger() method. A call to
.trigger() executes the handlers in the same order they would be if
the event were triggered naturally by the user:
$('#foo').bind('click', function() {
alert($(this).text());
});
$('#foo').trigger('click');
Hacks are not needed if you are creating the element during the event and that element is not too complicated. You can simply set draggable to the element that mousedown occurs and use draggable helper property to create a helper that is going to be your new element. On dragStop clone the helper to the location in dom you want.
$('body').draggable({
helper: function() {
return '<div>your newly created element being dragged</div>';
},
stop: function (e,ui) {
ui.helper.clone().appendTo('body');
}
});
Of course you would need to set position for the helper, so mouse is on it. This is just a very basic example.
I have the following bit of jquery:
http://jsfiddle.net/tad604/Ck2qk/10/
I want the foo div's click handler to not fire, when you click and drag. I've tried doing all sorts of things inside the stop/start events of the drag (event.stopPropagation() etc) all to no avail. The click handler is fired after the drag event regardless.
It's annoying, but the only fix is to remove the event on drag start and put it back on drag stop. Try this:
$(".foo").click(function(){
alert("blah");
});
$(".bar").draggable({
stop: function(event) { setTimeout(function() {
$(".foo").click(function(){
alert("blah");
}); }, 100)},
start: function(event) { $('.foo').unbind('click'); }
});
Now there is still the problem that your click events are probably a bit more complicated than this, and you probably don't want to have to rewrite them. You can save the events for later using jquery data like this:
var events = $('#test').data("events");
Alternatively, you can use jquery live function to attach the click event so the event will only ever be binded to an element that matches that selector. That means if you change the class while dragging, so that it no longer matches that selector, it would no longer have that click event. Something like this might work:
$(".bar .foo").live('click', function(){
alert("blah");
});
$(".bar").draggable({
stop: function(event) { setTimeout(function() {
$(".draggableBar").removeClass('draggableBar').addClass('bar');
}, 100)},
start: function(event) { $(this).removeClass('bar').addClass('draggableBar'); }
});
You'd also have to update the css so draggablebar gets the same style as bar.
EDIT:
the jQuery UI selectable widget has a callback built into it, stop, I need to know how to trigger this event programmatically.
(this was poorly worded)
I've attached an event listener to the jQuery UI Selectable Widget. How can I programmatically trigger the stop event?
Ex Selectable:
$("table").selectable({
filter: "tr",
stop: function(){
//do stuff
}
});
// Various attempts at triggering the stop event
// one
$("table .ui-selected").click();
// two
$("table .ui-selected").select();
// three
$("table .ui-selected").trigger("click");
// shot in the dark 1
$("table").selectable('widget').trigger('stop');
// Shot in the dark 2
$("table").trigger('stop');
// really long shot in the dark
$("table").selectable('widget').call('stop');
Further Attempts
// selectablestop event
$("#table").selectable('widget').trigger('selectablestop');
$("#table .ui-selected").trigger('selectablestop');
If you want to trigger the event outside of the control you can simply call .trigger(). This assumes you are using the .bind() and not the anonymous stop:function() in options.
$("#selectable").selectable({});
$("#selectable").bind("selectablestop", function(event) {
$("body").append("<h1>did selectablestop</h1>");
});
$(":button").click(function() {
$('#selectable').trigger('selectablestop');
});
Code example on jsfiddle.
Edit
Another way would be to retrieve the stop: option value (which would be the function)
var s = $('#selectable').selectable( "option" , "stop");
s(); //call the function.
Code example on jsfiddle.
I ended up doing this, found at How to programmatically select selectables with jQuery UI?
$('#selectable').data("selectable")._mouseStop(null);
This will trigger the mouse stop event and execute the binded stop function on the selectable. If there's a way to trigger the stop in a more elegant way, I would love to see.