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 var jq = function() {};
38 if (typeof jQuery === 'function') {
39 jq = jQuery;
40 } else if (typeof $ === 'function') {
41 jq = $;
42 }
43 jq('#result').html('Nachricht von: "' + msg.origin + '" Formular mit id: "' + msg.data + '" wurde ausgewählt.' );
44 renderForm(msg.data);
45 }
46 console.log("Adding eventlistener");
47 window.addEventListener("message", myFormCycleCallback, false);
48 console.log("Eventlistener added");
49
50 window.renderForm = function(formId){
51 var myBase = 'https://help6.formcycle.eu/xwiki/bin/edit/Examples/IncludeFormViaExternalContext/';
52 var fcBase = 'https://pro.formcloud.de/formcycle';
53 var myFormContainer = jQuery('#content');
54
55 var form = jQuery.ajax({
56 type: "GET",
57 url: fcBase + '/form/provide/' + formId,
58 data:{
59 //Render-Parameter
60 "xfc-rp-inline":true, //Verwendete resourcen auflösen
61 "xfc-rp-form-only":true, //Formular ohne HTML, BODY etc.
62 "xfc-rp-usejq":false, //jQuery einbinden
63 "xfc-rp-keepalive":false, //Ping zur Sessionverlängerung
64 "xfc-rp-usecss":true, //Use Formcycle CSS files
65 "xfc-rp-useui":true, //jQueryUI einbinden
66 //Prozess-Parameter
67 "xfc-pp-external":true, //Externer Formularrequest
68 "xfc-pp-base-url":fcBase//, //URL zum FormCycle
69 //"xfc-pp-success-url": myBase + "/anfrage-versendet.html", //CMS Seite bei erfolg
70 //"xfc-pp-error-url": myBase + "/anfrage-fehler.html" //CMS Seite bei Fehler
71 },
72 cache: false,
73 async: false,
74 success:function(html){
75 //myFormContainer.html(html.replace(/\$/g,'jQuery'));
76 },
77 crossDomain: true
78 });
79 }
80
81 </script>
82
83 <h1>Formular einbinden und "Externen Kontext" Seite verwenden</h1>
84
85 <p>
86 <h2>1. Externen Kontext via iFrame einbinden z.B.</h2>
87 <br/>
88 <br/>
89 <!--<a href="https://thalassa.formcycle.de/formcycle/external/forms/main.xhtml">https://thalassa.formcycle.de/formcycle/external/forms/main.xhtml</a>
90 <br/>-->
91 <a href="https://pro.formcloud.de/formcycle/external/forms/main.xhtml">https://pro.formcloud.de/formcycle/external/forms/main.xhtml</a>
92 <br/>
93 </p>
94
95 <iframe src="https://pro.formcloud.de/formcycle/external/forms/main.xhtml" width="100%" height="340px">
96 <span>Ihr Browser unterstützt keine iFrames</span>
97 </iframe>
98 {{/html}}
99
100
101 == 2. Eventlistener für Formularauswahl registrieren z.B.: ==
102
103
104
105 {{code language="javascript"}}function myFormCycleCallback(msg){
106 $('#result').html('Nachricht von: "<b>' + msg.origin + '</b>" Formular mit id: "<b>' + msg.data + '</b>" wurde ausgewählt.' );
107 renderForm(msg.data);
108 }
109
110 window.addEventListener("message", myFormCycleCallback, false);{{/code}}
111
112
113 == 3. Ergebenis speichern: ==
114
115 {{html clean="false"}}
116 <div class="hljs" id="result"></div>
117 {{/html}}
118
119
120 == 4. Formular einbinden: ==
121
122 {{code language="js"}}
123 window.renderForm = function(formId){
124 var myBase = 'https://download.formcycle.de/devground/ttr/fc/';
125 var fcBase = 'https://pro.formcloud.de/formcycle';
126 var myFormContainer = $('#content');
127
128 var form = $.ajax({
129 type: "GET",
130 url: fcBase + '/form/provide/' + formId,
131 data:{
132 //Render-Parameter
133 "xfc-rp-inline":true, //Verwendete resourcen auflösen
134 "xfc-rp-form-only":true, //Formular ohne HTML, BODY etc.
135 "xfc-rp-usejq":false, //jQuery einbinden
136 "xfc-rp-keepalive":false, //Ping zur Sessionverlängerung
137 "xfc-rp-usecss":true, //Use Formcycle CSS files
138 "xfc-rp-useui":true, //jQueryUI einbinden
139 //Prozess-Parameter
140 "xfc-pp-external":true, //Externer Formularrequest
141 "xfc-pp-base-url":fcBase, //URL zum FormCycle
142 "xfc-pp-success-url": myBase + "/anfrage-versendet.html", //CMS Seite bei erfolg
143 "xfc-pp-error-url": myBase + "/anfrage-fehler.html" //CMS Seite bei Fehler
144 },
145 cache: false,
146 async: false,
147 success:function(html){
148 myFormContainer.html(html);
149 },
150 crossDomain: true
151 });
152 }
153 {{/code}}
154
155
156 == 5. Ergebenis Formular: ==
157
158 {{html clean="false"}}
159 <div class="hljs" id="content"></div>
160 {{/html}}

Navigation

Copyright 2000-2025