Änderungen von Dokument Formular über externen Kontext einbinden

Zusammenfassung

• Seiteneigenschaften (1 geändert, 0 hinzugefügt, 0 gelöscht)

Details

Seiteneigenschaften

Inhalt

...	...	@@ -1,47 +45,3 @@
1		-{{html clean="false"}}
2		- <style type="text/css">
3		- pre{
4		- margin:0;
5		- }
6		-
7		- .xm-form{
8		- margin:0 auto;
9		- }
10		-
11		- .extra .hljs-string{
12		- font-weight:bold;
13		- color:red;
14		- }
15		-
16		- iframe, .hljs{
17		- max-width:700px;
18		- border:2px solid #515151;
19		- }
20		-
21		- .hljs{
22		- max-width:985px;
23		- text-align:center;
24		- }
25		-
26		- .resizer {
27		- display:flex;
28		- margin:0;
29		- padding:0;
30		- resize:both;
31		- overflow:hidden
32		- }
33		-
34		- .resizer > .resized {
35		- flex-grow:1;
36		- margin:0;
37		- padding:0;
38		- border:0;
39		- height: inherit;
40		- }
41		- .border { border:4px dashed black; }
42		- </style>
43		-{{/html}}
44		-
45	45	== 1. Externen Kontext via iFrame einbinden z.B. ==
46	46
47	47	[[https://pro.form.cloud/formcycle/external/forms/main.xhtml]]
...	...	@@ -50,18 +50,19 @@
50	50
51	51	== 2. Eventlistener für Formularauswahl registrieren z.B.: ==
52	52
53		-{{code language="javascript"}}
54		-function myFormCycleCallback(msg){
55		- $('#result').html('Nachricht von: "<b>' + msg.origin + '</b>" Formular mit id: "<b>' + msg.data + '</b>" wurde ausgewählt.' );
56		- renderForm(msg.data);
	9	+
	10	+
	11	+
	12	+{{code language="javascript"}}function myFormCycleCallback(msg){
	13	+ $('#result').html('Nachricht von: "<b>' + msg.origin + '</b>" Formular mit id: "<b>' + msg.data + '</b>" wurde ausgewählt.' );
	14	+ renderForm(msg.data);
57	57	}
58	58
59		-window.addEventListener("message", myFormCycleCallback, false);
60		-{{/code}}
	17	+window.addEventListener("message", myFormCycleCallback, false);{{/code}}
61	61
	19	+
62	62	== 3. Ergebenis speichern: ==
63	63
64		-TODO: Iframe
65	65	{{html clean="false"}}
66	66	<div class="hljs" id="result"></div>
67	67	{{/html}}
...	...	@@ -71,8 +71,8 @@
71	71
72	72	{{code language="js"}}
73	73	window.renderForm = function(formId){
74		- var myBase = 'https://help7.formcycle.eu/xwiki/bin/view/Examples/IncludeExternalContext/';
75		- var fcBase = 'https://pro.form.cloud/formcycle';
	31	+ var myBase = 'https://help6.formcycle.eu/xwiki/bin/edit/Examples/IncludeFormViaExternalContext/';
	32	+ var fcBase = 'https://pro.formcloud.de/formcycle';
76	76	var myFormContainer = $('#content');
77	77
78	78	var form = $.ajax({
...	...	@@ -106,9 +106,7 @@
106	106	== 5. Ergebenis Formular: ==
107	107
108	108	{{html clean="false"}}
109		- <div class="resizer border" style="height: 1000px;">
110		- <iframe id="content" class="resized" src="https://help7.formcycle.eu/xwiki/bin/download/Examples/IncludeAJAX/iframe.html"></iframe>
111		- </div>
	66	+ <div class="hljs" id="content"></div>
112	112	{{/html}}
113	113
114	114
...	...	@@ -115,6 +115,54 @@
115	115
116	116
117	117
118		-Hinweis: Aus Kompatibilitätsgründen wird der Inhalt auf dieser Seite in einem iframe dargestellt.
119	119
120	120
	75	+Für das folgenden Beispiel wird zu Demonstrationszwecken eine eigene [[HTML-Seite>>attach:iframe.html]] in einem iframe dargestellt:
	76	+
	77	+{{html clean="false"}}
	78	+ <style type="text/css">
	79	+ pre{
	80	+ margin:0;
	81	+ }
	82	+
	83	+ .xm-form{
	84	+ margin:0 auto;
	85	+ }
	86	+
	87	+ .extra .hljs-string{
	88	+ font-weight:bold;
	89	+ color:red;
	90	+ }
	91	+
	92	+ iframe, .hljs{
	93	+ max-width:700px;
	94	+ border:2px solid #515151;
	95	+ }
	96	+
	97	+ .hljs{
	98	+ max-width:985px;
	99	+ text-align:center;
	100	+ }
	101	+
	102	+ .resizer {
	103	+ display:flex;
	104	+ margin:0;
	105	+ padding:0;
	106	+ resize:both;
	107	+ overflow:hidden
	108	+ }
	109	+
	110	+ .resizer > .resized {
	111	+ flex-grow:1;
	112	+ margin:0;
	113	+ padding:0;
	114	+ border:0;
	115	+ height: inherit;
	116	+ }
	117	+ .border { border:4px dashed black; }
	118	+ </style>
	119	+
	120	+ <div class="resizer border" style="height: 1000px;">
	121	+ <iframe id="customerdemo" class="resized" src="https://help7.formcycle.eu/xwiki/bin/download/Examples/IncludeAJAX/iframe.html"></iframe>
	122	+ </div>
	123	+{{/html}}