• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Zuordnung in einer massenhaften Ausgabe

T

Tobi44

Mitglied
Hallo,

ich weiß noch nichtmal wie ich das Problem beschreiben soll, erst recht nicht nach was ich googeln könnte.

Angenommen es werden viele Daten in einer PHP-while-Schleife ausgegeben. Zu jedem Eintrag soll nun z.B. ein Link "Löschen" hinzugefügt werden. Grundsätzlich mache ich dies, indem ich dem Link eine ID gebe und per JS/Ajax beim Klicken des Elements dieser ID eine PHP-Datei aufrufe, die dann mit der übergebenen ID arbeitet und den Eintrag z.B. entfernt.

Da ich aber nun viele Einträge in der while-Schleife habe, würde ich jetzt diesen JS/Ajax-Codeblock innerhalb der while-Schleife einfügen. Das hätte als Ergebnis, dass bei 100 Ausgaben auch im Quellcode 100 solcher <script>-Blöcke sind. Ich denke das muss auch einfacher gehen. Ich weiß nur nicht, wie ich, wenn ich innerhalb der while-Schleife jedem Löschen-Link als id= die eindeutige ID aus der Datenbank zuweise, wie ich dann den JS-Code, der ja außerhalb der Schleife ist, gestalten muss. Allein schon die click-Funktion - da ich ja außerhalb der while-Schleife bin kann ich ja auch dort nicht z.B. $row['id'] nehmen.

Gruß
 
Werbung:
Was? "JS/Ajax steht nicht innerhalb HTML-Tags" ???

Ich habe hier eine Datenbankausgabe mit einer PHP-while-Schleife. Lass uns schöne Bilder nehmen. Die Bild-Pfade kommen aus der Datenbank und werden in der while-Schleife wie folgt ausgegeben:

<?php while... { ?>
<p><img src="/bilder/<?=$row['bildpfad']?>"><br /><a id="<?=$row['bild_id']?>">Löschen</a></p>
<?php } ?>

Bei 100 Bildern haben wir also 100 mal diesen Absatz. Was funktionieren würde, aber bestimmt nicht die beste Lösung ist, ist, dass ich den JS-Code mit dem AJAX-Request in die while-Schleife stecke. Somit habe ich zu jeder Ausgabe/jedem Bild einen eigenen JS-Code, der die bild_id enthält. Nur habe ich dann im Seitenquellcode auch 100 mal im Prinzip den gleichen Javascript-Codeschnipsel, nur halt mit jeweils unterschiedlichen IDs. Daher denke ich, macht man das normalerweise doch bestimmt so, dass man nur einen Ajax-Request nimmt, diesen außerhalb der while-Schleife setzt. Nur weiß ich nicht, wie ich dann an die entsprechende ID komme.

Gruß
 
Werbung:
Danke. Das habe ich bisher noch nicht genutzt. "this" wird dann wohl als das Element erkannt, auf das ich geklickt habe? Und das "prop id" gibt den Wert? Hast Du zufällig noch einen Link zu einer verständlichen Erklärung, wo soetwas beschrieben wird? Ich weiß momentan noch nicht, wie ich das nun integriere.

Danke & Gruß
 
einfach eine function und beim aufruf die id als parameter?

oder hab ich das problem falsch verstanden?
 
Werbung:
Tobi44 schrieb:
Danke. Das habe ich bisher noch nicht genutzt. "this" wird dann wohl als das Element erkannt, auf das ich geklickt habe? Und das "prop id" gibt den Wert? Hast Du zufällig noch einen Link zu einer verständlichen Erklärung, wo soetwas beschrieben wird? Ich weiß momentan noch nicht, wie ich das nun integriere.

Danke & Gruß
Zum Vergrößern anklicken....

Sollte selbsterklärend sein:
HTML: 
<a href="http://www.example.com">Eins</a>
<a href="http://www.example.com">Zwei</a>
<a href="http://www.example.com">Drei</a>
Code: 
$('a').click(function () {
  var href = $(this).prop('href');
  $.ajax({url: href}).done(function () {
    console.log(href+' loaded');
  });

  return false;
});

Zusatz:
Ich versuche meist im Ursprung statische Seiten zu bauen, die auch ohne JS funktionieren würden.
Wenn JS verfügbar, wird die Seite entsprechend manipuliert. Das als Tipp am Rande, weil du oben
HTML: 
<a id="3">Beispiel</a>
stehen hast. Ohne JS ist das Schrott.

Ich würde das so machen:
HTML: 
<a href="http://example.com/delete/3">Beispiel</a>
 
Zuletzt bearbeitet:
Danke. Ich habe mir Dein Beispiel angesehen und an meines angepasst. Das beste daran ist, es funktioniert!

Ich frage mich nur, wie ich dann das geklickte Element auch ausblenden kann. Mit href.fadeOut(500); oder $(this).fadeOut(500); funktioniert es jedenfalls nicht.

Edit: Deinen Nachtrag verstehe ich nicht so ganz. Wieso Schrott? Für normale Links nehme ich natürlich href="http://..." aber wenn ich eine Aktion mit jQuery ausführen will brauche ich ja kein href.

Danke & Gruß
 
Tobi44 schrieb:
Danke. Ich habe mir Dein Beispiel angesehen und an meines angepasst. Das beste daran ist, es funktioniert!

Ich frage mich nur, wie ich dann das geklickte Element auch ausblenden kann. Mit href.fadeOut(500); oder $(this).fadeOut(500); funktioniert es jedenfalls nicht.

Edit: Deinen Nachtrag verstehe ich nicht so ganz. Wieso Schrott? Für normale Links nehme ich natürlich href="http://..." aber wenn ich eine Aktion mit jQuery ausführen will brauche ich ja kein href.

Danke & Gruß
Zum Vergrößern anklicken....

Wie gesagt, der zweite Teil meines Posts ist nur ein Tipp aus meiner persönlichen Arbeitsweise.
Kurz zusammengefasst funktioniert mein Beispiel auch ohne aktiviertes JavaScript, da ich zusätzlich richtigen HTML-Code erzeugt habe.
Außerdem wird in manchen Browsern ein <a> ohne href nicht als Link gewertet.

Aber vergiss das einfach.

Zum Rest. this bezieht sich auf das <a>. Du willst aber ja nicht den Link ausblenden, sondern dessen Parent, das <p>.
Code: 
$(this).parent().fadeOut();
 
Werbung:
Danke, dies funktioniert, aber nur wenn ich es direkt oben nach Eröffnung der click-Funktion einsetze. Ich möchte ja den Ajax-Request abwarten und erst im success-Fall auch den Eintrag ausblenden:

Code: 
   $('.video-remove').click(function() {
      
        var id = $(this).prop('id');
        $('#status-msg2').addClass('std-form');

// hier würde es gehen: $(this).parent().fadeOut();

        $.ajax({
            type: 'POST',
            url: '/home/execute/action_post.php',
            data: {
                removeYtDl: 'removeYtDl',
                ytvideoID: id
            },
            datatype: 'json',
            success: function(data) {

                removeYtDl = $.parseJSON( data );
                                                  
                if( removeYtDl.status == 'success' ){
                   
// egal ob ich es hier rein setze: $(this).parent().fadeOut();

                    success2( removeYtDl.message );
                } else {
                    error2( removeYtDl.message );
                }
            }
        });
    });


function success2(message) {

// oder hier: $(this).parent().fadeOut();
// es geht nicht

$('#status-msg2').html(message);
$('#status-msg2').removeClass('error');
$('#status-msg2').addClass('success2');
}

function error2(message) {
$('#status-msg2').html(message);
$('#status-msg2').removeClass('success2');
$('#status-msg2').addClass('error');
}

Ich verstehe das wieder nicht...

Gruß
 
Tobi44 schrieb:
Danke, dies funktioniert, aber nur wenn ich es direkt oben nach Eröffnung der click-Funktion einsetze. Ich möchte ja den Ajax-Request abwarten und erst im success-Fall auch den Eintrag ausblenden:

Code: 
   $('.video-remove').click(function() {
  
        var id = $(this).prop('id');
        $('#status-msg2').addClass('std-form');

// hier würde es gehen: $(this).parent().fadeOut();

        $.ajax({
            type: 'POST',
            url: '/home/execute/action_post.php',
            data: {
                removeYtDl: 'removeYtDl',
                ytvideoID: id
            },
            datatype: 'json',
            success: function(data) {

                removeYtDl = $.parseJSON( data );
                                              
                if( removeYtDl.status == 'success' ){
               
// egal ob ich es hier rein setze: $(this).parent().fadeOut();

                    success2( removeYtDl.message );
                } else {
                    error2( removeYtDl.message );
                }
            }
        });
    });


function success2(message) {

// oder hier: $(this).parent().fadeOut();
// es geht nicht

$('#status-msg2').html(message);
$('#status-msg2').removeClass('error');
$('#status-msg2').addClass('success2');
}

function error2(message) {
$('#status-msg2').html(message);
$('#status-msg2').removeClass('success2');
$('#status-msg2').addClass('error');
}

Ich verstehe das wieder nicht...

Gruß
Zum Vergrößern anklicken....

this ist keine normale Variable, es bezieht sich auf den "Besitzer" der Funktion. Beim $('a').click() ist es das geklickte Element, beim $.ajax() ist es das erzeugte Request Objekt.

Bei meinem Beispiel siehst du dass ich im click-Event das href Attribut außerhalb des done handlers als Variable definiert habe, um dann später darauf zugreifen zu können.

Abgewandelt:
Code: 
var $parent = $(this).parent();

Lies dir mal die erste Antwort gut durch, dann sollte das in Zukunft kein Problem mehr darstellen:

http://stackoverflow.com/questions/500431/javascript-variable-scope
 
Zuletzt bearbeitet:
Das mit dem this ist etwas tricky. Normalerweise referenziert es das aktuelle Object. Es sei denn wäre im entsprechenden Scope nicht sichtbar, dann bildet es eine Referenz auf das Window Object. In dem Fall hilft die Speicherung in einer Variablen à la: var that = $(this). Auf that kannst du dann auch in deiner Ajax-Funktion zugreifen.
 
Zuletzt bearbeitet:
Werbung:
Super. Also an der Stelle, an der das $(this).parent(); an sich noch funktioniert, dieses als Variable speichern und dann mit dieser später darauf zugreifen. Es klappt!

Vielen Dank für die Infos. Ich hoffe, dass wird es mir zukünftig etwas leichter machen. Ansonsten hätte ich wirklich noch den Ajax-Request in die PHP-Ausgabeschleife gesteckt. :D

Gruß
 
Wollte nur nochmal sagen, die Tips hier waren Gold wert. Kann das nun auf die verschiedensten Sachen anwenden und erweitern, anpassen und es funktioniert! Somit wird die Seite wesentlich komfortabler, bedienbarer und professioneller.

Einen schönen Sonntag.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben