• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Elemente anzeigen und verbergen

R

reinhhardp

New member
Hallo,

Durch einen Click auf einen Tab lade ich eine HTML Seite wenn sie noch nicht geladen ist und schicke einen trigger an alle bereits geladenen HTML Seiten. Damit will ich sicherstellen das nur die HTML Seite angezeigt wird die ich brauche.

$("#collectioncontainer").trigger("loadedhtml", { 'relation': relation});

In allen HTML Seiten ist folgendes Script das den trigger abfragt:

Code: 
<script>
	var relation = "deliverycollectionhtml";
	
	$( "#collectioncontainer").on( "loadedhtml",  function(event,param) {
		//obj = document.getElementById("collectiondeliveries");
		//console.log(obj);
		console.log("collectiondeliveries param.relation: "+param.relation);
		//if(obj == undefined) { return 0; }
		if(relation == param.relation)
		{
			//obj.style.display='block';
			$('#collectiondeliveries').show();
			console.log("set collectiondeliveries visible");
			
		} else
		{
			//obj.style.visibility='hidden';
			$('#collectiondeliveries').hide();
			//obj.style.display='none';
			console.log("hide collectiondeliveries");
		}
		//console.log("collectiondeliveries loaded!");
		
	});
	</script>

Mein Problem ist nun das sobald eine Seite verborgen wird das Script nicht mehr auf das Element (hier collectiondeliveries) zugreifen kann und damit es auch nicht mehr mit .show() anzeigen kann.

Hat jemand bitte eine Lösung dafür?

Danke,
Reinhard
 
reinhhardp schrieb:
Durch einen Click auf einen Tab lade ich eine HTML Seite wenn sie noch nicht geladen ist und schicke einen trigger an alle bereits geladenen HTML Seiten. Damit will ich sicherstellen das nur die HTML Seite angezeigt wird die ich brauche.
Zum Vergrößern anklicken....
warum? du hast die tab-anzeige selbst geschrieben? sonst kümmert sich ja das framework darum?

reinhhardp schrieb:
Mein Problem ist nun das sobald eine Seite verborgen wird das Script nicht mehr auf das Element (hier collectiondeliveries) zugreifen kann und damit es auch nicht mehr mit .show() anzeigen kann.
Zum Vergrößern anklicken....
collectiondeliveries muss js für jede seite ein anderer container sein?
warum kannst du nicht mehr darauf zugreifen? entfernst du das element? wann? wo?

reinhhardp schrieb:
Hat jemand bitte eine Lösung dafür?
Zum Vergrößern anklicken....
dafür reicht der codeschnipsel nicht aus.
 
tsseh schrieb:
warum? du hast die tab-anzeige selbst geschrieben? sonst kümmert sich ja das framework darum?
Zum Vergrößern anklicken....

Welches Framework?

tsseh schrieb:
collectiondeliveries muss js für jede seite ein anderer container sein?
warum kannst du nicht mehr darauf zugreifen? entfernst du das element? wann? wo?
Zum Vergrößern anklicken....

Ja jede Seite hat ihren eigen Container.

Mit $('#collectiondeliveries').show(); soll sie angezeigt werden.

Und mit $('#collectiondeliveries').hide(); wird sie ausgeblendet. Aber das steht eh in dem Codeschnipsel.

Die Seite für collectiondeliveries sieht so aus:


HTML: 
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<script>
	var relation = "deliverycollectionhtml";
	
	$( "#collectioncontainer").on( "loadedhtml",  function(event,param) {
		//obj = document.getElementById("collectiondeliveries");
		//console.log(obj);
		console.log("collectiondeliveries param.relation: "+param.relation);
		//if(obj == undefined) { return 0; }
		if(relation == param.relation)
		{
			//obj.style.display='block';
			$('#collectiondeliveries').show();
			console.log("set collectiondeliveries visible");
			
		} else
		{
			//obj.style.visibility='hidden';
			$('#collectiondeliveries').hide();
			//obj.style.display='none';
			console.log("hide collectiondeliveries");
		}
		//console.log("collectiondeliveries loaded!");
		
	});
	</script>
	<link rel="stylesheet" type="text/css" href="/css/main.css">
</head>
<body class="deliveriescollectionhtmlbody" id="deliveriescollectionhtmlbody">
	<div class="collectiondeliveries" id ="collectiondeliveries">
Hallo 1
	<div class="deliveriescollectionheader" id="deliveriescollectionheader">
	<div class="tableheader" id="tableheader" data-bind="foreach: header"> 
		<div style="float: left;">Article</div>
		<div style="float: left;">Date</div>
		<div style="float: left;">Amount</div>
	</div>
	</div>
	<div class="collectiondeliveriestcollectioncontent" id="collectiondeliveriestcollectioncontent"> 
		<div class ="" id="" data-bind="foreach: items">
			<div class="row" id="row">
				<divdata-bind="text: value" ></div>
			</div>
		</div>
	</div>
	</div>
</body>
</html>
 
reinhhardp schrieb:
Welches Framework?
Zum Vergrößern anklicken....
das framework, welches die tabs handelt z.b. https://jqueryui.com/tabs/#ajax

reinhhardp schrieb:
Ja jede Seite hat ihren eigen Container.
Zum Vergrößern anklicken....
mit einem eigenem element für den content und die ids sind eindeutig?

reinhhardp schrieb:
Mit $('#collectiondeliveries').show(); soll sie angezeigt werden.

Und mit $('#collectiondeliveries').hide(); wird sie ausgeblendet.
Zum Vergrößern anklicken....
wann passiert das? wo?

reinhhardp schrieb:
Die Seite für collectiondeliveries sieht so aus:
Zum Vergrößern anklicken....
das ist eine seite die nachgeladen wird? wie machst du das denn? eigentlich lädt man ja nur fragmente nach und kein komplettes html-file, bzw. lädt das komplette file und fügt dann nur fragmente in entsprechende container. außerdem ist das script fürs aus/einblenden ja auch noch im file, da musst du 1. aufpassen, dass das überhaupt als js geparst wird und andererseits ist das ja eher controleraufgabe, das html-file eher view-template, sprich die steuerung zur anzeige würde ich eher außen rein bauen, also tab wird aktiviert => du siehst nach, ob das element welches den view aufnehmen soll existiert/etwas enthält => lädst nach/zeigst an und blendest das element mit dem noch aktuellen view aus
 
tsseh schrieb:
das framework, welches die tabs handelt z.b. https://jqueryui.com/tabs/#ajax
Zum Vergrößern anklicken....

das mache ich selber, die Daten für die Tabs kommen aus einer Datenbank.

tsseh schrieb:
mit einem eigenem element für den content und die ids sind eindeutig?
wann passiert das? wo?
Zum Vergrößern anklicken....

Die ids sind eindeutig. In der main.html gibt es eigene container für Tabellen, Attribute usw.

tsseh schrieb:
das ist eine seite die nachgeladen wird? wie machst du das denn? eigentlich lädt man ja nur fragmente nach und kein komplettes html-file, bzw. lädt das komplette file und fügt dann nur fragmente in entsprechende container. außerdem ist das script fürs aus/einblenden ja auch noch im file, da musst du 1. aufpassen, dass das überhaupt als js geparst wird und andererseits ist das ja eher controleraufgabe, das html-file eher view-template, sprich die steuerung zur anzeige würde ich eher außen rein bauen, also tab wird aktiviert => du siehst nach, ob das element welches den view aufnehmen soll existiert/etwas enthält => lädst nach/zeigst an und blendest das element mit dem noch aktuellen view aus
Zum Vergrößern anklicken....

ja, ich mache das mit der jQuery funktion load() (.load() | jQuery API Documentation).
Ich bin nun auf zindex gestoßen. Ich denke das das besser dafür geeignet ist.
 
reinhhardp schrieb:
Ich bin nun auf zindex gestoßen. Ich denke das das besser dafür geeignet ist.
Zum Vergrößern anklicken....
das denke ich zwar nicht, aber davon mal abgesehen, ob du nun das element ausblendest, oder den zindex setzten willst, du benötigst immer zugriff auf das element, und diesen hast du ja nicht laut deiner aussage.
 
tsseh schrieb:
das denke ich zwar nicht, aber davon mal abgesehen, ob du nun das element ausblendest, oder den zindex setzten willst, du benötigst immer zugriff auf das element, und diesen hast du ja nicht laut deiner aussage.
Zum Vergrößern anklicken....

Ich denke schon das zindex mein Problem löst da das Element das ich ansprechen will immer verfügbar ist. Es ist halt für den Benutzer vor dem Browser nicht sichtbar. Ein kleiner Test hat mir das gezeigt. mit jquery.hide() ist das Element nicht mehr verfügbar/ansprechbar da das Element komplett aus der DOM-Liste "verschwindet".

Ich würde ja gerne meinen kompletten Source auf github laden, aber leider wird WinXP von github nicht mehr unterstützt.
 
reinhhardp schrieb:
Ich denke schon das zindex mein Problem löst da das Element das ich ansprechen will immer verfügbar ist.
Zum Vergrößern anklicken....
dann kannst du an diesem auch show/hide aufrufen

reinhhardp schrieb:
Ich würde ja gerne meinen kompletten Source auf github laden, aber leider wird WinXP von github nicht mehr unterstützt.
Zum Vergrößern anklicken....
nee, lass mal ABER github ist nur webspace und eine weboberfläche für git (mit nen paar extras)
git gibt es auch für xp und der webzugriff läuft unabhängig vom bs.
 
Zuerst blende ich alle vorhandenen Elemente in einer Schleife mit element.style.display='none' aus. Und dann das aktuelle mit element.style.display='block' wieder ein.

Hab ich vergessen:
Das eigentlich Problem war die JQuery.load() Funktion: Sobald ich eine weitere HTML Datei lud verschwand die vorherige aus dem Container. Jetzt verwende ich $.ajax() und $(element).append();
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben