Zeige letzte Bearbeiter
1 {{html clean="false"}}
2 <script>
3 console.log("init", typeof $);//, $.fn.jquery);
4 delete define.amd;
5 </script>
6
7 <script type="text/javascript" src="https://pro.formcloud.de/formcycle/form/includes/010-jquery-min.js?_nc=1620383292614" ></script>
8 <!--<script type="text/javascript" src="https://pro.formcloud.de/formcycle/form/includes/020-jquery-ui-min.js?_nc=20210325123132" ></script>-->
9 <script>
10 console.log("init2", typeof jQuery, jQuery.fn.jquery);
11 window.fail = $;
12 $.noConflict();
13 console.log("init2", typeof jQuery, typeof window.fail, jQuery.fn.jquery);
14 </script>
15 <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>-->
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">
43 console.log(typeof jQuery.xutil, typeof window.fail.xutil);
44 fcjq = jQuery;
45 console.log(typeof fcjq.xutil, fcjq === jQuery, jQuery === window.fail);
46 //console.log("BE",window.fcjq);
47 //$.noConflict();
48 //console.log("AF",window.fcjq);
49
50 function myFormCycleCallback(msg){
51 var formID =msg.data;
52 console.log('formID',msg.data.formId);
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');
56 if (typeof formID !== 'object' && typeof formID !== 'Object' && typeof formID !== 'undefined') {
57 //console.log("SADKJGAFGSALIFABGSFLHSAFHLSAHFLIHASIFHLIHFASILHLSAHFLIHSALIH");
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
62 myFormContainer.html('');
63 myFormContainer.html('<iframe id="xm-form" src="'+fcBase+'/form/provide/'+formID+'" style="width:100%; height:1000px" scrolling="yes" frameborder="0" />');
64
65
66 }
67 //renderForm(msg.data);
68 }
69 console.log("Adding eventlistener");
70 window.addEventListener("message", myFormCycleCallback, false);
71 console.log("Eventlistener added");
72
73 window.renderForm = function(formId){
74 var myBase = 'https://help6.formcycle.eu/xwiki/bin/edit/Examples/IncludeFormViaExternalContext/';
75 var fcBase = 'https://pro.formcloud.de/formcycle';
76 var myFormContainer = jQuery('#content');
77
78 var form = jQuery.ajax({
79 type: "GET",
80 url: fcBase + '/form/provide/' + formId,
81 data:{
82 //Render-Parameter
83 "xfc-rp-inline":true, //Verwendete resourcen auflösen
84 "xfc-rp-form-only":true, //Formular ohne HTML, BODY etc.
85 "xfc-rp-usejq":false, //jQuery einbinden
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
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
94 },
95 cache: false,
96 async: false,
97 success:function(html){
98 console.log('Form loaded:',html.length);//,html);
99 //myFormContainer.html(html);
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');
106 //myFormContainer.html(html.replace(/\$/g,'jQuery'));
107 myFormContainer.html('');
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" />');
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/>
122 <!--<a href="https://thalassa.formcycle.de/formcycle/external/forms/main.xhtml">https://thalassa.formcycle.de/formcycle/external/forms/main.xhtml</a>
123 <br/>-->
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
155 {{code language="js"}}
156 window.renderForm = function(formId){
157 var myBase = 'https://help6.formcycle.eu/xwiki/bin/edit/Examples/IncludeFormViaExternalContext/';
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 });
185 }
186 {{/code}}
187
188
189 == 5. Ergebenis Formular: ==
190
191 {{html clean="false"}}
192 <div class="hljs" id="content"></div>
193 {{/html}}

Navigation

Copyright 2000-2024