ajax / jquery Problem

PHP, Ajax, CSS, HTML, Javascript
Eben für die wirklich Harten, die alles selber machen.
Antworten
MADxHAWK
Beiträge: 132
Registriert: Mi 15.Nov, 2006 13:40
Wohnort: Bonn
Kontaktdaten:

ajax / jquery Problem

Beitrag von MADxHAWK »

Hallo zusammen,

ich hoffe ihr könnt mir helfen. Ich habe folgendes Problem:
Ich nutze für mein Projekt die templateengine des phpbb3. Nun wollte ich eine Seite machen, welche den Status eines Shoutcastservers ausgibt. Hierbei sollen die Hörerdaten und die zuletzt gespielten Songs über ein jquery ein/auszublenden sein. Ferner soll die Seite alle 15 Sekunden per Ajax neu geladen werden.
Das funktioniert sowit auch alles, mein Problem ist jedoch, dass nach dem ersten Reload per ajax die togglefunktion nichtmehr funktioniert.

Da ich noch keinerlei erfahrungen mit ajax und jquery habe (ich kann nur ein klein wenig javascript) weiss ich hier echt nichtmehr weiter.

Hier mal der code des templates:

Code: Alles auswählen

<!-- header ausblenden bei ajax request um nur den gewünschten teil des Templates zu aktualisieren -->
<!-- IF S_HEADER -->
	<!-- INCLUDE overall_header.html -->
				<div id="dynamic">
<!-- ENDIF -->

[...]

					<fieldset>
						<legend class="trigger">&nbsp;{L_SC_LISTENERS}&nbsp;</legend>
						<div class="slide" id="p1">
							[...]
						</div>
					</fieldset>

					<script type="text/javascript">
						// <![CDATA[
						window.setTimeout('setRequest("{U_SC_AJAX}")', 15000);
						// ]]>
					</script>

				</div>

<!-- footer ausblenden bei ajax request um nur den gewünschten teil des Templates zu aktualisieren -->
<!-- IF S_HEADER -->
	<!-- INCLUDE overall_footer.html -->
<!-- ENDIF -->
Das entsprechende jquery script sieht wie folgt aus:

Code: Alles auswählen

function initMenu() {
	$('.slide').hide();
	$('.trigger').click(
		function() {
			$(this).next().toggle('slow',function(){
				var id = $(this).attr('id');
				var state;
				if ($(this).is(':hidden')) {
					state = "closed";
					$(this).prev().attr("class", "trigger" )
				} else if ($(this).is(':visible')) {
					state = "open";
					$(this).prev().attr("class", "trigger open" )
				}
				;
				$.cookie(id, state,{
					path:'/'
				});

				return false;
			});
		}
		);

	$('.trigger').each(function() {
		var id = $(this).next().attr('id');
		if ($.cookie(id) == "open") {
			$(this).next().show();
			$(this).attr("class", "trigger open" );
		}
		else {
			$(this).attr("class", "trigger" );
		}
	});
}

jQuery(document).ready(function() {
	initMenu();
});
Gruss
Martin
Benutzeravatar
oxpus
Administrator
Beiträge: 28737
Registriert: Mo 27.Jan, 2003 22:13
Wohnort: Bad Wildungen
Kontaktdaten:

Re: ajax / jquery Problem

Beitrag von oxpus »

Du blendest die overall_header.html aus, wenn per AJAX ein Request abgearbeitet wird.
Das ist soweit erst einmal okay, aber:

Wo hast du denn die jquery....js eingebunden?
In der overall_header.html?
Karsten Ude
-={ Das Mädchen für alles }=-
Kein Support per Messenger, Email oder PN! Unaufgeforderte Nachrichten werden ignoriert!
No support per Messenger, Email or PM. Each unasked message will be ignored!
MADxHAWK
Beiträge: 132
Registriert: Mi 15.Nov, 2006 13:40
Wohnort: Bonn
Kontaktdaten:

Re: ajax / jquery Problem

Beitrag von MADxHAWK »

Hallo oxpus,

ja alle javascripts sind im header eingebunden. Ich hatte jedoch auch schon folgende variante versucht:

Code: Alles auswählen

<!-- IF S_HEADER -->
    <!-- INCLUDE overall_header.html -->
<!-- ELSE -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
    <script type='text/javascript' src='./styles/default/js/jquery.cookie.js'></script>
    <script type='text/javascript' src='./styles/default/js/main.js'></script>
<!-- ENDIF -->
Sprich die Scripts im template selber zu laden wenn der header ausgeblendet ist.
Dies hat jedoch auch nicht funktioniert.
Benutzeravatar
oxpus
Administrator
Beiträge: 28737
Registriert: Mo 27.Jan, 2003 22:13
Wohnort: Bad Wildungen
Kontaktdaten:

Re: ajax / jquery Problem

Beitrag von oxpus »

Mir scheint, als wäre der Event Listener mit dem AJAX-Reload nicht korrekt aufgebaut, da das Element nach den Reload noch nicht vollständig verfügbar ist oder die JQuery Klasse nicht geladen oder initiert wird.

Das AJAX-Event lädt einfach die Seite neu oder was passiert dabei genau?
Vielleicht wird damit ja ein Teil der Seite nicht geladen, der aber über den "normalen" Aufruf initiert wird.

Dass hierbei eine Funktion (ob nun toggle oder etwas anderes) nicht funktioniert, hat zunächst wohl erst einmal eine ganz andere Ursache, die ich aus deinen Code-Auszügen nicht erkennen kann.

Und warum überhaupt AJAX und nicht ein einfaches JS-Reload?
Ist die Seite so umfangreich, dass dieses Reload zu lange dauern würde?
Karsten Ude
-={ Das Mädchen für alles }=-
Kein Support per Messenger, Email oder PN! Unaufgeforderte Nachrichten werden ignoriert!
No support per Messenger, Email or PM. Each unasked message will be ignored!
MADxHAWK
Beiträge: 132
Registriert: Mi 15.Nov, 2006 13:40
Wohnort: Bonn
Kontaktdaten:

Re: ajax / jquery Problem

Beitrag von MADxHAWK »

Hallo oxpus,

danke für deine ausführungen. Ich werde mal versuchen das toggle event über $(document).ready(... zu initialisieren um sicherzustellen, dass alles bereit ist. Das ist derzeit noch meine letze Idee, die mir beim lesen deines Posts kam.
Momentan habe ich die Togglefunktion ausgebaut.

Warum per ajax nur ein Teil nachladen?
Ich wollte nicht alle 15 sekunden die gesamte Seite über ein reload neu laden. Zudem soll dieses Projekt auch gleich ein "lerneffekt" habe, da ich bisher so gut wie keine ahnung von ajax, jquery usw. habe da ich mich bisher ausschliesslich mit php beschäftigt habe.

Ursprünglich war sogar geplant den Header / Footer mit dem Menü komplett statisch und nur die Inhalte der einzelnen Seiten im divcontainer "content" dynamisch zu laden.

Gruss
Martin
MADxHAWK
Beiträge: 132
Registriert: Mi 15.Nov, 2006 13:40
Wohnort: Bonn
Kontaktdaten:

Re: ajax / jquery Problem

Beitrag von MADxHAWK »

Hi,

ok ich konnte mittlerweile in erfahrung bringen das jquerys welche DOM Objekte ändern nach einem AJAX request so ohne weiteres nichtmehr funktionieren.

Ich habe jedoch noch ein weiters Problem mit jquery, genauer mit show(), hide() bzw. toggle().

Code: Alles auswählen

Benutze ich folgenden Aufbau:
<fieldset>
    <label class="trigger">Labeltext</label>
    <table class="toggle">
    //tabellenaufbau
    </table>
</fieldset>
Wird der inhalt beim klick auf das Label wird bei show('slow') bzw hide('slow') oder toggle('slow') die Tabelle sauber ein- bzw. ausgeblendet und das fieldset entsprechend beim ein/ausblenden vergrößert bzw. verkleinert.

Nutze ich hingegen diesen Aufbau:

Code: Alles auswählen

<fieldset>
    <label class="trigger">Labeltext</label>
    <div class="toggle">
        <dl>
            <dt>blabla</dt>
            <dl>noch mehr blabla</dl>
        </dl>

        // weitere dl, dt, dd deffinitionen

    </div>
</fieldset>
Wird der Inhalt des div zwar einigermaßen sauber ausgeblendet, aber beim einblenden wird das fieldset erstmal viel zu hoch ausgefahren und springt anschließend auf die benötigte höhe zurück, was natülich mist aussieht.

Dieser Effekt tritt jedoch nur im Firefox auf. Opera und IE stellen es sauber dar, wobei der IE Grafikfehler im Rahmen des Fieldset erzeugt wenn dieses runde ecken hat.

Vielleicht kann mir hier ja einer einen Tip geben.

Das toggle script sieht folgendermassen aus:

Code: Alles auswählen

function toggle() {
	$('.toggle').hide();
	$('.trigger').click(
		function() {
			if ($(this).next().is(':hidden')) {
				$(this).next().show('slow');
				$(this).attr("class", "trigger open");

			} else if ($(this).next().is(':visible')) {
				$(this).next().hide('slow');
				$(this).attr("class", "trigger");
			};
			return false;
		}
	);
}

jQuery(document).ready(function() {
	toggle();
});
css deffinition trigger und trigger open

Code: Alles auswählen

.trigger {
	padding: 0 5px 0 15px;
	cursor: pointer;
	background: url(../images/plus.png) no-repeat 0;
}

.open {
	background: url(../images/minus.png) no-repeat 0;
}
für die klasse toggle ist keine css definition vorhanden.

Gruss
MAD
Antworten