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

Navigation

Copyright 2000-2025