Div eindeutige ID zuweisen und durch <a> zuweisen

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Div eindeutige ID zuweisen und durch <a> zuweisen

    Guten Morgen,

    vorerst ein frohes und erfolgreiches neues Jahr.

    Ich melde mich mal wieder mit einem kleinen Problem.
    Ich möchte die "Modals" (modals.js) Funktion von Bootstrap auf meiner Seite verwenden. Auf meiner Seite werden Datensätze aus der Datenbank ausgelesen, und in Form einer Tabelle dargestellt.


    Der rote Text auf dem Bild ist ein <a>-Tag der mit der Funktion "modal" verknüpft ist und beim Klick die Funktion data-toggle="modal" data-target="#myModal" aufruft.


    Soweit zu den Hintergründen meines Vorhabens.

    Ich möchte nun, dass zu jedem Datensatz dem <a>-Tag (s. oben) eine eindeutige data-target zugewiesen wird, sodass das System weiß, welcher Div angezeigt werden muss. Wie kann ich #myModal eindeutig machen.
    Ich schätze, ich muss in der while-schleife (der alle Datensätze lädt) diesen Div erstellen lassen, und die aus der Abfrage gewonnene ID als data-id (?) irgendwie festlegen. - aber wie?

    Ich hoffe, ihr könnt mein Problem und mein Vorhaben nachvollziehen.


    Lieben Gruß,
    Montero

  • Update

    Habe mal einwenig rumprobiert.
    <a>-Tag:

    Quellcode

    1. <a data-id="<? echo $get["id"]; ?>" id="modal_a" href="" data-toggle="modal" data-target="#myModal">[...]</a>


    JavaScript Code:

    Quellcode

    1. <script type="text/javascript">
    2. $("#modal_a").click(function(){
    3. var element = $(this),
    4. id = element.data("id"),
    5. check = alert(id);
    6. });
    7. </script>



    Problem:
    Es wird leider nur der erste Datensatz (id 1) abgefangen, bzw nur mit bei der ID 1 wird mir eine Alert-Box angezeigt...

  • Ich kenne dein Vorhaben und deine Datenmenge nun nicht genau, aber möchtest du tatsächlich für jedes Modal ein eigenen Container erstellen? Du könntest doch auch wunderbar mit AJAX arbeiten und die anzuzeigenden Daten in den einen Container laden.

    Ansonsten würde ich das click-Attribut beim <a> - Tag nutzen und einen Funktionsaufruf mit der ID als Parameter machen.
    "Das müsste jetzt funktionieren..."

    ---
    Mit freundlichen Grüßen,
    Vincent Petritz

  • Du erstellst dir ein Modal (siehe: getbootstrap.com/javascript/#modals) mit HTML.
    Nun verpasst du deinem <a> - Tag noch ein click-Attribut:
    <a href="#" onclick="loadData(<? echo $get['id']; ?>);">...</>

    Nun definierst du eine neue Funktion ("loadData(id)") in JavaScript welche durch die ajax-Funktion einen POST- oder GET-Request an eine PHP-Datei sendet. Diese PHP-Datei bekommt dann, wie gesagt, die von dir "gedrückte" ID übergeben und liefert dann, im JSON-Format (siehe: json_encode) die benötigten Informationen an deine Seite zurück (also an die, von der der Request kam) und dort verarbeitest du die gelieferten Daten dann und weist sie z.B. an .modal-body, .modal-title ect. zu.

    Quellcode

    1. function loadData(id) {
    2. // $.ajax(...)
    3. }


    Wenn noch etwas unklar ist, gib mir hier bescheid.
    "Das müsste jetzt funktionieren..."

    ---
    Mit freundlichen Grüßen,
    Vincent Petritz

  • Soweit bin ich nun:

    Quellcode

    1. <script text="text/javascript">
    2. function loadData(id) {
    3. $.ajax({
    4. url: "matdashboard.php",
    5. type: "POST",
    6. data: id,
    7. success: function (erfolgreich) {
    8. if (erfolgreich==1) {
    9. // Und nun?
    10. } else{
    11. alert('Fehler');
    12. }
    13. }
    14. });
    15. }
    16. </script>
    Alles anzeigen


    Kann ich die Ajax Request auf die derzeit aktive Seite ausführen? Also ich befinde mich auf der index.php und gebe als url:index.php an. Oder muss ich das sogar so machen?
    Wie kann ich nun beispielsweise eine MySQL-Abfrage ausführen und Werte in ein Div einsetzen? Das habe ich nicht so ganz verstanden, Vincent.



    EDIT: Habe leider nur n älteres JS-Buch, in dem die Old-School XML Methode erklärt wird...

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Montero ()

  • "success" gibt dir die Daten, die in der matdashboard.php zurückgibst, zurück.
    Heißt hinter "erfolgreich" würde nun, wenn ich dich richtig verstand und du meinen Gedanken in der PHP-Datei richtig umgesetzt hast, ein JSON-Array stecken. Du musst darin soweit nichts abfragen, ob es erfolgreich ist, oder nicht: Denn sonst würde er nicht in "success" reinspringen. Und diese Daten, die nun in der "erfolgreich"-Variable sind, musst du nun verwerten.

    Da ich nicht sicher bin, was "data: id" macht ohne Namen, würde ich probieren das so zu machen:
    data: { 'id': id }
    Aber deine Methode kann durchaus seine Richtigkeit haben. Nur wirst du dann vermutlich über den 0ten Index an die ID rankommen, weiß ich nicht.

    Ja, du kannst natürlich auch die selbe Seite aufrufen. :)
    "Das müsste jetzt funktionieren..."

    ---
    Mit freundlichen Grüßen,
    Vincent Petritz

  • Also so?

    Quellcode

    1. success: function ($return_arr[]) {
    3. }



    & wie kann ich nun das Modal füllen? Soll ich das Modal erst in der Funktion loadData erstellen, wenn ja wie? Soll das Modal in der Seite erstellt werden, wo return_arr gefüllt wird? Wenn nicht, wie sonst? Ich blick das nicht so richtig...


    --------

    Ich habe jetzt eine nicht allzu schöne Lösung gefunden, müsste dazu aber rausfinden, wie ich die aus der Funktion gewonnene id (LoadData) in eine PHP Verwertbare Variable umwandeln kann ohne die Seite neuladen zu müssen... D.h. id -> $id

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Montero ()

  • Beispiel eines Ajax-Request mit jQuery:

    JavaScript-Quellcode

    1. ​request = $.ajax({
    2. url: "script.php",
    3. type: "POST",
    4. data: { id : modalID},
    5. dataType: "json"
    6. });

    mit dem data-Attribut hängst du Daten an. Die werden in der Form id=modalID (bei GET sehr schön zu sehen) an script.php weitergegeben und können da mit $_POST['id'] abgefangen werden. Und was da zurückkommt kannst du in der success-Methode in die Seite einfügen.
    Tipp: Vergiss nicht Fehlerfälle wie fehlgeschlagene Requests abzufangen.