Extra info onder elk item laten verschijnen met een button.

Hi Jos,

je zou zowiezo ipv ID productInfoPopup CLASS productIbfoPopup gebruiken aangezien je er meerdere hebt :)

bekijk eens hoe 'closest()' werkt :)
this.closest('.productInfoPopup').css.......

Hier kom je vast en zeker wel uit :)

>> je zou zowiezo ipv ID productInfoPopup CLASS productIbfoPopup gebruiken aangezien je er meerdere hebt :)

Nou nee, want hij heeft JUIST een unieke identifier nodig.

@Jos

Try this (niet getest):

<?php
$current_url = urlencode($url="http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']);
$sql = ("SELECT * FROM producten WHERE aanbieding = 1");
if (!$result = $mysqli->query($sql))
{
trigger_error('Fout in query: '.$mysqli->error);
}
else
{
if ($mysqli->affected_rows > 0)
{
$i = 0;
while ($row = $result->fetch_assoc())
{
$i++;
echo '<div id="actionblok-item">';
echo '<form name="actionblok_form" method="POST" action="cart_update.php">';
echo '<table>';
echo '<input type="hidden" name="id" value="'.$row['id'].'" />';
echo '<input type="hidden" name="type" value="add"/>';
echo '<input type="hidden" name="return_url" value="{$current_url}"/>';
echo '<tr><td><img src="../'.$row['image'].'"/></td>';
echo '<td class="product-title">'.$row['name'].' </td>';
echo '<td class="new-img"><img src="../images/new.jpg"/></td></tr>';
echo '<tr><td class="product-price">'.$row['price'].'Euro</td>';
echo '<td class="product-aantal"><input type="text" size="2" maxlength="2" name="qty" value="1"/></td>';
echo '<td class="product-order"><button class="submit-order" name="submit"></button></td></tr>';
echo '<tr><td><input type="button" onclick="document.getElementById("productInfoPopup' . $i . '").style.display="block" value="Meer info"></button></td></tr>';
echo '<tr><td><div id="productInfoPopup' . $i . '"><h4>Product Informatie</h4><p>'.$row['description'].'</p></div></td></tr>';
echo '</div></div></table></form></div>';
}
else
{
echo "Er zijn geen aanbiedingen vandaag.";
}
}
?>

@ozzie, uit zn verhaal begrijp ik dat ie meerdere '#productInfoPopup' heeft, dus is het niet slim om het als ID te gebruiken
overigens zie je dat ook aan de code ;)
Oplossen met een counter kan idd, als je liever wegloopt voor t probleem
Dus nou ga je oneindig aantal css objects aanmaken om ze standaard te verbergen?

persoonlijk vind ik de .closest() een betere oplossing

Hij zal trouwens ook de andere popups willen sluiten neem ik aan, los je die ook gelijk op voor hem? :)

Waarom doe je zo negatief Dennis?

>> @ozzie, uit zn verhaal begrijp ik dat ie meerdere '#productInfoPopup' heeft, dus is het niet slim om het als ID te gebruiken

Jawel dus. Hij wil die popups PER PRODUCT kunnen openen, en dus heb je sowieso een unieke ID nodig en niet een class.

>> Oplossen met een counter kan idd, als je liever wegloopt voor t probleem

Je zou ook gewoon normaal kunnen communiceren in plaats van dat cynische toontje.

>> Hij zal trouwens ook de andere popups willen sluiten neem ik aan, los je die ook gelijk op voor hem? :)

Nogmaals ... je kunt ook gewoon normaal communiceren.

ik ga hier nieteens op in.
Ik wil niemand aanvallen en bedoel het ook niet zo

ben alsnog van mening dat class makkelijker is en t gebruik van closest vanuit de button
om hoofdzakelijk 'initieel' de popups te verbergen en minder code te gebruiken

Thanks voor de antwoorden, geen ruzie maken heren,
alle mogelijkheden en opties zijn welkom zo kan ik zelf zien wat er mogelijk is en daarvan leren en toepassen wat het handigste voor mij is.

Dennis, je bedoelt dat ik voor elk resultaat van die query hetzelfde id gebruik omdat die loop voor elk product word herhaald, dus daarom moet ik een class gebruiken? Daar heb ik nog niet aan gedacht maar het klinkt logisch bedankt.
Ik ga me verdiepen in closest() en een class gebruiken en ik ga ook de code van ozzie eens proberen.

bedankt, ik laat wel weten of het lukt!

Om de div te kunnen tonen (per product) heb je een unieke identifier nodig. Voor ieder product een verschillende.

Stel we hebben 10 producten en ik wil dat product 5 openklapt, dan heb je dus een unieke identifier voor product 5 nodig. Dan moet je dus een id gebruiken. Een id moet altijd uniek zijn (logisch, want het is een identifier). Die teller die ik heb ingebouwd zorgt ervoor dat je dus unieke id's hebt. Je moet dan nog wel zorgen dat standaard die div's dicht staan. Daarvoor kun je bijvoorbeeld nog een class toevoegen.

<?php
$current_url = urlencode($url="http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']);
$sql = ("SELECT * FROM producten WHERE aanbieding = 1");
if (!$result = $mysqli->query($sql))
{
trigger_error('Fout in query: '.$mysqli->error);
}
else
{
if ($mysqli->affected_rows > 0)
{
$i = 0;
while ($row = $result->fetch_assoc())
{
$i++;
echo '<div id="actionblok-item">';
echo '<form name="actionblok_form" method="POST" action="cart_update.php">';
echo '<table>';
echo '<input type="hidden" name="id" value="'.$row['id'].'" />';
echo '<input type="hidden" name="type" value="add"/>';
echo '<input type="hidden" name="return_url" value="{$current_url}"/>';
echo '<tr><td><img src="../'.$row['image'].'"/></td>';
echo '<td class="product-title">'.$row['name'].' </td>';
echo '<td class="new-img"><img src="../images/new.jpg"/></td></tr>';
echo '<tr><td class="product-price">'.$row['price'].'Euro</td>';
echo '<td class="product-aantal"><input type="text" size="2" maxlength="2" name="qty" value="1"/></td>';
echo '<td class="product-order"><button class="submit-order" name="submit"></button></td></tr>';
echo '<tr><td><input type="button" onclick="document.getElementById("productInfoPopup' . $i . '").style.display="block" value="Meer info"></button></td></tr>';
echo '<tr><td><div class="hideMe" id="productInfoPopup' . $i . '"><h4>Product Informatie</h4><p>'.$row['description'].'</p></div></td></tr>';
echo '</div></div></table></form></div>';
}
else
{
echo "Er zijn geen aanbiedingen vandaag.";
}
}
?>
Ik heb nu een class "hideMe" toegevoegd.

In je css doe je dan:

.hideMe { display: none; }

Ozzie, bedankt voor je uitleg, ga het gelijk proberen thnx.

Oké ... ik hoor graag of het gelukt is.

Goedemorgen Ozzie,

Het is nog niet helemaal gelukt hij gaf hier en daar wat syntax foutjes aan en verdwaalde divs.
Echter bij 1 regel blijf ik steken als ik op de button klik doet hij niks en bij de ontwikkelaars console staat er:

SyntaxError: expected expression, got end of script

Daarnaast staat een link naar de regel met de fout die in het rood staat beschreven hier maak ik ook uit op dat jou code werkt:) Hierboven bij jou antwoord is dat regel 28.

<input type = "button" onclick = "document.getElementById("productInfoPopup1").style.display = "block" value = "Meer info"></button>

De fout die er bij hoort zegt geen spatie tussen attributen.
Dit zegt hij ook als ik er een spatie inzet zoals net.

Uiteraard laat ik het weten als het gelukt is en hou ik mijn topic in de gaten.