Zeige letzte Bearbeiter
1 {{html clean="false"}}
2 <script type="text/javascript" src="https://pro.formcloud.de/formcycle/form/includes/010-jquery-min.js?_nc=1620383292614" ></script>
3 <script type="text/javascript" src="https://pro.formcloud.de/formcycle/form/includes/020-jquery-ui-min.js?_nc=20210325123132" ></script>
4 <script>
5 console.log("init2", typeof jQuery, jQuery.fn.jquery);
6 window.fail = $;
7 $.noConflict();
8 console.log("init2", typeof jQuery, typeof window.fail, jQuery.fn.jquery);
9 </script>
10 <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>-->
11 <style type="text/css">
12 pre{
13 margin:0;
14 }
15
16
17 .extra .hljs-string{
18 font-weight:bold;
19 color:red;
20 }
21
22 iframe, .hljs{
23 max-width:980px;
24 border:2px solid #515151;
25 }
26
27 .hljs{
28 max-width:985px;
29 }
30
31 span.box{
32 display: block;
33 padding: 20px;
34 }
35 </style>
36
37 <script type="text/javascript">
38 console.log(typeof jQuery.xutil, typeof window.fail.xutil);
39 fcjq = jQuery;
40 console.log(typeof fcjq.xutil, fcjq === jQuery, jQuery === window.fail);
41 //console.log("BE",window.fcjq);
42 //$.noConflict();
43 //console.log("AF",window.fcjq);
44
45 function myFormCycleCallback(msg){
46 console.log("SADKJGAFGSALIFABGSFLHSAFHLSAHFLIHASIFHLIHFASILHLSAHFLIHSALIH");
47 console.log('Nachricht von: "' + msg.origin + '" Formular mit id: "' + msg.data + '" wurde ausgewählt.');
48 jQuery('#result').html('Nachricht von: "' + msg.origin + '" Formular mit id: "' + msg.data + '" wurde ausgewählt.' );
49 renderForm(msg.data);
50 }
51 console.log("Adding eventlistener");
52 window.addEventListener("message", myFormCycleCallback, false);
53 console.log("Eventlistener added");
54
55 window.renderForm = function(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
60 var form = jQuery.ajax({
61 type: "GET",
62 url: fcBase + '/form/provide/' + formId,
63 data:{
64 //Render-Parameter
65 "xfc-rp-inline":true, //Verwendete resourcen auflösen
66 "xfc-rp-form-only":true, //Formular ohne HTML, BODY etc.
67 "xfc-rp-usejq":false, //jQuery einbinden
68 "xfc-rp-keepalive":false, //Ping zur Sessionverlängerung
69 "xfc-rp-usecss":true, //Use Formcycle CSS files
70 "xfc-rp-useui":true, //jQueryUI einbinden
71 //Prozess-Parameter
72 "xfc-pp-external":true, //Externer Formularrequest
73 "xfc-pp-base-url":fcBase//, //URL zum FormCycle
74 //"xfc-pp-success-url": myBase + "/anfrage-versendet.html", //CMS Seite bei erfolg
75 //"xfc-pp-error-url": myBase + "/anfrage-fehler.html" //CMS Seite bei Fehler
76 },
77 cache: false,
78 async: false,
79 success:function(html){
80 console.log('Form:',html);
81 //myFormContainer.html(html);
82 myFormContainer.html(html.replace(/\$/g,'jQuery'));
83 },
84 crossDomain: true
85 });
86 }
87
88 </script>
89
90 <h1>Formular einbinden und "Externen Kontext" Seite verwenden</h1>
91
92 <p>
93 <h2>1. Externen Kontext via iFrame einbinden z.B.</h2>
94 <br/>
95 <br/>
96 <!--<a href="https://thalassa.formcycle.de/formcycle/external/forms/main.xhtml">https://thalassa.formcycle.de/formcycle/external/forms/main.xhtml</a>
97 <br/>-->
98 <a href="https://pro.formcloud.de/formcycle/external/forms/main.xhtml">https://pro.formcloud.de/formcycle/external/forms/main.xhtml</a>
99 <br/>
100 </p>
101
102 <iframe src="https://pro.formcloud.de/formcycle/external/forms/main.xhtml" width="100%" height="340px">
103 <span>Ihr Browser unterstützt keine iFrames</span>
104 </iframe>
105 {{/html}}
106
107
108 == 2. Eventlistener für Formularauswahl registrieren z.B.: ==
109
110
111
112 {{code language="javascript"}}function myFormCycleCallback(msg){
113 $('#result').html('Nachricht von: "<b>' + msg.origin + '</b>" Formular mit id: "<b>' + msg.data + '</b>" wurde ausgewählt.' );
114 renderForm(msg.data);
115 }
116
117 window.addEventListener("message", myFormCycleCallback, false);{{/code}}
118
119
120 == 3. Ergebenis speichern: ==
121
122 {{html clean="false"}}
123 <div class="hljs" id="result"></div>
124 {{/html}}
125
126
127 == 4. Formular einbinden: ==
128
129 {{code language="js"}}
130 window.renderForm = function(formId){
131 var myBase = 'https://download.formcycle.de/devground/ttr/fc/';
132 var fcBase = 'https://pro.formcloud.de/formcycle';
133 var myFormContainer = $('#content');
134
135 var form = $.ajax({
136 type: "GET",
137 url: fcBase + '/form/provide/' + formId,
138 data:{
139 //Render-Parameter
140 "xfc-rp-inline":true, //Verwendete resourcen auflösen
141 "xfc-rp-form-only":true, //Formular ohne HTML, BODY etc.
142 "xfc-rp-usejq":false, //jQuery einbinden
143 "xfc-rp-keepalive":false, //Ping zur Sessionverlängerung
144 "xfc-rp-usecss":true, //Use Formcycle CSS files
145 "xfc-rp-useui":true, //jQueryUI einbinden
146 //Prozess-Parameter
147 "xfc-pp-external":true, //Externer Formularrequest
148 "xfc-pp-base-url":fcBase, //URL zum FormCycle
149 "xfc-pp-success-url": myBase + "/anfrage-versendet.html", //CMS Seite bei erfolg
150 "xfc-pp-error-url": myBase + "/anfrage-fehler.html" //CMS Seite bei Fehler
151 },
152 cache: false,
153 async: false,
154 success:function(html){
155 myFormContainer.html(html);
156 },
157 crossDomain: true
158 });
159 }
160 {{/code}}
161
162
163 == 5. Ergebenis Formular: ==
164
165 {{html clean="false"}}
166 <div class="hljs" id="content"></div>
167 {{/html}}

Navigation

Copyright 2000-2025