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

[FRAGE] post funktion beim klicken auf ein Bild

S

spikey2210

New member
Da ich glaube, dass die Fragestellung im anderen Thema zu ungenau bzw. zu komplex gehalten habe, versuch ich mich noch mal.

Problem1:
wie kann ich mit dem Befehl
XMLHttpRequest durch klicken auf ein Bild einen Wert an einen Server (in diesem Fall eine SPS) auf 1 setzten ?

Ich habe bereits mit Hilfe,eine Seite erstellen können in der ich Variablen von der Steuerung abrufe und diese auch automatisch aktualisieren lasse.
Problem 2
Das ganze klappt aber nur im Firefox, nicht am HMI wo soweit ich weiß Windows XP mit irgendeinen Internet Explorer läuft. Da muss ich erst einmal die Seite händisch neu Laden dann wird der Wert sowie ein Bild angezeigt .

Problem 3
Die Variablen werden aktualisiert (zumindest bis jetzt im Firefox) jedoch will ich auch ein Bild anzeigen lassen wenn eine Variable z.b. 1 ist , was ich über eine if- Abfrage der Variable mache.
Aber dazu muss ich dann erst noch einmal händisch die Seite neu laden.
 
Zuletzt bearbeitet:
Zunächst mal: Benutzt du eine Lib wie z.B. jQuery? Damit wäre es wirklich erheblich einfacher, gerade im Ajax Bereich. Damit wäre Probl. 2 gelöst.
Problem 1 ist keines, man muss halt im Serverscript schauen, was der Browser da sendet und dann richtig verzweigen.
Problem 3 löst man im Callback der Ajax Funktion.
 
Ich benutzte kein jquery. da man am HMI, welches hinterher genutzt wird nichts verändern soll.

inwiefern gucken wie das Serverscript aussieht ?
Callback gucke ich mir mal an .

Danke schon mal für die Tipps und Hilfe.
 
So ich noch einmal, also die Lib. kann ich nutzen und wir von der der Steuerung und dem extra tool auch mit übernommen.

Und zum problem mit dem wenn ich auf ein Bild klicke soll man wohl hiermit lösen können:

HTML: 
$(document).ready(function() {

//
      $("#driver").click(function(event){

          $.post( 
             "/jquery/result.php",
		// parameter an post
             { name: "Zara" },
             function(data) {
		// was mit den bekommenen daten machen.
                $('#stage').html(data);
             }

          );

      });

   });

Könntest du das mir einmal erklären wofür welcher bereich genau ist.
Soweit ich das verstanden habe, kann ich damit ein neues Dokument nehmen und dort die variablen abrufen und halt die Bilder austauschen und diese auf der Hauptseite austauschen lassen wenn ich auf ein Bild(Button) drücke. Aber ich verstehe nciht genau wie da ich halt da noch nicht sehr mit dem ganzen vertraut bin.

Ich habe einmal im Anhang die 2.0 Zip das ist die version mit den Iframes
und einmal die ander war der Versuch mit ajax.
Wobei so wie ich das verstehe ich auch die 2.0er "Version" kann und da die jquery.js Datei mit einbinden kann?!
 

Anhänge

  • 2.0.zip
    50,3 KB · Aufrufe: 0
  • mit ajax.zip
    17,9 KB · Aufrufe: 0
Zuletzt bearbeitet von einem Moderator:
Das Ganze scheint für eine Anlagensteuerung zu sein, wie ich per PN erfuhr.
Nochmal hier die Frage öffentlich, spikey: Kann man in der Anlage client- und serverseitig mit Standard JS und HTML arbeiten? Hat der Server eine CGI-Schnittstelle worüber die Werte vom Client auf den Server übertragen werden können? Nur dann könnten wir das per Formular oder Ajax machen, was nötig wäre, um dieses von dir zitierte .post() verwenden zu können. Zumindest aus meiner beschränkten Browser-Sicht.
 
Guten abend.

Also:
Es ist eine Steuerung mit einem intigrierten Webserver, welchen man aktivieren muss um mit diesem zu Arbeiten.
Der Webserver wird dann aber quasi nur im Intranet genutzt.
Zu deinen Fragen:
Ja kann man .
Ja die Schnittstelle ist auch vorhanden.

- - - Aktualisiert - - -

Mitlerweile bin ich soweit das ich mit einer "ganz normalen" webseite und iframes die Seite aktualisieren kann .
Also wenn ich in der Steuerung eine wert veränder wird mir das auch auf meiner Seite angezeigt.
Ich kann auch eine variable verändern wenn ich auf einen Button drücke.
Problem ist eigentlich nur der Postbefehl


Code: 
		[B]<form method="post" action="">[/B]			
	
		<div id="box1">					
		</div>
		
		<div class="Text1" id="Text1">									
		</div>	
		
		<div id="Transparent1" style="position:absolute; left: 10x ; top: 15px " >   
		<img src="transpixel.png" width="73" height="78" value="Start">
		</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">		
			
		</form>																				
			<style type="text/css">     
			div.Text1					
				{   
					position: absolute; 
					top: 42px;
					left: 20px;
					text-align:center;
					cursor:pointer;
				}	
			</style>

das ganze habe ich dann 8 mal nur mit anderen positionen der divs. und zu jedem jeweils ein iframe.
Nur da ich auf der Hauptseite wo auch der Auszug raus ist ein Postbefehl so wie er da ist steht habe, aktualisiert sich beim darauf klicken einmal jeder Button so das diese einmal kurz flackern.
Daher die Idee/der Versuch das ganze irgendwie im Hintergrund zu senden oder so das sich nur das eine Bild aktualisiert.


hier noch einmal zu einem Segment ein iframe

Code: 
<html>
	<head>
		<meta content="text/html; charset=UTF-8" http-equiv="content-type">
		<title></title>
		<script type="text/javascript">
	

  
			function InitPlc1() 
			{   
				setInterval("PlcUpdate1()",1000); /* Call PlcUpdate() all 500ms */
				
					var spsNZ11 = ':="NZ".NZ[1].Enabled:'; 							
					
					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= 'Anfahren';
	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:';									                                                        var sppNZ14 = '1';
					
					if (spsNZ14 == sppNZ14 )														
					{
	              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()">

	</body>

</html>
 
Zuletzt bearbeitet:
Habe ich das jetzt richtig verstanden, dass du das Formular nicht abschicken kannst, weil der post() Befehl nicht funktioniert?

Da du das Clientseitig mit JS löst, meine Frage: Steht was in der Fehlerkonsole?
Und dann habe ich IFrame gelesen, bist du sicher das du das auch darfst, in Bezug auf SOP (Same-Origin-Policy)?
 
Zuletzt bearbeitet von einem Moderator:
So war jetzt die letzten Tage etwas anderweitig beschäftigt, habe meine Abschlussprüfung gehabt und bestanden ^^.

Doch Absenden geht, nur dabei wird die ganze Seite neu geladen. Dadurch flackern beim betätigen von egal welchem Button einmal alle anderen auf.
Theoretisch stelle ich mir das aber so vor, dass nur der eine Button den ich auch anklicke sich neulädt und/oder im Hintergrund der Post Befehl ausgeführt wird. (die Post methode braucht man wohl damit die Werte an die Steuerung übergeben werden)

Also daher auch keine Fehlermeldung.

von dem SOP habe ich noch nichts gehört. (gibt andere vergleichbare Geschichten wo es auch via iframe gemacht wurde)
Schöner fände ich es wenn man es ohne iframe alles mit javascript oder der gleichen macht. aber das kann ich definitiv noch nicht.
 
Zuletzt bearbeitet:
Code: 
<form method="post" action="">
Setze ein "javascript:" bei "action" ein - dann flackert nix, weil er es nicht standarisiert an sich selbst schickt.

Dann lese ich von "parent" und dass das aus dem iFrame kommt - das funktioniert NICHT. Du kannst mit einem iFrame nach "unten" greifen, aber nicht in das abbildende Dokument von "unten". Heißt ...

GEHT: iFrame -> zeigt eine "Seite" -> Zugriff auf "Seite" aus dem DOM des iFrames (!) möglich

GEHT NICHT: zeigt "Seite" in iFrame -> Zugriff aufs DOM des iFrames via "Seite" (aus iFrame heraus)

Du wirst bei ziemlich keinem Browser Erfolg haben. In meinen Augen wäre es anders herum deutlich wichtiger, dass es nicht geht - aber dann sieht Google und diese ganzen Content-Thieves-Mess-Tool-Pseudo-SEO-Dinger (die das Web schön vollstopfen und auch E-Mails abgreifen) gar nix. Demnach schlage ich in die Kerbe von rico: SOP ... !

Zuguterletzt solltest Du "InitPlc1" sich selbst aufrufen lassen - nicht als Interval. Ich würde eher nach Durchlauf eine Verzögerung setzen bis zum nächsten Call, als rund alle 1000 ms wieder zu feuern.

"PlcUpdate1" hingegen irritiert mich und ist - IMO - Ballast. ;)
 
Morgen, wie genau hat das mit dem JavaScript auszusehen *puhhh gut das es keine doofen Fragen gibt*. Aber wie gesagt mit JavaScript allgemein kenn ich mich nur sehr wenig aus.

mit den iframes hab ich nicht verstanden, ich habe gelesen gehabt das man ganz normal über das Parent auf die "Hauptseite" zugreifen kann?! und ich tausche dann ja die Inhalte des parent mit dem Inhalt des iframes?!

inwiefern ist das mit dem SOP wichtig wenn es sich halt nur im ein Intranet handelt.
 
SteelWheel schrieb:
Setze ein "javascript:" bei "action" ein
Zum Vergrößern anklicken....
ohne mir durchgelesen zu haben, worum es eigentlich geht, ist ein "javascript:" pseudoprotokoll immer keine gute idee und durch standardwege ersetzbar

SteelWheel schrieb:
Dann lese ich von "parent" und dass das aus dem iFrame kommt - das funktioniert NICHT. Du kannst mit einem iFrame nach "unten" greifen, aber nicht in das abbildende Dokument von "unten".
Zum Vergrößern anklicken....
wenn nicht generell die SOP das verhindert, sind beide wege möglich
 
In meinen Augen klappt das ganze ja auch.
Also wenn ich in der Steuerung einen Wert verändre wird dieser auch in dem iframe "verarbeitet", sodass die Bilder sich auch wechseln.

Problem dabei bleibt halt das ich nicht weiß wie ich ein Postbefehl ausführe ohne das sich die Seite neu Lädt.
1. wenn ich auf ein Bild klicke
2. möchte ich eine Sprach abfrage aus der URl entnehmen und dann die Variable an die Steuerung posten.

beides ohne das sich die Seite neu lädt.

HTML: 
[B]<form method="post" action="">	[/B]		
	
		<div id="box1">					
		</div>
		
		<div class="Text1" id="Text1">									
		</div>	
		
		<div id="Transparent1" style="position:absolute; left: 10x ; top: 15px " >   
		<img src="transpixel.png" width="73" height="78" value="Start">
		</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">


Also ich muss denk ich mal den Teil, zumindest für das klicken auf das Bild verändern damit ich den Wert '"NZ".NZ[1].pressed' nur an die Steuerung sende ohne die Seite neu zu laden.

- - - Aktualisiert - - -

ich weiß halt nur nicht wie .
Den rest mit den iframes klappt ja alles. Ich weiß ist nicht die schönste Art aber Hauptsache es klappt erstmal alles . verändern und verschönern kann ich es immer noch (wenn ich weiß wie)

- - - Aktualisiert - - -

Ach ja und das ganze sollte ohne PHP sein, da der Server damit wohl nicht klar kommen soll.
Und dazu finde ich nicht wirklich ein Beispiel, oder eine Aktuelle Diskussion wo man sich ein klinken kann.
 
Aber arbeitet das nicht immer mit einer PHP Datei zusammen !?

Bzw. beim erstellen eines xmlHttpObjectes hört das ganze schon wieder am HMI auf. Dort läuft irgendein IE Explorer und es Funktioniert nicht. im normalen Webbrowser am Pc wo ich Firefox nehme ist eine Funktion gegeben. (hatte da auch mal was probiert. aber als es nicht im IE Explorer bzw. am HMI klappte hab ich das nach ein paar versuchen auch mit dem Ajax gelassen.
 
Zuletzt bearbeitet:
spikey2210 schrieb:
Aber arbeitet das nicht immer mit einer PHP Datei zusammen !?
Zum Vergrößern anklicken....
nein, ein xmlHttpObject führt einen request durch, so als wenn du die übergebene url mit dem browser öffnen würdest. nur wird die response nicht vom browser ausgewertet und automatisch als neue seite geöffnet, sondern dir die auswertung überlassen.

spikey2210 schrieb:
Dort läuft irgendein IE Explorer und es Funktioniert nicht.
Zum Vergrößern anklicken....
im ie wurde das xmlHttpObject als 1. eingeführt, das ist eine ms erfindung. in alten ie's als activeX objekt
 
hesst schrieb:
ohne mir durchgelesen zu haben, worum es eigentlich geht, ist ein "javascript:" pseudoprotokoll immer keine gute idee und durch standardwege ersetzbar
Zum Vergrößern anklicken....
Dann erwähne doch bitte einen "Standardweg" für den TO! Das lass aber bitte nicht via JavaScript sinnwahrend mit preventDefault() (jQ-Beispiel) laufen. ^^ Und eine Raute ist genauso keine gute Idee ... :)

hesst schrieb:
wenn nicht generell die SOP das verhindert, sind beide wege möglich
Zum Vergrößern anklicken....
Da es nicht genannt ist, ist X-Domain leider auch denkbar. Demnach hast Du natürlich auch recht, dass es möglich wäre ... aber nicht mit Zugriff auf Domain A mittels iFrame in Domain B - da erreicht A bei B gar nichts. Ist mit dem Google-Beispiel wohl doch nicht so klar wie eigentlich gemeint gewesen.
 
hesst schrieb:
im ie wurde das xmlHttpObject als 1. eingeführt, das ist eine ms erfindung. in alten ie's als activeX objekt
Zum Vergrößern anklicken....

Genau das habe ich in anderen Foren auch gelesen und auch umgesetzt(oder hab ich einen Fehler), im HMI läuft Windows XP und ich mein es wäre der IE 7

Code: 
{
	if (window.XMLHttpRequest) 
	{
		// code fuer IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp = new XMLHttpRequest();
	} 
	else 
	{
		// code fuer IE6, IE5
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}


	
	xmlhttp.open("GET", "ajax-daten.html", true);

	xmlhttp.o.....

hier ein kurzer Ausschnitt aus dem Versuch mit Ajax.
 
SteelWheel schrieb:
Das lass aber bitte nicht via JavaScript sinnwahrend mit preventDefault() (jQ-Beispiel) laufen.
Zum Vergrößern anklicken....
das ist aber der standardweg


SteelWheel schrieb:
Demnach hast Du natürlich auch recht, dass es möglich wäre ... aber nicht mit Zugriff auf Domain A mittels iFrame in Domain B - da erreicht A bei B gar nichts. Ist mit dem Google-Beispiel wohl doch nicht so klar wie eigentlich gemeint gewesen.
Zum Vergrößern anklicken....
der reine zugriff aus dem iFrame herraus auf das parent-document oder umgekehrt geht entweder in beide richtungen oder überhaupt nicht, wegen der SOP.
über das xmlhttprequestobjekt auch, bzw. kann man dort noch bei verschiedenen domains in der zieldomain die sourcedomain erlauben, aber auch hier ist es wieder egal, ob die zieldomain die im iframe ist oder die andere

- - - Aktualisiert - - -

spikey2210 schrieb:
im HMI läuft Windows XP und ich mein es wäre der IE 7
Zum Vergrößern anklicken....
sieht soweit ok aus
ist das ein zugriff über das fileprotokoll? oder über einen http-server? letzteres sollte gehen, bei ersterem musst du if und else tauschen. if (window.ActiveXObject) {...} else if (window.XMLHttpRequest) {...} else {// Fehler}
 
hesst schrieb:
der reine zugriff aus dem iFrame herraus auf das parent-document oder umgekehrt geht entweder in beide richtungen oder überhaupt nicht, wegen der SOP.
Zum Vergrößern anklicken....
Es tut mir leid, dass das jetzt ein wenig ausufert, aber genau hier lege ich ein dickes Veto rein! Standarisiert geht es in eine Richtung - top-down ... aber nicht bottom-up! Ich habe es mehrere Tage mit Google probiert, welche via iFrame-Nutzung (womöglich Zeitmessung, Content-Check o. ä.) kommen. Kurz: Die (zu mir) ja ... ich (zu denen ins parent) nicht.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben