JavaScript Zwei Funktionen blockieren sich

[omaliesschen]

Hi,

Auf einer Seite gibt es zwei Buttons identischer Klasse. Hat der Button das attribut value wird der zu zitierende Beiträg in das Textfeld geladen.

$('.ev').on("click", function(){

    $(this).val() ? 
    $('#replytext').load("/quote.php",{ "id" : $(this).val() }) : 
    $('#replytext').html('');

});

Funktioniert auch alles soweit. Allerdings gibt es noch eine Funktion um tags einzufügen.

Sobald ein Tagbutton geklickt wird und im Anschluss ein .ev Button werden Änderungen nicht mehr angezeigt. Man sieht sieht die Änderungen zwar über Firebug aber auf der ViewPage werden sie nicht mehr aktualisiert.


Code stammt von selfhtml:

function insert(aTag, eTag) {var input = document.forms['response'].elements['replytext'];
input.focus();if(typeof document.selection != 'undefined') {var range = document.selection.createRange();var insText = range.text;
range.text = aTag + insText + eTag;range = document.selection.createRange();if (insText.length == 0) {range.move('character', -eTag.length);
} else {range.moveStart('character', aTag.length + insText.length + eTag.length);      
}range.select();}else if(typeof input.selectionStart != 'undefined')
{var start = input.selectionStart;var end = input.selectionEnd;var insText = input.value.substring(start, end);
input.value = input.value.substr(0, start) + aTag + insText + eTag + input.value.substr(end);
var pos;if (insText.length == 0) {pos = start + aTag.length;} else {pos = start + aTag.length + insText.length + eTag.length;
}input.selectionStart = pos;input.selectionEnd = pos;
}else{var pos;var re = new RegExp('^[0-9]{0,3}$');while(!re.test(pos)) {pos = prompt("Einfügen an Position (0.." + input.value.length + "):", "0");
}if(pos > input.value.length) {pos = input.value.length;}var insText = prompt("Bitte geben Sie den zu formatierenden Text ein:");
input.value = input.value.substr(0, pos) + aTag + insText + eTag + input.value.substr(pos);}}

Umgekehrt gibt es kein Problem. Kurz: Nach Aufruf der Tagfunktion werden Änderungen durch den onclick event nicht mehr auf der ViewPage aktualisiert. Lediglich über die Webdevtools sieht man dass die FUnktion eigentlich macht was sie soll.

 

[ice-breaker]

und wir sollen diese komplett unformatierte Code-Wüste nun für dich debuggen?
Wenigstens ne angenehme Formatierung könnte man erwarten, dass man mal einen kurzen Blick drauf werfen kann.

 

[omaliesschen]

Ich denke dass das Problem allgemeiner Natur ist und jemand mit Erfahrung den Grund auch ohne Codeanalyse kennen könnte.


Die Funktion insert() findet sich hier:
http://aktuell.de.selfhtml.org/artikel/javascript/bbcode/

Ergänzung (5. Juni 2013)

Nochmal kurz umrissen:

Wird die Tagfunktion aufgerufen werden Änderungen durch den onclickevent nicht mehr auf der Sichtbaren Seite gerendert. Mit Firebug sieht man allerdings das sich der Content geändert hat.

Ergänzung (6. Juni 2013)

Hier ein HTML pasty:
http://pastecode.org/index.php/view/79279327

klick auf with_quote fügt den String "quote" ein. Klick auf no_quote setzt das Textfeld zurück (''), klick auf Tag fügt einen Tag ein.

Klickt man auf einen der Quotebuttons und fügt danach einen Tag ein und klickt erneut auf einen der Quotebuttons wird in Firebug zwar angezeigt da sich das HTML verändert hat aber der Inhalt des Textfelds ist eingefroren.

Klickt man dagegen wieder auf Tag fügt die Funktion insert weiterhin Tags in das eingefrorene Textfeld ein. Hier verhält sich das ganze umgekehrt und die im toten Textfeld eingefügten Tags sind nicht in Firebug sichtbar.

 

[cx01]

Du benutzt hier die .html() Methode, um den Text zu setzen:

$('.ev').on("click", function(){

$(this).val() ?

$('#replytext').html('quote') :

$('#replytext').html('');

});

Wenn man stattdessen .val('quote') benutzt, funktioniert es bei mir.

 

[omaliesschen]

Hi,

danke. Funktioniert für die eine Hälfte. Allerdings ist im Originalcode anstelle des html('quote') ein .load(). Das funktioniert nach wie vor nicht.

$(this).val() ? $('#replytext').load("/quote.php",{ "post_id" : $(this).val() }) : 
$('#replytext').val('');

 

[ice-breaker]

weil .load() imho intern den Result wieder per .html() schreiben will, was nicht geht. Also wirst du wohl selbst einen .get() machen und den Result per .val() setzen müssen

 

[omaliesschen]

.html() funktioniert ja zu beginn. Was macht die insert Funktion was die .html() Funktion blockiert? Und warum wird auch mit .html() in Firebug eine Änderung des HTMLs angezeigt diese aber nicht gerendert?

.html() funktioniert bis man die insert Funktion genutzt hat. Danach wird das html geändert aber nicht mehr gerendert.
.val() funktioniert auch nach einem insert.
.load() siehe .html()