Discussion :

[manaboko]

Bonjour à tous, je suis en train de faire une petite application avec Ajax et j'ai un problème concernant xhr_object.responseText, puisque sur tous les xhr_object.responseText ,il y toujours à la fin une ligne un commentaire en HTML comme ceci <!--2,1456s--> et qui je crois entraine des erreurs dans mon script.

par exemple, losque je fais

Code :

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

1
2
 
alert(xhr_object.responseText);

j'obtiens comme resultat dans la fenêtre d'alerte

history.go(0);<!--2.1456s-->

et ma page principale ne se recharge pas.

et lorsque je fais

Code :

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

1
2
3
 
var debut = xhr_object.responseText.indexOf('<!--');
eval(xhr_object.responseText.substring(0,debut));

j'obtiens une erreur de syntaxe

Est-ce quelqu'un pourrait m'aider? merci.

[Swoög]

essaie de faire :

Code :

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

eval(xhr_object.responseText.substring(0,debut-1));

[manaboko]

ça marche mais le problème est que l'on voit ma page se rafraichir,
est-ce qu'il n'y a pas un moyen pour cacher ce rafraichissement de la page?

Voici à peu près ce qu'il y a dans ma page addmodule.php

Code :

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

1
2
3
4
5
6
7
 
        header('Content-type: text/html; charset=iso-8859-1'); 
        $db =& ConnectionManager::getDataSource('default');
        $query  = "INSERT INTO `modules` (`id_projet`,`titre`) VALUES ('".$_POST["id_projet"]."','".$_POST["titre"]."')";
        $result = $db->execute($query);
        echo 'history.go(0);'; 
        $this->render('addmodule','ajax');

et voici mon code javascript

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
 
function AjouterCategorie(id_projet){
    var l1    = document.formaddmodule.elements["data[Module][titre]"]; 
    var index = id_projet;
    if(l1.value == "") 
        null;
        //l2.options.length = 0; 
    else 
    { 
        var xhr_object = null; 
 
        if(window.XMLHttpRequest) // Firefox 
            xhr_object = new XMLHttpRequest(); 
        else if(window.ActiveXObject) // Internet Explorer 
            xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); 
        else 
        { // XMLHttpRequest non supporté par le navigateur 
            alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
            return; 
        } 
 
        xhr_object.open("POST", "/gestperso/index.php/modules/addmodule/", true); 
        xhr_object.onreadystatechange = function() 
        { 
        if(xhr_object.readyState == 4) 
            {
                var debut = xhr_object.responseText.indexOf('<!--');
                eval(xhr_object.responseText.substring(0,debut-1)); 
            } 
        }
        xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
        var data = "titre="+escape(l1.value)+"&id_projet="+id_projet; 
        xhr_object.send(data); 
    }
}

et voici ma page qui recueille les données depuis la table 'modules'

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
 
    <div id="categories">
    <table>
        <tr>
            <th>ID</th>
            <th>Nom</th>
        </tr>
        <?php foreach ($module as $module): ?>
        <tr>
            <td><?php echo $module['modules']['id_module']?></td>
            <td><?php echo $module['modules']['titre']?></td>
        </tr>
        <?php endforeach; ?>
    </table>
    </div>
<form action="<?php echo $html->url('/modules/add')?>" name="formaddmodule">
    <div>
    <label for="categorie">Nouvelle catégorie :</label>
        <?php echo $html->input('Module/titre',array('size' => '40')) ?>
        <?php echo $html->tagErrorMsg('Module/titre', '') ?>
    </div>
    <div>
        <input type="button" value="Ajouter une catégorie" onClick="AjouterCategorie('<?php echo $this->data['Projet']['id_projet'] ?>')"/>
    </div>
</form>

il y a un peu de desordre(j'utilise cakePHP) mais le principe de la page est de remplir le tableau <div id="categories"> par les champs dans modules

le bouton sert à ajouter une nouvelle module

la page se rafraichira automatiquement(sans qu'on le voit, via AJAX) à chaque ajout de catégorie

[manaboko]

je pose ma deuxième question d'une autre manière,

comment peut-on rafraichir une page avec AJAX, c'est-à-dire sans que le client puisse voir le rechargement de la page(en appuyant sur un bouton rafraichir par exemple)?

[phplive]

Bsr

Bizarre qu'en j'utilise Ajax je ne récupère que le texte que je génère avec PHP et rien de plus. En aucun cas un "" à la fin ...

A quoi bon utiliser Ajax si au final tu exécutes history.go(0); ?
Ca va forcer ton navigateur a rafraîchir la page hors c'est justement ce qu'on veut éviter ...

Construit TOUTE ta table module en PHP (tag <table></table> inclus) retourne le tout via Ajax et dans le onreadystatechange tu codes :

Code :

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

1
2
3
 
var elt= document.getElementById("categories");
elt.innerHTML = xhr_object.responseText;

Et ca actualise ta table dynamiquement

[manaboko]

bonjour,

merci beaucoup , ça marche mais le petit bout de code <!--0.1234s--> reste toujours.

mais ce n'est pas grave pour l'instant