[FRAGE] Anfänger hat fragen zum ändern von Quelltext in Ajax

S

spikey2210

New member
Schönen guten Morgen Forumuser,

ich habe folgendes Problem:
erstmal zum Hintergrund, ich muss eine Seite erstellen mit 8 Abschnitten wo sich ein Name Befindet und daneben ein Bild auf das ich klicken kann.
Dazu habe ich divs mit der richtigen positonierung in einer Hauptseite und eine weitere Css Datei für paar Designsachen erstellt.
Wenn ich nun auf ein Bild klicke wird zu der angeschlossenen Steuerung zu der jeweiligen Variable ein Wert gesendet und setzt die Variable auf 1.

Momentan realisire ich das ganze so, dass ich ein iframe habe mit einen Javascript wo ich dann wieder die Variable von der Steuerung "abrufe durch aktualisieren der Seite" und sie mit 0 und 1 mit Javascript vergleiche . Wenn sie 1 ist wird mir das Bild ausgetauscht und sieht gedrückt aus. Dazu ist noch zu sagen, dass ich die iframeseite über den javascript aktuallisiere , da nur beim aktualisieren über z.b. F5 oder halt den Javascript sich die Seite refresht und die veränderungen von der Steuerung "bemerkt werden" und sich das Bild auf der Seite verändert .

im Anhang ist dazu einmal ein Bild von 2 Buttons mit Text davor.

Nun sollen aber auch ggf. nur von den 8 Abschnitten 2 angezeigt werden können . Dies mache ich so, dass ich eine Variable in der Steuerung auf 0 setzte diese Abrufe mittels javascript und dann über innerHtml in die divs der Hauptseite nichts reinsetze .

Wenn ich das nun tue und ich ein Button von den noch sichtbaren anklicke flacken die anderen die ausgeblendet sind einmal kurz auf .
1. Das aufflackern passiert nur wenn ich auf der Hauptseite in den divs was drin stehen habe. sprich für einen Bruchteil einer Sek. wird mir dann angezeigt, was dort in der Hauptseite steht. hat den Vorteil wenn ich ein segment anzeigen will ,wo in der Hauptseite in den Divs einmal das selbe steht (bis auf den Button der eingedrückt oder nicht eingedrückt ist) blinkt nichts .
Nachteil ist zuvor gesagt wenn ich es ausblende blinkt einmal kurz die "Hauptseite" auf wenn ich einen Button drücke.

2. Wenn ich die divs in der Hauptseite leer lasse und ich ein Segment ausblende in dem ich die Variable auf 1 setze und wieder abfrage, verhällt sich das genau anders herum.

Wenn ich alles im iframe für das Segment ausblende und einen anderen Button drücke flackert nichts. wenn ich ein Segment im iframe nicht ausblende und dieses oder ein anders drücke, flackert es einmal so auf das ich an der Stelle des Segments einmal die "leere Hauptseite" an der stelle sehe.

Nun hab ich irgendwo gelesen das es mit Ajax wohl gehen soll.
Aber ich habe schon gefühlte 2 Monate gebraucht um das in html und javascript hin zu bekommen und stehe da nun aufm Schlauch und bitte euch um Hilfe oder Tipps wie man das wohl machen kann/ wie das Programm auszusehen hat.

Dabei ist das 1 Problem die Stuerung ist an einem Touchscreen mit eigenem Betriebssystem angeschlossen auf welchen irgendein IE läuft welche version kann ich nicht sagen.
Im Firefox läuft es mit Ajax aktuell soweit das ich die reinen Variablen Steuerungsseitig aktuallisieren kann. d.h. wenn ich die Variable z.B. zum ausblenden auf 1 setze wird mir die 1 sofort angezeigt.
Aber die Bilder laden sich erst neu wenn ich F5 drücke. und die Funktion der Variablen setzen funktioniert nicht wenn ich ein Bild/Button drücke.
Am touchscreen und IE 10 muss ich f5 drücken damit die reinen Zahlen angezeigt werden und sich das Bild verändert.

Dazu habe ich einmal im folgenden einmal auszüge für 2 Segmente aus dem ersten Versuch mit Javascript/iframes, Css datei und html , und dahinter den Anfang der 2 Ajax Seiten wo ich einfach nicht weiter komme. Oder vielleicht wisst ihr auch wie es mit dem ersen Versuch geht.:confused:

<!-- AWP_In_Variable Name='"NZ".NZ[1].Enabled' -->
ist für die Steuerung wichtig um zu wissen mit welchen Variablen sie Arbeitet
und mit
':="NZ".NZ[2].Enabled:';
also := Variablenname :
werden die Werte aus der Steuerung abgerufen sprich wenn ich das wo hinschreibe, wird mir da dann die Zahl 0 oder 1 angezeigt je nach dem was ich in der Steuerung eingebe.

Nebenzeitenerfassung.htm
HTML: 
<!-- AWP_In_Variable Name='"NZ".NZ[1].Enabled' -->
<!-- AWP_In_Variable Name='"NZ".NZ[1].Aktiv' -->
<!-- AWP_In_Variable Name='"NZ".NZ[1].Aktiv_Display' -->
<!-- AWP_In_Variable Name='"NZ".NZ[1].pressed' -->

<!-- AWP_In_Variable Name='"NZ".NZ[2].Enabled' -->
<!-- AWP_In_Variable Name='"NZ".NZ[2].Aktiv' -->
<!-- AWP_In_Variable Name='"NZ".NZ[2].Aktiv_Display' -->
<!-- AWP_In_Variable Name='"NZ".NZ[2].pressed' -->

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
	<head>
		<style>
		</style>

		<title>WEB2PLC</title>
		<link href="CSS_Hintergrund.css" type="text/css" rel="stylesheet">				<!--Verlinkung auf eine CSS Datei in diesem Fall für das Design der Seite -->
		<meta http-equiv="Content-Language" content="en" >								<!--Sprache des Dokumentes-->
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">				<!--Textform und Sprachtyp-->
	</head>
		
	
	<body style="overflow:hidden;">								

		<form method="post" action="">			
		
			
	
				<div id="box1">					
				</div>
		
				<div class="Text1" id="Text1">					
				Anfahren
				</div>	
		
				<div id="Transparent1" style="position:absolute; left: 10x ; top: 15px " >    
					<img src="transpixel.png" width="273" height="78" value="Abdeckung1">
				</div>

				<div id="Text1Bild" style="position:absolute; left: 388px ; top: 17px " >   
					<img src="up3.png" width="73" height="78">
				</div>
			
				<div id="Icon1" style="position:absolute; left: 388px ; top: 17px " > 
				<img src="Wartend.png" width="73" height="78">
				</div> 
				
				<div id="Text1Transparent" style="position:absolute; left: 406px; top: 17px " > 
				<img src="transpixel.png" width="73" height="78" value="Start">
				</div>
	
				<input type="hidden" name='"NZ".NZ[1].pressed' size="20" value="1">		<!--besagt welche Variable Steuerungsseitig seitig gesetzt wird mit/auf den Wert 1 -->
			
		</form>																				
			<style type="text/css">     	 
				div.Text1					
				{   
					position: absolute; 
					top: 42px;
					left: 20px;
					text-align:center;
					cursor:pointer;
				}	
			</style>		

	

		
		<form method="post" action="">
		
			<div id="NZ2">	
		
				<div id="box2">
				</div>
		
				<div id="Text2" class="Text2">
					Abfahren
				</div>	
			
				<div id="Transparent2" style="position:absolute; left: 470px ; top: 15px " >
						<img src="transpixel.png" width="273" height="78" value="Abdeckung1">
				</div>
	
				<div id="Text2Bild" style="position:absolute; left: 864px ; top: 17px " >
					<img src="up3.png" width="73" height="78">
				</div>
	
				<div id="Icon2" style="position:absolute; left: 864px ; top: 17px " > 
					<img src="Wartend.png" width="73" height="78">
				</div> 	
				
				<div id="Text2Transparent" style="position:absolute; left: 882px ; top: 17px " >
				<img src="transpixel.png" width="73" height="78" value="Start">
				</div>
	
				<input type="hidden" name='"NZ".NZ[2].pressed' size="20" value="1">
			
			</div>		
		</form>

		<style type="text/css">
			div.Text2
			{   
			position: absolute; 
			top: 42px;
			left: 495px;
			text-align:center;
			cursor:pointer;
			}	
		</style>	

		<iframe name="PLC_Frame1" id="Data_Text1_frame" 
			style="display:none; border:0px"
			frameborder="0" src="./Data_Text1.htm">
		</iframe>
		
		<iframe name="PLC_Frame2" id="Data_Text2_frame" 
			style="display:none; border:0px"
			frameborder="0" src="./Data_Text2.htm">
		</iframe>

	</body>
</html>



Data_Text1.htm

HTML: 
<html>
	<head>
		<meta content="text/html; charset=UTF-8" http-equiv="content-type">
		<title></title>
		<script type="text/javascript">
	
			//setTimeout("InitPlc()",5000);        /* Call function 'InitPLC()' after 500ms */ 
  
			function InitPlc1() 
			{   
				setInterval("PlcUpdate1()",1000); /* Call PlcUpdate() all 500ms */
				
					var spsNZ11 = ':="NZ".NZ[1].Enabled:'; 												// Nebenzeit ist ausgeblendet
					var sppNZ11 = '1';
					
					if (spsNZ11 == '1' )																//vergleicht einen Variablenwert der SPS var sps  mit dem Wert var spp = 1 um dann ein Bild zu wechseln oder nicht 
					{	
						parent.document.getElementById("box1").innerHTML= '';	
						parent.document.getElementById("Text1").innerHTML= document.getElementById('Text1.2').innerHTML;
						parent.document.getElementById("Text1Bild").innerHTML='<img src="up3.png" width="73" height="78">';
						parent.document.getElementById("Icon1").innerHTML='<img src="Wartend.png" width="73" height="78">';
						parent.document.getElementById("Text1Transparent").innerHTML='<input type=image src="transpixel.png" width="73" height="78" value="Start">';
					
					}
					
					else 

					{	
						parent.document.getElementById("Text1").innerHTML= '';
						parent.document.getElementById("box1").innerHTML= '';
						parent.document.getElementById("Text1Bild").innerHTML= '';
						parent.document.getElementById("Icon1").innerHTML= '';
						parent.document.getElementById("Text1Transparent").innerHTML= '';
					}



					var spsNZ13 = ':="NZ".NZ[1].Aktiv_Display:'; 										//Nebenzeit wird als aktiv angezeigt. Kreis mit Punkt wird angezeigt
					var sppNZ13 = '1';
					
					if (spsNZ13 == sppNZ13 )															//vergleicht einen Variablenwert der SPS var sps  mit dem Wert var spp = 1 um dann ein Bild zu wechseln oder nicht 
					{
						parent.document.getElementById("Text1Bild").innerHTML='<img src="pressed.png" width="73" height="78">';
						parent.document.getElementById("Icon1").innerHTML='<img src="Aktiviert.png" width="73" height="78">';
						parent.document.getElementById("Text1Transparent").innerHTML='<input type=image src="transpixel.png" width="73" height="78" value="Start">';
					}		
				
					var spsNZ14 = ':="NZ".NZ[1].pressed:';												//Taste wird als gedrückt angezeigt 3D-Effekt aktiv
					var sppNZ14 = '1';
					
					if (spsNZ14 == sppNZ14 )															//vergleicht einen Variablenwert der SPS var sps  mit dem Wert var spp = 1 um dann ein Bild zu wechseln oder nicht 
					{
						parent.document.getElementById("Text1Bild").innerHTML='<img src="pressed.png" width="73" height="78">';
						parent.document.getElementById("Icon1").innerHTML='<img src="Wartend.png" width="73" height="78">';
						parent.document.getElementById("Text1Transparent").innerHTML='<input type=image src="transpixel.png" width="73" height="78" value="Start">';
					}

			}
	
			function PlcUpdate1() 
			{	/* Declaration of the function PlcUpdate() */ 	
				window.location.reload();
			}
		</script>
		
	</head>
	
	<body  onload="InitPlc1()">
		<div id="Text1.2">Anfahren</div>
	</body>

</html>


Data_Text2.htm


HTML: 
<html>
	<head>
		<meta content="text/html; charset=UTF-8" http-equiv="content-type">
		<title></title>
		<script type="text/javascript">
	
  
			function InitPlc2() 
			{   
				setInterval("PlcUpdate2()",1000); /* Call PlcUpdate() all 500ms */
				
	
					var spsNZ21 = ':="NZ".NZ[2].Enabled:'; 
					var sppNZ21 = '1';
					
					if (spsNZ21 == sppNZ21 )															
						{
					
						parent.document.getElementById("Text2").innerHTML = document.getElementById('Text2.2').innerHTML;
						parent.document.getElementById("box2").innerHTML='';		
						parent.document.getElementById("Text2Bild").innerHTML='<img src="up3.png" width="73" height="78">';
						parent.document.getElementById("Icon2").innerHTML='<img src="Wartend.png" width="73" height="78">';
						parent.document.getElementById("Text2Transparent").innerHTML='<input type=image src="transpixel.png" width="73" height="78" value="Start">';
						}

					else 
					{	
						parent.document.getElementById("Text2").innerHTML='';		
						parent.document.getElementById("box2").innerHTML='';		
						parent.document.getElementById("Text2Bild").innerHTML='';
						parent.document.getElementById("Icon2").innerHTML='';
						parent.document.getElementById("Text2Transparent").innerHTML='';					
					}


					var spsNZ23 = ':="NZ".NZ[2].Aktiv_Display:'; 	
					var sppNZ23 = '1';
					
					if (spsNZ23 == sppNZ23 )															//vergleicht einen Variablenwert der SPS var sps  mit dem Wert var spp = 1 um dann ein Bild zu wechseln oder nicht 
					{
						parent.document.getElementById("Text2Bild").innerHTML='<img src="pressed.png" width="73" height="78">';
						parent.document.getElementById("Icon2").innerHTML='<img src="Aktiviert.png" width="73" height="78">';
						parent.document.getElementById("Text2Transparent").innerHTML='<input type=image src="transpixel.png" width="73" height="78" value="Start">';
					}

					var spsNZ24 = ':="NZ".NZ[2].pressed:';	
					var sppNZ24 = '1';
					
					if (spsNZ24 == sppNZ24 )															//vergleicht einen Variablenwert der SPS var sps  mit dem Wert var spp = 1 um dann ein Bild zu wechseln oder nicht 
					{
						parent.document.getElementById("Text2Bild").innerHTML='<img src="pressed.png" width="73" height="78">';
						parent.document.getElementById("Icon2").innerHTML='<img src="Wartend.png" width="73" height="78">';
						parent.document.getElementById("Text2Transparent").innerHTML='<input type=image src="transpixel.png" width="73" height="78" value="Start">';
					}			

			}
	
			function PlcUpdate2() 
			{	/* Declaration of the function PlcUpdate() */ 	
				window.location.reload();
			}
		</script>
		
	</head>
	
	<body  onload="InitPlc2()">
		<div id="Text2.2">Abfahren</div>
	</body>

</html>

CSS_Hingergrund.css

Code: 
body 
{	
overflow: hidden;
height: 100%;
color: #F1EDE9;
background:#895125;
	

 font-family:'arial';
 font-size: 24px;
 }

 #box1 {
    background-color: #96623a;
    position: absolute;
    top: 315px;
    left: 10px;
    width: 460px;
    height: 83px;
    border: 0px ;

    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}

 #box2 {
    background-color: #96623a;
    position: absolute;
    top: 15px;
    left: 484px;
    width: 460px;
    height: 83px;
    border: 0px ;

    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}


So das ist der erste Versuch gewesen wo eben beim ein und ausblenden die Hauptseite jeweils kurz angezeigt wird was zum flackern führen kann wenn ein Segment ausgeblendet ist. Ach ja wenn ich nur die Hauptseite im mit einer Funktion aktuallisiern lassen um die Werte aus der Steuerung "abzufragen" blinkt halt die ganze Seite, daher der Versuch mit dem iframe.

- - - Aktualisiert - - -

Der Versuch mit Ajax:

ajax-daten.html:

HTML: 
<!-- AWP_In_Variable Name='"NZ".NZ[1].Enabled' -->
<!-- AWP_In_Variable Name='"NZ".NZ[1].Aktiv' -->
<!-- AWP_In_Variable Name='"NZ".NZ[1].Aktiv_Display' -->
<!-- AWP_In_Variable Name='"NZ".NZ[1].pressed' -->

<!-- AWP_In_Variable Name='"NZ".NZ[2].Enabled' -->
<!-- AWP_In_Variable Name='"NZ".NZ[2].Aktiv' -->
<!-- AWP_In_Variable Name='"NZ".NZ[2].Aktiv_Display' -->
<!-- AWP_In_Variable Name='"NZ".NZ[2].pressed' -->



<table>
 <tr>
  <td>Enabled1: :="NZ".NZ[1].Enabled:</td>
 </tr>

 <tr>
  <td>Aktiv1 : :="NZ".NZ[1].Aktiv:</td>
 </tr>

  <tr>
  <td>Aktiv_Display1: :="NZ".NZ[1].Aktiv_Display: </td>
 </tr>

 <tr>
  <td>pressed1 : :="NZ".NZ[1].pressed:</td>
 </tr>
 
 

  <tr>
  <td>Enabled2: :="NZ".NZ[2].Enabled:</td>
 </tr>

 <tr>
  <td>Aktiv2 : :="NZ".NZ[2].Aktiv:</td>
 </tr>

  <tr>
  <td>Aktiv_Display2: :="NZ".NZ[2].Aktiv_Display: </td>
 </tr>

 <tr>
  <td>pressed2 : :="NZ".NZ[2].pressed:</td>
 </tr>
 
</table>


Habe die beiden Ajaxteile einmal als Dokument angehangen ist so doch übersichtler wie ich gerade bemerkt habe.:angel:


1:
Wobei ich halt nicht weiter komme mit dem IE explorere.
Da mir da die Bilder und Variablen erst durch händisches neuladen angezeigt werden nachdem ich in der Steuerung die Variablen änder. Bzw. wenn ich das eine Segment ausblende und das andere nicht und die Variable in der Steuerung wieder so setze das ich das Segment anzeigen lassen will, wird mir der Wert auf 1 gesetzt das Frage ich einmal seperat auf der Seite ab, doch der Button nicht, der wird erst geladen wenn ich den Button beim angezeigten drücke.
2:
Und das ich die Variablen nicht durch das betätigen eines Bildes in der Steuerung setzen kann.
Ich hoffe das ganze ist noch halbwegs übersichtlich und ich hab mich halbwegs versändlich ausgedrückt.

gruß Jan



Das Bild 2 ist ein Beispiel für die Ansicht mit Ajax .
 

Anhänge

  • Bild1.png
    Bild1.png
    9,7 KB · Aufrufe: 2
  • ajax-basis.txt
    8,2 KB · Aufrufe: 1
  • ajax-daten.txt
    995 Bytes · Aufrufe: 1
  • Bild2.png
    Bild2.png
    34,3 KB · Aufrufe: 2
Zuletzt bearbeitet:
Boah ist das viel Text. Kann man die Frage nicht kürzer machen?
Oder mach uns eine Testseite online auf einem Server und gib uns den Link.
So wie das jetzt hier steht weiß ich nicht, ob sich das einer durchliest, sind ja alle knapp mit der Zeit.

Und bitte setze Quellcode in Code Tags. Bei HTML einfach am Anfang ein [html] und am Ende ein [/html], bei allem übrigen [code] und [/code]. Die Tags sind auch über Schaltflächen im Editor oben erreichbar.
 
Wollte es Verständlich und ausführlich schreiben.

Problemstellung momentan :
Mit javascript werden 2 Variablen wovon eine von einer Steuerung kommt, verglichen, wenn sie gleich sind soll was umgesetzt werden. z.B. ein Segment ausgeblendet werden.

wenn ich in einem anderen Segment ein Button Betätige aktualisiert sich aber einmal alles und man sieht auch für ein Bruchteil einer Sekunde das zu verdeckende Objekt. Aber nur wenn ich auf der Hauptseite an den stellen der div`s etwas hinterlegt habe. Wenn da nichts steht blinkt aber das ganze einmal auf bzw. wird nichts angezeigt wenn ich das Segment nicht verdecken möchte und ein Button betätige.

Ich glaube um es zu verstehen muss man einmal den langen Text lesen bzw. sich die html Dateien abspeichern und aufrufen.

Im Anhang einmal die aktuelle Version, der Versuch in Ajax ist oben angehangen
 

Anhänge

  • Nebenzeitenerfassung.txt
    20,8 KB · Aufrufe: 0
  • Data_Text1.txt
    3,1 KB · Aufrufe: 0
  • Data_Text2.txt
    2,7 KB · Aufrufe: 0
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben