HTML inkl. Javascript-Block per AJAX übertragen

International German
1

Hallo zusammen,

und zwar sitze ich gerade an einer AJAX-Implementierung, die mir den letzten Nerv raubt. Ich hole mir vom Server einfachen HTML-Code und zeige diesen auf der Seite an. dies klappt echt problemlos. Nur sobald ich darin einen JavaScript-Block einbette wird dieser komplett verschluckt, was ja nicht wirklich schön ist.

Im Detail mag ich den TinyMCE-Editor (über die hier erhältliche Erweiterung) in eine nachzuladende Seite einbinden, nur scheitere ich grandios…

Eigentlich werden in der Erweiterung ja per registerScript bzw. registerScriptFile alle JavaScripts an die Seite geschickt. Dies funktioniert beim Nachladen der Seite aber leider nicht und ich bin da echt am Verzweifeln. Ich hoffe, dasss mir einer bei diesem Problem helfen kann, da ich diesen Editor unbedingt einbauen will.

mfg

armin

2

<halbwissen>

wenn mich nicht alles täuscht, is das ein Sicherheitsmechanismus.

vielleicht gibts ein Flag in jquery, das auch javascript ausführen lässt nach nem ajax.update

sowas gibts zumindest in prototype

</halbwissen>

3

Hi,

nun, wenn du von "verschlucken" sprichst, benutzt du bestimmt den IE, oder?! ^^

Allgemein stellt sich allerdings das Problem, dass Javascript-Blöcke in einem AJAX-Response vom Browser nicht ausgewertet werden und somit nicht funktionieren. Ausnahme ist mal wieder der IE der sich dann wohl gerne denkt "kann ich eh nicht brauchen, also lösch ich es direkt".

Eine Möglichkeit währe es die Script-Blöcke selbst zu evaluieren. Das ist zwar nicht das was man sich wünscht, aber bei Prototype gibt es dazu z.B. folgenden Code:


  ScriptFragment: '<script[^>]*>([\\S\\s]*?)<\/script>'


  extractScripts: function() {

    var matchAll = new RegExp(Prototype.ScriptFragment, 'img');

    var matchOne = new RegExp(Prototype.ScriptFragment, 'im');

    return (this.match(matchAll) || []).map(function(scriptTag) {

      return (scriptTag.match(matchOne) || ['', ''])[1];

    });

  }


  evalScripts: function() {

    return this.extractScripts().map(function(script) { return eval(script) });

  }

Vorher würde ich dir aber mal empfehlen den nachgeladenen Code per jQuerys append() in die Seite einzufügen, ich meine mal gelesen zu haben, dass das auch mit JS funktioniert. Allerdings ohne Gewähr.

Gruß

4

den IE nutzen? ich hoffe du redest nicht von mir? ;)

Danke für deinen Hinweis. Mal schauen, was dabei raus kommt. Das Problem ist halt, dass ich den Editor eben per ajax nachladen will. Zur Not kann ich diesen ja vorher schon einbauen, die ankommenden Daten parsen und dann anzeigen, wenn dieser benötigt wird. Aber das ist echt alles andere als schön.

Und nur die Scripts aus der TinyMCE-Extension beim Seitenaufruf mit einzubauen und beim Nachladen dann auszuführen ist ein wenig seltsam, da es da zu vielen Problemen führen kann…

Hättet ihr andere Ideen, wie ich sowas umgehen kann?

5

Hattest du denn mal versucht die nachgeladene Seite per append() irgendwo einzuhängen?

Sowas wie


jQuery.get(

    'myTinyMce.html', 

    null, 

    function(data) {

      $('#anker').append(data);

    }, 

    'html'

);
6

Muss ich bei Zeit mal probieren, da ich gerade am Lernen bin. Aber ich melde mich bzgl. dem Ergebnis!

7

Das Problem ist ein ganz anderes geworden: und zwar wird JavaScript übertragen, aber nicht dauerhaft(!) in den Quelltext integriert. Ich übertrage HTML-Code, in den mehrere JavaScript-Funktionen integriert sind. Über die alert-Methode lasse ich mir die Antwort XMLHttpRequest.responseText anzeigen und siehe da, JavaScript wird mitgeliefert. Hier ein Ausschnitt dessen, was ich erhalte:


<div class="form-right">

    <textarea id="entryInput" style="width:100%;height:400px;" cols="40" rows="10" name="entryInput"></textarea>

        <script type="text/javascript">

            function dhtmlLoadScript(url)

            {

                var e = document.createElement("script");

                e.src = url;

                e.type="text/javascript";

                document.getElementsByTagName("head")[0].appendChild(e);

            }


            function executeJavaScriptCode()

            {

                alert('beginExecutingJavaScriptCode, scriptFiles(3), scripts(2)');

                dhtmlLoadScript('/gartenplaner/assets/1bd3003d/tiny_mce/tiny_mce_gzip.js');

                dhtmlLoadScript('/gartenplaner/assets/1bd3003d/jquery/jquery.tinymce.js');

                dhtmlLoadScript('/gartenplaner/assets/1bd3003d/embedmedia/embed.js');alert('init');

                tinyMCE_GZ.init({...});

                alert('tinyMCE');

                jQuery("#entryInput").tinyMCE({...}, 'html', true);

                alert('endOfExecutingJavaScriptCode');

            }

        </script>

    </div>

Nun ist es so, dass ja die Methode executeJavaScriptCode mitgeliefert wird. Diese kann ich lustigerweise auch aus einer JavaScript-Methode, die die AJAX-Antwort behandelt, aufrufen. Es erscheinen auch die alert-Meldungen der executeJavaScriptCode-Methode.

Schaue ich mir danach aber den Code der Website an, so ist darin keinerlei JavaScript-Code zu finden und der Editor wurde nicht entsprechend umgewandelt. Ich verstehe absolut nicht wieso das der Fall ist…

PS: Ich habe vergessen zu erwähnen, dass append das gleiche bewirkt, wie wenn ich den HTML-Code über die .html()-Methode setze.

8

Also ich habe es nun geschafft die nachgeladene Seite einzubinden, samt JavaScript! Dieser Code hat das erledigt:


var myElement = $('#$this->contentDivCssId').get(0);

myElement.innerHTML = XMLHttpRequest.responseText;

Nun ist es aber so, dass der Methodenaufruf executeJavaScriptCode() nicht mehr funktioniert, obwohl diese Methode im nachgeladenen Code vorhanden ist – Schreibfehler sind auszuschließen, da ich gerade alles kontrolliert habe.

9

also, append() bzw. nun die methode after() hat nun alles erledigt was ich wollte. hatte irgendwie ein paar seltsame fehler im code oO lag auch teilweise an der assets-veröffentlichung.

nun gibts aber ein neues problem, welches ich in einem anderen thread behandle.