$(this).attr('id') was wenn id nicht vorhanden ?

[Netti]

Hallo,

$bearbeiten .='<button type="button" class="btn btn-default melden" data-id="'.$dnn2['nr'].'" ><i class="fa fa-bell-o" aria-hidden="true"></i> melden</button>';

	$(function () {
		$('.melden').click(function()
		{

$(this).attr("disabled", 'disabled'); setzt mir am Anfang meiner Funktion das Element button auf disabled

nach dem ich $.ajax({... aufrufe führt der Aufruf $(this).attr("disabled", 'disabled'); nicht zum gewünschten Ergebnis.

Wie kann ich ohne eine id zu vergeben das "Button Element" ansprechen um es auf disabled zu setzen?

Danke Netti

[pl]

Wie kann ich ohne eine id zu vergeben das "Button Element" ansprechen um es auf disabled zu setzen?

Vermittels Template und einer Engine die if/else/endif rendern kann. MfG

[Netti]

Hm, Danke

Wie kann ich ohne eine id zu vergeben das "Button Element" ansprechen um es auf disabled zu setzen?

Vermittels Template und einer Engine die if/else/endif rendern kann. MfG

verstehe ich nicht ...

ich möchte nach dem $.ajax({ Request und entsprechender Rückgabe den button deaktivieren

Gut, ich könnte jetzt eine ID vergeben und über diese ID den Button ansprechen. Aber mir steht mit this schon ein Objekt zur Verfügung aus der ich bestimmt diesen einen Button irgendwie ansprechen könnte..

[pl]

Hm, Danke

Wie kann ich ohne eine id zu vergeben das "Button Element" ansprechen um es auf disabled zu setzen?

Vermittels Template und einer Engine die if/else/endif rendern kann. MfG

verstehe ich nicht ...

ich möchte nach dem $.ajax({ Request und entsprechender Rückgabe den button deaktivieren

Beispiel folgt. Vorab: Mit JS und Templates arbeiten erfordert ein völliges Umdenken ;)

Gut, ich könnte jetzt eine ID vergeben und über diese ID den Button ansprechen. Aber mir steht mit this schon ein Objekt zur Verfügung aus der ich bestimmt diesen einen Button irgendwie ansprechen könnte..

In Templates werden Inhalte bzw. Attribute i.d.R. über Platzhalter angesprochen. So wird bspw. nach dem Eintreffen der Ajax-Response das gesamte Formular als Template komplett neu gerendert und ins DOM gepflanzt. Wie z.B. hier

@if_att@for="@att@"@else@@endif@ und @if_att@id="@att@"@else@@endif@

setzt die id fürs Label nur dann wenn ein Attribut namentlich vorhanden ist.

[JürgenB]

Hallo,

In Templates werden Inhalte bzw. Attribute i.d.R. über Platzhalter angesprochen. So wird bspw. nach dem Eintreffen der Ajax-Response das gesamte Formular als Template komplett neu gerendert und ins DOM gepflanzt. Wie z.B. hier

warum soll das gesamte Formular „komplett neu gerendert und ins DOM gepflanzt“ werden, wenn nur ein button disabled werden soll?

Gruß
Jürgen

[pl]

Hallo,

In Templates werden Inhalte bzw. Attribute i.d.R. über Platzhalter angesprochen. So wird bspw. nach dem Eintreffen der Ajax-Response das gesamte Formular als Template komplett neu gerendert und ins DOM gepflanzt. Wie z.B. hier

warum soll das gesamte Formular „komplett neu gerendert und ins DOM gepflanzt“ werden, wenn nur ein button disabled werden soll?

Das Arbeiten mit Templates erfordert ein völliges Umdenken. Unterm Strich vereinfacht und verkürzt es den Code um Größenordnungen. Auch wenn nur ein Wert zu ändern ist -- Der CODE zum Ändern dutzender Werte ist derselbe wie der CODE zum Ändern eines Wertes:

$('#out').html( xr(template, {slice:SLICE}) );

/pl

PS: Auch nicht uninteressant -- Es gibt kein Flackern. Man muss es einfach nur mal machen bevor man vorschnelle Schlüsse zieht und Ergebnisse bewertet die man gar nicht kennt.

[pl]

Hm, Danke

Wie kann ich ohne eine id zu vergeben das "Button Element" ansprechen um es auf disabled zu setzen?

Vermittels Template und einer Engine die if/else/endif rendern kann. MfG

verstehe ich nicht ...

Im Prinzip ist diese Vorgehensweise ja nichts Neues, denn ein native CGI/Affenformular macht auch nichts Anderes: Das Formulartemplate wird sowohl mit den Eingaben als auch mit dem Ergebnis ausgefüllt und im Rahmen der gesamten Seite zum Browser geschickt.

ich möchte nach dem $.ajax({ Request und entsprechender Rückgabe den button deaktivieren

Gut, ich könnte jetzt eine ID vergeben und über diese ID den Button ansprechen. Aber mir steht mit this schon ein Objekt zur Verfügung aus der ich bestimmt diesen einen Button irgendwie ansprechen könnte..

Ein Beispiel extra für Dich Im Unterschied zum native CGI ist hier jedoch das Template bereits im Browser vorhanden und die AJAX-Response beinhaltet nur die Eingaben sowie das Ergebnis.

MVC (Mit Vreundlichen Crüßen)

[JürgenB]

Hallo,

$bearbeiten .='<button type="button" class="btn btn-default melden" data-id="'.$dnn2['nr'].'" ><i class="fa fa-bell-o" aria-hidden="true"></i> melden</button>';

  $(function () {
  	$('.melden').click(function()
  	{

$(this).attr("disabled", 'disabled'); setzt mir am Anfang meiner Funktion das Element button auf disabled

hier zeigt this auf das geklickte Element.

nach dem ich $.ajax({... aufrufe führt der Aufruf $(this).attr("disabled", 'disabled'); nicht zum gewünschten Ergebnis.

und hier zeigt this vermutlich auf den http-Request. Hier solltest du das Element über den ‚.melden‘ ansprechen.

Gruß
Jürgen

[Netti]

Hallo Jürgen,

vielen Dank für Deine Antwort!

und hier zeigt this vermutlich auf den http-Request. Hier solltest du das Element über den ‚.melden‘ ansprechen.

genau this zeigt auf den Request und .melden wird mehrmals als Klasse verwendet so das es nicht eindeutig verwendet werden kann ... bleibt this als objekt wo irgendwo ein "Merker" "TagName" steht mit den ich das html element ansprechen kann ...

Hm,

[JürgenB]

Hallo

wo wird denn festgelegt, welcher Button vom Ajax-Callback disabled werden soll? An dieser Stelle muss die Referenz auf den Button „irgendwo“ so zwischengespeichert werden, dass die Ajax-Callbackfunktion darauf zugreifen kann.

Gruß
Jürgen

[dedlfix]

Tach!

wo wird denn festgelegt, welcher Button vom Ajax-Callback disabled werden soll? An dieser Stelle muss die Referenz auf den Button „irgendwo“ so zwischengespeichert werden, dass die Ajax-Callbackfunktion darauf zugreifen kann.

Mit anderen Worten: Man muss nicht immer

$(ausdruck).irgendwas;
$(ausdruck).irgendwasAnderes;

verwenden, man kann das auch so schreiben:

var $name = $(ausdruck);
$name.irgendwas;
$name.irgendwasAnderes;

Es ist eine gute Konvention, Variablen für jQuery-Objekte mit $ beginnen zu lassen, damit man das leichter erkennen kann. Aber man kann das auch machen, wie man möchte.

dedlfix.

[Netti]

Hi,

Danke ;o)

habe es jetzt so gelöst:

var $name = $(this);

also ein "cache" von this

bleibt dennoch die Frage wo in this der eindeutige selector / bezug versteckt ist welcher auf das html element zeigt

[Christian Kruse]

Hallo Netti,

bleibt dennoch die Frage wo in this der eindeutige selector / bezug versteckt ist welcher auf das html element zeigt

this bezieht sich immer auf das Objekt des aktuellen Kontextes. Das Closure, dass als Callback von deinem AJAX-Request ausgeführt wird, wird in einem anderen Kontext ausgeführt als der Code darum herum.

$(".melden").on("click", function() {

Hier bist du im ersten Kontext, das Closure, dass als Callback von deinem Event-Handler ausgeführt wird.

  $.get(function() {

Hier wechselt bei der Ausführung des Callbacks der Kontext zu dem AJAX-Request. Die Abarbeitung ist ja auch nicht synchron, sondern erfolgt erst, wenn der HTTP-Request verarbeitet wurde.

LG,
CK

[dedlfix]

Tach!

bleibt dennoch die Frage wo in this der eindeutige selector / bezug versteckt ist welcher auf das html element zeigt

Es ist definiert und in der Dokumentation beschrieben, ob ein this vorhanden ist und worauf es verweist, wenn du irgendwo eine Funktion als Callback angeben muss, und diese Funktion dann letztlich vom System oder von jQuery aufgerufen wird.

dedlfix.

[Netti]

Danke für Deine Antwort!

hm, mit "this" also sich selber ;o) und Übergabe an die Funktion per klick wird festgelegt welcher Button disabled werden muss. Funktioniert ja auch zum Anfang der Funktion ...

Ich habe das noch nicht richtig verstanden ... möchte ich aber bevor ich eine id="Zahl=eindeutig" vergebe...

[JürgenB]

Hallo

die Bedeutung von this hängt davon ab, wo du this verwendest, also vom Kontext. (Das ist genau so, wie bei „ich“ oder „mein“). Wenn die eine Funktion das „this“ einer anderen Funktion verwenden soll, musst du es zwischenspeichern. Ich verwende z.B. gerne das Konstrukt

var dieses = this;

Aber um für dich die optimale Lösung zu finden, musst du mehr Code zeigen.

Gruß
Jürgen

[Netti]

Hallo Jürgen,

Danke für Deine Antwort:

Ich mache das jetzt erstmal so mit:

"var dieses = this;"

es funktioniert ;o)

Naja, habe was dazugelernt ...

[Christian Kruse]

Hallo Netti,

$bearbeiten .='<button type="button" class="btn btn-default melden" data-id="'.$dnn2['nr'].'" ><i class="fa fa-bell-o" aria-hidden="true"></i> melden</button>';

  $(function () {
  	$('.melden').click(function()
  	{

$(this).attr("disabled", 'disabled'); setzt mir am Anfang meiner Funktion das Element button auf disabled

nach dem ich $.ajax({... aufrufe führt der Aufruf $(this).attr("disabled", 'disabled'); nicht zum gewünschten Ergebnis.

Wie kann ich ohne eine id zu vergeben das "Button Element" ansprechen um es auf disabled zu setzen?

Speichere die Referenz auf das this aus dem Event-Handler zwischen, so dass du das im AJAX-Request verwenden kannst:

$(".melden").on('click', function() {
  var $button = $(this);
  $.get('foo').done(function() {
    $button.attr('disabled', 'disabled');
  });
});

LG,
CK

[Netti]

Hi,

genau so geht's.

Aber wie schon gesagt irgendwo in this muss drinnen stehen welches Dom element ich ansprechen möchte.. wie komme ich da ran

Danke

[Christian Kruse]

Hallo Netti,

Aber wie schon gesagt irgendwo in this muss drinnen stehen welches Dom element ich ansprechen möchte.. wie komme ich da ran

Du meinst das cached this oder das aus dem AJAX-Request?

Bei ersterem mit z.B. this.nodeName. Aber ich glaube, ich habe deine Frage noch nicht so richtig verstanden, formuliere doch mal etwas ausführlicher, was du meinst?

LG,
CK

[Netti]

Ok, danke für Deine Antwort!

Bei ersterem mit z.B. this.nodeName. Aber ich glaube, ich habe deine Frage noch nicht so richtig verstanden, formuliere doch mal etwas ausführlicher, was du meinst?

mit console.log( $(this) ) bekomme ich:

[button.btn.btn-default.melden, context: button.btn.btn-default.melden] usw. .....

und irgendwo dort sollte doch eine eindeutige Zuordnung zum DOM Element sichtbar verwertbar sein.

[Christian Kruse]

Hallo Netti,

Bei ersterem mit z.B. this.nodeName. Aber ich glaube, ich habe deine Frage noch nicht so richtig verstanden, formuliere doch mal etwas ausführlicher, was du meinst?

mit console.log( $(this) ) bekomme ich:

[button.btn.btn-default.melden, context: button.btn.btn-default.melden] usw. .....

und irgendwo dort sollte doch eine eindeutige Zuordnung zum DOM Element sichtbar verwertbar sein.

this ist hier die eindeutige Zuordnung zum DOM-Element (es ist eine Referenz auf das Element). Das, was dir via console.log ausgegeben wird, ist nur eine menschenlesbare Repräsentation davon.

LG,
CK

[Netti]

Hi,

vielen Dank für Deine Info!

this ist hier die eindeutige Zuordnung zum DOM-Element (es ist eine Referenz auf das Element). Das, was dir via console.log ausgegeben wird, ist nur eine menschenlesbare Repräsentation davon.

Hm, vielleicht ein Denkfehler von mir ....

Ich habe this als "auswertbares Objekt" betrachtet d.H. das this analysiert und aufgelöst auf das Windowsobjekt zeigt ....

[Rolf b]

Du musst unterscheiden zwischen this und $(this). In deinem click-Handler ist der Kontext (was in this steht) das geklickte DOM-Element. Also der Button. $(this) ist der Aufruf der jQuery-Funktion mit this als Parameter, was ein matched set mit diesem DOM-Element als Inhalt erzeugt. Wenn Du im click-Handler schreibst

var $name = $(this);

dann ist das nicht falsch, aber Du merkst Dir damit nicht den Inhalt von this, sondern ein matched set mit dem angegebenen DOM-Element als Inhalt.

Um den Button im Ajax-Replyhandler zu disablen, kannst Du dieses matched set nutzen, du schreibst:

$name.prop('disable', true);     // und nicht: $name.attr('disable', 'disable');

Beachte prop statt attr - hier steht's begründet (suche nach disabled).

---

Sich zu diesem Zweck ein matched set zu merken, oder jQuery zu verwenden, ist aber eigentlich eine Spatzenkanone. Form-Elemente haben ein disabled-Property, das du auf true oder false setzen kannst. Deshalb reicht es, im click-Handler eine Variable clickedButton = this zu setzen und im Ajax-Replyhandler schreibst dann nur noch clickedButton.disabled = true.

Rolf

[Christian Kruse]

Hallo Rolf,

Beachte prop statt attr - hier steht's begründet (suche nach disabled).

Stimmt, das hatte ich übersehen, danke.

LG,
CK