[Erledigt] Konflikt mehrerer JavaScripts

MCee Donald · 04.01.2010, 11:59

Hallo,
habe 2 JavaScripts auf meiner Page, welche sich gegenseitig im Weg stehen -.-

Die Page besitzt einen <div>-Bereich namens "partySucheEbene2".
Darüber befinden sich ein paar Radio-Buttons. Beim jeweiligen aktivieren eines dieser Buttons tritt das erste JavaScript in Kraft:
Es verändert sich der Inhalt von "partySucheEbene2" per innerHTML.
Das heißt, beim aktivieren des ersten Radio-Buttons erscheint "Text1" innerhalb des "partySucheEbene2"-Bereichs.
Beim aktivieren vom zweiten Button "Text2".... usw...

Das funktioniert soweit.

Nun zum Problem:

"Text1" beinhaltet einen Button, welcher das zweite JavaScript beinhaltet:
Beim Klick auf den Button wird ein Kalender eingeblendet.

Das funktioniert ebenfalls.

Wenn ich jedoch z.B. den zweiten Radio-Button aktiviere und damit "Text2" einblenden lasse,
danach wieder den ersten und somit wieder "Text1" inklusive dem Button einblende, funktiert dieser nicht mehr - der Kalender wird also beim Klick auf den Button nicht eingeblendet.

Beim Laden meiner Page ist standardmäßig der erste Radio-Button bereits ausgewählt und "Text1" inclusive dem Kalender-Button wird angezeigt.

Doch sobald eben ein anderer Radio-Button und danach wieder der erste ausgewählt wird (hier wird also das "innerHTML-JS" aufgerufen), funktioniert das Kalender-JS nicht mehr.

Ziemlich kompliziert beschrieben, aber ich hoffe es war einigermaßen verständlich

hier das JS zum ändern des Inhaltes per innerHTML:

Code:

function MainSucheFunction () {
  if (document.MainSuche.Art[0].checked == true) {
    document.getElementById("partySucheEbene2").innerHTML = "<input type='text' name='Datum' id='Datum'><button onclick='return false;' id='calendar-trigger'><img src='URL ENTFERNT'></button>";
  } else if (document.MainSuche.Art[1].checked == true) {
    document.getElementById("partySucheEbene2").innerHTML = "anderer Text";
  }
}

ich habe ein kostenloses Kalender-Script verwendet, dessen quelltext un-durch-schaubar ist und ich ihn deshalb nicht posten möchte

ich bin mir auch sicher das das Problem dort sowieso nicht zu finden ist.
wichtig ist vielleicht nur der aufruf des Kalenders, wo er dem "Datum"-Feld zugeteilt wird:

Code:

<script>Calendar.setup({trigger:"calendar-trigger",inputField:"Datum",onSelect:function(){this.hide()},dateFormat:"%d.%m.%Y"});</script>

hier noch der Aufbau der Seite:

Code:

<div id="partySuche">
                <div id="partySucheEbene1">
                        
                        <input type="radio" checked name="Art" value="Event" id="Suche1" onclick="MainSucheFunction();">Button1<br>
                        <input type="radio" name="Art" value="User" id="Suche2" onclick="MainSucheFunction();">Button2<br>
		</div>

                <div id="partySucheEbene2">
			<input type='text' name='Datum' id='Datum'><button onclick='return false;' id='calendar-trigger'><img src='URL ENTFERNT'></button>
		</div>

</div>

Ich hoffe das Problem war verständlich und jemand kann mir helfen

Gruß
MCee Donald

draco88 · 04.01.2010, 12:05

Das Problem ist, sobald du auf Seite2 gehst wirt Seite 1 komplett aus dem DOM gelöscht und so kennt der Calendar seinen trigger nicht mehr und es kommt zum Problem.

Einfachste Lösung: Jede Seite in ein einzelnes Div packen und nur die Divs dann per Javascript ein- und ausblenden. So bleibt der Button im DOM und der Calendar verliert seinen trigger nicht.

MCee Donald · 05.01.2010, 10:55

vielen Dank, das wusste ich nicht.
wieder was dazu gelernt

ich habe deinen Rat befolgt und alle Seiten in ein einzelnes DIV ("DIV1" und "DIV2") gepackt.
Den DIVs habe ich die Eigenschaft "style="display:none;" verpasst, damit diese nicht angezeigt werden.

Und zu guter letzt rufen die Radio-Buttons nun folgendes JS auf:

Code:

function MainSucheFunction () {
  if (document.MainSuche.Art[0].checked == true) {
    document.getElementById("DIV2").style.display = "none";
    document.getElementById("DIV1").style.display = "block";
  } else if (document.MainSuche.Art[1].checked == true) {
    document.getElementById("DIV1").style.display = "none";
    document.getElementById("DIV2").style.display = "block";
  }
}

zuerst wird das andere DIV wieder auf "style:none" gesetzt (sicherheitshalber, falls es vorher schonmal auf "block" gesetzt wurde) und anschließend das gewollte DIV auf "style:block".

kann man vielleicht noch optimieren, aber auf jedenfall funktionierts.
Und über das DOM hab ich auch ne Menge gelernt

Danke,
Gruß

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Zeichensatz Konflikt...	halskrause	Datenbanken	20	29.01.2009 11:07
Abfrage mehrerer Suchwörter	drsoong	Datenbanken	2	01.10.2008 10:33
[Erledigt] Limit auf Ergebnissumme mehrerer Tabellen	Frank	Datenbanken	8	02.09.2008 11:33
Ausgabe mehrerer Datenbanktabellen in einer HTML Tabelle	frankys9	PHP Tipps 2008	5	14.09.2007 16:51
Frames Problem mit ändern mehrerer Links	cytrobic	HTML, Usability und Barrierefreiheit	5	18.05.2007 16:52
Anmeldung mehrerer Kunden	RoDa	Datenbanken	2	26.05.2006 23:02
Bannerrotation mehrerer Pics, Prob: manchmal gleiches pic	thokon89	PHP Tipps 2006	13	18.04.2006 11:07
mysql klasse - handling mehrerer connections	mrSpok	PHP Tipps 2006	5	14.04.2006 01:05
Abfrage mehrerer Tabellen per PHP (Code vereinfachen)		PHP Tipps 2007	4	18.12.2005 12:34
Bannlist mehrerer Server		PHP Tipps 2005-2	3	11.09.2005 11:12
Konflikt zweier Werte	Jacks Rache	Datenbanken	9	24.08.2005 20:31
Summe mehrerer Datensätze	faux	Datenbanken	2	28.05.2005 19:38
Zufallausgabe mehrerer Daten aus einem Array		PHP Tipps 2005	9	06.03.2005 19:17
Problem beim Upload mehrerer Dateien per Script		PHP Tipps 2004	1	04.08.2004 16:26

04.01.2010, 11:59
MCee Donald Benutzer Registriert seit: 28.10.2008 Beiträge: 94	[Erledigt] Konflikt mehrerer JavaScripts Hallo, habe 2 JavaScripts auf meiner Page, welche sich gegenseitig im Weg stehen -.- Die Page besitzt einen <div>-Bereich namens "partySucheEbene2". Darüber befinden sich ein paar Radio-Buttons. Beim jeweiligen aktivieren eines dieser Buttons tritt das erste JavaScript in Kraft: Es verändert sich der Inhalt von "partySucheEbene2" per innerHTML. Das heißt, beim aktivieren des ersten Radio-Buttons erscheint "Text1" innerhalb des "partySucheEbene2"-Bereichs. Beim aktivieren vom zweiten Button "Text2".... usw... Das funktioniert soweit. Nun zum Problem: "Text1" beinhaltet einen Button, welcher das zweite JavaScript beinhaltet: Beim Klick auf den Button wird ein Kalender eingeblendet. Das funktioniert ebenfalls. Wenn ich jedoch z.B. den zweiten Radio-Button aktiviere und damit "Text2" einblenden lasse, danach wieder den ersten und somit wieder "Text1" inklusive dem Button einblende, funktiert dieser nicht mehr - der Kalender wird also beim Klick auf den Button nicht eingeblendet. Beim Laden meiner Page ist standardmäßig der erste Radio-Button bereits ausgewählt und "Text1" inclusive dem Kalender-Button wird angezeigt. Doch sobald eben ein anderer Radio-Button und danach wieder der erste ausgewählt wird (hier wird also das "innerHTML-JS" aufgerufen), funktioniert das Kalender-JS nicht mehr. Ziemlich kompliziert beschrieben, aber ich hoffe es war einigermaßen verständlich hier das JS zum ändern des Inhaltes per innerHTML: Code: function MainSucheFunction () { if (document.MainSuche.Art[0].checked == true) { document.getElementById("partySucheEbene2").innerHTML = "<input type='text' name='Datum' id='Datum'><button onclick='return false;' id='calendar-trigger'><img src='URL ENTFERNT'></button>"; } else if (document.MainSuche.Art[1].checked == true) { document.getElementById("partySucheEbene2").innerHTML = "anderer Text"; } } ich habe ein kostenloses Kalender-Script verwendet, dessen quelltext un-durch-schaubar ist und ich ihn deshalb nicht posten möchte ich bin mir auch sicher das das Problem dort sowieso nicht zu finden ist. wichtig ist vielleicht nur der aufruf des Kalenders, wo er dem "Datum"-Feld zugeteilt wird: Code: <script>Calendar.setup({trigger:"calendar-trigger",inputField:"Datum",onSelect:function(){this.hide()},dateFormat:"%d.%m.%Y"});</script> hier noch der Aufbau der Seite: Code: <div id="partySuche"> <div id="partySucheEbene1"> <input type="radio" checked name="Art" value="Event" id="Suche1" onclick="MainSucheFunction();">Button1<br> <input type="radio" name="Art" value="User" id="Suche2" onclick="MainSucheFunction();">Button2<br> </div> <div id="partySucheEbene2"> <input type='text' name='Datum' id='Datum'><button onclick='return false;' id='calendar-trigger'><img src='URL ENTFERNT'></button> </div> </div> Ich hoffe das Problem war verständlich und jemand kann mir helfen Gruß MCee Donald


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

04.01.2010, 12:05
draco88 Erfahrener Benutzer Registriert seit: 01.12.2009 Beiträge: 645 PHP-Kenntnisse: Fortgeschritten	Das Problem ist, sobald du auf Seite2 gehst wirt Seite 1 komplett aus dem DOM gelöscht und so kennt der Calendar seinen trigger nicht mehr und es kommt zum Problem. Einfachste Lösung: Jede Seite in ein einzelnes Div packen und nur die Divs dann per Javascript ein- und ausblenden. So bleibt der Button im DOM und der Calendar verliert seinen trigger nicht.

05.01.2010, 10:55
MCee Donald Benutzer Registriert seit: 28.10.2008 Beiträge: 94	vielen Dank, das wusste ich nicht. wieder was dazu gelernt ich habe deinen Rat befolgt und alle Seiten in ein einzelnes DIV ("DIV1" und "DIV2") gepackt. Den DIVs habe ich die Eigenschaft "style="display:none;" verpasst, damit diese nicht angezeigt werden. Und zu guter letzt rufen die Radio-Buttons nun folgendes JS auf: Code: function MainSucheFunction () { if (document.MainSuche.Art[0].checked == true) { document.getElementById("DIV2").style.display = "none"; document.getElementById("DIV1").style.display = "block"; } else if (document.MainSuche.Art[1].checked == true) { document.getElementById("DIV1").style.display = "none"; document.getElementById("DIV2").style.display = "block"; } } zuerst wird das andere DIV wieder auf "style:none" gesetzt (sicherheitshalber, falls es vorher schonmal auf "block" gesetzt wurde) und anschließend das gewollte DIV auf "style:block". kann man vielleicht noch optimieren, aber auf jedenfall funktionierts. Und über das DOM hab ich auch ne Menge gelernt Danke, Gruß