Von Version 1.1 >
bearbeitet von gru
am 07.05.2021, 10:34
Auf Version < 2.2 >
bearbeitet von gru
am 07.05.2021, 10:36
>
Änderungskommentar: Es gibt keinen Kommentar für diese Version

Zusammenfassung

Details

Seiteneigenschaften
Titel
... ... @@ -1,1 +1,1 @@
1 -IncludeFormViaExternalContext
1 +Formular über externen Kontext einbinden
Inhalt
... ... @@ -1,1 +1,152 @@
1 -TBD
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 + jQuery('#result').html('Nachricht von: "' + msg.origin + '" Formular mit id: "' + msg.data + '" wurde ausgewählt.' );
36 + renderForm(msg.data);
37 + }
38 +
39 + window.addEventListener("message", myFormCycleCallback, false);
40 +
41 +window.renderForm = function(formId){
42 + var myBase = 'https://download.formcycle.de/devground/ttr/fc/';
43 + var fcBase = 'https://pro.formcloud.de/formcycle';
44 + var myFormContainer = jQuery('#content');
45 +
46 + var form = jQuery.ajax({
47 + type: "GET",
48 + url: fcBase + '/form/provide/' + formId,
49 + data:{
50 + //Render-Parameter
51 + "xfc-rp-inline":true, //Verwendete resourcen auflösen
52 + "xfc-rp-form-only":true, //Formular ohne HTML, BODY etc.
53 + "xfc-rp-usejq":false, //jQuery einbinden
54 + "xfc-rp-keepalive":false, //Ping zur Sessionverlängerung
55 + "xfc-rp-usecss":true, //Use Formcycle CSS files
56 + "xfc-rp-useui":true, //jQueryUI einbinden
57 + //Prozess-Parameter
58 + "xfc-pp-external":true, //Externer Formularrequest
59 + "xfc-pp-base-url":fcBase, //URL zum FormCycle
60 + "xfc-pp-success-url": myBase + "/anfrage-versendet.html", //CMS Seite bei erfolg
61 + "xfc-pp-error-url": myBase + "/anfrage-fehler.html" //CMS Seite bei Fehler
62 + },
63 + cache: false,
64 + async: false,
65 + success:function(html){
66 + myFormContainer.html(html.replace(/\$/g,'jQuery'));
67 + },
68 + crossDomain: true
69 + });
70 +}
71 +
72 + </script>
73 +
74 + <h1>Formular einbinden und "Externen Kontext" Seite verwenden</h1>
75 +
76 + <p>
77 + <h2>1. Externen Kontext via iFrame einbinden z.B.</h2>
78 + <br/>
79 + <br/>
80 + <a href="https://thalassa.formcycle.de/formcycle/external/forms/main.xhtml">https://thalassa.formcycle.de/formcycle/external/forms/main.xhtml</a>
81 + <br/>
82 + <a href="https://pro.formcloud.de/formcycle/external/forms/main.xhtml">https://pro.formcloud.de/formcycle/external/forms/main.xhtml</a>
83 + <br/>
84 + </p>
85 +
86 + <iframe src="https://pro.formcloud.de/formcycle/external/forms/main.xhtml" width="100%" height="340px">
87 + <span>Ihr Browser unterstützt keine iFrames</span>
88 + </iframe>
89 +{{/html}}
90 +
91 +
92 +== 2. Eventlistener für Formularauswahl registrieren z.B.: ==
93 +
94 +
95 +
96 +{{code language="javascript"}}function myFormCycleCallback(msg){
97 + $('#result').html('Nachricht von: "<b>' + msg.origin + '</b>" Formular mit id: "<b>' + msg.data + '</b>" wurde ausgewählt.' );
98 + renderForm(msg.data);
99 +}
100 +
101 +window.addEventListener("message", myFormCycleCallback, false);{{/code}}
102 +
103 +
104 +== 3. Ergebenis speichern: ==
105 +
106 +{{html clean="false"}}
107 + <div class="hljs" id="result"></div>
108 +{{/html}}
109 +
110 +
111 +== 4. Formular einbinden: ==
112 +
113 +{{code}}
114 +
115 +window.renderForm = function(formId){
116 + var myBase = 'https://download.formcycle.de/devground/ttr/fc/';
117 + var fcBase = 'https://pro.formcloud.de/formcycle';
118 + var myFormContainer = $('#content');
119 +
120 + var form = $.ajax({
121 + type: "GET",
122 + url: fcBase + '/form/provide/' + formId,
123 + data:{
124 + //Render-Parameter
125 + "xfc-rp-inline":true, //Verwendete resourcen auflösen
126 + "xfc-rp-form-only":true, //Formular ohne HTML, BODY etc.
127 + "xfc-rp-usejq":false, //jQuery einbinden
128 + "xfc-rp-keepalive":false, //Ping zur Sessionverlängerung
129 + "xfc-rp-usecss":true, //Use Formcycle CSS files
130 + "xfc-rp-useui":true, //jQueryUI einbinden
131 + //Prozess-Parameter
132 + "xfc-pp-external":true, //Externer Formularrequest
133 + "xfc-pp-base-url":fcBase, //URL zum FormCycle
134 + "xfc-pp-success-url": myBase + "/anfrage-versendet.html", //CMS Seite bei erfolg
135 + "xfc-pp-error-url": myBase + "/anfrage-fehler.html" //CMS Seite bei Fehler
136 + },
137 + cache: false,
138 + async: false,
139 + success:function(html){
140 + myFormContainer.html(html);
141 + },
142 + crossDomain: true
143 + });
144 +}
145 +{{/code}}
146 +
147 +
148 +== 5. Ergebenis Formular: ==
149 +
150 +{{html clean="false"}}
151 + <div class="hljs" id="content"></div>
152 +{{/html}}
XWiki.XWikiRights[0]
Erlauben/Verbieten
... ... @@ -1,0 +1,1 @@
1 +Verbieten
Ebenen
... ... @@ -1,0 +1,1 @@
1 +login,view,edit,delete,creator,register,comment,script,admin,createwiki,programming,Like
Benutzer
... ... @@ -1,0 +1,1 @@
1 +XWiki.XWikiGuest

Navigation

Copyright 2000-2025