Anzeige

Daten aus MySQL Datenbank an Modal übergeben.


basti1012

Erfahrenes Mitglied
#2
Da solltest du aber schon mehr kommen. Du mußt die Daten mit php ausder Datenbank holen und die Daten in das Modal rein bekommen. Das geht alles , nur wäre es einfacher wenn du da schon was fertiges hast. Weil keiner schreibt dir jetzt den ganzen Code da hin. Mach doch mal nee Seite fertig mit den divs die man anklicken soll und das Modal was dann auf geht . Dann kann man auch an besten sehen wie man das da rein bekommt.Wenn dann direkt mit php das Modal erzeugen oder mit xhr oder ajax da rein laden
 
#3
HTML:
<div class="responsive" id="myBtn">
    <div class="gallery">
      <h4><?php echo $row['name']; ?></h4>
        <div id="onclick">
        <img class="img" src="source.php?id=<?php echo $row['id']; ?>" alt="<?php echo $row['name']; ?>" width="600" height="400">
        </div>
        <div id="link">
        <a href="artikel.php?id=<?php echo $image_id; ?>">
            <img class="img" src="source.php?id=<?php echo $row['id']; ?>" alt="<?php echo $row['name']; ?>" width="600" height="400">
            </a>
        </div>
            <div class="desc"><p style="float:left; color:green; font-weight:bold"><?php echo $row['preis']; ?>,-</p>
                <input type="image" style="float: right; text-align:right; height: 3em" src="Bilder/shopping.png">
            </div>
    </div>
</div>
    
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
      <span class="close">&times;</span>
      <img src="source.php?id=<?php echo $row['id']; ?>" alt="<?php echo $row['name']; ?>">
      <p><?php echo $row['beschreibung']; ?></p>
  </div>
Und der Javascript Code.

Javascript:
// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
Wenn man das div mit der Klasse "responsive" und der id="myBtn" anklickt, soll sich das Modal mit den dazugehörigen Daten öffnen.

Dass das mit Ajax geht, habe ich in den letzten Tagen der verzweifelten Suche im Netz auch schon verinnerlicht. Nur wie genau das geht habe ich bis hier her nicht verstanden.
 

Sempervivum

Erfahrenes Mitglied
#4
Mit Ajax bist Du selbstverständlich auf dem richtigen Wege. Ich empfehle, dabei gleich mit jQuery einzusteigen, so wie es hier begründet und beschrieben wird:
http://blog.axxg.de/einfuehrung-ajax-quickstart/
Da Du offenbar mehrere Divs hast, musst Du statt der ID "myBtn" Klassen brauchen. Die Elemente mit querySelectorAll() ermitteln und in einer Schleife für jedes den Eventlistener registrieren.
Sicher wirst Du auch Parameter für das Auslesen aus der Datenbank brauchen. Ich empfehle, diese als Data-Attribute jeweils bei dem betr. Button abzulegen, etwa so:
Code:
<div class="responsive myBtn" data-par1="par1" data-par2="par2">
 
#5
Ich versteh nur Bahnhof. Ajax ist komplett neu für mich.
Außerdem möchte ich in dem Modal ein Bild aus der Datenbank anzeigen, was mit dem Tutorial:


so einfach wohl nicht geht. Hilfe.
 

Sempervivum

Erfahrenes Mitglied
#7
PS: Ich muss ein wenig zurück rudern: Wenn Du ein Bild aus der Datenbank in einem PHP-Dokument anzeigen kannst, wahrscheinlich durch ein img-Tag mit einem PHP-Skript als src-Attribut, dürfte es kein Problem sein. Du brauchst dann nur den betr. Code zu verwenden.
 
#8
1.
PHP:
<?php $result = $pdo->query($sql, PDO::FETCH_ASSOC);

    while ($row = $result->fetchObject()) {
        ?>
2.
Code:
<button onclick="document.getElementById('id<?php echo $row->id; ?>').style.display='block'">Open Modal</button>
3.
Code:
<div id="id<?php echo $row->id; ?>" class="div">
        <span onclick="document.getElementById('id<?php echo $row->id; ?>').style.display='none'">&times;</span>
        <p><?php echo $row->data; ?></p>
</div>
4.
PHP:
<?php } ?>
 
Zuletzt bearbeitet:

basti1012

Erfahrenes Mitglied
#9
?? Du hast doch schon ein Modal. Du brauchst doch nur den Inhalt da mit php rein bekommen.
Du kannst dein Modal auch mit Php erstellen lassen nur welcher Weg der sinnvollste ist laß ich mal den erfahreren Leuten entscheiden .Möglich ist beides und ich würde den ersten Weg mit ajax nehmen. EinLink hat @Sempervivum dir schon gegeben.Fasl du das es erst testen willst ,versuche erstmal Daten über Ajax zu holen und wenn das geklappt hast dann brauchen die nur noch in den Modal rein was dann auch kein problem mehr ist.

EDIT:Mit Ajax würde ich es so machen http://sebastian1012.bplaced.net/homepagebasti1012/forumscripte-november2018/php-in-modal.php
 
Zuletzt bearbeitet:
#10
?? Du hast doch schon ein Modal. Du brauchst doch nur den Inhalt da mit php rein bekommen.
Du kannst dein Modal auch mit Php erstellen lassen nur welcher Weg der sinnvollste ist laß ich mal den erfahreren Leuten entscheiden .Möglich ist beides und ich würde den ersten Weg mit ajax nehmen. EinLink hat @Sempervivum dir schon gegeben.Fasl du das es erst testen willst ,versuche erstmal Daten über Ajax zu holen und wenn das geklappt hast dann brauchen die nur noch in den Modal rein was dann auch kein problem mehr ist.

EDIT:Mit Ajax würde ich es so machen http://sebastian1012.bplaced.net/homepagebasti1012/forumscripte-november2018/php-in-modal.php
Post #8 ist bereits die Lösung.

Ich hätte das wohl dazuschreiben sollen.. ;)
 
Anzeige
Anzeige