[AJAX] [popup] appel Thickbox

Version imprimable

Bonjour,

j'ai une page qui possède un DIV que je charge dynamiquement grâce à la fonction ci-dessous :
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 function afficher (url, resultat) { if(window.XMLHttpRequest) // navigateur firefox objet0= new XMLHttpRequest(); else if(window.ActiveXObject) // navigateur internet explorer objet0 = new ActiveXObject("Microsoft.XMLHTTP" ); else return(false); objet0.open ('GET', url, true); objet0.onreadystatechange = function() { if (objet0.readyState==1) { document.getElementById(resultat).innerHTML="Chargement en cours."; } else if (objet0.readyState==4) { if(objet0.status==200) { document.getElementById(resultat).innerHTML=objet0.responseText; } else if(objet0.status==404) { document.getElementById(resultat).innerHTML = "Erreur d'adresse"; } else { document.getElementById(resultat).innerHTML = "Erreur : ".objet0.status; } } } objet0.send(null); return; }
La page affichée dans le DIV possède un lien de classe ThickBox.

Problème, ce lien fonctionne comme un lien normal, sans prendre en compte le ThickBox.
Quand je charge seulement la page qui s'affiche dans le DIV, tout fonctionne normalement.

Il semble que ce soit le fait de charger dynamiquement le DIV qui bloque la possibilité d'utiliser Thickbox.

Quelqu'un a-t-il déjà rencontré ce problème ?

Je ne sais pas si je suis très clair, mais je reste à votre disposition pour tout complément d'info :)

Merci pour votre aide

Bonjour,
je crois pas qu'il soit possible de tester une autre valeur de "status" que 200 :?

Dans un premier temps, essaye juste de virer

Code:

1
2
3
4
5
6
7
8
        else if(objet0.status==404)
          {
            document.getElementById(resultat).innerHTML = "Erreur d'adresse";
          }
          else
          {
            document.getElementById(resultat).innerHTML = "Erreur : ".objet0.status;
          }

A+

26/03/2009, 13h16
Commodore

Bonjour!

je viens de faire le test en supprimant ce que tu as suggéré. Cela ne change rien.

edit: -erreur de ma part- edit effacé
26/03/2009, 13h54
E.Bzz
Arf !
Je sais plus si c'est le status ou le readyState, du coup :oops:
Tu peux essayer simplement
Code:

1 2 3 4 5 objet0.onreadystatechange = function() { if (objet0.readyState==4 && objet0.status==200) document.getElementById(resultat).innerHTML=objet0.responseText; }
Ou alors, c'est dû à l'utilisation du innerHTML (si ton resultat est dans un formulaire, par exemple), et dans ce cas il faut utiliser les fonctions DOM ...

A+
26/03/2009, 14h01
Commodore

je viens de tester ce que tu proposes, même résultat :(

quant à la forme du résultat inclus dans le DIV dynamique, il s'agit d'une table qui retourne une requete sql
26/03/2009, 14h06
E.Bzz

Citation:

Envoyé par Commodore

quant à la forme du résultat

Je parlais d'un formulaire (édité car tournure pas clair ;) )

On peut voir le code HTML+JS de l'appel à la fonction et du div resultat ?

+ peux-tu faire un copié/collé d'une réponse Ajax ?

As-tu essayé avec une réponse en texte simple (au lieu d'une table) ?

A+

Voici le code du formulaire appelant :

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
<script type="text/javascript">
  function afficher (url, resultat)
  {
  if(window.XMLHttpRequest) // navigateur firefox
  objet0= new XMLHttpRequest();
  else if(window.ActiveXObject) // navigateur internet explorer
  objet0 = new ActiveXObject("Microsoft.XMLHTTP" );
  else return(false);
  objet0.open ('GET', url, true);
  objet0.onreadystatechange = function()
  {
    if (objet0.readyState==1)
    {
      document.getElementById(resultat).innerHTML="Chargement en cours.";
    }
    else if (objet0.readyState==4)
      {
        if(objet0.status==200)
        {
          document.getElementById(resultat).innerHTML=objet0.responseText;
          $.getScript("./js/thickbox.js");
        }
        else if(objet0.status==404)
          {
            document.getElementById(resultat).innerHTML = "Erreur d'adresse";
          }
          else
          {
            document.getElementById(resultat).innerHTML = "Erreur : ".objet0.status;
          }
      }
  }
  objet0.send(null);
  return;
  }
</script>
 
<table>
  <tr>
    <td>Emetteur : </td>
    <td><input type="text" id="i_emetteur_ann" /></td>
    <td>Titre : </td>
    <td><input type="text" id="i_titre_ann" /></td>
    <td>Texte : </td>
    <td><input type="text" id="i_texte_ann" /></td>
  </tr>
  <tr>  
    <td>Type annonce : </td>
    <td><select id="i_type_ann" name="i_type_ann" >
          <option value="recherchejob">Recherche un job</option>
          <option value="proposejob">Propose un job</option>
          <option value="proposeinst">Vente instrument</option>
          <option value="rechercheinst">Achat instrument</option>
          <option value="autre">Autre</option>
        </select>
    </td>
    <td>Date cr&eacute;ation : </td>
    <td><input type="text" id="i_datcre_ann"  /></td>
    <td>Date limite : </td>
    <td><input type="text" id="i_datlim_ann"  /></td>
    <td><input type="button" value="Rechercher" onClick="javascript:afficher('result_rech.php?typ_rech='+document.getElementById('typ_rech').value+'&i_emetteur_ann='+document.getElementById('i_emetteur_ann').value+'&i_titre_ann='+document.getElementById('i_titre_ann').value+'&i_texte_ann='+document.getElementById('i_texte_ann').value+'&i_datcre_ann='+document.getElementById('i_datcre_ann').value+'&i_datlim_ann='+document.getElementById('i_datlim_ann').value+'&i_type_ann='+document.getElementById('i_type_ann').value,'result_rech'); return false;" />
        <input type="hidden" id="typ_rech" value="annonce" />
    </td>
  </tr>
</table>
 
<!-- DIV dynamique -->
<div id="result_rech" style="width:100%; height:500px; border-style:solid; border-width:1px; overflow:auto; background: url(./img/back.png)">
 
</div>

Part du code qui affiche le contenu du DIV :

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
        case 'annonce':
          if(!empty($_GET['i_emetteur_ann'])) {
            $param1 = ' id_auteur_annonce in (';
            //recuperer les id auteur correspondant au nom saisi
            $rs_au = mysql_query('select id_user from users where login like "%'.$_GET['i_emetteur_ann'].'%"') or die("Erreur code 00506");
            while($tb_au = mysql_fetch_array($rs_au)) {
              $param1 = $param1.$tb_au[0].',';
            }
            $prem = 'oui';
            $param1 = substr($param1, 0, -1).')';
          }
          else $param1="";
          
          if(!empty($_GET['i_titre_ann'])) {
            $param2 = ' titre_annonce like "%'.$_GET['i_titre_ann'].'%"';
            if($prem=='oui')
              $param2 = ' and '.$param2;
            $prem = 'oui';
          }
          else $param2="";

          if(!empty($_GET['i_texte_ann'])) {
            $param3 = ' texte_annonce like "%'.$_GET['i_texte_ann'].'%"';
            if($prem=='oui')
              $param3 = ' and '.$param3;
            $prem = 'oui';
          }
          else $param3="";
          
          if(!empty($_GET['i_datcre_ann'])) {
            $param4 = ' date_creation ="'.$_GET['i_datcre_ann'].'"';
            if($prem=='oui')
              $param4 = ' and '.$param4;
            $prem = 'oui';
          }
          else $param4="";

          if(!empty($_GET['i_datlim_ann'])) {
            $param5 = ' date_limite ="'.$_GET['i_datlim_ann'].'"';
            if($prem=='oui')
              $param5 = ' and '.$param5;
            $prem = 'oui';
          }
          else $param5="";

          if(!empty($_GET['i_type_ann'])) {
            $param6 = ' type_ann="'.$_GET['i_type_ann'].'"';
            if($prem=='oui')
              $param6 = ' and '.$param6;
            $prem = 'oui';
          }
          else $param5="";

          //controle que l'on a au moins un champ rempli, sinon on ne filtre pas (a cause erreur due a la clause where)
          $test = $param1.$param2.$param3.$param4.$param5.$param6;
          if(!empty($test))
            $rq1 = 'select * from annonces where'.$param1.$param2.$param3.$param4.$param5.$param6;
          else $rq1 = 'select * from annonces';
          
          $rs = mysql_query($rq1) or die("Erreur code 00507");
          $i=1;

          //affichage des données
          echo '<script type="text/javascript" src="./js/thickbox.js"></script>';
          echo '<table style="border-style:solid; border-width:1px; width:100%;">';
          echo '  <tr style="border-style:solid; border-width:1px;">';
          echo '    <th>No</th>';
          echo '    <th>Date cr&eacute;ation</th>';
          echo '    <th>Titre</th>';
          echo '    <th>Date limite</th>';
          echo '    <th>R&eacute;pondre</th>';
          echo '  </tr>';
          
          while($tb = mysql_fetch_array($rs)) {
            echo '<tr style="border-width:1px; border-style:solid;">';
            echo '<td>'.$i.'</td>';
            echo '<td><center>'.$tb[4].'</center></td>';
            echo '<td><a href="aff_ann.php?idan='.$tb[0].'&keepThis=true&TB_iframe=true&height=300&width=600" title="Lire une annonce" class="thickbox" target="_blank">'.$tb[2].'</a></td>';
            echo '<td><center>'.$tb[5].'</center></td>';
            echo '<td colspan="2"><center><a href="index.php?page=repannrech&c='.$tb[1].'&a='.$tb[0].'">R&eacute;pondre</a></center></td>';
            echo '</tr>';
            $i=$i+1;
          }
          echo '</table>';
          break;

edit: j'ai mis en gras le lien thickbox dans le code d'affichage des données, pour + de lisibilité

26/03/2009, 14h47
E.Bzz

A mon avis, ton "./js/thickbox.js" il faut le charger dès le départ dans ta page (include dans le <head>) ...
Ton "<script...>" renvoyé par Ajax ne pouvait pas être prise en compte (une recherche dans les Contributions pour avoir la solution sur ce point).

Tu as essayé l'autre modif (renvoyer du text au lieu de la table) ?

... et pas de "javascript:" dans les attributs évènements (ici onclick) :furieux:

A+
26/03/2009, 14h52
Commodore

oups, en fait, ce ./js/thickbox.js est un test qui est resté. le vrai est bien inclus dans le head.

je vais de ce pas fouiller les contributions pour voir le <script...>

pour le "javascript: " je :fleche: