PHP und AJAX ; Dynamische inputfelder mit ajax löschen

brizzi · 4. Mai 2014

Hallo,

ich bin momentan an einem Projekt am arbeiten und komme nun nicht weiter.

Undzwar geht es um folgendes. ich habe durch eine while schleife mehrere Datenbank einträge auslesen lassen. Für jeden eintrag habe ich nun einen bearbeiten button erstellt. In diesem bearbeiten button stehen nun zwei auswahl möglichkeiten zur verfügung.
1. Löschen und 2. bearbeiten.

Nun das hat ja bis jetzt alles einwandfrei geklappt.

Das problem ist das löschen der ausgelesenen beiträge klappt ja einigermassen bzw. es klappt in der hinsicht, dass die ajax funktion nun beiträge löscht, nur leider immer wieder das erste.
Im Firebug, wird mir angeziegt, das jedes inputfeld seine richtige ID hat, nur beim ausführen nimmt das ajax script immer wieder den ersten beitrag und ich verstehe nicht wieso.
Das was ich mir denke ist, dass es anhand der id des inpufeldes, die bei allen beträgen identisch ist, die funktion somit immer nur den ersten beitrag nimmt und übermittelt.

ich habe nichts hier im forum gefunden, was annähernd dieses problem beschreibt oder löst. Deshalb schreibe ich gerade diesen beitrag. Wenn ich es übersehen haben sollte, bitte ich um entschuldigung und wäre dankbar für den link dahin.

ich zeige euch mal noch mein script, damit ihr mehr anfangen könnt und hier kein Ratespiel angefangen wird.

PHP:

$abfrage = "SELECT *
 FROM gbook 
WHERE von='$_username'
ORDER BY id DESC"; 
$ergebnis = mysql_query($abfrage);
while($row = mysql_fetch_object($ergebnis)) 
				{
	 echo '<div id="post_um">
		<div style="position: absolute;">
		<div class="aeusserer" name="aeusserer" onMouseover="editFunction();"  onMouseout="hide2();" onClick="hide2();">
                </div> <!-- ende aeusserer -->

                <div class="edit" name="edit" id="edit"   onClick="editFunction();" onMouseout="hide2();"style="z-index:999548991;">
   
    
                 <div class="mouseover" name="mouseover" onMouseover="editFunction();"style="z-index:999548991;"> </div>
    
                 <div class="noborder" name="noborder" onMouseover="editFunction();"style="z-index:999548991;"> </div>
       

                 <div class="edit_buttons" name="edit_button" onMouseover="editFunction();" style="z-index:999548991;">
        
		       <form id="beitrag_loschen" method="post" >
		           <input type="hidden" value="'.$row->id.'" id="id">
		          <input type="hidden" value="'.$row->gbilder.'" id="post_bild">
                        <button type="submit"  name="loeschen" class="edit_btn" style="background-image:  url(img/loeschen.png);"   onClick="hideedit();">Löschen</button>
                           </form>
       
	              <form id="beitrag_bearbeiten" method="post"> 
	                  <input type="hidden" value="'.$row->id.'" id="id_beitrag">
	                  <button class="edit_btn" style="background-image:  url(img/zahnrad.png);"  onClick="hideedit();" style="z-index:999548991;">  Bearbeiten   </button>
                        </form>           
        
                            </div> <!-- end edit buttons -->   
    
                        </div>
	                </div>			  
				  
}

Code:

 <script type="text/javascript">
$(document).ready(function() {
    $("#beitrag_loschen").submit(function() {  
	var post_loschen= $('#id').attr('value');
	var postbild_loschen=$('#post_bild').attr('value');
			$.ajax({
				type:"POST",
				url:"komm_eigen_loschen.php",
				data: "id="+ post_loschen+ "&bild="+postbild_loschen,
				success: function(data)
				{ 
				$(".incontentunten").html(data);
				}
			});
		return false;
	});
});
</script>

Danke schon mal in vorraus und hoffe mir kann jemand helfen

Quaese · 5. Mai 2014

Hi,

IDs müssen innerhalb eines Dokuments eindeutig sein, dürfen also nur ein einziges Mal vergeben werden. Wird eine ID mehrfach vergeben, wird das erste Element im Dokument verwendet, dass die ID besitzt. Deshalb rate ich dir, dein Dokument zu überarbeiten. Z.B. eine Zählvariable in die while-Schleife und damit die IDs eindeutig gestalten.

Andernfalls ist zwar eine Lösung möglich, aber sauber und empfehlenswert ist sie nicht:

Code:

$(document).ready(function() {
    $(".beitrag_loschen").on('submit', function(evt) {  
        var $this = $(this),
            post_loschen= $this.find('input[id=id]').attr('value'),
            postbild_loschen= $this.find('input[id=post_bild]').attr('value');

        $.ajax({
            type:"POST",
            url:"komm_eigen_loschen.php",
            data: "id="+ post_loschen+ "&bild="+postbild_loschen,
            success: function(data)
            { 
            $(".incontentunten").html(data);
            }
        });
            
        return false;
    });
});

Ciao
Quaese

brizzi · 5. Mai 2014

Guten Morgen,

super viel viel dank für deine hilfe. Ich werde es jetzt direkt mal ausprobieren und bescheid sagen ob es funktioniert hat

brizzi · 5. Mai 2014

Also ich habe es jetzt mal ausprobiert, in der while schleife habe ich eine zählevariable eingebunden, wobei ich denke das der fehler bei der while schleife liegt, da die einzelne buttons nun immer um eine nummer steigen.

naja auf jedenfall wenn ich nun die button ausführe, läd er die Seite neue und löscht nix. kann es sein das ich die Zählervariable doch anders einsetzten muss und nicht so

PHP:

id="id'.$x.'"

****

brizzi · 5. Mai 2014

Hab es weiterhin ausprobiert und nun halbwegs hinbekommen das es löscht. nur habe ich nun das problem, dass wenn ich auf den button des ersten beitrages Klicke wird der 2 beitrag gelöscht und wenn ich auf dem zweiten beitrag klicke dann läd er einfach die Seite neu. ich weiß echt nicht mehr weiter.

SpiceLab · 5. Mai 2014

brizzi hat gesagt.:
Hab es weiterhin ausprobiert und nun halbwegs hinbekommen das es löscht. nur habe ich nun das problem, dass wenn ich auf den button des ersten beitrages Klicke wird der 2 beitrag gelöscht und wenn ich auf dem zweiten beitrag klicke dann läd er einfach die Seite neu. ich weiß echt nicht mehr weiter.

Wir wissen da auch nicht weiter, solange du hier keine Kostprobe deines aktuellen Codes gibst.

brizzi · 5. Mai 2014

ohh sorry habe ich vollkommen vergessen. hier ist es

Code:

$(document).ready(function() {
    $("#beitrag_loschen").submit( function() {  
	/*
        var $this = $(this),
            post_loschen= $this.find('input[id=id]').attr('value'),
            postbild_loschen= $this.find('input[id=post_bild]').attr('value');
		*/
		var elements = document.getElementById("beitrag_loschen");
var numElements = elements.length;
for(var index = 1; index < numElements; index++) { 
      
		var post_loschen_id=$('#id'+index).attr('value');
		var postbild_loschen_id=$('#post_bild'+index).attr('value');
   
        $.ajax({
            type:"POST",
            url:"komm_eigen_loschen.php",
            data: "id="+ post_loschen_id+ "&bild="+postbild_loschen_id,
            success: function(data)
            { 
            $(".incontentunten").html(data);
            }
        });
          
        return false;
    });
});

und hier das php

PHP:

 echo '<div id="post_um">
				  
				  <div style="position: absolute;">
				  <div class="aeusserer" name="aeusserer" onMouseover="editFunction();"  onMouseout="hide2();" onClick="hide2();">
    </div> <!-- ende aeusserer -->

<div class="edit" name="edit" id="edit"   onClick="editFunction();" onMouseout="hide2();"style="z-index:999548991;">
   
    
    <div class="mouseover" name="mouseover" onMouseover="editFunction();"style="z-index:999548991;"> </div>
    
    <div class="noborder" name="noborder" onMouseover="editFunction();"style="z-index:999548991;"> </div>
       

    <div class="edit_buttons" name="edit_button" onMouseover="editFunction();" style="z-index:999548991;">
        
		<form id="beitrag_loschen" method="post" >
		<input type="hidden" value="'.$row->id.'" id="id'.$x.'">
		<input type="hidden" value="'.$row->gbilder.'" id="post_bild'.$x.'">
        <button type="submit"  name="loeschen" class="edit_btn" style="background-image:  url(img/loeschen.png);"   onClick="hideedit();">Löschen</button></form>
       
	   <form id="beitrag_bearbeiten" method="post"> 
	   <input type="hidden" value="'.$row->id.'" id="id_beitrag">
	   <button class="edit_btn" style="background-image:  url(img/zahnrad.png);"  onClick="hideedit();" style="z-index:999548991;">  Bearbeiten   </button></form>           
        
    </div> <!-- end edit buttons -->   
    
</div>
	</div>

danke schon mal im vorraus

Quaese · 5. Mai 2014

Ich hatte vergessen zu erwähnen, dass ich die ID beitrag_loschen des Formulars in eine Klasse geändert habe.

Aus

Code:

<form id="beitrag_loschen" method="post" >

wurde

Code:

<form class="beitrag_loschen" method="post" >

Und selbstverständlich musst du bei der Nummerierung der IDs die Selektoren für das JavaScript anpassen.

Hier ist ein Beispiel, das die Vorgehensweise demonstrieren soll.

Ciao
Quaese

brizzi · 5. Mai 2014

Supeeer viel viel lieben dank für die schnelle hilfe, es funktioniert einwand frei

damit sind einige probleme aus Welt geschaffen. Das Problem hatte ich auf einigen Seiten.

Nochmals viel dank an allen und besonders an Quaese

PHP und AJAX ; Dynamische inputfelder mit ajax löschen

brizzi

Erfahrenes Mitglied

Quaese

Moderator

brizzi

Erfahrenes Mitglied

brizzi

Erfahrenes Mitglied

brizzi

Erfahrenes Mitglied

SpiceLab

ZENmechanic

brizzi

Erfahrenes Mitglied

Quaese

Moderator

brizzi

Erfahrenes Mitglied

Neue Beiträge