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

Navigation

Copyright 2000-2025