jquery function wird nicht aufgerufen

freeek

Trainee

Posts: 33

Thursday, December 15th 2011, 3:07pm

jquery function wird nicht aufgerufen

Hallo Forum,

ich kenn mich leider (noch) nicht mit JQuery und Ajax aus, habe deswegen den Code von einem Tutorial genommen und versucht anzupassen. Insgesamt verwende ich diese Funktion mit jeweils geänderten Parametern dreimal auf meiner Seite. Zweimal läuft alles super, nur die dritte Funktion wird gar nicht aufgerufen und ich versteh einfach nicht warum. zumindest vermute ich, dass die Funktion nicht aufgerufen wird, weil FireBug gar nichts anzeigt und das Formular einfach an die aktuelle Seite geschickt wird :/

JavaScript Code

$(document).ready(function () {
    $(".comment-form").submit(function () {
 
        var commentval = $("#subcomment").val();
        var wallval = $("#subcomment_wall").val();
        var dataString = 'comment=' + commentval + '&wall_id=' + wallval;
 
        if (commentval == '') {
            alert("Text fehlt");
        } else {
            $("#flash").show();
            $("#flash").fadeIn(400).html('<img src="images/ajax-loader.gif" align="absmiddle">');
 
            $.ajax({
                type: "POST",
                url: "comment-wall.php",
                data: dataString,
                cache: false,
                success: function (html) {
                    $("ul#post-comments li:last").after(html);
                    document.getElementById('subcomment').value = '';
                    document.getElementById('subcomment').focus();
                    $("#flash").hide();
                }
            });
        }
        return false;
    });
});

das formular dazu:

HTML Code

<form method="post" id="comment-form" class="comment-form"><input type="hidden" id="subcomment_wall" value="'.$i['wall_id'].'"><input type="text" id="subcomment" class="comment"></form><span id="flash"></span>

wäre über jede Hilfe dankbar.

This post has been edited 1 times, last edit by "freeek" (Dec 15th 2011, 3:37pm)

freeek

Trainee

Posts: 33

Thursday, December 15th 2011, 7:28pm

Habs jetzt doch irgendwie hingekriegt. Fragt mich nicht, warums jetzt läuft

Szabo

Professional

Posts: 248

Thursday, December 15th 2011, 10:59pm

Was hast den alles so verändert?

freeek

Trainee

Posts: 33

Friday, December 16th 2011, 2:17pm

muss meine Antwort zurücknehmen :/

vill doch mal kurz zum Hintergrund: ich möchte eine Art Facebook-Pinnwand erstellen und Einträge eben kommentieren lassen über dieses Formular.
das Eintragen von Beiträgen klappt wunderbar, nur das Kommentieren passt noch nicht. Ich habe jetzt einiges versucht und ich kapier einfach nicht, an was sich JQuery da stößt...

wenn ich z.B. bei der function die class gegen die id austausch (die ja die gleiche ist), erscheint die fehlermeldung, dass der Text fehlt, ansonsten wird das Formular einfach an sich selbst geschickt. Warum treten da zwei unterschiedliche Ergebnisse auf?

Genauso: Wenn ich das Kommentarformular direkt in die php-while Schleife schreibe erscheint das Alert-Fenster, wenn ich aber auf einen Text klicke und mir durch eine Funktion das Kommentarformular einblenden lasse, wird der Kommentar an die Seite selbst geschickt und nichts passiert. Die beiden Formulare sind absolut identisch..

Kurzzeitig hat das Eintragen auch funktioniert, nur wurde mein Kommentar ca. 25 mal gespeichert, wenn ich aber einen anderen kommentiert habe, erschien das Alert-Fenster "Text fehlt" (bei allen anderen).

Ich werde immer ratloser

This post has been edited 1 times, last edit by "freeek" (Dec 16th 2011, 2:23pm)

Torben Brodt

Administrator

Posts: 8,454

Saturday, December 17th 2011, 11:07am

Ich habe deinen Code mal unverändert durch den http://jsbeautifier.org/ gejagt und oben aktualisiert, damit er etwas lesbarer wird.

Dein Problem ist einfach erklärt:
Du wendest deine Funktion auf alle Formulare mit der Klasse "comment-form" an. Das können natürlich mehrere sein.
Innerhalb der Funktion greifst du aber auf IDs zu wie "subcomment". Weil IDs eindeutig sind, kann das natürlich nur eine sein.

Deswegen ist die Methode schlichtweg falsch und alle Formular IDs sollten entfernt werden.
Stattdessen solltest du mit der Referenz "this" arbeiten.
this ist das Formular und mit formular.xxx kannst du auf das formularelemt mit dem Namen xxx zugreifen

Lösung:

JavaScript Code

$(document).ready(function () {
	$(".comment-form").submit(function () {
		var commentval = this.foo.value;
		...
	});
});

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

freeek

Trainee

Posts: 33

Saturday, December 17th 2011, 2:04pm

Danke Torben,
klingt logisch. Da hätt ich auch draufkommen können :/
Werd ich sofort testen, sobald ich mein Notebook wieder hab, aber durch deinen Code müssten ja beide Probleme verschwinden. Werd mich auf jeden Fall nochmal melden