✔ Objekt erzeugen und PHP-Datei ansteuern

Nein leider keine Seite online. Ja das ist total merkwürdig.
Also wenn die Seite lädt lasse ich Daten aus der Datenbank laden und generiere den Aufbau der vorhandenen "Items" (HTML-Konstrukte).
Diese werden auch nebeneinander angezeigt.
Das merkwürdige ist jetzt wenn ich neue Items über die JS-gesteuerte Funktion erstelle, wird das erste neue neben dem "alten" (schon vorhandenen) angezeigt (wie es sein soll) und andere neue liegen über dem zuvor erstellten Item.

Ja im Prinzip muss es an HTML liegen. Hier mal der Aufbau:
So werden zu Anfang die vorhandene Items angezeigt: (funktioniert auch wunderbar)
Code: 
<div class="row">
                  <?  foreach($stmt as $row) { ?>
                    <div class="col-lg-3 col-xs-6">
                          <div class="small-box bg-aqua">
                        <div class="inner">
                              <p>Name:</p>
                            <h2><? echo $row[1]; ?></h2>
                        </div>
                        <a href="#" id ="delcat" class="small-box-footer" data-catid="<?php echo $row[0]; ?>" >Löschen <i class="fa fa-eraser"></i></a>
                      </div>
                  </div>
                     
                  <? } ?>
                      <div id="newitems">
                            <!-- Hier werden mit JS die neuen Items erstellt -->
                    </div>
                  </div> <!-- class=row -->

So werden die neuen Items aus der PHP-Datei aufgebaut
und mit JS im DIV id=newitem erzeugt.
Code: 
echo "<div class='col-lg-3 col-xs-6'>";
echo "<div class='small-box bg-aqua'>";
echo "<div class='inner'>";
echo "<p>Name:</p>";
echo "<h2>$row[1]</h2>";
echo " </div>";
echo "<a href='#' id ='delcat' class='small-box-footer' data-catid='$row[0]' >Löschen <i class='fa fa-eraser'></i></a>";
echo " </div></div>";

Die einzig logischer Erklärung ist das es mit dem DIV id=newitem zusammen hängt.
Momentan will mir aber nicht einfallen wieso. Wahrscheinlich irgendwas banales :)

Im Prinzip möchte ich das die neu erstelltem Items nahtlos an die "alten" anreihen.
Ich musste aber einen neuen Container definieren damit das JS ein target hat.
 
Zuletzt bearbeitet:
Ja, wahrscheinlich hängt es mit dem #newitem zusammen. Ich nehme an, Du fügst die Elemente hinzu, indem Du das HTML vom Server in das div #newitem einfügst, wahrscheinlich mit innerHTML oder jQuery html().
Ich schrieb ja schon, dass die Anordnung der Elemente vom CSS abhängt, ob gefloatet wird oder nicht oder ob display:inline-block verwendet wird.
Ich empfehle, es mal ohne das #newitem zu versuchen. Du kannst ja auch zum HTML etwas hinzufügen:
Code: 
document.getElementById("row").innerHTML += dein_html_text_vom_server;
 
So mache ich das:
PHP: 
$.get('zeige_namen.php', function(data) {
            $('#newitems).html(data);
 })
 
Zuletzt bearbeitet von einem Moderator:
Ja, so hatte ich es auch vermutet. Dann probier doch mal, was ich eben empfohlen habe:
PHP: 
$.get('zeige_namen.php', function(data) {
    $('#row1).html($('#row1).html() + data);
})
und
HTML: 
<div id="row1" class="row">
 
Zuletzt bearbeitet von einem Moderator:
Mit
Code: 
$('#row1).html($('#row1).html() + data);
Funktioniert das "Ajax" nicht mehr. Es wird direkt die Php-Datei aufgerufen und geladen.

Hab jetzt einige Varianten probiert. Er setzt die neuen Items immer übereinander. Wenn ich überlege eigentlich auch logisch, da die neuen Items ja im Quelltext nicht vorhanden sind, da diese via "ajax" hinzugefügt werden. Also setzt er jedes neue Item immer an die gleiche stelle....

Aber wie lösen das denn andere? So eine Funktion sieht man doch öfter.

Also würde es wahrscheinlich nur funktionieren wenn ich die Elemente anstatt aus der PHP-Datei "lese" und anzeigen lassen direkt im jQuery erzeuge. Ich denke darum funktioniert es nicht weil das JS ja quasi nicht "weiß" das es vorher schon ein Item erstellt hat und somit es immer an die selbe stelle setzt.

Ist meine Überlegung richtig?

Da wären wir aber wieder bei dem alten Problem:
wie erzeuge ich die Ausgabe?

Wie gebe ich Data 2 Variablen mit?
Habe ja rausgefunden das ich in der PHP mit echo $irgendwas dann unter "data" den Wert habe. Zum Beispiel den Namen.
Aber für "löschfunktion" die später kommen soll muss ich auch den Wert der ID aus der Datenbank mit übergeben.

Ich bin was Jquery und JS im allgemeinen anbelangt noch sehr neu. Viele Sachen habe ich noch nicht so wirklich ganz durchdrungen :)

Selbst wenn ich sotewas versuche:
Code: 
$("#row1").html("Hello <b>world</b>!");

erscheint das "Hello world" immer an der selben stelle !
 
Zuletzt bearbeitet von einem Moderator:
So jetzt kommen wir zum zweiten Streich :)

Das hinzufügen klappt ja jetzt wunderbar. Natürlich möchte ich das auch löschen können, also habe ich folgendes Script:
Code: 
<script type="text/javascript">
        $(function(){
            $('#delname').click(function(){
                var elem = $(this);
              
                $.ajax({
                    type: "GET",
                    url: "del_name.php",
                    data: "id="+elem.attr('data-id'),
                    dataType:"json", 
                    success: function(data) {
                      
                      
                               $("#row1" ).fadeOut( "slow" );
                              $("#message").html("Hello <b>world</b>!");
                      
                    }
                });
                return false;
            });
        });
        </script>

HTML:
Code: 
<a href="#" id ="delname" class="small-box-footer" data-id="<?php echo $row[0]; ?>" >Löschen <i class="fa fa-eraser"></i></a>

Das Kuriose ist das:
1. Ich immer nur das erste Element von links löschen kann. Bei den anderen Elementen geht es nicht.
2. Die Funktionen in success nicht ausgeführt werden.

Woran könnte das liegen?
 
Ok, habe es soweit hinbekommen. Also das mit der success-Funktion.
Leider ist aber immer noch so das ich nur das erste Item von links löschen kann. Bei den anderen passiert gar nichts.
Nachdem ich einmal das erste Item gelöscht habe, rutsch das zweite zwar nach, kann es aber nicht direkt löschen sondern muss einen Refresh der Seite durchführen. Dann kann ich aber auch wieder nur dieses erste Item löschen.

???
 
Ich kann dir da überhaupt nicht folgen. Wo und wie fügst Du denn Elemente hinzu? Und wo und wie löschst Du sie? In deinem letzten Posting finde ich nur dieses:
Code: 
$("#row1" ).fadeOut( "slow" );
und damit löschst Du nichts, sondern machst es nur unsichtbar, aber den gesamten Container #row1.
 
Ja der Thread ist langsam etwas unübersichtlich :)

Also ich füge die Elemente ja so hinzu:
Code: 
$("form").submit(function(event) {
 
    event.preventDefault();
 
    // Wenn keine Eingabe erfolgt ist dann absenden verhindern:
   if ($.trim($("#bezeichnung").val()) === "") {
 
        e.preventDefault();
     
    }
 
 
    var form = $(this);
    var action = form.attr("action"),
        method = form.attr("method"),
        data   = form.serialize();
     
    // Der eigentliche AJAX Aufruf
    $.ajax({
        url : action,
        type : method,
        data : data
   
     
    }).done(function (data) {
        // Bei Erfolg, den letzten Eintrag auslesen (in der PHP-Datei) und dann diese mit JS zurückgeben:
   
          $.get('show_newname.php?id=' + data,function(data) {
         
            // Neue Items anfügen
            $('#row1').after(data);
         
            // Input-Feld Inhalt zurücksetzen.
            $("#bezeichnung").val("");
        })
    }).fail(function() {
        // Bei Fehler
        alert("Fehler!");
    })
});

Und so lösche ich die Objekte wieder:

Code: 
<script type="text/javascript">
    $(function(){
  
        $('#delcat').click(function(e){
            e.preventDefault();
            var elem = $(this);
            var parents = $('.did'+elem.attr('data-catid'));
            var parents2 = $('.did2'+elem.attr('data-catid'));
            $.ajax({
                type: 'get',
                url: 'del_name.php',
                data: 'id='+elem.attr('data-catid'),
                beforeSend: function() {
                    elem.animate({'backgroundColor':'#fb6c6c'},400);
                    parents2.animate({'backgroundColor':'#fb6c6c'},400);
                    
                },
                success: function() {
                  
                    parents.fadeOut( "slow" );
                }
            });
            return false;
        });
    });
    </script>

Ich kann aber immer nur das erste Item löschen. Danach brauch es ein refresh damit ich wieder das erste Item löschen kann. usw.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück