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 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":false, //Formular ohne HTML, BODY etc.
72 "xfc-rp-usejq":true, //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 },
95 crossDomain: true
96 });
97 }
98
99 </script>
100
101 <h1>Formular einbinden und "Externen Kontext" Seite verwenden</h1>
102
103 <p>
104 <h2>1. Externen Kontext via iFrame einbinden z.B.</h2>
105 <br/>
106 <br/>
107 <!--<a href="https://thalassa.formcycle.de/formcycle/external/forms/main.xhtml">https://thalassa.formcycle.de/formcycle/external/forms/main.xhtml</a>
108 <br/>-->
109 <a href="https://pro.formcloud.de/formcycle/external/forms/main.xhtml">https://pro.formcloud.de/formcycle/external/forms/main.xhtml</a>
110 <br/>
111 </p>
112
113 <iframe src="https://pro.formcloud.de/formcycle/external/forms/main.xhtml" width="100%" height="340px">
114 <span>Ihr Browser unterstützt keine iFrames</span>
115 </iframe>
116 {{/html}}
117
118
119 == 2. Eventlistener für Formularauswahl registrieren z.B.: ==
120
121
122
123 {{code language="javascript"}}function myFormCycleCallback(msg){
124 $('#result').html('Nachricht von: "<b>' + msg.origin + '</b>" Formular mit id: "<b>' + msg.data + '</b>" wurde ausgewählt.' );
125 renderForm(msg.data);
126 }
127
128 window.addEventListener("message", myFormCycleCallback, false);{{/code}}
129
130
131 == 3. Ergebenis speichern: ==
132
133 {{html clean="false"}}
134 <div class="hljs" id="result"></div>
135 {{/html}}
136
137
138 == 4. Formular einbinden: ==
139
140 {{code language="js"}}
141 window.renderForm = function(formId){
142 var myBase = 'https://download.formcycle.de/devground/ttr/fc/';
143 var fcBase = 'https://pro.formcloud.de/formcycle';
144 var myFormContainer = $('#content');
145
146 var form = $.ajax({
147 type: "GET",
148 url: fcBase + '/form/provide/' + formId,
149 data:{
150 //Render-Parameter
151 "xfc-rp-inline":true, //Verwendete resourcen auflösen
152 "xfc-rp-form-only":true, //Formular ohne HTML, BODY etc.
153 "xfc-rp-usejq":false, //jQuery einbinden
154 "xfc-rp-keepalive":false, //Ping zur Sessionverlängerung
155 "xfc-rp-usecss":true, //Use Formcycle CSS files
156 "xfc-rp-useui":true, //jQueryUI einbinden
157 //Prozess-Parameter
158 "xfc-pp-external":true, //Externer Formularrequest
159 "xfc-pp-base-url":fcBase, //URL zum FormCycle
160 "xfc-pp-success-url": myBase + "/anfrage-versendet.html", //CMS Seite bei erfolg
161 "xfc-pp-error-url": myBase + "/anfrage-fehler.html" //CMS Seite bei Fehler
162 },
163 cache: false,
164 async: false,
165 success:function(html){
166 myFormContainer.html(html);
167 },
168 crossDomain: true
169 });
170 }
171 {{/code}}
172
173
174 == 5. Ergebenis Formular: ==
175
176 {{html clean="false"}}
177 <div class="hljs" id="content"></div>
178 {{/html}}

Navigation

Copyright 2000-2025