deitch/jstree-model-back — Issue #3: progressive_render bug  And help needed on search function
Author: Sitolog
Created: 2012-02-18 08:56:20+00:00
State: open

Hi Deitch,

I have been successfull implementing a fully dynamic tree, thanks to your pluggins and support..

However, I have one remaining issue, and one small bug to report.

Bug: When progressif_render=true is commented (or set to false), it becomes impossible to close the nodes. The +/- icons are all set to + (should be -) and clicking on them has no action. Looks like the model is still considering the nodes as closed, while they are all opened. Same bug on your two html examples.

Issue: I need to have a search function on names, capable to search a keyword on all nodes even the ones not yet loaded. To do so I have implemented a search php script that is searching directly in the database and that is returning a json tree model with all nodes containing the search keyword.

This script is called with ajax, by a clic on a search button, using the jstree search pluggin. Working ok, the json returned is ok.

But , I have not found how to have the tree refreshed or replaced with the content of the returned json.

This is not working, but no clue why:

$("#search_target").click(function ()
{
// HERE IS INSERTED MY AJAX CALL THAT IS RETURNING A NEW JSON - THIS IS WORKING OK - RESULT IS COPIED TO TREEDATA

//for testing purpose, let's create directly the new values of treedata . Let's suppose this is the result of a search on the database on the keyword "child*":

treeData = {
1: {name:"Root 1",price: "$5.00", size: "4", id:1, children:[2,3]},
2: {name: "Child 2",price: "$4.00", size: "3", id:2},
3: {name: "Child 3",price: "$3.00", size: "2", id:3, children:[4,6]},
4: {name: "Grandchild 4",price: "$3.00", size: "2", id:4},
5: {name: "Grandchild 5",price: "$3.00", size: "2", id:5},
6: {name: "Grandchild 6",price: "$3.00", size: "2", id:6}
};

//Try to have the tree rebuild - NOT WORKING !!!!!! : Why ??
root = node().addChild(node(treeData[1].name,treeData[1],"rooter"));
//node().openNode(root); //Has no effect at all

//Now that the tree includes all nodes containing my search data, I run the jstree search function to highlight the results
$("div#jstree1").jstree("search",$("#perdu_target").val());
});

So this is not working, the root = node().addChild(node(treeData[1].name,treeData[1],"rooter")); line has not other effect than hanging everything.

Can you help me to understand how to get the tree updated with the data contained in the json object, returned by by ajax search function ?

For info here is my complete ajax search call, very similar to the ajax call I included into the open node function (and which is working fine). The only difference is the "key" parameter:

Id_root = "";
Id_root = parseInt(''); //ok
Id_root ="IdC#"+Id_root; //OK IdC#1

$("#search_target").click(function ()
{

mon_id = "Home";
key = $("#perdu_target").val();
is_cat = 1;

jsonPHP = "http://127.0.0.1/myphotorescue/modules/whopurchasedthis/_model_data.php?id_lang="+parseInt('');

$.getJSON(
jsonPHP,
{"id":mon_id,"cat":is_cat,"key":key},
function(searchjson) {
treeDataSearch = searchjson;
}
);

//Example of json returned, root none is IdC#1
/* {"PT14": {"name":"Optimisation d'un lot de photos","id":"PT14","ref":"MPR05","cat":0,"rel":"T"},"PT17": {"name":"Optimisation d'un portrait","id":"PT17","ref":"MPR06","cat":0,"rel":"T"},"PT52": {"name":"Panoramic - Tarifs impression","id":"PT52","ref":"TemplateTarifsImp","cat":0,"rel":"T"},"PT28": {"name":"Rajeunir un visage","id":"PT28","ref":"MPR08","cat":0,"rel":"T"},"PT18": {"name":"Suppression d'éléments d'arrière plan","id":"PT18","ref":"MPR07","cat":0,"rel":"T"},"PT31": {"name":"Suppression difficile d'éléments gênants","id":"PT31","ref":"MPR09","cat":0,"rel":"T"},"PT63": {"name":"Template posters couleur","id":"PT63","ref":"","cat":0,"rel":"T"},"PT62": {"name":"Template tarif impression AVEC Opt fond flouté","id":"PT62","ref":"Template 3","cat":0,"rel":"T"},"PT50": {"name":"Template Tarifs impression","id":"PT50","ref":"TemplateTarifsImp","cat":0,"rel":"T"},"PT56": {"name":"Test","id":"PT56","ref":"testé","cat":0,"rel":"T"},"IdC#5": {"name":"01.Restauration vieilles photos","id":"IdC#5","ref":"","cat":1,"children":["PT10","PT13","PT16","PT30"]},"IdC#7": {"name":"02.Retouche photos récentes","id":"IdC#7","ref":"","cat":1,"children":["PT14","PT17","PT18","PT28","PT31"]},"IdC#8": {"name":"03.Colorisation photos et N&B","id":"IdC#8","ref":"","cat":1,"children":["PT20","PT21","PT22","PT26","PT27","PT29","IdC#11","IdC#14"]},"IdC#9": {"name":"04.Photo montages et trucages","id":"IdC#9","ref":"","cat":1,"children":["PT19","PT23","PT32","PT47","PT55","PT67"]},"IdC#10": {"name":"05.Effets spéciaux Arts graphiques","id":"IdC#10","ref":"","cat":1,"children":["PT36","PT40","PT46","PT59","PT66"]},"IdC#13": {"name":"06.Astro photographie","id":"IdC#13","ref":"","cat":1,"children":["PT37","PT38","PT39","PT41","PT77","PT80","IdC#15"]},"IdC#16": {"name":"08.Outils pour Webmasters","id":"IdC#16","ref":"","cat":1,"children":["PT58","PT65","PT69","PT70","PT71","PT72","PT73","PT74","PT75","PT76","PT78","PT79"]},"IdC#12": {"name":"09.Autres et devis","id":"IdC#12","ref":"","cat":1,"children":["PT33","PT68","PT81","IdC#6"]},"IdC#1": {"name":"Accueil","id":"IdC#1","ref":"","cat":1,"children":["PT50","PT52","PT56","PT62","PT63","IdC#5","IdC#7","IdC#8","IdC#9","IdC#10","IdC#12","IdC#13","IdC#16"]}} */

alert("Search done in database, will now search in the loaded tree"); //BUG: If this alert is missing the tree is not displayed

Id_root = "";
Id_root = parseInt('');
Id_root ="IdC#"+Id_root;

var rootname = treeDataSearch[Id_root].name;
var roottreedata = treeDataSearch[Id_root];

root = node().addChild(node(rootname,roottreedata,"rooter")); // DOING NOTHING !!!!!

$(".products_target").jstree("search",$("#perdu_target").val()); //find nothing as new nodes have not been added
});

Rgds
Franck