Element is null [Résolu]

[tigunn]

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 :

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 :

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.

[vermine]

Bonjour,

Ha si c'est un conflit avec jQuery (ce qui est tout à fait possible), c'est réglable. jQuery propose sa technique noConflict. Tu peux faire des recherches sur le forum jQuery. Tu obtiens par exemple ce post-ci. Il y a plusieurs solutions qui y sont présentées.

Tiens nous au courant !

[tigunn]

Merci de ton aide.
J'avais bien un conflit avec JQuery qui peut se résoudre en utilisant cette méthode APRES les scripts JQuery et AVANT ceux de Mootools :

Code :

1
2
3
4
5
6
7
8
9
var dom = {};
dom.query = jQuery.noConflict(true);
//Exemples:
// Do something with the new jQuery
dom.query("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';
// Do something with another version of jQuery
jQuery("div > p").hide();

Pour plus d'infos, je vous invite à lire: jQuery.noConflict.