login  Naam:   Wachtwoord: 
Registreer je!
 Forum

div refresh met jquery (Opgelost)

Offline renebati - 23/11/2010 14:05
Avatar van renebatiNieuw lid Hallo,

Ik heb 2 divjes naast elkaar.
In de linker div staan een aantal producten vermeld.
In de rechter div zou ik graag meer informatie over een product laten zien.

Ik zou dus bij klik op een product in de linkerdiv, de rechter div willen refreshen met de gewenste product informatie.

Maar ik wil niet dat de hele pagina refreshed. Alleen de rechter div mag refreshen.

Volgens mij moet zoiets met jquery kunnen, maar ik weet niet hoe. Kan iemand me hierbij op weg helpen. Ik heb zelf niet echt verstand van jquery. Bedankt allemaal.

5 antwoorden

Gesponsorde links
Offline milco - 23/11/2010 14:17
Avatar van milco Lid ik weet wel dat dit met IFrame's kan... Maar met JQuery heb ik het nog nooit gezien
Offline pinquin - 23/11/2010 14:17
Avatar van pinquin HTML interesse Hoi Renebati,

Dit kan inderdaad met behulp van jquery.
Met $.post(); kan je een post request sturen naar een script die dan de juiste gegevens terug geeft.
De gegevens kan je, in de complete function van $.post(), in de body van de div zetten. Dit kan met
html(); of met text();

Ik hoop dat ik je hier mee op weg heb geholpen.

gr,
Offline renebati - 23/11/2010 14:24
Avatar van renebati Nieuw lid Hallo Pinquin,

Bedankt voor je hulp. Ik kom helaas bij jquery niet verder dan wat scripts van het internet kopieren en plakken.
Dus ik zou niet weten hoe ik met jouw code aan de gang kan. Weet jij toevallig ergens een voorbeeld-code op het internet te staan?

Alvast bedankt.
Gr Rene
Offline pinquin - 23/11/2010 14:45
Avatar van pinquin HTML interesse Ik heb hier een klein voorbeeldje gemaakt.
De refresh_div.html bevat de twee div's en de code voor het ophalen van de gegevens uit content_for_div.php

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  3. <title>Refresh div on click</title>
  4. <script type="text/javascript" src="jquery.js"></script>
  5. <script type="text/javascript">
  6. $(document).ready( function() {
  7. $("#div_1 ul li").click( function() {
  8. $.post("content_for_div.php", {optie: $(this).text()}, function(result) {
  9. if(result != "")
  10. $("#div_2").html(result);
  11. });
  12. });
  13. });
  14. </head>
  15. <div id="div_1" style="position: relative; width: 200px; height: 200px; border: 1px solid black;">
  16. <ul>
  17. <li>optie 1</li>
  18. <li>optie 2</li>
  19. <li>optie 3</li>
  20. </ul>
  21. </div>
  22. <br />
  23. <div id="div_2" style="position: relative; width: 200px; height: 200px; border: 1px solid black;">&nbsp;</div>
  24. </body>
  25. </html>


  1. <?php
  2. if( isset( $_POST['optie'] ) && $_POST['optie'] != "" ) {
  3. switch ($_POST['optie']) {
  4. case "optie 1":
  5. echo "U hebt gekozen voor optie 1";
  6. break;
  7. case "optie 2":
  8. echo "U hebt gekozen voor optie 2";
  9. break;
  10. case "optie 3":
  11. echo "U hebt gekozen voor optie 3";
  12. break;
  13.  
  14. default:
  15. echo "Gekozen optie is default";
  16. break;
  17. }
  18. }
  19. ?>


Denk er wel aan dat je zelf even jquery moet dowloaden en in een bestandje jquery.js moet zetten.

gr,
Bedankt door: renebati
Offline renebati - 23/11/2010 15:42
Avatar van renebati Nieuw lid super bedankt!
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.194s