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

Navigation

Copyright 2000-2025