Zeige letzte Bearbeiter
1 {{html clean="false"}}
2 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
3 <script>
4 //$.noConflict();
5 </script>
6 <style type="text/css">
7 pre{
8 margin:0;
9 }
10
11
12 .extra .hljs-string{
13 font-weight:bold;
14 color:red;
15 }
16
17 iframe, .hljs{
18 max-width:980px;
19 border:2px solid #515151;
20 }
21
22 .hljs{
23 max-width:985px;
24 }
25
26 span.box{
27 display: block;
28 padding: 20px;
29 }
30 </style>
31
32 <script type="text/javascript">
33
34 function myFormCycleCallback(msg){
35 console.log("SADKJGAFGSALIFABGSFLHSAFHLSAHFLIHASIFHLIHFASILHLSAHFLIHSALIH");
36 console.log("Nachricht von: "' + msg.origin + '" Formular mit id: "' + msg.data + '" wurde ausgewählt.");
37 //jquery('#result').html('Nachricht von: "' + msg.origin + '" Formular mit id: "' + msg.data + '" wurde ausgewählt.' );
38 //renderForm(msg.data);
39 }
40 console.log("Adding eventlistener");
41 window.addEventListener("message", myFormCycleCallback, false);
42 console.log("Eventlistener added");
43
44 window.renderForm = function(formId){
45 var myBase = 'https://help6.formcycle.eu/xwiki/bin/edit/Examples/IncludeFormViaExternalContext/';
46 var fcBase = 'https://pro.formcloud.de/formcycle';
47 var myFormContainer = jQuery('#content');
48
49 var form = jQuery.ajax({
50 type: "GET",
51 url: fcBase + '/form/provide/' + formId,
52 data:{
53 //Render-Parameter
54 "xfc-rp-inline":true, //Verwendete resourcen auflösen
55 "xfc-rp-form-only":true, //Formular ohne HTML, BODY etc.
56 "xfc-rp-usejq":false, //jQuery einbinden
57 "xfc-rp-keepalive":false, //Ping zur Sessionverlängerung
58 "xfc-rp-usecss":true, //Use Formcycle CSS files
59 "xfc-rp-useui":true, //jQueryUI einbinden
60 //Prozess-Parameter
61 "xfc-pp-external":true, //Externer Formularrequest
62 "xfc-pp-base-url":fcBase, //URL zum FormCycle
63 "xfc-pp-success-url": myBase + "/anfrage-versendet.html", //CMS Seite bei erfolg
64 "xfc-pp-error-url": myBase + "/anfrage-fehler.html" //CMS Seite bei Fehler
65 },
66 cache: false,
67 async: false,
68 success:function(html){
69 myFormContainer.html(html.replace(/\$/g,'jQuery'));
70 },
71 crossDomain: true
72 });
73 }
74
75 </script>
76
77 <h1>Formular einbinden und "Externen Kontext" Seite verwenden</h1>
78
79 <p>
80 <h2>1. Externen Kontext via iFrame einbinden z.B.</h2>
81 <br/>
82 <br/>
83 <!--<a href="https://thalassa.formcycle.de/formcycle/external/forms/main.xhtml">https://thalassa.formcycle.de/formcycle/external/forms/main.xhtml</a>
84 <br/>-->
85 <a href="https://pro.formcloud.de/formcycle/external/forms/main.xhtml">https://pro.formcloud.de/formcycle/external/forms/main.xhtml</a>
86 <br/>
87 </p>
88
89 <iframe src="https://pro.formcloud.de/formcycle/external/forms/main.xhtml" width="100%" height="340px">
90 <span>Ihr Browser unterstützt keine iFrames</span>
91 </iframe>
92 {{/html}}
93
94
95 == 2. Eventlistener für Formularauswahl registrieren z.B.: ==
96
97
98
99 {{code language="javascript"}}function myFormCycleCallback(msg){
100 $('#result').html('Nachricht von: "<b>' + msg.origin + '</b>" Formular mit id: "<b>' + msg.data + '</b>" wurde ausgewählt.' );
101 renderForm(msg.data);
102 }
103
104 window.addEventListener("message", myFormCycleCallback, false);{{/code}}
105
106
107 == 3. Ergebenis speichern: ==
108
109 {{html clean="false"}}
110 <div class="hljs" id="result"></div>
111 {{/html}}
112
113
114 == 4. Formular einbinden: ==
115
116 {{code language="js"}}
117 window.renderForm = function(formId){
118 var myBase = 'https://download.formcycle.de/devground/ttr/fc/';
119 var fcBase = 'https://pro.formcloud.de/formcycle';
120 var myFormContainer = $('#content');
121
122 var form = $.ajax({
123 type: "GET",
124 url: fcBase + '/form/provide/' + formId,
125 data:{
126 //Render-Parameter
127 "xfc-rp-inline":true, //Verwendete resourcen auflösen
128 "xfc-rp-form-only":true, //Formular ohne HTML, BODY etc.
129 "xfc-rp-usejq":false, //jQuery einbinden
130 "xfc-rp-keepalive":false, //Ping zur Sessionverlängerung
131 "xfc-rp-usecss":true, //Use Formcycle CSS files
132 "xfc-rp-useui":true, //jQueryUI einbinden
133 //Prozess-Parameter
134 "xfc-pp-external":true, //Externer Formularrequest
135 "xfc-pp-base-url":fcBase, //URL zum FormCycle
136 "xfc-pp-success-url": myBase + "/anfrage-versendet.html", //CMS Seite bei erfolg
137 "xfc-pp-error-url": myBase + "/anfrage-fehler.html" //CMS Seite bei Fehler
138 },
139 cache: false,
140 async: false,
141 success:function(html){
142 myFormContainer.html(html);
143 },
144 crossDomain: true
145 });
146 }
147 {{/code}}
148
149
150 == 5. Ergebenis Formular: ==
151
152 {{html clean="false"}}
153 <div class="hljs" id="content"></div>
154 {{/html}}

Navigation

Copyright 2000-2025