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

Navigation

Copyright 2000-2025