login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Dynamisch (checkbox/div) met Javascript (Opgelost)

Offline Ruultje - 04/02/2011 08:55 (laatste wijziging 04/02/2011 10:12)
Avatar van RuultjeNieuw lid Uit de database haal ik drie checkboxen. Ik wil dat wanneer ik deze aanvink een verborgen div wordt weergegeven. Dat levert allemaal geen probleem op. Maar nu wil ik dat hij de divs laat zien van de checkboxen die ik heb aangevinkt. Doe ik deze uitvinken dan moet de verborgen div verdwijnen. Dit wil mij niet lukken tot dusver. Hoe kan ik er voor zorgen dat hij alle divs laat zien van de checkboxen die zijn aangevinkt en wanneer ik deze uitvink deze div weer 'wegvalt'.

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <?php
  2. 	  $sql_tekort = "SELECT dt_id, dt_reden FROM tekort_type";
  3. 	  $result_tekort = mysql_query($sql_tekort);
  4. 	  while ($row_tekort = mysql_fetch_array($result_tekort))
  5. 	  {
  6. 	  ?>
  7.  
  8. 	  <div class="downtimereasons">
  9. 	  <input type='checkbox' name='tekortwaarde[]' id="tekort<?php echo $row_tekort['dt_id']; ?>" onClick="tekort('wadetekort<?php echo $row_downtime['dt_id']; ?>');" value="<?php echo $row_tekort['dt_id']; ?>">
  10. 	  <?php
  11. 	  echo $row_downtime['dt_reason'];
  12. 	  ?>
  13. 	  </div>
  14. 	  <div class="spacer"><!-- No Content --></div>
  15.  
  16. 	   <div id="wadetekort<?php echo $row_tekort['dt_id']; ?>" style="display:none"> 
  17. 	  <div class="reghead"> Waarde </div>
  18. 	  <div class="regtext">
  19. 		<input type='text' name='waarde[]' class='field'>
  20. 		</div>
  21. 	  <div class="reghead"> Reden </div>
  22. 	  <div class="regtext">
  23. 		<textarea name="reden[]"></textarea>
  24. 		</div>
  25. 	  </div>
  26. 	  <div class="spacer"><!-- No Content --></div>
  27. 	  <?php
  28. 	  }
  29. 	  ?>



javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. function tekort(id) {
  2.  for (i=1;i<=3;i++) {
  3.  
  4.  var divname = 'watekort'+i; 
  5.  var divStyle = document.getElementById(divname).style; 
  6.  divStyle.display=(id==divname)?'block':'none'; 
  7.  } 
  8. }

13 antwoorden

Gesponsorde links
Offline Novan - 04/02/2011 18:34 (laatste wijziging 04/02/2011 18:35)
Avatar van Novan Nieuw lid Veel van php ken ik niet maar heb onlangs ook zo een javascript gezocht zie mijn post onderaan en heb deze gebruikt van deze site: http://www.tjkd...ements.asp
Offline Ruultje - 05/02/2011 16:27
Avatar van Ruultje Nieuw lid Bedankt! Zal deze gaan bekijken.
Offline lolll - 05/02/2011 16:40
Avatar van lolll Lid Ik denk dat de site die novan geeft nogal heel veel extra code heeft die jij absoluut niet nodig hebt. Ik zou het zo doen:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <input type="checkbox" name="checkboxje" id="1" onclick="togglediv(this.id)" />
  2. <input type="checkbox" name="checkboxje" id="2" onclick="togglediv(this.id)" />
  3. <input type="checkbox" name="checkboxje" id="3" onclick="togglediv(this.id)" />
  4. <div id="div1" class="hidden">
  5. div-inhoud1
  6. </div>
  7. <div id="div2" class="hidden">
  8. div-inhoud2
  9. </div>
  10. <div id="div3" class="hidden">
  11. div-inhoud3
  12. </div>

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. function togglediv(did){
  2. var cdiv=document.getElementById("div" + did);
  3. if(cdiv.style.className="hidden")
  4. cdiv.style.className="show";
  5. else
  6. cdiv.style.className="show";
  7. }

css code - Bekijk de code zonder highlighting - Klap code in 
  1. .hidden{
  2. display:none;
  3. }
  4. .show{
  5. display:block;
  6. }


Dit is ongeveer de code die je nodig zal hebben. Je kan ook zonder de klassen in css werken en direct in js dit zetten: cdiv.style.display="none" of "block".

Lolll
Offline Santermans - 06/02/2011 14:21
Avatar van Santermans Nieuw lid Met jQuery, mijn poging:
Is heel de pagina gewoon copy en plak in ne pagina:



javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. 	<head>
  4. 		<title></title>
  5. 		<!-- css -->
  6. 		<style type="text/css">
  7. 			div{
  8. 				background-color:palegoldenrod;
  9. 				border:1px solid silver;
  10. 				padding:10px;
  11. 				margin: 10px;
  12. 				width:100px;
  13. 			}
  14. 		</style>
  15.  
  16. 		<!--  javascript -->
  17. 		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  18. 		<script type="text/javascript">
  19. 		$(document).ready(function(){
  20. 			$('#box1').hide();
  21. 			$('#checkbox1').change(function(){
  22. 				if($('#checkbox1').is(':checked')){
  23. 					$('#box1').show();
  24. 				}
  25. 				else{
  26. 					$('#box1').hide();
  27. 				}
  28. 			});
  29.  
  30. 			$('#box2').hide();
  31. 			$('#checkbox2').change(function(){
  32. 				if($('#checkbox2').is(':checked')){
  33. 					$('#box2').show();
  34. 				}
  35. 				else{
  36. 					$('#box2').hide();
  37. 				}
  38. 			});
  39.  
  40. 			$('#box3').hide();
  41. 			$('#checkbox3').change(function(){
  42. 				if($('#checkbox3').is(':checked')){
  43. 					$('#box3').show();
  44. 				}
  45. 				else{
  46. 					$('#box3').hide();
  47. 				}
  48. 			});
  49.  
  50.  
  51. 		});
  52. 		</script>
  53. 	</head>
  54.  
  55. 	<body>
  56. 		<form>
  57. 			<p>
  58. 				Checkbox 1: <input type="checkbox" id="checkbox1" value="1" />
  59. 				Checkbox 2: <input type="checkbox" id="checkbox2" value="2" />
  60. 				Checkbox 3: <input type="checkbox" id="checkbox3" value="3" />
  61. 			</p>
  62. 		</form>
  63.  
  64.  
  65. 		<div id="box1">box 1</div>
  66.  
  67. 		<div id="box2">box 2</div>
  68.  
  69. 		<div id="box3">box 3</div>
  70.  
  71. 	</body>
  72. </html>
Offline Ruultje - 07/02/2011 14:12
Avatar van Ruultje Nieuw lid Bedankt. Met beide kan ik wel iets!
Offline DenMette - 07/02/2011 14:15
Avatar van DenMette PHP gevorderde Voor de handigheid,

Gebruik best jQuery, dat is net wat sneller dan zelf alles uit te zoeken, is een handig en elegante manier van weergeven van div's enzo mogelijk.

In plaats van .show(), .hide() kan je ook gewoon .toggle() gebruiken.

Achja mijn voorgangers hebben jou waarschijnlijk al goed geholpen.
Offline Ruultje - 08/02/2011 12:29 (laatste wijziging 08/02/2011 12:50)
Avatar van Ruultje Nieuw lid Ben inderdaad geholpen DenMette. Bedankt voor je tips nog! Ik heb die laatste dan nu ook gebruikt (die daarvoor gebruik ik trouwens ook bij iets anders).

Maar ik loop nu wel tegen een probleem op. Het werkt allemaal perfect. Alleen wanneer ik hem in een div zat die door AJAX aangeroepen wordt loop ik tegen een probleem op. De verborgen divs zijn dan gewoon zichtbaar en klikken op de selectboxen helpt ook niks. Ik kom hier ook niet uit (gisteren bijna de hele dag mee in de weer geweest). Hieronder de code.

Plaatscode: 140653

Plaatscode: 140654


Overigens gaat het mis nadat ik een keuze heb gemaakt:

Plaatscode: 140655
Offline Beirensg - 08/02/2011 15:01 (laatste wijziging 08/02/2011 15:02)
Avatar van Beirensg HTML beginner Ik heb je code een beetje aangepast.
Plaatscode: 140658

Je problemen komen waarschijnlijk voort uit het feit dat de div nog niet bestond bij het aanmaken van de pagina. in principe moet je de handler (hier change voor de checkboxes) binden aan het element na de aanmaak van het element. Maar indien je niet precies weet wanneer de elementen worden aangemaakt kan je gebruik maken van een "vroege bind"; de functie live in JQuery zorgt hiervoor.
Offline Ruultje - 09/02/2011 08:36
Avatar van Ruultje Nieuw lid Het werkt nog altijd niet zoals het zou moeten.

Zal eens verder kijken.

Het vreemde is wel dat de rest wel werkt. Alleen deze heeft problemen.
Offline Beirensg - 09/02/2011 10:49
Avatar van Beirensg HTML beginner volgend script in plaats van het huidige.

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. $(document).ready(function(){
  2.  $('#box1').hide();
  3. $('#box2').hide();
  4. $('#box3').hide();
  5. }); 
  6. $('input:checkbox[name="tekort[]"]').live('change',function(){
  7.                 if($(this).is(':checked')){
  8.                     $('#box'+$(this).val()).show();
  9.                 }
  10.                 else{
  11.                     $('#box'+$(this).val()).hide();
  12.                 }
  13.     });


zou misschien al iets oplossen. Ik heb de change function uit de document.ready gehaald, en deze herschreven zodat er maar 1 functie nodig is.
Offline Ruultje - 10/02/2011 09:29 (laatste wijziging 10/02/2011 09:39)
Avatar van Ruultje Nieuw lid Zie het bericht nu pas.

Maar deze werkt! Enige probleem is nu nog dat de velden gewoon open staan. Na twee keer klikken worden de divs wel verborgen.

Ga het uitzoeken. In ieder geval werkt deze! Bedankt!

Edit:

In de div (leek mij het meest logische) stond deze niet (meer):
css code - Bekijk de code zonder highlighting - Klap code in 
  1. style="display:none;"


Werkt nu goed. Bedankt allen.
Offline Beirensg - 10/02/2011 09:58
Avatar van Beirensg HTML beginner Zet anders de CSS van de boxen op display:none.

Zo ben je zeker, dan kan je de hide in documenet.ready verwijderen.
Offline Ruultje - 10/02/2011 11:36
Avatar van Ruultje Nieuw lid Ok ga ik dat doen. Is ook een mooiere oplossing (vind ik zelf).
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.198s