Element is null

**tigunn** · 12/10/2011, 13h09

Bonjour,
j'ai implémenté un treeview avec mootools en utilisant Mif et le tuto : http://pilon.nl/mootools/2008/12/19/...t-mootools-12/ qui est très bien fait.
La première fois; j'ai suivi l'exemple -> aucun problème;
mais quant j'ai voulu implémenter ce treeview sur mon site, je me suis retrouvé avec des erreurs javascript. Je n'ai malheureusement pas idée d'où peut venir le problème; l'erreur retourne le message : "Erreur*: element is null
Fichier Source*: http://.../jscripts/mootools-1.2.5-core-nc.js
Ligne*: 1581".
Le code de la page:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<?php
$session = new Session();
 
require_once ('HTML/QuickForm.php');
 
header('Content-Type: text/html; Charset=UTF-8');
 
// Definition de l'utilisateur en cours
$user_en_cours = new user(...);
$user_en_cours->set...();
 
//declaration
$mode='visu';
$node='plan';
$id=1;
 
// definition
...
if ((isset($_REQUEST['id'])) AND ($_REQUEST['id'] != '')) {
        $id=$_REQUEST['id'];
}
unset($plan_en_cours);
//      definition du plan
$plan_en_cours = new plan();
$plan_en_cours->getPlanById($id);
$tab_plan_en_cours=plan::getTabPlanById($id);
 
/*html::dbg($plan_en_cours);  // bien définit
html::dbg($id); // =1 */
 
//      traitement
switch ($mode) {
        case 'delete' :
                include_once ('../form_confirm_delete.php');
                exit;
        case 'update' :
                include_once('../form_plan.php');
                include_once('../form_add_term.php');
                if ($form_plan->validate()) {
                        $values = $form_plan->getSubmitValues();
                        plan::update();
                        header('Location: plan.php?success=1&node=plan&mode=update&id='.$id); 
                        exit;
                }
                else {
                        $form_plan->setDefaults($tab_plan_en_cours);
                }
                break;  
}
 
//      Affichage
//-------------
$html = new html();
$html->body_open('header_popup.php');
$html->addJavascriptLibrary('mootools-1.2.5-core-nc.js', '', 'utf-8');
$html->addJavascriptLibrary('mootools-1.2.5.1-more.js', '', 'utf-8');
$html->addJavascriptLibrary('mif.tree-v1.2.6.4.2.js', '', 'utf-8');
?>
<script  type="text/javascript">
window.addEvent('domready',function(){
        tree = new Mif.Tree({
                container: $('tree_container'),
                forest: true,
                initialize: function(){
                        new Mif.Tree.KeyNav(this);
                        new Mif.Tree.Drag(this, {
                                onDrag: function(){
                                        $('destination').innerHTML=this.target ? this.target.name : '';
                                        $('where').innerHTML=this.where;
                                },
                                onStart: function(){
                                        $('source').innerHTML=this.current.name;
                                },
                                onComplete: function(){
                                        $('destination').innerHTML='';
                                        $('where').innerHTML='';
                                        $('source').innerHTML='';
                                }
                        });
                },
                dfltType:'folder',
                height: 18,
                onCopy: function(from, to, where, copy){
                        if(from.parent==copy.parent){
                                copy.set({
                                        property: {
                                                name: 'copy '+from.name
                                        }
                                });
                        }
                }
        });
        tree.load({
                url: 'data.php?json=yesplease&id=<?php echo $id ?>'
	});
});
</script>
<?php
//	cadre infos sur le plan
echo '<fieldset>
	<legend>'.gettext('Informations').'</legend>';
	$form_plan->display();
	echo '</fieldset>';
//	Affichage du plan - Arbre JsTree
echo '<fieldset>
	<legend>'.gettext('Plan').'</legend>
		<div id="tree_container"></div>	
	</fieldset>';
//	cadre pour ajouter un nouvel item
echo '<fieldset>
	<legend>'.gettext("Liste des termes").'</legend><div id="form_ajout_termes">';
	$form_add_term->display();	
echo '</fieldset>';
$html->body_close();

Je précise que j'ai les même fichiers javascript en local et sur le serveur.

Voici le code de data.php:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<?php
require_once('../config.inc.php');
$id=1;
if (isset($_REQUEST['id'])) {
	$id=$_REQUEST['id'];
}
//	definitions
$db_host='';
$db_user=$dblogin;
$db_password=$dbpassword;
$db_name=DBPROJECT;
mysql_connect($db_host,$db_user,$db_password) or die(mysql_error()); 
mysql_select_db($db_name) or die(mysql_error());
// get all menuitems / Plan with 1 query
 $sql = "SELECT 
            `id`, `idPlan`, `parentId`, `order`, `name` 
        FROM 
            `plans_menu` 
        WHERE `idPlan` = ".$id." 
        ORDER BY 
            `parentId`, `order`";
$result = mysql_query($sql) or die(mysql_error());
 
// prepare special array with parent-child relations
$menuData = array(
    'items' => array(),
    'parents' => array()
);
while ($menuItem = mysql_fetch_assoc($result)) {
    $menuData['items'][$menuItem['id']] = $menuItem;
    $menuData['parents'][$menuItem['parentId']][] = $menuItem['id'];
} 
// menu builder function, parentId 0 is the root
function buildMenu($parentId, $menuData)
{
    $html = '';
    if (isset($menuData['parents'][$parentId]))
    {
        $html = '<ul>';
        foreach ($menuData['parents'][$parentId] as $itemId)
        {
            $html .= '<li>' . $menuData['items'][$itemId]['name'];
            // find childitems recursively
            $html .= buildMenu($itemId, $menuData);
            $html .= '</li>';
        }
        $html .= '</ul>';
    }
    return $html;
}
function buildJSONarray($parentId, $menuData) {
    $aJSON = array();
    if (isset($menuData['parents'][$parentId])) {
        $i = 0;
        foreach ($menuData['parents'][$parentId] as $itemId) {
            $aJSON[$i]["property"]["id"] = "item" . $itemId;
            $aJSON[$i]["property"]["name"] = filter_var($menuData['items'][$itemId]['name'], FILTER_SANITIZE_SPECIAL_CHARS);
            $aJSON[$i]["children"] = buildJSONarray($itemId, $menuData);
            $i++;
        }
    }
    return $aJSON;
}
function buildJSON($menuData) {
    return json_encode(buildJSONarray(0, $menuData));
}
if (isset($_GET['json'])) {
    // output json
    header("Content-type: text/plain");
    echo buildJSON($menuData);
} else {
    $menu = buildMenu(0, $menuData); 
}
?>

Vous pouvez récupérer mootools core ici.

Je vous communique, en pièce jointe, mes tests et modifications de base sur le treeview Mif. Il vous suffit de décompresser le répertoire en local dans votre répertoire de travail, puis de créer une base de données (cf dump.sql et data.php); rien de compliqué et cela fonctionne très bien .

Apparemment cela serait dût à un conflit avec JQuery.

Dans $html->body_open() je fais appel a des bibliothèques JQuery, si je les commente, mon treeview s'affiche .. enfin

Je cherche comment eviter cela.