[FRAGE] Wie überwache ich mit Javascript / Jquery ein Element auf Änderung

[chriscap81]

Folgendes:

ich möchte Herausfinden ob eine Selectbox durch ein Script verändert wurde.
Die Aktion durch den Benutzer kann ich abfangen, das geht auch Problemlos.
Jeodch wird die selectbox mit neuen werten durch ein anderes Script gesetzt (Prototype).
Und mein Script soll nur horchen ob der selected Wert sich geändert hat.

Habe schon mit bind change probiert, jedoch ohne erfolg.
Das andere Script zu verändern das die Selectbox setzt ist leider Tabu.
Habt ihr eine Idee?

So in Etwa:

$(document).on('change', '#options', function() {
	alert('Value change to ' +'#options' + $(this).attr('value'));
        //Mache was
});

						
$("#options_10922 option:[value='xxx']").attr('selected','selected');  // externes Script ändert wert der Box jetzt soll die onchange bedingung greifen

MfG

 

[mikdoe]

Einen Eventhandler dafür kenne ich auch nicht. Darf man fragen, wieso das andere Script nicht erweitert werden kann? Das ist nicht unbedingt typisch, dass man in ein und demselben Dokument mit zwei verschiedenen JS Scripten auf ein select zugreift und dabei nur Zugriff auf eins davon hat.
Als Workaround würde ich es alle paar Millisekunden abfragen über eine .setTimeout() Schleife. Und deren Millisekunden eben so wenig wie nötig und so hoch wie möglich, damit der Browser nicht einfriert.

 

[chriscap81]

Also es war so gedacht:
Script A das nicht geändert werden darf (ist nicht meine entscheidung) holt daten aus Cookies in Selectboxen (Prototype),
meine Erweiterung (Script B) soll diese Selectboxen eigentlich durch schöne Stylebare Div container ersetzen und es sollte auch für andere Bereiche mit Selectboxen einnsetzbar sein.
Die selectboxen sollen dann ne klasse bekommen ersetzemich und dann halt ersetzt werden. Funtkioniert auch alles super soweit bis auf das mir das Cookie Script da einen strich durch die Rechnung macht, da der Wert sich millisekunden später neu setzt (durch den Ajax request).

Mhh das mit dem Timeout ist auch nicht die beste Option. Nützt nix da muss ich muss ich überzeugungsarbeit leisten.

Danke schonmal

 

[s4ty]

Willst du denn tatsächlich in dem Augenblick reagieren wenn der Wert sich ändert, oder willst du bei "deiner" nächsten Aktion die Änderung berücksichtigen?

 

[chriscap81]

Ja ich möchte das abfangen und darauf reagieren bzw den wert in diesem Augenblick direkt in die DIV Selectbox reinschreiben.
Ich habe jetzt das Script A um eine weitere Klasse mit Prototype erweitert. Da scheint es zu klappen.

Nur blöd das es halt nun da mit drinn ist. es sollte eigentlich strukturell klar getrennt sein.

Viele Grüße
Christian

 

[mikdoe]

es sollte eigentlich strukturell klar getrennt sein

Entschuldigung aber was soll das denn für eine Struktur sein wo aus mehreren Richtungen die selben Elemente manipuliert werden und einer auf den anderen lauert? Normalerweise geht man hin und baut die Elemente gleich so wie sie gewünscht sind und macht dann nicht mit einem zweiten Script nachträgliche Änderungen. Das finde ich absurd und überhaupt nicht mehr wartbar und dabei auch völlig unnötig.

 

[kkapsner]

Ich würde in das erste Skript ja einfach einbauen, dass es das "change"-Event feuert, wenn es den Wert geändert hat. Ist (wahrscheinlich - kenne mich micht prototype gar nicht aus) eine zusätzliche Zeile, die nicht schadet, wenn es doch mal ganz alleine laufen soll.

Den Weg über das window.setTimeout() würde ich als aller letzte Option nehmen.

Abhängig davon, welche Browser unterstützt werden sollen, kann man propertychange | onpropertychange event (Internet Explorer) (alte IEs) oder https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/watch (nur Gecko/Firefox) verwenden. Aber mein erster Weg wäre der oberste.

 

[devnull69]

Spontan würde ich es mit einem MutationObserver versuchen (https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver). Mittels des Parameters "MutationObserverInit" können damit auch Attribut-Veränderungen registriert werden (z.B. das selected Attribut). Ich habe den MutationObserver selber erst ein einziges Mal verwendet, von daher formuliere ich meine Antwort erst einmal vorsichtig.

Kann ich den MutationObserver verwenden? Siehe Can I use Mutation Observer

// Ziel-Knoten festlegen
var target = document.querySelector('#DeinSelect');
 
// Eine Mutation-Observer-Instanz erstellen
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type); // hier dürften nur die veränderten child-Nodes sowie Attributänderungen auftauchen
  });    
});
 
// Konfiguration des Observers
var config = { attributes: true, childList: true };
 
// Ziel-Knoten und Optionen als Parameter
observer.observe(target, config);

 

[kkapsner]

Das funktioniert nicht, denn wenn per JS die .value-Eigenschaft der <select>-DOM-Node geändert wird oder die .selected-Eigenschaft der <option>-DOM-Node, wird kein Attribut geändert und der Oberserver feuert nicht. Wenn aber über .setAttribute() (was ich für Standardattribute nicht empfehle) das Attribut geändert wird, feuert zwar der Observer, aber die <option> wird dann nicht markiert:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css"></style>
</head>
<body>
<select id="select">
	<option id="option"></option>
	<option>1</option>
	<option>2</option>
	<option>3</option>
	<option>4</option>
</select>
<button id="button">klick</button>
<button id="button2">klick 2</button>
<script type="text/javascript">
 
// Eine Mutation-Observer-Instanz erstellen
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type); // hier dürften nur die veränderten child-Nodes sowie Attributänderungen auftauchen
  });    
});
 
// Konfiguration des Observers
var config = { attributes: true, childList: false};
 
// Ziel-Knoten und Optionen als Parameter
observer.observe(document.getElementById("option"), config);
document.getElementById("button").addEventListener("click", function(){
	document.getElementById("option").selected = true;
}, false);
document.getElementById("button2").addEventListener("click", function(){
	document.getElementById("option").setAttribute("selected", true);
}, false);
</script>
</body>
</html>

Und dass in dem zweiten Skript beides gemacht wird, wage ich zu bezweifeln.

 

[devnull69]

Hm ok ... im Original-Post hatte ich das hier

Jeodch wird die selectbox mit neuen werten durch ein anderes Script gesetzt (Prototype).

so verstanden, dass die Werte (also die <options>) des <select> komplett neu gesetzt werden. Das könnte der MutationObserver zumindest abfangen (durch die childList-Option)

 

[kkapsner]

Stimmt. Ich hatte das anders verstanden. Mal sehen, was chriscap81 sagt.

 

[tsseh]

Stimmt. Ich hatte das anders verstanden. Mal sehen, was chriscap81 sagt.

hat er doch schon,

$("#options_10922 option:[value='xxx']").attr('selected','selected');  // externes Script ändert wert der Box jetzt soll die onchange bedingung greifen

wobei ich auch den event triggern würde, das ist ja die ursache des problems und vielleicht für weitere

 

[kkapsner]

Das

So in Etwa:

hat mich jetzt gerade etwas verunsichert.