Ciblage de DIV

**jdecout** · 29/01/2014, 12h03

Bonjour à tous,

Je vous expose mon problème, je suis en plein développement d'un site intranet me permettant de gérer un tas de chose dans la société ou je travail. Une des fonctionnalités doit me permettre de facilement créer un devis voici le code de la page créer un devis que je charge :

Code php :

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
36
37
38
39
40
41
42
<script src="javascript/devis_creer.js"></script>
<?php 
	$dernier_devis = $bdd->query('SELECT * FROM devis ORDER by numero DESC LIMIT 1');
	$devis = $dernier_devis->fetch();
?>
<form action="">
<table class="saisie">
	<tr class="tete"><td width="120px">DEVIS N°</td><td align="left"><input type="text" name="numero" size="6" value="<?php echo $devis['numero']+1; ?>"/> le <?php echo date("d")." ".date_fr(date("n"))." ".date("Y"); ?></td></tr>
</table>
<br />
<table class="saisie">
	<tr>
	<td>
		<table>
			<tr><td>Salutation : </td><td><select id="salutation"><option>Mr et Mme</option><option>Mr</option><option>Mme</option><option>Société</option></select></td></tr>
			<tr><td>Nom : </td><td><input type="text" name="nom" /></td></tr>
			<tr><td>Adresse : </td><td><input type="text" name="adresse" /></td></tr>
			<tr><td>Complément d'adresse :</td><td><input type="text" name="adresse2"/></td></tr>
            <tr><td>Code postal :</td><td><input type="text" name="code_postal" size="5"/></td></tr>
			<tr><td>Ville :</td><td><input type="text" name="ville" /></td></tr>
			<tr><td>Téléphone :</td><td>Portable <input type="text" name="portable" size="10"/> Fixe <input type="text" name="fixe" size="10"/></td></tr>
		</table>
	</td>
    <td class="prix">
    	<table width="100%">
        	<tr>
            <td>TVA 5.5 %</td>
            </tr>
            <tr>
            <td>Montant TVA : 62.04 €</td>
            </tr>
            <tr height="70px">
            <td valign="bottom">Montant HT : 1127.96 €</td><td valign="bottom" align="right" style="font-size:48px;">TTC : 1190 €</td>
            </tr>
        </table>
    </td>
    </tr>    
</table>
<table width="1270px"><tr><td><div class="add_fourn">+<center><br />Ajouter une<br />fourniture</center></div></td><td align="right"><input class="send_devis" type="submit" value="Créer le devis"/></td></tr></table>
</div>
</div>
</form>

le javascript qui va avec :

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
$(document).ready(function(){
	var id_fourn = 0;
	var id_chassis = 0;
 
	$('.add_fourn').click(function(){
		id_fourn = id_fourn+1;	
		var supp_cadre = "supp_cadre"+id_fourn;	
		var fourniture = "fourniture"+id_fourn;
 
		$(this).parent().parent().parent().parent().before('<div class=\"fourniture\" id=\"'+fourniture+'\"><div id=\"'+supp_cadre+'\" class=\"del_cadre\" ><img src=\"image/supp_fourn.png\" /></div><table cellspacing=\"10\"><tr><td><div class=\"menu_fourn\" id=\"chassis\">Châssis</div></td><td><div class=\"menu_fourn\" id=\"baie\">Baie coulissante</div></td><td><div class=\"menu_fourn\" id=\"veranda\">Veranda</div></td><td></td></tr><tr><td><div class=\"menu_fourn\" id=\"porte_service\">Porte de service</div></td><td><div class=\"menu_fourn\" id=\"porte_garage\">Porte de garage</div></td><td><div class=\"menu_fourn\" id=\"pergola\">Pergola</div></td><td></td></tr><tr><td><div class=\"menu_fourn\" id=\"porte_entree\">Porte d\'entrée</div></td><td><div class=\"menu_fourn\" id=\"volet\">Volet roulant</div></td><td><div class=\"menu_fourn\" style=" background-color:#FF0000" id=\"divers\">Divers</div></td><td>Vous devez choisir un type de fourniture avant d\'en ajouter une nouvelle</td></tr></table></div>');
 
		$("#"+fourniture+" .menu_fourn").click(function(){
			var url = $(this).attr('id')+".php";
			$("#"+fourniture+" table").remove();
 
			if(url=="chassis.php")
				id_chassis++;
 
			$.ajax({
				type: "POST",
               	url: url,
               	cache: false,
				data: 'id_chassis='+id_chassis,
               	success: function(html){
                  	$("#"+fourniture).append(html);
				}
        	});
		});
 
		$('#supp_cadre'+id_fourn).click(function(){
			$(this).parent().remove();
		});
	});
 
});

Voila comment se déroule les choses :

La page créer un devis s'affiche elle contient un formulaire qui sera plus ou moins grand selon la diversité des fournitures demandé, lors de l'appui sur le bouton ajouter une fourniture un div est ajouté sur la page avec un id unique numéroté ( donc possibilité dans ajouter indéfiniment ) dans ce div apparait un menu avec les différents type de fourniture ( fermeture de batiment donc chassis, porte , garage, etc... ) dès qu'un choix est fait dans ce menu le contenu de celui ci est effacé et remplacé par la page ex : chassis.php

dont voici le code :

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
<?php 
	$id_chassis = array();
	$id_chassis['idChassis'] = $_POST['id_chassis'];
?>
<script src="javascript/chassis.js"></script>
<div id="chassis<?php echo $id_chassis['idChassis'];?>"> 
	CHASSIS <select id="type"></select>
    VITRAGE <select id="vitrage"></select>
	COULEUR PROFILE <select id="couleurpro"></select>
	COULEUR EXTERIEUR <select id="couleurext"></select>
</div>

accompagné du javascript suivant :

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
$(document).ready(function(){
	$.ajax({
		type: "GET",
		url: "chassis.xml",
		dataType: "xml",
		complete : function(data, status){
		var chassis = data.responseXML;
 
		$(chassis).find('type').each(function(){
			$("#type").last().append("<option>"+$(this).text()+"</option>");
		});
 
		$(chassis).find('vitrage').each(function(){
			$("#vitrage").append("<option>"+$(this).text()+"</option>");
		});
 
		$('#vitrage').change(function(){
			if($('#vitrage option:selected').text() == "spécial"){
				$("#vitrage").after("<input type=\"text\" id=\"vitrSpe\" />");
				$("#vitrMot").remove();
			}
			else{
				if($('#vitrage option:selected').text() == "double 4/18/4 K = 1.1 Motif"){
					$("#vitrSpe").remove();
					$("#vitrage").after("<input type=\"text\" id=\"vitrMot\" />");
 
				}
				else{
					$("#vitrSpe").remove();
					$("#vitrMot").remove();
				}
			}
		});		
 
		$(chassis).find('couleurpro').each(function(){
			$("#couleurpro").append("<option>"+$(this).text()+"</option>");
		});
 
		$(chassis).find('couleurext').each(function(){
			$("#couleurext").append("<option>"+$(this).text()+"</option>");
		});
 
		$('#couleurext').change(function(){
			if($('#couleurext option:selected').text() == "spécial"){
				$("#couleurext").after("<input type=\"text\" id=\"coulSpe\" />");
			}
			else{
				$("#coulSpe").remove();
			}
		});	
	}});
});

suite des événements :

la page châssis est chargée contenant un div id châssis unique ensuite plusieurs select sont créés les options de ces selects sont contenu dans un fichier xml ( dans le cas ou les critères pourraient varier ) chargé en AJAX. le soucis que je rencontre vient de la si je charge 3 fournitures sans rien choisir donc 3 menu sont sur la page. Je clique sur le 1er ou 2ème mon xml est bien chargé et les champs sont modifiés mais si je clique ensuite sur un menu placé plus bas le xml est de nouveau chargé mais dans les select ouvert plutôt vous allez me dire normal tu sélectionne un élément ayant le même id que plus haut donc il ajoute tous dedans.

Ce que je cherche donc a faire c'est réussir a récupérer l'id châssis créé dans le php ( grâce a la variable qui lui est envoyé en AJAX ) afin de pouvoir cibler précisément le div dans lequel il faut charger les donnés XML. J'ai tenté un tas de chose depuis quelques jours qui n'ont rien fait.

J'en viens donc à vous communauté de développeur pour m'aider à avancer dans ce projet.

**SpaceFrog** · 29/01/2014, 13h25

sur le clcik recupère le $(this) que tu passera en paramètre à la fonction qui declenche l'ajax ...
ainsi dans les callback tu sauras ou placer le retour ?

**jdecout** · 29/01/2014, 14h42

merci de ta rapide réponse mais je ne suis pas sûr d'avoir tous saisie. Donc une solution serait de récupéré le $(this) lors de l'appui sur un bouton du menu ce this étant l'id fourniture mais dans les paramètres de quel fonction doit il apparaître ? et comment le récupérer ?

**jdecout** · 29/01/2014, 15h34

j'ai résolu le problème en ajoutant ce code

Code :

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

1
2
3
<script type="text/javascript">
	var id_chassis = <?php echo $id_chassis['idChassis'];?>
</script>

dans chassis.php afin de passer la variable au chassis.js me permettant d'identifié chacun des champs.

Ciblage de DIV

jQuery

Vue hybride

Discussions similaires

Partager

Partager