Récupération des données de BDD avec ajax

Version imprimable

Salut mes amis,
j'ai besoin de votre aide, j'ai utilisée ajaxe pour le trie avec les balises <select></select>
mais j'ai un problème de duplication de code de toute la page au lieu d'un seul div:
voici mon code
code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 <script>
            function showAjax(str) {
                if (str == "") {
                    document.getElementById("txtHint").innerHTML = "";
                    return;
                }
                if (window.XMLHttpRequest) {
                    // code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp = new XMLHttpRequest();
                } else { // code for IE6, IE5
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange = function () {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
                    }
                }
                xmlhttp.open("GET", "<?php echo URL;  ?>annonce/index?q=" + str, true);
                xmlhttp.send();
            }
        </script>

et voici la select:

Code:

1
2
3
4
5
6
<select class=" btn dropdown-toggle selectpicker btn-info" name="categorie" id="checkCategorie" onchange="showAjax(this.options[this.selectedIndex].value)" >
                        <option value="">---Catégorie---</option>
                        <?php foreach ($this->listCategorie as $value) : ?>
                        <option value="<?php echo $value['idCategorie']; ?>"><?php echo utf8_encode($value['libelle']); ?></option>
                        <?php endforeach; ?>
                    </select>

et le div d'affichage :

Code:

<div class="row" id="txtHint"></div>

merci infiniment.

12/08/2015, 08h41
SpaceFrog

que retourne ton ajax ???

la réponse ne devrait contenir que le code que tu souhaites mettre dans le div ...

La page de traitement

Code:

<?php echo URL; ?>annonce/index?q=" + str

ne doit générer que le code que tu mets en innerHTML

Code:

document.getElementById("txtHint").innerHTML = xmlhttp.responseText;

merci pour vous réponse,
voici la partie concerner au traitement de la requête ajax,
le problème c'est que le variable "xmlhttp.responseText" retourne le code de toute 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
class Annonce extends Controller {
 
    function __construct() {
        parent::__construct();
    }
 
    function index() {
 
         ....
        /*
         * debut du traitment d'Ajax 
         */
        if (isset($_GET["q"]) &&!empty($_GET['q'])) { // if (isset($_GET["categorie"]) &&!empty($_GET['categorie'])) {
            $this->view->listAnnonce = $this->model->AnnonceAjax($premiereEntree, $nb_parPage, $_GET['q']);
        } else {
            $this->view->listAnnonce = $this->model->liste($premiereEntree, $nb_parPage);
        }
        /*
         * fin du traitment d'Ajax 
         */
        $this->view->render('annonce/index');
    }

12/08/2015, 13h06
SpaceFrog

C'est justement là le souci ... !!!

Donc soit tu parses la réponse ajax pour ne récupérer que le bout de code qui t'intéresse ...
soit tu modifie le code de la page de traitement pour qu'il ne retourne que le code utile et pas toute la page ...
12/08/2015, 13h48
malkimohamed

D'accord, merci pour tous