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

ID wird nicht mehr richtig ausgelesen, nachdem AJAX Inhalt generiert hat

serio

Neues Mitglied
Guten Tag,

ich hänge hier total durch, Grund ist dieses Problem:
Ich habe eine Kommentarfunktion geschrieben, mittels Ajax schicke ich Daten an ein PHP Script, dieses Wertet diese Daten aus, schreib Sie in eine DB und gibt ein ECHO mit dem aktuellen Kommentar zurück, das klappt soweit auch alles.
Ich habe für jeden Kommentar dann aber noch ein "Löschen" Button, mit dem der User seinen Kommentar wieder löschen kann.
Und genau dieser Button funktioniert genau dann (und nur dann) nicht, wenn der Post gerade mit Ajax erstellt wurde, hier mal der Jquery/Ajax bereich, der dafür zuständig ist:
Code:
					$j(".com_del").live("click", function () {	
						var com_id_del = $j(this).attr('id');					
						var scripturl = $j("#scripturl").val();	
						var loaderurl = $j("#loaderurl").val();	
						var dataString = 'com_id_del=' + com_id_del + '&scripturl=' + scripturl;
						$j(".flashdel#"+com_id_del).show();
						$j(".flashdel#"+com_id_del).fadeIn("slow").html('<img src="'+loaderurl+'" align="absmiddle">&nbsp;<span class="loading">wird durchgeführt...</span>');
									  $j.ajax({
											type: "POST",
											url: scripturl,
											data: dataString,
											cache: false,
											success: function(html){
												  $j(".picture_comments#"+com_id_del).fadeOut("slow");
												  $j(".flashdel#"+com_id_del).hide();
									  }
									 });
												return false;
					});

Der Teufel ist in der zweiten Zeile:
var com_id_del = $j(this).attr('id');
Die ID, die der sich da holt ist einfach nicht richtig, der holt sich immer die ID aus dem Kommentar, welches zuletzte erstellt wurde (oder irgend eine noch frühere).
Der neue "Löschen" Link, der durch mein PHP Script erzeugt wird und dann dynamisch mit dem neuen Kommentar angezeigt wird hat aber auf jedenfall die richtige ID, das habe ich schon X-Mal kontrolliert.

Warum wird also
var com_id_del = $j(this).attr('id');
nicht nochmal korrekt ausgeführt um die neue ID zu bekommen, wenn ich schon per live() das ganze eben Live halten will um per AJAX nachgeladenen Elemente zu holen?

gruß
 
moin,

ich hab gestern noch etwas merkwürdiges festgestellt: Wenn ich einen neuen Kommentar per Ajax & PHP erzeuge taucht der sofort normal in meiner Kommentarliste auf, jedoch steht im Quelltext der Seite ("Quelltext anzeigen") nur ein teil des Codes. So kann ich zB im echo der PHP datei beliebige werte verteilen und der nimmt trotzdem andere werte, schwer zu erklären, hier mal mein Code:

JavaScript für Kommentar schreiben und Löschen
Code:
	<script type="text/javascript">
				  var $j = jQuery.noConflict();
				  
					$j(".submitcom").click(function () {
							var username = $j("#username").val();
							var userid = $j("#userid").val();
							var picid = $j("#picid").val();
							var member = $j("#member").val();
							var thumbpic = $j("#thumbpic").val();
							var picurl = $j("#picurl").val();
							var comment = $j("#comment").val();
							var memburl2 = $j("#memburl2").val();
							var ava = $j("#ava").val();
							var comid = $j("#comid").val();	
							var scripturl = $j("#scripturl").val();
							var loaderurl = $j("#loaderurl").val();								
							var dataString = 'name='+ name + '&comment=' + comment + '&username=' + username + '&userid=' + userid + '&picid=' + picid + '&member=' + member + 
											 '&thumbpic=' + thumbpic + '&picurl=' + picurl + '&memburl2=' + memburl2 + '&comid=' + comid + '&ava=' + ava + '&scripturl=' + scripturl ;
							$j("#flash").show();
							$j("#flash").fadeIn("slow").html('<img src="'+loaderurl+'" align="absmiddle">&nbsp;<span class="loading">Kommentar wird gespeichert...</span>');
									  $j.ajax({
											type: "POST",
											url: scripturl,
											data: dataString,
											cache: false,
											success: function(html){
												  $j("div#update").append(html);
												  $j("div#update").fadeIn("slow");
												  $j("#comment").val('');
												  $j("#flash").hide();
									  }
									 });
												return false;
					});
					
	
					$j(".com_del").live('click', function () {	
						var com_id_del = $j(this).attr('id');
						alert(com_id_del);						
						var scripturl = $j("#scripturl").val();	
						var loaderurl = $j("#loaderurl").val();	
						var dataString = 'com_id_del=' + com_id_del + '&scripturl=' + scripturl;
						$j(".flashdel#"+com_id_del).show();
						$j(".flashdel#"+com_id_del).fadeIn("slow").html('<img src="'+loaderurl+'" align="absmiddle">&nbsp;<span class="loading">wird durchgeführt...</span>');
									  $j.ajax({
											type: "POST",
											url: scripturl,
											data: dataString,
											cache: false,
											success: function(html){
												  $j(".picture_comments#"+com_id_del).fadeOut("slow");
												  $j(".flashdel#"+com_id_del).hide();
									  }
									 });
						return false;
					});
					
					$j(".comneu").click(function () { alert('huhu');});
			
</script>

PHP-Teil, der vorhandenen Kommentare ausliest und anzeigt + "Neuer Kommentar" Formular:

Code:
$sql=mysql_query("select * from comments_pictures where pic_id='$picid' ORDER BY com_id ASC ");
								while($row=mysql_fetch_array($sql) )
								{
									$name=$row['Name'];
									$avatarID=$row['UserID'];					
									$comment = $row['comment'];
									$datum = $row['datum'];
									$com_id = $row['com_id'];
									echo "<div class=\"picture_comments\" id=\"$com_id\"><div class=\"com_avatar\">";
									echo bp_core_fetch_avatar( 'item_id='.$avatarID)."</div>";
									echo "<div class=\"com_text\"><div class=\"com_title\"><a href=\"$memburl2$name\">".$name."</a> || ".$datum."</div>";
									if ($uzerid == $avatarID || is_admin() || is_site_admin() ) {	
									echo "
										<input type=\"hidden\" id=\"$com_id\" name=\"com_id_del\" class=\"com_id_del\" value=\"$com_id\">
										<input type=\"hidden\" name=\"scripturl\" id=\"scripturl\" class=\"scripturl\" value=\"$scripturl\" />
										<input type=\"hidden\" name=\"loaderurl\" id=\"loaderurl\" class=\"loaderurl\" value=\"$loaderurl\" />
										&nbsp;||&nbsp;<a href=\"#\" class=\"com_del\" id=\"$com_id\">L&ouml;schen</a> <div class=\"flashdel\" style=\"float: right;\" id=\"$com_id\"></div>"; 
									}
									echo "<br />";
									echo "<div class=\"com_content\">".$comment."</div>";
									echo "</div></div>";
								} 
							echo "	<div id=\"update\" class=\"timeline\"></div></div>";
							
							if ($username2 != "") { 												// checken ob user eingeloggt ist.
								echo	"<div class=\"comment_formwrapper\">
										<form action=\"#\" method=\"post\">
										<textarea name=\"comment\" id=\"comment\" class=\"picture_commenttext\"></textarea><br />
										<input type=\"hidden\" name=\"username\" id=\"username\" class=\"username\" value=\"$username2\" />
										<input type=\"hidden\" name=\"userid\" id=\"userid\" class=\"userid\" value=\"$uzerid\" />
										<input type=\"hidden\" name=\"picid\" id=\"picid\" class=\"picid\" value=\"$picid\" />
										<input type=\"hidden\" name=\"member\" id=\"member\" class=\"member\" value=\"$member\" />
										<input type=\"hidden\" name=\"thumbpic\" id=\"thumbpic\" class=\"thumbpic\" value=\"$thumbpic_real\" />
										<input type=\"hidden\" name=\"picurl\" id=\"picurl\" class=\"picurl\" value=\"$picurl\" />
										<input type=\"hidden\" name=\"memburl2\" id=\"memburl2\" class=\"memburl2\" value=\"$memburl2\" />
										<input type=\"hidden\" name=\"ava\" id=\"ava\" class=\"ava\" value=\"$ava\" />
										<input type=\"hidden\" name=\"comid\" id=\"comid\" class=\"comid\" value=\"$com_id\" />
										<input type=\"hidden\" name=\"scripturl\" id=\"scripturl\" class=\"scripturl\" value=\"$scripturl\" />
										<input type=\"hidden\" name=\"loaderurl\" id=\"loaderurl\" class=\"loaderurl\" value=\"$loaderurl\" />
										<input type=\"submit\" name=\"submitcom\" class=\"submitcom\" id=\"submitcom\" value=\" Kommentar abschicken \" />
										<div id=\"flash\" style=\"float: right\"></div>
										</form></div>";
							}

commentajax.php, das Script, welches von Ajax angesprochen wird
Code:
// DB Connection aufbau

$username = $_POST['username'];						// Kommentar schreiben Daten einsammeln.
						$userid = $_POST['userid'];
						$member = $_POST['member'];
						$picid = $_POST['picid'];
						$picurl = $_POST['picurl'];
						$thumbpic_real = $_POST['thumbpic'];
						$text = $_POST['comment'];
						$memburl2 = $_POST['memburl2'];
						$com_id = $_POST['comid'];
						$ava = $_POST['ava'];
						$scripturl = $_POST['scripturl'];
																	
						$com_id_del = $_POST['com_id_del'];					// Kommentar löschen Daten einsammeln
									
						date_default_timezone_set('Europe/Berlin');			// Zeitstempel erzeugen
						$datenew = date("d.m.Y - H:i");
						$date_uploaded =  gmdate( "Y-m-d H:i:s" );
						
									
					if($_POST)
					{
						if ($ava != "") {  // S C H R E I B E N - prüfen, ob es sich um eine "Kommentar Schreiben" Aktion handelt
							
								mysql_query("INSERT INTO comments_pictures (UserID, Name, comment, pic_id, datum)
														VALUES ('$userid', '$username' ,'$text', '$picid', '$datenew')");	
														
								$act_action = "<a href=\"$memburl2$username/\">".$username."</a> hat das Bild von <a href=\"$memburl2$member/\">".$member."</a> Kommentiert:";
													
								$act_content = "<div class=\"comment_activity_pic\"><a href=\"$picurl\"><img src=\"$thumbpic_real\" /></a></div><div class=\"comment_activity_text\">".$text."</div>";
																					
								mysql_query("INSERT INTO wp_bp_activity (user_id, component, type, action, content, date_recorded)
														VALUES ('$userid', 'blogs' ,'new_blog_post', '$act_action', '$act_content', '$date_uploaded')");	
																							
								
									echo "<div class=\"picture_comments\"><div class=\"com_avatar\">";
									echo "<img src=\"$ava\"  alt=\"Profilbild\" class=\"avatar user-$userid-avatar\" width=\"50\" height=\"50\"></div>";
									echo "<div class=\"com_text\">DAS HIER 1234<div class=\"com_title\"><a href=\"$memburl2$username\">".$username."</a> || ".$datenew."</div><span class=\"comneu\" id=\"$liveid\">Loesch</span>";
						
									//if($liveid != 0) { $liveid = $com_id_del; } if($liveid = "") { $liveid = $com_id; }
									$liveid = $com_id;
								
									echo	"<input type=\"hidden\" id=\"$liveid\" name=\"com_id_del\" class=\"com_id_del\" value=\"$liveid\">
											<input type=\"hidden\" name=\"scripturl\" id=\"scripturl\" class=\"scripturl\" value=\"$scripturl\" />
											<input type=\"hidden\" name=\"loaderurl\" id=\"loaderurl\" class=\"loaderurl\" value=\"$loaderurl\" />
											";
									
									echo "<br />";
									echo "<div class=\"com_content\">".$text."</div>";
									//echo "</div></div>";
									
									//$check = "CHECK";
									//json_encode(array('returned_val' => 'CHECK'));
									
							}

						if ($com_id_del != "") { // KOMMENTARE LÖSCHEN
		
								$abfrage = "SELECT * FROM comments_pictures WHERE com_id = '$com_id_del'";
								$ergebnis = mysql_query($abfrage);
								while($rowe = mysql_fetch_object($ergebnis))
								{
									$loeschen = "DELETE FROM comments_pictures WHERE com_id = '$com_id_del'";
									$loesch = mysql_query($loeschen);

								}
						}
					}

in der commentajax.php steht ne Zeile DAS HIER 1234. Diese Zeile wird im Browser korrekt mit angezeigt, taucht jedoch nicht im quelltext auf, wenn ich auf "quelltext anzeigen" gehe (?)

gruß
 
erwartest du wirklich, dass sich jemand deine Codewüste durchforstet um dabei evtl. durch's anschauen einen Fehler zu finden?
 
serio schrieb:
schwer zu erklären

Ja, das ist der Grund, wieso ich nach „kompletterem“ (man beachte die Nuance ;)) Quellcode fragte. Der im Ausgangsposting reichte meines Erachtens nicht aus.

Eigentlich meinte ich damit ein auf das Wesentliche reduziertes und im Zweifel sogar testbares Beispiel. Sorry, ich gehe immer davon aus, dass Leute selbst beurteilen können, was für potentielle Antworten hilfreich wäre. Aber, na ja, dann würden sie diesen Code wohl schon im Ausgangsposting zeigen.

Grundsätzlich geht es aber so.

PHP:
<?php

if (isset($_GET['ajax'])) {
    if (!isset($_POST['action'])) {
        exit;
    }

    switch ($_POST['action']) {
        case 'demo1':
            $id = mt_rand(1, 1000);
            echo json_encode(array('test' => '<p id="elem' . $id . '" class="del">Hello world! (elem' . $id . ')</p>'));
            break;
        case 'demo2':
            $id = $_POST['id'];
            echo json_encode(array('id' => $id));
            break;
        default:
            break;
    }

    exit;
}

?><!DOCTYPE html>

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Ajax testing template</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

        <script type="text/javascript">

            function ajaxCallDemo1()
            {
                $.ajax({
                    type     : "POST",
                    async    : true,
                    url      : "?ajax",
                    cache    : false,
                    data     : {action      : 'demo1'},
                    dataType : 'json',
                    success: function(data) {
                        $('#demo1').append(data['test']);
                    },
                    error: function() {
                        alert("Something went wrong");
                    }
                });
            }
            
            function ajaxCallDemo2(theId)
            {
                $.ajax({
                    type     : "POST",
                    async    : true,
                    url      : "?ajax",
                    cache    : false,
                    data     : {action      : 'demo2', id : theId},
                    dataType : 'json',
                    success: function(data) {
                        $('#' + data['id']).remove();
                        alert('Entfernt: ' + data['id']);

                    },
                    error: function() {
                        alert("Something went wrong");
                    }
                });
            }

            $(document).ready(function() {
                $('#add').bind('click', ajaxCallDemo1);
                $('.del').live('click', function () { ajaxCallDemo2($(this).attr('id')); });
            });

        </script>
    </head>

    <body>
        <div id="demo1"></div>
        <p><button id="add">add</button></p>
        <p>(Elemente anklicken zum Entfernen)</p>
    </body>

</html>
 
Hi,
vielen dank für die Hilfestellung, ich habe auch den ganzen tag noch dran gearbeitet und mein Script stark umgeschrieben, gerade eben hab ich es zum laufen bekommen! Der Hauptfehler war, das ich die ID des letzten eingetragenen Kommentars welches der User als HTML ausgabe sieht ausgelesen habe und nicht das letzte Kommentar aus der datenbank... dummer fehler
gruß
 
Zurück
Oben