[AJAX] Ajax.updater qui n´arrive pas a afficher, le contenu dans la div indiquée

Version imprimable

bonjour tout le monde,

j´ai un petit souci

je ne comprend vraiment rien, j´ ai une page php ayant du html, et un fichier javascript, quand j´appuie sur le button chercher, cela ne me renvoi pas a la page concerner, pourtant les autres marche impeccablement
voici les concernés :

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
 
la function javascript 
function fSuche(sTable,sAction)
{
        showLoading();
        url = 'Lib/ProzessSuche.php';
        target = 'fuss';
        $('fuss').style.display = '';
        if(sAction =='')
        {
          $('fSuchen').reset();
        }
        pars = Form.serialize('fSuchen');
 
        pars +='&tbl='+sTable;
        myAjax = new Ajax.Updater(target, url, {method: 'get', parameters: pars});
 
        sTabelle =sTable;
        url = './datagrid3/example_oracle.php';
 
        target = 'inhalt';
        pars = Form.serialize('fSuchen');
 
        pars +='&tbl='+sTabelle;
 
        myAjax = new Ajax.Updater(target, url, {method: 'get', parameters: pars});       
 
}
 
 
function showLoading()
{
  $('inhalt').innerHTML ="<center><font style='font-size=12px;'>Données en cours de telechargement ...</font><img src='../Images/common/loading.gif'></center>";
}
 
 
document html permettant d´envoyer la requete a la function fSuche(sTable,sAction): 
 
<div id ='suche2' style="position:absolute; left:0px; top:0px;  border:0px; ">
   <form method="post" name="fSuchen" id ="fSuchen">
     <fieldset class='blue_class_legend' style=" width:200px; height:140px;  border:0px; " >
       <legend>
	     <font color='blue'>
		   SUCHE
		 </font>
       </legend>
	   <table border=0 align='center' width='200px'  > 
         <tbody>
           <tr valign="middle">
		     <td>&nbsp;</td>
			 <td> 
			   <select class="blue_class_select" name="blindsucheOperator" id="blindsucheOperator">
			     <option value="=">egal</option>
				 <option value="&gt;=">plus grand que</option>
				 <option value="&lt;">plus petit que</option>
				 <option value="like">exactement</option>
				 <option value="like%">commence avec</option>
				 <option value="%like">finit avec</option>
				 <option value="%like%">contient</option>
				 <option value="not like">ne contient pas</option>
			  </select>
		    </td>
           <td align="rigth" width="50%">
             <input class="blue_class_textbox" size=6 value="" name="blindsucheOperatortext" id="blindsucheOperatortext" type="text">
		   </td>
		   <td colspan="5" align="center">
		     <input class="blue_class_button" name="SUBMIT_FILTER" id="SUBMIT_FILTER" value="chercher" type="submit" onclick="fSuche('KATASTER','suche'); return false;">&nbsp;
		     <input class="blue_class_button" name="SUBMIT_RESET" id="SUBMIT_RESET" value="annuller" accesskey="13" type="button" onclick="fSuche('KATASTER','');return false;">
		   </td>
         </tr>
         <tr>
		   <td colspan="5" style="font-size:10px;" color='black' align="center" height="6">
		   </td>
		 </tr>
	   </tbody>
	 </table>
   </fieldset>
 </form>
</DIV>
 
<div id="inhalt"> </div>

je ne comprend vraiment rien.
de plus avant cela marchait impeccablement, maintenant seul le

Code:

1
2
 
Showloading();

marche mais il n´arrive pas dans la 2eme requete ajax.updater();
quelqu´un a-t - il une idée. pourquoi le loading n´est pas remplacé par la seconde requete.

Merci d´avance

17/11/2008, 17h29
marcha
La variable Form n'est pas déclarée dans ton exemple, l'est-elle en global
ou est-ce que tu voulais écrire plutot:
Code:

1 2 pars = $('fSuchen').serialize();
18/11/2008, 10h58
jeffray03
non elle est bien declare, c´est la balise du formulaire:
Code:

1 2 3 <form method="post" name="fSuchen" id ="fSuchen"> </form>
si tu regardes bien mon code, c´est elle qui entoure les balises <input>,
18/11/2008, 11h28
marcha

ce que tu montre là est un fragment html, rien à voir avec
une déclaration de variable javascript.
18/11/2008, 11h58
jeffray03
avec le prototype que j´utilise, quand tu fais :
Code:

1 2 Form.serialise("le_nom_de_ton_formulaire");
'Form' veux tout simplement dire que c´est un formulaire c´est pour cela que j´ai fait allusion a cela.

ok désolé :) j'ai plus utilisé prototype depuis quelques temps :)

Bon alors pour ton problème:

Le formulaire est posté, il provoque un rechargement de ta page.

tu as utilisé un return false dans le onclick de ton bouton, ce qui
évite en effet le traitement par défaut du click.

mais comme ton bouton est de type submit, cela produit un autre
évènement qui lui n'est pas désactivé.

tu peux par exemple mettre un onsubmit="return false;" dans ta
balise form pour corriger le problème.

mais il serait plus judicieux de mettre directement
onsubmit="fSuche('KATASTER','suche'); return false;" dans ta balise
form et oublier la gestion du onclick sur ce bouton.

D'autre part, tu pourrais aussi éviter les évènements DOM0 en assignant
tes évènements avec Event.observe qui a l'avantage d'autoriser un
éventuel chainage, qui permet une meilleure séparation du code html/js
et qui permet aussi d'utiliser Event.stop pour gérer les évènement qui
ne doivent pas 'continuer'

un exemple:
Code:

1 2 3 4 5 6 7 8 Event.observe(window, 'load', function() { Event.observe("fSuchen", 'submit', function(event) { Event.stop(event); // ou event.stop() dans les dernières versions de prototype ... ton code ici }); });

18/11/2008, 21h04
jeffray03

le probleme, c´est que quand je l´appelle avec des données, elle se plante carrement, et le ajax.updater() n´est pas executer.
le browser plante. et il ne m´affiche aucune erreur.
18/11/2008, 23h22
GoTrUnKo
Bonsoir,
Je n'ai jamais utilisé de Framework ou autre pour faire de l'ajax, je ne connais guère ces méthodes, mais il serait préférable dans ton code de Déclarer les variables, lorsque je vois :
Code:

1 2 url = 'Lib/ProzessSuche.php'; target = 'fuss';
Je me dis surtout qu'il y a encore pas mal de navigateur qui ne vont pas l'interpréter, pourquoi ? car ceci n'est pas logiquement correct,
Code:

1 2 var url = 'Lib/ProzessSuche.php'; var target = 'fuss';
Pour vous dire, j'ai cherché pendant longtemps pourquoi mon code marché sous IE et pas sous FF (ou le contraire) avant de comprendre qu'il fallait que je déclare mes variables.

Sinon j'aimerai au passage en apprendre plus, pourquoi mettre :

Code:

$('inhalt').innerHTML ="....";

Au lieu de

Code:

document.getElementById("inhalt").innerHTML

Pour essayer de choper les erreurs, utilise FireBug, que je conseil à beaucoup de gens, si tu ne l'as pas déjà, c'est un module complémentaire de firefox, celui-ci t'indiquera les données envoyer, et ce que tu as reçus au passage ainsi que d'autres informations très utiles.

GoT
19/11/2008, 00h41
jeffray03
salut ,
Code:

1 2 $('inhalt').innerHTML ="....";
et
Code:

1 2 document.getElementById("inhalt").innerHTML = ".....";
c´est du pareil au meme, sauf que l´autre passe par le prototype et l´autre non.
sinon j´ai pris note et firebug est deja installé, mais je ne comprend pas pourquoi cela peut faire planter mon browser.
19/11/2008, 08h55
marcha

Citation:

Envoyé par jeffray03

le probleme, c´est que quand je l´appelle avec des données, elle se plante carrement, et le ajax.updater() n´est pas executer.
le browser plante. et il ne m´affiche aucune erreur.

Regarde ce que tu trouves dans l'onglet Net de firebug, tu dois voir la requête
d'envoi du formulaire et pouvoir étudier les paramètres passés ainsi que le
réponse du serveur.

Citation:

Envoyé par GoTrUnKo

Pour vous dire, j'ai cherché pendant longtemps pourquoi mon code marché sous IE et pas sous FF (ou le contraire) avant de comprendre qu'il fallait que je déclare mes variables.

La déclaration des variables est optionnelle en javascript, par contre
les variables déclarées se comportent différemment suivant le contexte,
un exemple:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 b = 15; // déclaration optionnelle ici, mais c'est plus rigoureux d'écrire var b = 15; function toto() { var b = 12; // déclare une autre variable b, locale à la fonction alert(b); } function titi() { b = 7; // modifie la variable b globale (la crée dans l'espace global si celle-ci n'existe pas) alert(b); } toto(); titi(); alert(b);
Résultat, 12, 7, 7

En résumé:

Déclare toujours tes variables dans tes fonctions, sauf si
tu veux utiliser une variable de l'espace global.