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

Navigation

Copyright 2000-2025