Verstecke letzte Bearbeiter
gru 2.2 1 {{html clean="false"}}
gru 2.61 2 <script>
gru 2.63 3 console.log("init", typeof $);//, $.fn.jquery);
gru 2.71 4 delete define.amd;
gru 2.61 5 </script>
6
gru 2.41 7 <script type="text/javascript" src="https://pro.formcloud.de/formcycle/form/includes/010-jquery-min.js?_nc=1620383292614" ></script>
gru 2.64 8 <!--<script type="text/javascript" src="https://pro.formcloud.de/formcycle/form/includes/020-jquery-ui-min.js?_nc=20210325123132" ></script>-->
gru 2.46 9 <script>
gru 2.60 10 console.log("init2", typeof jQuery, jQuery.fn.jquery);
gru 2.55 11 window.fail = $;
gru 2.46 12 $.noConflict();
gru 2.60 13 console.log("init2", typeof jQuery, typeof window.fail, jQuery.fn.jquery);
gru 2.46 14 </script>
gru 2.41 15 <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>-->
gru 2.2 16 <style type="text/css">
17 pre{
18 margin:0;
19 }
20
21
22 .extra .hljs-string{
23 font-weight:bold;
24 color:red;
25 }
26
27 iframe, .hljs{
28 max-width:980px;
29 border:2px solid #515151;
30 }
31
32 .hljs{
33 max-width:985px;
34 }
35
36 span.box{
37 display: block;
38 padding: 20px;
39 }
40 </style>
41
42 <script type="text/javascript">
gru 2.57 43 console.log(typeof jQuery.xutil, typeof window.fail.xutil);
gru 2.49 44 fcjq = jQuery;
gru 2.58 45 console.log(typeof fcjq.xutil, fcjq === jQuery, jQuery === window.fail);
gru 2.49 46 //console.log("BE",window.fcjq);
47 //$.noConflict();
48 //console.log("AF",window.fcjq);
gru 2.59 49
gru 2.2 50 function myFormCycleCallback(msg){
gru 3.16 51 var formID =msg.data;
gru 3.8 52 console.log('formID',msg.data.formId);
gru 3.3 53 var myBase = 'https://help6.formcycle.eu/xwiki/bin/edit/Examples/IncludeFormViaExternalContext/';
54 var fcBase = 'https://pro.formcloud.de/formcycle';
55 var myFormContainer = jQuery('#content');
gru 3.15 56 if (typeof formID !== 'object' && typeof formID !== 'Object' && typeof formID !== 'undefined') {
gru 3.18 57 //console.log("SADKJGAFGSALIFABGSFLHSAFHLSAHFLIHASIFHLIHFASILHLSAHFLIHSALIH");
gru 3.17 58 console.log('Nachricht von: "' + msg.origin + '" Formular mit id: "' + msg.data + '" wurde ausgewählt.');
59 jQuery('#result').html('Nachricht von: "' + msg.origin + '" Formular mit id: "' + msg.data + '" wurde ausgewählt.' );
60
61
gru 3.14 62 myFormContainer.html('');
gru 3.13 63 myFormContainer.html('<iframe id="xm-form" src="'+fcBase+'/form/provide/'+formID+'" style="width:100%; height:1000px" scrolling="yes" frameborder="0" />');
gru 3.14 64
65
66 }
gru 3.3 67 //renderForm(msg.data);
gru 2.2 68 }
gru 2.15 69 console.log("Adding eventlistener");
gru 2.2 70 window.addEventListener("message", myFormCycleCallback, false);
gru 2.15 71 console.log("Eventlistener added");
gru 2.2 72
73 window.renderForm = function(formId){
gru 2.3 74 var myBase = 'https://help6.formcycle.eu/xwiki/bin/edit/Examples/IncludeFormViaExternalContext/';
gru 2.2 75 var fcBase = 'https://pro.formcloud.de/formcycle';
gru 2.59 76 var myFormContainer = jQuery('#content');
gru 2.2 77
gru 2.59 78 var form = jQuery.ajax({
gru 2.2 79 type: "GET",
80 url: fcBase + '/form/provide/' + formId,
81 data:{
82 //Render-Parameter
83 "xfc-rp-inline":true, //Verwendete resourcen auflösen
gru 2.72 84 "xfc-rp-form-only":true, //Formular ohne HTML, BODY etc.
85 "xfc-rp-usejq":false, //jQuery einbinden
gru 2.2 86 "xfc-rp-keepalive":false, //Ping zur Sessionverlängerung
87 "xfc-rp-usecss":true, //Use Formcycle CSS files
88 "xfc-rp-useui":true, //jQueryUI einbinden
89 //Prozess-Parameter
90 "xfc-pp-external":true, //Externer Formularrequest
gru 2.24 91 "xfc-pp-base-url":fcBase//, //URL zum FormCycle
92 //"xfc-pp-success-url": myBase + "/anfrage-versendet.html", //CMS Seite bei erfolg
93 //"xfc-pp-error-url": myBase + "/anfrage-fehler.html" //CMS Seite bei Fehler
gru 2.2 94 },
95 cache: false,
96 async: false,
gru 2.25 97 success:function(html){
gru 2.74 98 console.log('Form loaded:',html.length);//,html);
gru 2.38 99 //myFormContainer.html(html);
gru 2.70 100 //if (!jQuery('#contentiframe').length) {
101 // myFormContainer.html('<iframe id="contentiframe"></iframe>');
102 //}
103 //var iframe = document.getElementById('contentiframe'),
104 //iframedoc = iframe.contentDocument || iframe.contentWindow.document;
105 //iframedoc.body.innerHTML = html.replace(/\$/g,'jQuery');
gru 3.2 106 //myFormContainer.html(html.replace(/\$/g,'jQuery'));
107 myFormContainer.html('');
gru 2.76 108 myFormContainer.html('<iframe id="xm-form" src="'+fcBase+'/form/provide/'+formId+'?xfc-height-changed-evt=true" style="width:100%; height:1000px" scrolling="yes" frameborder="0" />');
gru 2.2 109 },
110 crossDomain: true
111 });
112 }
113
114 </script>
115
116 <h1>Formular einbinden und "Externen Kontext" Seite verwenden</h1>
117
118 <p>
119 <h2>1. Externen Kontext via iFrame einbinden z.B.</h2>
120 <br/>
121 <br/>
gru 2.8 122 <!--<a href="https://thalassa.formcycle.de/formcycle/external/forms/main.xhtml">https://thalassa.formcycle.de/formcycle/external/forms/main.xhtml</a>
123 <br/>-->
gru 2.2 124 <a href="https://pro.formcloud.de/formcycle/external/forms/main.xhtml">https://pro.formcloud.de/formcycle/external/forms/main.xhtml</a>
125 <br/>
126 </p>
127
128 <iframe src="https://pro.formcloud.de/formcycle/external/forms/main.xhtml" width="100%" height="340px">
129 <span>Ihr Browser unterstützt keine iFrames</span>
130 </iframe>
131 {{/html}}
132
133
134 == 2. Eventlistener für Formularauswahl registrieren z.B.: ==
135
136
137
138 {{code language="javascript"}}function myFormCycleCallback(msg){
139 $('#result').html('Nachricht von: "<b>' + msg.origin + '</b>" Formular mit id: "<b>' + msg.data + '</b>" wurde ausgewählt.' );
140 renderForm(msg.data);
141 }
142
143 window.addEventListener("message", myFormCycleCallback, false);{{/code}}
144
145
146 == 3. Ergebenis speichern: ==
147
148 {{html clean="false"}}
149 <div class="hljs" id="result"></div>
150 {{/html}}
151
152
153 == 4. Formular einbinden: ==
154
gru 2.4 155 {{code language="js"}}
gru 2.2 156 window.renderForm = function(formId){
gru 3.19 157 var myBase = 'https://help6.formcycle.eu/xwiki/bin/edit/Examples/IncludeFormViaExternalContext/';
gru 2.2 158 var fcBase = 'https://pro.formcloud.de/formcycle';
159 var myFormContainer = $('#content');
160
161 var form = $.ajax({
162 type: "GET",
163 url: fcBase + '/form/provide/' + formId,
164 data:{
165 //Render-Parameter
166 "xfc-rp-inline":true, //Verwendete resourcen auflösen
167 "xfc-rp-form-only":true, //Formular ohne HTML, BODY etc.
168 "xfc-rp-usejq":false, //jQuery einbinden
169 "xfc-rp-keepalive":false, //Ping zur Sessionverlängerung
170 "xfc-rp-usecss":true, //Use Formcycle CSS files
171 "xfc-rp-useui":true, //jQueryUI einbinden
172 //Prozess-Parameter
173 "xfc-pp-external":true, //Externer Formularrequest
174 "xfc-pp-base-url":fcBase, //URL zum FormCycle
175 "xfc-pp-success-url": myBase + "/anfrage-versendet.html", //CMS Seite bei erfolg
176 "xfc-pp-error-url": myBase + "/anfrage-fehler.html" //CMS Seite bei Fehler
177 },
178 cache: false,
179 async: false,
180 success:function(html){
181 myFormContainer.html(html);
182 },
183 crossDomain: true
184 });
gru 2.4 185 }
gru 2.2 186 {{/code}}
187
188
189 == 5. Ergebenis Formular: ==
190
191 {{html clean="false"}}
192 <div class="hljs" id="content"></div>
193 {{/html}}
Copyright 2000-2025