Thomas Seifert: setAttribute und IE

Hallo,

ich hab mal wieder ein Problem mit dem setAttribute
p.s. ich weiß man sollte das nicht unbedingt benutzen für ein event, aber leider weiß ich keine andere Möglichkeit
document.getElementById(this.textarea_id).form.onSubmit=on_submit;
kann ich leider nicht verwenden da mehrere funktionen dynamisch in das form geschrieben werden müssen

also mal das problem vor dem ich grad stehe

//für andere (das funktioniert soweit super)
document.getElementById(this.textarea_id).form.setAttribute("onSubmit", this.ClassName+'.on_submit();');

//für ie (das bekomm ich einfach net hin)
document.getElementById(this.textarea_id).form.setAttribute("onsubmit", function () { new_editor.on_submit(); });

this.ClassName ist ein string und entspricht beispielhaft dem "new_editor)
dadurch das im ie die onsubmit funktion nicht als string angegeben wird, bekomm ich aber nun probleme this.ClassName dahinein zu parsen.
selbst mit eval wollt es irgendwie nicht funktionieren
hat jemand dazu vielleicht eine idee?

  1. //für ie (das bekomm ich einfach net hin)
    document.getElementById(this.textarea_id).form.setAttribute("onsubmit", function () { new_editor.on_submit(); });

    this.ClassName ist ein string und entspricht beispielhaft dem "new_editor)
    dadurch das im ie die onsubmit funktion nicht als string angegeben wird, bekomm ich aber nun probleme this.ClassName dahinein zu parsen.

    Interessant und hilfreich wäre es zu Wissen in welcher Beziehung "this", die Textarea und "new_editor" stehen. Mir scheint es du denkst um viel zu viele Ecken.

    Du kannst auch

    [Formular].onsubmit = function()
    {
    funktion_1();
    funktion_2();
    };

    schreiben.

    aber du weißt:

    das z.b.
    <textarea onclick="this.form">
    this.form die Referenz auf das Formular des Textfeldes ist?

    und das bei:
    [Formular].onsubmit = function()
    {
    this ....
    };

    this in der Funktion das Formular selber?

    Struppi.

    1. Interessant und hilfreich wäre es zu Wissen in welcher Beziehung "this", die Textarea und "new_editor" stehen. Mir scheint es du denkst um viel zu viele Ecken.

      das aber nen bissle komplizierter...

      //im html document
      new_editor = new editor_init();
      new_editor.ClassName='new_editor';

      this.ClassName entspricht also new_editor (innerhalb der editor_init klasse)

      in der klasse selber dort gibts methoden in der einiges gemacht wird.
      zb auch dieses setAttribute
      das grundproblem ist eigentlich:
      einiges wird per document.write ins html geschrieben
      (da verweist "this" natürlich nicht mehr auf die klasse selber, sondern ich muss mittel this.ClassName auf die Eigenschaften und Methoden der Klasse zugreifen)

      mfg thomas

      1. //im html document
        new_editor = new editor_init();
        new_editor.ClassName='new_editor';

        this.ClassName entspricht also new_editor (innerhalb der editor_init klasse)

        Nein es entspricht lediglich einem String.
        Dein Problem ist dass innerhalb von Events dein Ursprüngliches Objekt nicht mehr bekannt ist, es gibt mehrere Möglichkeiten dies zu umgehen ich find die sinnvollste dem Objekt das den Event ausführt einfach dein ursprungsobkekt als Eigenschaft mitzugeben.

        Also z.b. so

        var new_editor = new editor_init();

        document.Obj = new_editor;
        document.onclick = function(e)
        {
         alert('das Objekt:' + this.Obj);
        }

        Struppi.

        1. Nein es entspricht lediglich einem String.
          Dein Problem ist dass innerhalb von Events dein Ursprüngliches Objekt nicht mehr bekannt ist, es gibt mehrere Möglichkeiten dies zu umgehen ich find die sinnvollste dem Objekt das den Event ausführt einfach dein ursprungsobkekt als Eigenschaft mitzugeben.

          im reinen HMTL/JS wäre es ja auch kein Thema. Aber es geht darum das das per setAttribute in ein Form geschrieben werden muss

          1. Nein es entspricht lediglich einem String.
            Dein Problem ist dass innerhalb von Events dein Ursprüngliches Objekt nicht mehr bekannt ist, es gibt mehrere Möglichkeiten dies zu umgehen ich find die sinnvollste dem Objekt das den Event ausführt einfach dein ursprungsobkekt als Eigenschaft mitzugeben.

            im reinen HMTL/JS wäre es ja auch kein Thema. Aber es geht darum das das per setAttribute in ein Form geschrieben werden muss

            Wieso? Du kannst genauso dem Formular ein Objekt mitgeben.

            setAttribute() ist her überflüssig, da du den onsubmit Handler direkt ansprechen kannst.

            Struppi.

            1. setAttribute() ist her überflüssig, da du den onsubmit Handler direkt ansprechen kannst.

              nein kann ich eben nicht. da ich keine funktion angeben kann. bzw ich muss mehrere hintereinander angeben

              zb:
              new_editor1.on_submit;new_editor2.on_submit;
              (also aus 2 verschiedenen klassen instanzen)

              1. setAttribute() ist her überflüssig, da du den onsubmit Handler direkt ansprechen kannst.

                nein kann ich eben nicht. da ich keine funktion angeben kann. bzw ich muss mehrere hintereinander angeben

                ich hatte dir doch bereits gezeigt wie es geht:

                [formobjekt].obj1 = new_editor1;
                [formobjekt].obj2 = new_editor2;

                [formobjekt].onsubmit = function()
                {
                this.obj1.onsubmit();
                this.obj2.onsubmit();
                };

                Wobei die Sachen in Klammern deine Variabeln für die Objekte darstellen sollen.

                Struppi.

                1. [formobjekt].obj1 = new_editor1;
                  [formobjekt].obj2 = new_editor2;

                  danke
                  soweit ist es ja noch klar.
                  nur die teile dannach werfen mich vor das selbe problem wie am anfang.
                  gegenfrage:
                  wie bekomme ich vom [formobjekt] alle hinzugefügen objekte herraus?
                  zb mittels trial&error

                  1. soweit ist es ja noch klar.
                    nur die teile dannach werfen mich vor das selbe problem wie am anfang.
                    gegenfrage:
                    wie bekomme ich vom [formobjekt] alle hinzugefügen objekte herraus?
                    zb mittels trial&error

                    Du weißt doch was du ihnen zugefügt hast?
                    Und das kannst du testen:
                    if(this.obj) this.obj.onsubmit();

                    Im zweifelsfall geht natürlich auf

                    [formobject].obj = new Array();

                    und dann:

                    [formobject].obj.push( deinObjekt);

                    und dann im formobjekt beim event:

                    for(var i = 0; i < this.obj.length; i++) this.obj[i].onsubmit();

                    Struppi.

                    1. danke für die unermütliche hilfe
                      ich habs hinbekommen

                      if (!document.getElementById(this.textarea_id).form.my_editor_obj)
                       {
                        document.getElementById(this.textarea_id).form.my_editor_obj = new Array();
                       }
                       document.getElementById(this.textarea_id).form.my_editor_obj.push(this);

                      document.getElementById(this.textarea_id).form.onsubmit= function ()
                       {
                        on_submit(this);
                       }

  2. Hallo,

    ich habe den gesamten Thread gelesen, war zwischendurch sehr verwirrt und weiß jetzt noch immer nicht ganz, ob ich Dein Problem genau verstanden habe.
    Ich vermute aber, daß Du mit einem ähnlichen Problem kämpfst, mit dem ich es auch schon zu tun hatte, und habe einfach einmal folgende Mini-Testseite erstellt, um Dir einen Lösungsansatz zu zeigen, der mich bei meinem Problem weitergebracht hat:

    <html>
    <head>
     <title>Test</title>
     <script type="text/javascript">
     function TestClass() {
      this.className = 'TestClass';
      this.doSomething = function(testParam) { alert('testParam: '+testParam); }
      this.init = function() {
       var methodRef = this.doSomething;
       document.getElementById('testLink').onclick = function () { methodRef('foo'); }
      }
     }
     var myTestObj = new TestClass();
     </script>
    </head>
    <body onload="myTestObj.init();">
     <a href="#" id="testLink">Test</a>
    </body>
    </html>

    Dazu empfehle ich noch die Lektüre folgender Seiten: http://jibbering.com/faq/faq_notes/closures.html#clExCon und http://neo.dzygn.com/archive/2004/05/preserving-scope-in-javascript.

    Hoffe, das geht jetzt nicht völlig an Deinem Problem vorbei und hilft Dir weiter.

    By the way: ich hoffe, daß ich es schaffe, meine JS-Bibliothek, die vor allem Lösungen für die Event-Behandlung liefert, noch in diesem Quartal dokumentiert ins Netz zu stellen.

    Ciao,
    Andreas

    --
    "Das Corporate Design für das Internet sieht eine Reihe von Grafikelementen vor, die die Optik der Webseite visuell und funktionell beeinflussen." - (Zitat aus dem "Styleguide Corporate Design"  eines großen Konzerns...)
    1. <html>
      <head>
      <title>Test</title>
      <script type="text/javascript">
      function TestClass() {
        this.className = 'TestClass';
        this.doSomething = function(testParam) { alert('testParam: '+testParam); }
        this.init = function() {
         var methodRef = this.doSomething;
         document.getElementById('testLink').onclick = function () { methodRef('foo'); }
        }
      }
      var myTestObj = new TestClass();
      </script>
      </head>
      <body onload="myTestObj.init();">
      <a href="#" id="testLink">Test</a>
      </body>
      </html>

      Das funktioniert nicht.
      this.doSomething ist in der click Funktion undefiniert.

      Struppi.

      1. Hallo,

        Das funktioniert nicht.
        this.doSomething ist in der click Funktion undefiniert.

        Bei mir funktioniert das (Firefox 1.0.7, Opera 7.53, IE6.0, IE5.5, IE5.0).
        ;)

        Ciao,
        Andreas

        --
        "Das Corporate Design für das Internet sieht eine Reihe von Grafikelementen vor, die die Optik der Webseite visuell und funktionell beeinflussen." - (Zitat aus dem "Styleguide Corporate Design"  eines großen Konzerns...)
        1. Das funktioniert nicht.
          this.doSomething ist in der click Funktion undefiniert.

          Bei mir funktioniert das (Firefox 1.0.7, Opera 7.53, IE6.0, IE5.5, IE5.0).
          ;)

          Ich hab grad nur den IE 4 zu Verfügung da klappt's nicht. Da ist methodRef undefined

           function TestClass() {  
            this.className = 'TestClass';  
            this.doSomething = function(testParam) { alert('testParam: '+testParam); }  
            this.init = function()  
            {  
             var methodRef = this.doSomething;  
            
             alert(methodRef);  
             document.all('testLink').onclick =  
             function () { methodRef('foo'); }  
            }  
           }  
          
          

          Struppi.

          1. Hallo,

            Ich hab grad nur den IE 4 zu Verfügung da klappt's nicht. Da ist methodRef undefined

            naja, um den IE4 kümmere ich mich nun wirklich nicht mehr. Dafür sehe ich keinen Anlaß.
            Selbst den IE5.x möchte ich eigentlich nicht mehr unterstützen - aber in dem klappt mein Beispiel ja (ich behaupte übrigens nicht, daß mein Beispiel die einzige und/oder beste Lösung des Problems ist).

            Ciao,
            Andreas

            --
            "Das Corporate Design für das Internet sieht eine Reihe von Grafikelementen vor, die die Optik der Webseite visuell und funktionell beeinflussen." - (Zitat aus dem "Styleguide Corporate Design"  eines großen Konzerns...)
            1. Ich hab grad nur den IE 4 zu Verfügung da klappt's nicht. Da ist methodRef undefined

              naja, um den IE4 kümmere ich mich nun wirklich nicht mehr. Dafür sehe ich keinen Anlaß.

              Es war lediglich einen Fehler den ich beim übertragen gemacht hatte, es geht durchaus im IE 4.
              Ich wollte (als ich den Fehler einbaute). aber darauf aufmerksam machen, dass in this.doSomething this nicht mehr das 'TestClass' Objekt ist, insofern halte ich den Ansatz nicht für Praktikabel, du willst schließlich in einer Klassenfunktion Zugriff auf die Klasse haben.

              Struppi.

              1. Hallo,

                Ich wollte (als ich den Fehler einbaute). aber darauf aufmerksam machen, dass in this.doSomething this nicht mehr das 'TestClass' Objekt ist, insofern halte ich den Ansatz nicht für Praktikabel, du willst schließlich in einer Klassenfunktion Zugriff auf die Klasse haben.

                alles klar. Da hast Du natürlich recht. Das ist eben das leidige Scope-Problem (meines Erachtens ist an dieser Stelle Javascript an sich inkonsistent). Einer der Links, die ich irgendwo hier im Thread gepostet habe, befaßt sich genau mit diesem Problem des Namensraumverlustes und bietet Lösungsvorschläge.

                Die Übergabe des fraglichen Objekts, so wie Du es vorschlägst, ist da eine Möglichkeit. Mache ich zum Teil auch so.

                Ciao,
                Andreas

                --
                "Das Corporate Design für das Internet sieht eine Reihe von Grafikelementen vor, die die Optik der Webseite visuell und funktionell beeinflussen." - (Zitat aus dem "Styleguide Corporate Design"  eines großen Konzerns...)
      2. Hallo,

        <html>
        <head>
        <title>Test</title>
        <script type="text/javascript">
        function TestClass() {
          this.className = 'TestClass';
          this.doSomething = function(testParam) { alert('testParam: '+testParam); }
          this.init = function() {
           var methodRef = this.doSomething;
           document.getElementById('testLink').onclick = function () { methodRef('foo'); }
          }
        }
        var myTestObj = new TestClass();
        </script>
        </head>
        <body onload="myTestObj.init();">
        <a href="#" id="testLink">Test</a>
        </body>
        </html>

        Das funktioniert nicht.
        this.doSomething ist in der click Funktion undefiniert.

        Ja, da wird es ja auch nicht aufgerufen. Du hast gesehen, dass das Objekt myTestObj im scope window existiert? Damit existiert zum Zeitpunkt BODY.onload auch myTestObj.init() und das hinterlegt, durch die Zwischenspeicherung in methodRef, als onclick praktisch
        document.getElementById('testLink2').onclick = function () { myTestObj.doSomething('foo'); }

        Das Gleiche bekäme man mit:

        <html>
        <head>
         <title>Test</title>
         <script type="text/javascript">
         function TestClass() {
          this.className = 'TestClass';
          this.doSomething = function(testParam) { alert('testParam: '+testParam); }
         }

        function init() {
          document.getElementById('testLink2').onclick = function () { new TestClass().doSomething('foo'); }
         }

        </script>
        </head>
        <body onload="init();">
         <a href="#" id="testLink2">Test2</a>
        </body>
        </html>

        viele Grüße

        Axel

        1. Das funktioniert nicht.
          this.doSomething ist in der click Funktion undefiniert.
          Ja, da wird es ja auch nicht aufgerufen. Du hast gesehen, dass das Objekt myTestObj im scope window existiert? Damit existiert zum Zeitpunkt BODY.onload auch myTestObj.init() und das hinterlegt, durch die Zwischenspeicherung in methodRef, als onclick praktisch

          Mir ist schon klar was erreicht werden soll, ich hab jetzt auch den Fehler gefunden, das Problem an dem Ansatz ist aber, das in doSomething this nicht das Object ist. D.h. der Aufruf nützt erstmal herzlich wenig.

          Daher meine Empfehlung lieber dem event Objekt this mitzugeben:
          [code lang=javascript]
           <script type="text/javascript">
           function TestClass(linkName)
           {
            this.className = linkName;
            this.doSomething = function() { alert('testParam: '+ this.className); };

          this.init = function()
            {
             document.getElementById(linkName).obj = this;
             document.getElementById(linkName).onclick =
             function () { this.obj.doSomething() ; }
            };

          }
           var myTestObj = new TestClass('testLink');
           var myTestObj2 = new TestClass('testLink2');
           window.onload= function () { myTestObj.init(); myTestObj2.init(); };

          </script>
          </head>
          <body >
           <a href="#" id="testLink">Test</a>
           <a href="#" id="testLink2">Test</a>
          </body>
          </html>
          [/cdoe]

          Struppi.

  3. Hi,

    document.getElementById(this.textarea_id).form.setAttribute("onsubmit", function () { new_editor.on_submit(); });
    this.ClassName ist ein string und entspricht beispielhaft dem "new_editor)
    dadurch das im ie die onsubmit funktion nicht als string angegeben wird, bekomm ich aber nun probleme this.ClassName dahinein zu parsen.

    Gab's nicht auch die Möglichkeit, eine function per
    new Function("hierdercodealsstring")
    (oder so ähnlich) zu generieren?

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    Schreinerei Waechter
    Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    1. Hallo,

      Gab's nicht auch die Möglichkeit, eine function per
      new Function("hierdercodealsstring")
      (oder so ähnlich) zu generieren?

      War das eine Frage mit der Hoffnung auf eine Antwort? Oder war das nur ein Denkanstoß?

      viele Grüße :-)

      Axel

      1. Hi,

        Gab's nicht auch die Möglichkeit, eine function per
        new Function("hierdercodealsstring")
        (oder so ähnlich) zu generieren?
        War das eine Frage mit der Hoffnung auf eine Antwort? Oder war das nur ein Denkanstoß?

        Beides. ;-)

        cu,
        Andreas

        --
        Warum nennt sich Andreas hier MudGuard?
        Schreinerei Waechter
        Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.