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

Navigation

Copyright 2000-2025