Hoe AJAX toepassen

Status
Niet open voor verdere reacties.

leifoet

Gebruiker
Lid geworden
7 okt 2007
Berichten
326
Is dit probleempje oplosbaar met AJAX ?
Standaard wordt tabel A weergegeven - kan door het indrukken van een keuzeknop bovenaan/onderaan tabel A, een tabel B verschijnen (in de plaats van tabel A) zonder wissel van de volledige pagina.

Kan dat - moet de tabel B in dezelfde pagina gecodeerd staan als tabel A - zijn eventuele voorbeeldoplossingen te vinden ?
Dank voor tips.
 
Wat jij wilt kan prima met AJAX. De informatie uit beide tabellen komen dan vanaf twee verschillende request die je browser uitvoert. Afhankelijk van de actie die jij uitvoert.

Ik zelf gebruik de jQuery-library om zulke AJAX-functies te te passen.
 
AJAX is een dynamische manier om data op te halen. In je vraag heb je het over 2 tabellen, ik denk met statische gegevens. Je kan het dan simpel houden door telkens 1 van de 2 tabellen te verberegen.
Code:
<button id="toggleBtn" data-active="A" type="button">Toon tabel B</button>
<table id="tabelA" style="display:block;">
  <tr><td>1 1 1</td></tr>
</table>
<table id="tabelB" style="display:none;">
  <tr><td>2 2 2</td></tr>
</table>

<script>
var toggle = document.getElementById("toggleBtn");
toggle.onclick = function () {
  var tableA = document.getElementById("tabelA");
  var tableB = document.getElementById("tabelB");
  var active = toggle.dataset.active;
  tableA.style.display  = (active == 'A') ? 'none' : 'block';
  tableB.style.display  = (active == 'A') ? 'block' : 'none';
  toggle.dataset.active = (active == 'A') ? 'B' : 'A';
  toggle.innerHTML = 'Toon tabel ' + ((active == 'A') ? 'A' : 'B');
};
</script>

edit: code aangepast omdat je 1 button wilde.
 
Laatst bewerkt:
Dank bron voor het praktisch voorbeeld - code werkt zoals gehoopt.

Heb ook een meer aangepaste code uitgeprobeerd - werkt maar voor de eerste wissel moet 2x met muis op de knop geklikt worden.
Is dat een toeval of heb ik ergens een syntaxfout gemaakt ?

Code:
<body>
<button id="toggleBtn" data-active="A" type="button">Toon meer data</button>
<table id="tabelA" style="display:block;">
  <tr><td>1 1 1</td></tr>
</table>
<table id="tabelB" style="display:none;">
  <tr><td>2 2 2</td></tr>
</table>

<script>
var toggle = document.getElementById("toggleBtn");
toggle.onclick = function () {
  var tableA = document.getElementById("tabelA");
  var tableB = document.getElementById("tabelB");
  var active = toggle.dataset.active;
  tableA.style.display  = (active == 'minder data') ? 'none' : 'block';
  tableB.style.display  = (active == 'minder data') ? 'block' : 'none';
  toggle.dataset.active = (active == 'minder data') ? 'meer data' : 'minder data';
  toggle.innerHTML = 'Toon ' + ((active == 'minder data') ? 'minder data' : 'meer data');
};
</script>
</body>
 
Laatst bewerkt:
Je wilt werken met "Toon meer/minder data"
(active == 'A') moet zo blijven want die verwijst naar data-active="A" in de button.

Dit is jouw button regel, die blijft zoals je 'm wilt hebben.
Code:
<button id="toggleBtn" data-active="A" type="button">Toon meer data</button>

Dan wordt dit de vervanger van de laatste regel in het script.
Code:
toggle.innerHTML = (active == 'A') ? 'Toon minder data' : 'Toon meer data';
Suc6. Have fun.
 
Probeerde (in een andere gelijkaardige module) nu een variante op de (sub t/m #5) vermelde code : een 'wissel' binnenin eenzelfde tabel (in plaats van tabel A te wisselen voor tabel B en omgekeerd).
De inhoud van 'tabel A' en 'tabel B' staan hier na elkaar in dezelfde tabel.

Met de vervanging binnen deze tabel (nà een </TR> en vóór <TR>) van

<table id="tabelA" style="display:block;"> door <p id="tabelA" style="display:block;"> vóór het gedeelte van (de fictieve) tabel A
en
<table id="tabelB" style="display:none;">door <p id="tabelB" style="display:none;"> vóór het gedeelte van (de fictieve) tabel B

lukt het mij toch niet om te wisselen van fictieve tabel A naar fictieve tabel B (en omgekeerd).

Is dit een juiste werkwijze ?
Moet script daarvoor eveneens aangepast worden ?
 
Laatst bewerkt:
Neem dit op in de <head> of zet het in de stylesheet.
Code:
<style>
.hide { display: none; }
</style>

Voorbeeld van een button die twee <td> items wisselt.
Code:
<button class="toggleBtn" data-toggleclass="wisselTD_3" type="button">-</button>
<td class="wisselTD_3">Info</td>
<td class="wisselTD_3 hide">Meer Info</td>

Elke button met class="toggleBtn" wordt via Javascript een 'wissel' button.

De 'te wisselen' items en de bijbehorende button geef je aan met:
- data-toggleclass="IETS" in de button.
- class="IETS" in het eerste 'te wisselen' item.
- class="IETS hide" in het tweede 'te wisselen' item.

De naam IETS mag je zelf verzinnen zolang ze maar alle drie gelijk zijn.
De teksten van alle buttons kan je bovenaan in de Javascript invullen.

Hoe hoger het niveau in de html, des te hoger is de prioriteit.

Als je een vraag hebt over de bijlage dan hoor ik het wel.
Suc6. Have fun.
 

Bijlagen

  • buttonHideToggle.zip
    1,6 KB · Weergaven: 30
Veronderstelde (hoopte) dat de (meer/minder)code voor mijn gewijzigde tabelopstelling zou voortbouwen op 't/m #5' hierboven.
Behoudens foute conclusies, slaat de sub #8 vermelde code een andere weg in ? - mijn toevlucht tot de verklarende zip code brengt hier geen soelaas (testopstelling reageert niet)

Vraagje : kan de bestaande code (t/m #5) op enige wijze aangepast worden aan deze occasionele één-tabel vorm met opeenvolgend eigenlijk de code van 2 tabellen (en voor de <TR>… <TD> komen telkens variabelen, IF, Do while etc)
Mocht dit evenwel een moeizame zoektocht worden dan kan ik de tabellen gewoon splitsen in 2 afzonderlijke (een met 'meer' en een met 'minder') en zo teruggrijpen naar de bestaande /werkende code (t/m sub #5) ?
 
Laatst bewerkt:
Veronderstelde (hoopte) dat de (meer/minder) code voor mijn gewijzigde tabelopstelling zou voortbouwen op 't/m #5' hierboven
Het was mij niet duidelijk dat deze functionaliteit maar 1 keer voorkomt op de hele website, vandaar dat ik een universele function gaf die je overal in de html kan toepassen zonder extra javascript te hoeven schrijven. In het algemeen is het altijd slimmer een function te maken als een functionaliteit (het zit in het woord) meerdere keren op de website voorkomt. Voordelen: geen spaghetti code, makkerlijker foutzoeken, overzichtelijk, universeel toepasbaar, minder javascript nodig, onderhoud minder tijdrovend en simpel documenteren.

mijn toevlucht tot de verklarende zip code brengt hier geen soelaas (testopstelling reageert niet)
De zip net getest in Chrome, Edge, Firefox, Opera en Int.Explorer. Werkt in alle browsers goed. Mogelijke oorzaak: Omdat je het hebt over een 'while' heb je daar misschien een oneindige lus in zitten. Of je gebruikt (mogelijk zonder in de gaten te hebben) recursie zonder voorwaardelijk einde waardoor het geheugen volloopt. De code in de zip is in ieder geval in orde.

Vraagje : kan de bestaande code (t/m #5) op enige wijze aangepast worden aan ...
Wil je de reeds bestaande html/javascript van jouw tabel posten want teksueel begrijp ik niet helemaal wat je wilt hebben.

Mocht dit evenwel een moeizame zoektocht worden dan kan ik de tabellen gewoon splitsen in 2 afzonderlijke
Mijn advies is de universele javascript van #8 te gebruiken. Maar als je de html/javascript van jouw tabel post kan ik daar nog naar kijken. Als dat teveel- of spaghetti code gaat opleveren dan kan je de tabel splitsen.

Nog over de zip. Als je op je pc geen webserver hebt dan index.php hernoemen naar index.html
Als je de bestanden upload naar een hostprovider dan kan je zowel .php als .html gebruiken.

In de basis is er niet zoveel verschil tussen #5 (specifiek) en #8 (universeel)
.onclick = function (...) doet praktisch hetzelfde als .addEventListener("click", ...)
 
Laatst bewerkt:
Een opzetje gemaakt. Ik weet alleen niet of het aasnluit bij je vraag.

aanv. omdat "table / tr / td" ook een onoverzichtelijke spaghetti oplevert kan de html tevens een oorzaak zijn van een niet werkende pagina. Dan lijkt de javascript niet in orde maar ligt het probleem in de html. Daarom altijd goed inspringen in de html code zodat je vertikaal opgelijnd kan zien of de structuur goed is. Ik ga ervan uit dat je dit al doet ;)

Wellicht overbodig te melden, index.html niet uit de zip vanaf helpmij.nl opstarten. Eerst de zip naar je pc downloaden en dan vanaf je pc opstarten.
 

Bijlagen

  • buttonHideToggle2.zip
    1,6 KB · Weergaven: 118
Laatst bewerkt:
Excuses voor onderbreking => zip programma's intussen aan de praat gekregen - Dank.
Weet alleen niet waar exact in mijn module ik welke van de aangereikte codes moet plaatsen. Even de werking verduidelijken.

De (voorlopig enige) tabel bestaat uit een geneste Do while-Loop als volgt :

(hoofd)Do while
(detail)Do while
(detail)Loop
(hoofd)Loop

Een wisselknop bij de start laat de details van de betreffende hoofddoorloop wel of niet weergeven/afdrukken (... zou 'wel of niet weergeven' moeten worden ;-).
De (default) knop is bijvoorbeeld 'Details afdrukken', waarbij de volledige details van elke hoofditem worden weergegeven; na het drukken van de kop wisselt de tekst van drukknop dan (bijvoorbeeld) in 'Minder details afdrukken'.
Hopelijk is dit begrijpelijk(er). Dank voor tips.
 
Laatst bewerkt:
Er gaat te veel tijd in deze vraag zitten omdat de vraag te uitgebreid is.
In de bijlage nog een laatste voorbeeld van mij, daarna is het aan anderen om te helpen.
 

Bijlagen

  • buttonHideToggle3.zip
    1 KB · Weergaven: 35
Ben er uiteindelijk toch (nog) in geslaagd om mijn 'AJAX'-module te laten werken zoals gehoopt.
Heb daartoe kunnen putten uit het (duidelijk) voorbeeld sub #13 : het concept van één enkele tabel heb ik behouden en class="informatie hide" toegevoegd aan alle <tr>'s van de (detail)Do while-(detail)Loop.
Dank bron voor jouw oplossing en medegaand geduld. Eind goed ...
 
Zoals sub #14 gemeld draait de module zoals gehoopt, perfect dus.

In de afwerkingsfase wil ik evenwel (indien vlot mogelijk) het uitzicht (design) van het resultaat nog wat opfleuren met voor de 'meer' en/of 'minder' output bijvoorbeeld telkens aangepaste lettertypes, verklarende tekst, ... te kunnen voorzien.

Heb zelf een 2-tal pogingen ondernomen zonder succes.
Onderstaande if-constructie geeft een syntax error

if class="informatie hide" then
<td>... bijvoorbeeld gebruik een groot lettertype</td>
else
<td>... bijvoorbeeld gebuik het normaal lettertype</td>
end if

Deze combinatie creëert dan 2x dezelfde <kolom>

<td class="informatie hide">... bijvoorbeeld gebruik een groot lettertype</td>
<td>... bijvoorbeeld gebuik het normaal lettertype</td>

Hopelijk is dit geen te uitgebreid annex-probleem en bestaat hier een relatief eenvoudige oplossing voor ?
Indien ja, hoe kan ik 'experimenteren' om dit 'likje verf accuraat te borstelen' ?
Dank voor tips.
 
Verander even de bovenste tabel zodat je elke tabel aparte opmaak kan geven.
Code:
<table class="hoofdtekst">

</table>
<table class="informatie hide">

</table>

Haal 2x <style> </style> weg en alles wat ertussen staat.
Zet alleen deze style als vervanger. Met dit als idee kan je zelf verder.
Code:
<style>
/* algemene */
body {
  margin: 0;
  font: normal 14px/1.4 'Helvetica', Arial, sans-serif;
}
table, table * {
  box-sizing: border-box;
  max-width: 100%;
}
table {
  border-spacing: 0;
  border-collapse: collapse;
}
th, td {
  width: 280px;;
  padding: 4px 12px;
  vertical-align: top;
  text-align: left;
  white-space: normal;
}
th {
  font-weight: bold;
}

/* Tabel opmaak */
.informatie {
  border-bottom: 1px solid lightgrey;
}

/* TabelData opmaak */
.hoofdtekst td {
  font-size: 18px;
  background-color: lightgrey;
  color: red;
  font-weight: bold;
}
.informatie td {
  font-size: 14px;
  color: blue;
}

/* button opmaak */
.hoofdtekst button {
  width: 170px;
  font-size: 20px;
  font-weight: bold;
  color: navy;
}
.informatie button {
  width: 130px;
  font-size: 16px;
  color: navy;
}

/* .hide is nodig voor javascript */
.hide {
  display: none;
}
</style>

Je vindt meer info op www.w3schools.com/cssref/default.asp
 
Verander even de bovenste tabel zodat je elke tabel aparte opmaak kan geven.
Om de (mij intussen bekende) weg niet meteen te verliezen : slaat 'de bovenste tabel' op het voorbeeld sub #13 dat ik ca gevolgd heb ?
(Nog dit - sub #14 heb ik het over 1 effectieve werkende tabel - of is dat hier niet van belang ?)
 
Laatst bewerkt:
Post #17 hoort bij de bijlage van post #13. Met deze twee bij elkaar gaat het lukken.
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan