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

Navigation

Copyright 2000-2025