Edit extension - handling with logical (server-side) validations

26 views
Skip to first unread message

rogerio...@gmail.com

unread,
Jun 28, 2019, 1:57:42 PM6/28/19
to Fancytree Q&A
Firstly, many thanks for the excellent plug-in.

I am kind of new to the world of web development, but i am being able to solve all the challenges implementing the plug-in... except this one... (at least for now :))

I am using edit ext. and I am not being able to manage this in case of a "invalid" server validation...

I am using the "save" event in order to implement an ajax call to the server, like this:

save: function(event, data){
request = $.ajax({
url: "xhr/rename_object.php",
type: "POST",
data: {
object_data_record_id: node.data.record_id,
object_name: data.input.val()
}
});
request.done(function(result){
if (result.retcode>0) {
// I would like to return false from "save" if the condition is verified...
}
// Currently it is allways returning true, as outside the function I don't know out to test result.retcode...
}

Many thanks !!!

mar10

unread,
Jul 1, 2019, 2:07:16 PM7/1/19
to Fancytree Q&A

rogerio...@gmail.com

unread,
Jul 2, 2019, 6:02:27 PM7/2/19
to Fancytree Q&A
Many tx for the quick reply!

I saw the recipe many thanks, but I still have the same problem, when the server returns a logical error like "invalid title..." I am not able to exit false from the save event and keep the editor open...

Many thanks

mar10

unread,
Jul 5, 2019, 2:34:28 AM7/5/19
to Fancytree Q&A
Did you try to always return false from the save event, and then call `node.editEnd(false)` when the Ajax call succeeds?
You may also want to set the intro control to readonly while the request is running, and re-enable it when Ajax fails....

rogerio...@gmail.com

unread,
Jul 6, 2019, 6:32:52 PM7/6/19
to Fancytree Q&A
Worked like a charm, than you very much!!! I've browsed all the docs in the wiki and I missed the node.editEnd()...

tx again!

mar10

unread,
Jul 7, 2019, 9:55:14 AM7/7/19
to Fancytree Q&A
My pleasure :)
If you have a simple pattern you'd like to share, I could add it to the Wiki page.

rogerio...@gmail.com

unread,
Jul 8, 2019, 5:01:49 AM7/8/19
to Fancytree Q&A
Hi,

How about this...

RECIPE to handle server/application validation errors on editing...

Tx a lot again!

--------
$("#your_tree").fancytree({
extensions: ["edit"],
source: {
<your source>
},
edit: {
triggerStart: ["clickActive", "f2", "dblclick", "shift+click", "mac+enter"],
beforeEdit: function(event, data){
var node = data.node;

if ( <your_contidions_to_avoid_editing> ) {

return false;
}
},

save: function(event, data){
var node = data.node;


var newTitle = data.input.val();
var originalTitle = data.orgTitle;

// Save data.input.val() or return false to keep the editor open
request = $.ajax({

<your_ajax_call_to_validate_and_update_title_in_server|db)>

});

request.done(function(result){
// Server might return an application error

if (result.retcode>0) { // validation error

// Do something related to application error here
}
else {
// server returned OK
node.setTitle(<user_typed_value or server_updated_value>);

// important! exit sucessfull editing
node.editEnd(false);
}

});

request.fail(function(result){

// maybe update title with original value
node.setTitle(originalTitle);
});

request.always(function(){
$(data.node.span).removeClass("pending");
});

// Always return false except when receives server validation successfully
return false;
},

close: function(event, data){
// Editor was removed. If we started an async request, mark the node as pending
if( data.save ) {
$(data.node.span).addClass("pending");
}
},
},
});

mar10

unread,
Jul 8, 2019, 4:12:38 PM7/8/19
to Fancytree Q&A
Reply all
Reply to author
Forward
0 new messages