checkbox ajoutees dynamiquement ne fonctionne pas

Version imprimable

17/06/2013, 11h12
cels

checkbox ajoutees dynamiquement ne fonctionne pas

Bonjour,
je cherche une solution a mon probleme, j'espere que le pb n'a pas deja ete traite. Je ne pense pas vu que je n'ai rien trouve en ligne.
Je developpe un catalogue de pieces detachees electronique pour mon client, je ne peux donc pas fournir de lien. MOn probleme concerne le panier.
Afin de preserver les performances de chargement la page, on ne charge le panier que lorsque le user click sur open. Donc j'utilise $get pour recuperer le code du panier contenu dans un autre fichier php.
Quand click, une div noire apparait pour obscurcir la page, et une div est peuple avec le panier renvoye par get.
Le panier contient la liste des elements ajoutes par l'utlisateur, chaque element est selectionnable grace a une checkbox. Mon probleme est que ces checkbox, qui sont ajoutees avec le reste du contenu, ne fonctionnent pas. J'ai deja fait pas mal de tests et voila ce que je sais:
- les checkbox changent bien de status, mais reviennent au statut precedent. En effet j'ai essaye de surcharger le comportement avec du javascript et en posant une alert juste apres avoir change l'attribut checked, je vois que par exemple la checkbox se check/decheck, et des que je clique pour fermer l'alert, elle revient a son status de depart. Pour info, je vois furtivement le meme comportement sans javascript.
- j'ai essaye de poser une dummy checkbox dans une autre partie de la page, pas de soucis. J'en ai mis une dans la div parente de celle qui est peuple par get, elle a le meme probleme.
Ce que j'en conclus, c'est d'une qu'il se passe un truc bizarre, vu que le status change deux fois. Et de deux, ce n'est pas lie au fait que la checkbox est chargee dynamiquement (je pense).
Je suppose un probleme CSS... Mais alors aucune idee de ce que c'est...
Desole je ne peux pas fournir de lien.
Merci pour votre aide
17/06/2013, 11h17
Vil'Coyote

tu ne fournie pas de lien, passe encore. Mais sans code on fait comment? la divination dans le codage n'est pas une valeur sûr tu sais.

Desole :( Le probleme c'est que je ne sais pas d'ou vient mon probleme, et je ne veux eviter de balancer 5 pages de code. Je vais faire de mon mieux.
voila pour le code:
Voici mon header, qui contient la div ou on place le panier (smartAreaContent):

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
<div id="header">
    <div class="gradientBar"></div>
    <div id="headerWrapper">
        <span class="barTitle" id="headerTitle">Electronic</br>Part Catalog</span>
        <div id="smartArea" class="dropDownBlack">
            <div id="smartAreaContent">
            </div>
        </div>
        <div class="qorosLogo"></div>
        <ul class="filter">
            <li id="workCompassPane" class="collapsed">
                <form id="workCompassInputForm" class="filterForm">
                    <input type="button" title="Browse Previous Search Strings" id="browseHistory" name="browseHistory"/>		
                    <input type="text" title="input any string to start a search." id="searchInput" name="searchInput" value="Enter any search string here..." />
                    <input type="button" title="Submit" class="nextButton" id="submitSearch" name="submitSearch"/>
                </form>
            </li>
            <li id="cart_menu_li">
                <div id="cart_menu">
                    <div id="cart_icon"><img src="images/epc/cart_icon.png"></div>
                    <div id="cart_counter">3</div>
                    <div id="cart_opener"><img src="images/epc/cart_open.png"></div>
                </div>
            </li>
        </ul>
    </div>
</div>

Pour info aussi, voici le debut de ma page principale (qui include le header):

Code:

1
2
3
4
5
6
7
8
<?php
	include_once('header.php');
	?>
 
	<div id="contentWrapper">
		<div id="lightboxContent"></div>	
		<div id="blackout"></div>
	    <div id="content">

Voici les fonctions javascript de management du panier:

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
function showBlackout(smartScreenOn) {
	$('#blackout').show();
	$('#blackout').animate({
		opacity: '0.8'
	}, { duration: 500, queue: false });
	smartScreenOn=1;
};
 
function hideBlackout(smartScreenOn) {
	if ($('#lightboxContent').is(":visible") || $('#smartArea').height() !== 0)
		return;
	$('#blackout').animate({
		opacity: '0'
	}, { duration: 500, queue: false, complete: function() {
		$('#blackout').hide();
	}});
};
 
function showSmartScreen(screenName,userId) {
	if ($('#smartArea').height() === 0) {
		$(function() {
			showBlackout();
			$('#smartArea').animate({
				height: '500px'
			}, { duration: 350, queue: false, complete: function() {
				//alert(screenName+'.php');
				$.get('html/'+screenName+'.php?user='+userId, function(data) {
					$("#smartAreaContent").html(data);
				});
				$('#'+screenName).show();
				$("#smartArea").click(function(event) {
					if ($(event.target).hasClass('loginButton')) {
						dismissSmartScreen();
						$(document).off("click");
					}
					return false;
				});
				testFunction();
				$(document).one("click", function() {
					dismissSmartScreen();
				});
			}});
		});
	}else{
 
	}
};
 
function dismissSmartScreen() {
	$('#smartArea').animate({
		height: '0'
	}, { duration: 350, queue: false, complete: function() {
		/* to avoid seeing the old content for a second when switching content */
		$('.smartContainer').hide();
		hideBlackout();
	}});
};

Le morceau de code inclu dans mon document ready pour mettre en place tout ca:

Code:

1
2
3
$('#cart_opener').click(function() {
	showSmartScreen('cart','username');
});

Pour la css, le probleme c'est que j'applique une css creee par un autre type, en charge de la coherence graphique de plusieurs applications. Idem pour le javascript d'ailleurs, j'ai change (ameliore) qq trucs mais ce n'est pas vraiment mon code.
Voici des bouts de CSS:

Code:

1
2
3
4
5
input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}

Celui les deux tentatives que j'ai tente:

Code:

.part_number_box{ z-index:2000; display:block;}

Si j'ai oublie qq chose, n'hesitez pas a me le signaler.

Merci pour votre aide

Et un extrait de code d'un exemple de cart apres traitement php serveur:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="cart" class="smartContainer">
	<!--<div class="cart_row"><?php //echo 'Hello '.$userId.' !'; ?></div>-->
    <div class="cart_row" id="cart_row_X02">
        <div class="select"><input type="checkbox" name="part_number_X02" id="part_number_X02" class="part_number_box" /></div>
        <div class="part_desc">
            <div class="cart_part_thumbnail"><img src="./images/epc/thumb_1.jpg" /></div>
            <div class="cart_part_info">
                <b>Water Shield</b><br />
                Part number: <b>9876543210</b><br />
                Model: <b>XXXX</b><br />
                Product Hierarchy: <b>Body>Interior Trim and Ornementation</b><br />
            </div>
        </div>
        <div class="def_qty">2</div>
        <div class="av_qty">7</div>
    </div>