#1 23-06-2006 11:55:22

MagicYoyo
Tagglers
Lieu: Montpellier
Date d'inscription: 04-01-2006
Messages: 2212
Site web

Masquage/affichage d'un DIV en javascript

Bonjour les totos (et les totettes ?);

Je bricole un site pour un copain ( http://www.netalys.com/fred/ ) et j'ai un souci sur un formulaire.

La 2ème partie du formulaire qui s'intitule ('vous recherchez') commence par un choix alternatif 'voilier' ou 'bateau moteur' (ligne 66). Cette action devrait déclencher un deuxième choix (quel type de voilier ou quel type de bateau moteur).

J'ai pensé à un changement de la liste du second champ déclenché par le choix dans le 1er, ou un affichage alternatif de l'un ou l'autre SANS RECHARGEMENT DE LA PAGE.
Je suis pas fermé sur le choix de la solution, pourvu qu'elle soit simple et élégante wink


Problème, je suis pas développeur et j'y connais rien en javascript.
Quelqu'un pourrait-il m'aider. Il y gagnera au choix, des $$$, des bisous avec ou sans barbe de 3 jours, des backlinks, une reconnaissance éternelle d'occasion...


"La forme, c'est le fond qui remonte à la surface." Victor Hugo

Mon blog sur le webmarketing | Mon job

Hors ligne

 

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/tgarchive/forum/include/parser.php on line 414

#2 23-06-2006 12:46:10

Rottman
Tagglers+
Date d'inscription: 06-10-2005
Messages: 455
Site web

Re: Masquage/affichage d'un DIV en javascript

Salut,

T'as de la chance j'avais déjà un script du genre tout fait en Ajax smile

Page du formulaire

Code:

<script type="text/javascript" src="ajax.form.js"></script>

            <form action="" id="proposer">
                <label for="cat">Cat&eacute;gorie :</label> 
                <select name="cat" id="cat" onchange="get_sscats(this.form)">
                    <option value="0" selected="selected">-----------</option>
                    <option value="1">Bateau à moteur</option>
                    <option value="2">Voilier</option>
                </select>
                
                <br />

                <label for="sscat">Sous-cat&eacute;gorie :</label>
                <select name="sscat" id="sscat">
                    <option value="0" selected="selected">-----------</option>
                </select>
            </form>

ajax.form.js

Code:

function get_sscats(f) {
var l1    = f.elements["cat"];
var l2    = f.elements["sscat"];
var index = l1.selectedIndex;
if(index < 1)
   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", "getsscats.php", true);
    
   xhr_object.onreadystatechange = function() {
      if(xhr_object.readyState == 4)
         eval(xhr_object.responseText);
   }
   
   if(xhr_object.readyState < 4) { 
        var o = null;
        var s = document.forms["proposer"].elements["sscat"];
        s.options.length = 0;
        s.options[s.options.length] = new Option("Chargement des sous-catégories...", "0");
    }

   xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   var data = "id="+escape(l1.options[index].value)+"";
   xhr_object.send(data);
}
}

getsscats.php

Code:

<?php
header('Content-type: text/html; charset=iso-8859-1');
echo 'var o = null;';
echo 'var s = document.forms["proposer"].elements["sscat"];';
echo 's.options.length = 0;';
echo 's.options[s.options.length] = new Option("-----------", "0");';
if($_POST['id']=='1'){ // on affiche les sous-catégories de Bateau à moteur
echo 's.options[s.options.length] = new Option("open", "1");';
echo 's.options[s.options.length] = new Option("fly", "2");';
}

elseif($_POST['id']=='2') { // on affiche les sous-catégories de Voilier
echo 's.options[s.options.length] = new Option("sloop", "3");';
echo 's.options[s.options.length] = new Option("deriveur", "4");';
}
?>

Testé ici : http://rottman.free.fr/test/proposer.php

Hors ligne

 

#3 23-06-2006 12:55:40

MagicYoyo
Tagglers
Lieu: Montpellier
Date d'inscription: 04-01-2006
Messages: 2212
Site web

Re: Masquage/affichage d'un DIV en javascript

yikes
Ca à l'air énorme ton truc. Je teste ça cet après midi.

Merci ! smile


"La forme, c'est le fond qui remonte à la surface." Victor Hugo

Mon blog sur le webmarketing | Mon job

Hors ligne

 

#4 23-06-2006 13:33:52

MagicYoyo
Tagglers
Lieu: Montpellier
Date d'inscription: 04-01-2006
Messages: 2212
Site web

Re: Masquage/affichage d'un DIV en javascript


"La forme, c'est le fond qui remonte à la surface." Victor Hugo

Mon blog sur le webmarketing | Mon job

Hors ligne

 

#5 23-06-2006 15:17:13

MagicYoyo
Tagglers
Lieu: Montpellier
Date d'inscription: 04-01-2006
Messages: 2212
Site web

Re: Masquage/affichage d'un DIV en javascript

Dans la foulée, j'ai un bug d'affichage sur IE. Ca fait plus d'une heure que je suis dessus, mais je comprends toujours pas : Ce con m'aligne le début du formulaire avec la fin du contenu du bloc à droite ! (en l'occurence les liens !). Incompréhensible.


"La forme, c'est le fond qui remonte à la surface." Victor Hugo

Mon blog sur le webmarketing | Mon job

Hors ligne

 

#6 23-06-2006 15:19:04

tom_sawyer
Search & Replace
Lieu: Lyon
Date d'inscription: 29-09-2005
Messages: 2068
Site web

Re: Masquage/affichage d'un DIV en javascript

Rottman permet moi de te dire que ça dépotte cool

Hors ligne

 

#7 23-06-2006 15:27:16

Rottman
Tagglers+
Date d'inscription: 06-10-2005
Messages: 455
Site web

Re: Masquage/affichage d'un DIV en javascript

Ouep y'a un tuto sympa sur les XMLHttpRequest
>> http://www.toutjavascript.com/savoir/xm … quest.php3

smile

Hors ligne

 

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/tgarchive/forum/include/parser.php on line 313

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/tgarchive/forum/include/parser.php on line 414

#8 23-06-2006 18:49:51

MagicYoyo
Tagglers
Lieu: Montpellier
Date d'inscription: 04-01-2006
Messages: 2212
Site web

Re: Masquage/affichage d'un DIV en javascript

tom_sawyer a �crit:

Rottman permet moi de te dire que ça dépotte cool

Comme dirait Sid : "U rox !" wink



PS : qqn peut-il me confirmer le bug d'affichage sous IE


"La forme, c'est le fond qui remonte à la surface." Victor Hugo

Mon blog sur le webmarketing | Mon job

Hors ligne

 

#9 23-06-2006 23:21:17

Anonymus
Crying Freeman
Lieu: lat:45.387842, long:4.78314
Date d'inscription: 04-07-2005
Messages: 1164
Site web

Re: Masquage/affichage d'un DIV en javascript

Pas de bugs, sous IE, ou alors je ne comprends pas ton bug..
Toujours très sympa, ce qu'on arrive à faire, en ajax wink

Par contre, ca pose toujours de très gros problèmes pour le réf... Là, c'est un formulaire, mais pour une page 'normale', c'est déjà 'moins top'..

Derni�re modification par Anonymus (23-06-2006 23:23:21)

Hors ligne

 

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/tgarchive/forum/include/parser.php on line 414

#10 24-06-2006 07:43:28

MagicYoyo
Tagglers
Lieu: Montpellier
Date d'inscription: 04-01-2006
Messages: 2212
Site web

Re: Masquage/affichage d'un DIV en javascript

http://img134.imageshack.us/img134/4216/bug3bd.gif


"La forme, c'est le fond qui remonte à la surface." Victor Hugo

Mon blog sur le webmarketing | Mon job

Hors ligne

 

#11 27-06-2006 15:45:16

Turulillo
Survivors
Lieu: Paris / Malaga
Date d'inscription: 21-06-2005
Messages: 766
Site web

Re: Masquage/affichage d'un DIV en javascript

Sinon vous savez comment parcourir un document xml en javascript (sinon, si vous avez un lien qui liste les fonctions javascript du DOM, ça devrait aller) ?


Learn gambling tips about casino then play poker and other casinos games. The gaming directory CasinoCity is a good ressource of online casino and Bingo websites.

Hors ligne

 

Pied de page des forums

Propulsé par PunBB
© Copyright 2002–2005 R. Andersson