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

Navigation

Copyright 2000-2025