I have a external draggable object (draggable implemented through jstee's dnd) on which I need to perform a check before the object starts dragging.
I'm looking for a method much like "drag_finish" or a binding I can use, but at the start of the dragging event.
$(document).bind("drag_start.vakata", function (e, data) {
if(data.data.jstree) {
// add your code here
}
});
Binding to the document did the trick
Just as a more complete answer, here's some code for all 3 events (start, drag and stop):
$(document).bind("drag_start.vakata", function (e, data) {
if (data.data.jstree) {
//User started dragging
}
});
$(document).bind("drag.vakata", function (e, data) {
if (data.data.jstree) {
//User is dragging
}
});
$(document).bind("drag_stop.vakata", function (e, data) {
if (data.data.jstree) {
//User stopped dragging
}
});
drag_start.vakata has been changed to dnd_start.vakata Now the above event would be triggered on these Functions:
$(document).bind("drag_start.vakata", function (e, data) {
if (data.data.jstree) {
//User started dragging
}});
$(document).bind("drag.vakata", function (e, data) {
if (data.data.jstree) {
//User is dragging
}});
$(document).bind("drag_stop.vakata", function (e, data) {
if (data.data.jstree) {
//User stopped dragging
}});
Related
I am using Ionic Native Geolocation plugin from HERE and to start with the example provided so I've done this:
getLocation() {
this.geolocation.getCurrentPosition().then((resp) => {
// resp.coords.latitude
// resp.coords.longitude
}).catch((error) => {
console.log('Error getting location', error);
});
let watch = this.geolocation.watchPosition();
watch.subscribe((data) => {
// data.coords.latitude
// data.coords.longitude
});
}
I don't understand the code ... does it seem to be doing the same thing twice?
It's got the getCurrentPosition and the watchPosition sections and both get the saqme data?
Why? I'm I missing something?
In summery: this.geolocation.getCurrentPosition() is used to retrieve the device's current location once, while this.geolocation.watchPosition() Registers a handler function that will be called automatically each time the position of the device changes, returning the updated location.
References:
https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API
Code Examples:
//define the userPositionWatch
userPositionWatch: any;
//Subscriber to the userPositionWatch
this.userPositionWatch = this.geolocation.watchPosition()
.subscribe(
(position: any) => {
// This method will be triggered each time the position of the device changes
console.debug("geolocation.watchPosition => the callback function have been triggered");
let data: any = position;
if (data.coords !== undefined) {
this.doSomethingWithThePos(data.coords.latitude, data.coords.longitude);
} else {
console.error("geolocation.watchPosition() => the callback function have been triggered and the position is undefined", data);
}
}
, (error: any) => {
console.error("geolocation.watchPosition() => the callback function have been triggered and the there is an error:", error);
});
//To remove the subscription
this.userPositionWatch.unsubscribe();
//Another way to remove the subscription
navigator.geolocation.clearWatch(this.userPositionWatch);
this.geolocation.getCurrentPosition()
.then((position: any) => {
let data: any = position;
if (data.coords !== undefined) {
this.doSomethingWithThePos(data.coords.latitude, data.coords.longitude);
} else {
console.error("geolocation.getCurrentPosition() => the position is undefined", data);
}
}).catch(error => {
console.error("geolocation.getCurrentPosition() => the position has error:", error);
})
I hope it was clear...
I need to execute an ajax call after the user moves a node in a jsTree using the dnd plugin. If that ajax call returns an error, I need to either prevent the move from happening, or reverse the action altogether. From the move_node event listener, is there a way to tell the dnd plugin to reverse the drop or somehow cancel the action? I've tried returning false and setting e.preventDefault() and e.stopImmediatePropagation() but nothing seems to work.
$($tree).jstree({
core: {
data: $treeData,
check_callback: function (op, node, parent, position, more) {
switch (op) {
case 'move_node':
// moveNode() validates the move based on
// some data stored in each node, but doesn't
// (and shouldn't) make an ajax call to determine
// if the node *actually can* be moved
return moveNode(node, parent, position, more);
}
}
},
plugins: ['dnd']
}).on('move_node.jstree', function(e, data) {
// moveNode() returned true and the user moved the node
if (!doMoveNode(data)) {
// none of this works!!
e.preventDefault();
e.stopImmediatePropagation();
return false;
}
});
I figured this out... the key is to intercept the move before it happens, which can be done in the check_callback as so:
function doMoveNode (node, parent) {
// tell the server to move the node
var nodeID = node.original.appData.id,
parentID = parent.original.appData.id,
success = false;
// make a non-async call to move the node
$.ajax({
url: move-product.php',
type: 'post',
async: false,
data: {
nodeID: nodeID,
parentID: parentID
},
dataType: 'json',
success: function (json) {
if (json.errorCode === 0) {
// this happens when the server was happy
success = true;
}
},
error: function (xhr) {
alert('an error occurred');
}
});
return success;
}
function moveNode (node, parent, position, more) {
// perform client-side validation to see if we can move node into parent
// just a demo, so always return true
return true;
}
$($tree).jstree({
core: {
data: $treeData,
check_callback: function (op, node, parent, position, more) {
switch (op) {
case 'move_node':
if (more && more.core) {
// this is the condition when the user dropped
// make a synchronous call to the server and
// return false if the server rejects the action
return doMoveNode(node, parent);
}
// return true if we can move, false if not
return moveNode(node, parent, position, more);
}
}
},
plugins: ['dnd']
}).on('move_node.jstree', function(e, data) {
// the move already happened
});
I have written a basic after hook in cucumberjs for some reason , it is not working as expected.It is supposed to attached screenshot and write browser console log , when scenario fails. But it attaches the screen shot after the feature in html report and prints the browser console log at after in between the second scenarioenter image description here.Any clue what's wrong??
this.After(function(scenario, callback) {
if (scenario.isFailed()) {
global.browser.takeScreenshot().then(function(base64png) {
var decodedImage = new Buffer(base64png,'base64').toString('binary');
scenario.attach(decodedImage, 'image/png');
});
global.browser.manage().logs().get('browser').then(function (browserlog){
browserlog.forEach(function (log) {
if (log.level.value > 900) {
console.error(log.message.substring(log.message.indexOf('Error'),log.message.indexOf('\n')))
}
})
});
callback();
} else {
callback();
}
});
According to the cucumberjs github page https://github.com/cucumber/cucumber-js#attachments
Images and other binary data can be attached using a stream.Readable. In that case, passing a callback to attach() becomes mandatory:
You could split the single after hook into two separate hooks:
this.After(function(scenario, next) {
browser.takeScreenshot().then(function(png) {
var decodedImage = new Buffer(png, 'base64').toString('binary');
scenario.attach(decodedImage, 'image/png', next);
}, function(err) {
next(err);
});
});
this.After(function(scenario, next) {
global.browser.manage().logs().get('browser').then(function (browserlog){
browserlog.forEach(function (log) {
if (log.level.value > 900) {
console.error(log.message.substring(log.message.indexOf('Error'),log.message.indexOf('\n')))
}
});
});
});
I'm trying to capture dnd events in jsTree 3.0.0. I used the demo code to build event handlers. The tree builds fine, but the events never fire. What am I missing?
This is the pertinent part. The JSON works fine and builds the tree itself find. However, the console.log calls never occur when I drag and drop on the tree.
<link href="/jquery/jquery-ui-1.10.3/css/ui-lightness/jquery-ui-1.10.3.custom.min.css" rel="Stylesheet"/>
<script src="/jquery/jquery-ui-1.10.3/js/jquery-1.9.1.js"/>
<script src="/jquery/jquery-ui-1.10.3/js/jquery-ui-1.10.3.custom.min.js"/>
<link href="/jquery/plugins/jsTree/themes/default/style.min.css" rel="stylesheet"/>
<script src="/jquery/plugins/jsTree/jstree.js"/>
<script>
$(function () {
$('#jstree')
// listen for events
.on('dnd_start.vakata', function (e, data) {
console.log('Dragged');
})
.on('dnd_stop.vakata', function (e, data) {
console.log('Dropped');
})
// create the instance
.jstree({
"core" : {
"check_callback" : true,
'data' : {
'url' : 'categoriesJson.pm?json=1',
'data' : function(node) {
console.log (node);
return {
'id' : node.id
}
}
},
"themes" : {
"stripes" : true
}
},
"plugins" : [ "dnd" ]
});
$(document).bind("drag_stop.vakata", function (e, data) {
if (data.data.jstree) {
console.log('User stopped dragging');
}
});
});
</script>
The event is only triggered on the "document".
Try this:
$(document).on('dnd_start.vakata', function (e, data) {
console.log('Started');
});
It works!
In the documentation https://www.jstree.com/api/#/?q=event&f=dnd_start.vakata
DnD events (dnd_start, dnd_move, dnd_stop) are triggered on document, not on tree.
These events are differents from "move_node.jstree" event, which is called only at the end of Drag & Drop (equivalent to Drop event).
$(document).bind("dnd_start.vakata", function(e, data) {
console.log("Start dnd");
})
.bind("dnd_move.vakata", function(e, data) {
console.log("Move dnd");
})
.bind("dnd_stop.vakata", function(e, data) {
console.log("Stop dnd");
});
$("#tree").jstree({
// tree...
}).bind("move_node.jstree", function(e, data) {
console.log("Drop node " + data.node.id + " to " + data.parent);
});
I have an embedded image document in my main document and I am able to update it as follows. Everytime it updates, it just overrides the existing image and does not add it to the existing images.. I tried by "{images.push: image}", but that does not work. what is the syntax ? I am not sure if i am able to explain the problem. if not, please let me know if i need to add more info here.
var image = {
img : new_file_name,
orig_img_name : files.source.filename,
caption : fields.message,
upload_date : new Date()
};
RentModel.update({'facebook_id':fb_id, 'prop_location.lat':lat, 'prop_location.lng':lng}, {'images':image}, function(err, docs){
if(err) {
console.log("Error during friends update");
throw err;
}
console.log('image updated to database', new_file_name);
});
try to find() the embedded document first and then add the image to the array.
RentModel.find({'facebook_id':fb_id, 'prop_location.lat':lat, 'prop_location.lng':lng}, function (err, item) {
if (err) //throw ...
if (item) {
if (item.images && item.images.length) {
item.images.push(image);
}
else {
item.images = [image];
}
// save changes
item.save(function (err) {
if (!err) {
// done ...
}
});
}
});