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

Navigation

Copyright 2000-2025