Von Version 8.1
bearbeitet von gru
am 05.10.2022, 13:25
Änderungskommentar: Neuen Anhang iframe.html hochladen
Auf Version 11.9
bearbeitet von gru
am 02.03.2023, 09:16
Änderungskommentar: Es gibt keinen Kommentar für diese Version

Zusammenfassung

Details

Seiteneigenschaften
Titel
... ... @@ -1,1 +1,1 @@
1 -Formular per AJAX einbinden
1 +Formular über externen Kontext einbinden
Inhalt
... ... @@ -1,129 +1,77 @@
1 -{{html clean="false"}}
1 +== 1. Externen Kontext via iFrame einbinden z.B. ==
2 2  
3 -<script>
4 -/* console.log("before noConflict");
5 - $.noConflict();
6 - console.log("after noConflict");
3 +[[https://pro.form.cloud/formcycle/external/forms/main.xhtml]]
7 7  
8 -window.xima.fc.form.load = (function(options, trigger){
9 -(function($, options, trigger){
5 +TODO: iframe
10 10  
11 - var options = options || {},
12 - o = $.extend({
13 - loadingImageURL : window.xima.fc.form.loadingImageURL || "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAACXBIWXMAAC4jAAAuIwF4pT92AAABymlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS40LjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIj4KICAgICAgICAgPHhtcDpDcmVhdG9yVG9vbD5wYWludC5uZXQgNC4wLjU8L3htcDpDcmVhdG9yVG9vbD4KICAgICAgICAgPHRpZmY6T3JpZW50YXRpb24+MTwvdGlmZjpPcmllbnRhdGlvbj4KICAgICAgPC9yZGY6RGVzY3JpcHRpb24+CiAgIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+CqgdUBYAAAKgSURBVCgVbVJbS1RRFP7WPufMGS/TKKJm2EXQAgctRBIywggCSYQCX3oSiyLEqJcIujAPQfUfCowepcKnKCotMCy8lJeHIhALxQujoc4457ZX6zhiEH0Pe5+9z1rr+/a3FvE4DoBwDgqm70fHrIbsm56eVntocnenJt4H5gyIGBqQGDkiAFO+XM0Qf0IJbAyjCtU8Yy1SlVdLcf59/HTnbJZilRy4MExbMgUkyTqAFclDZi01b1ITUvwFN/ATz6kY5ZjDdYm6o7kzxdqp9H1vIfDcCaKQVLgZnudk4sI8nqsoK39FP89ZzFOYX3hX24TyCwOn2ru57kTn252gZFKE/4XiEVhbR42HvAQfBaiIx5avoYjNdReImn+DkUyGL9+BiUb4okeJrI/BuNFL+d5FRfpQ8/7A+JXW2BtlG81dsfoCTyvXsOw8T/ueS1gtzpihBzwIQ8pplyvuRZdnzsqVtbKpPFOE+Iwjh009Ql4YAnY2LZFuRTjuXMqJer/VCOQ1zMzypFgmf1dccmIRsQhUYEaiB4VEIGeRqMiAl82U5JLbhDkpzGOxLsTX62mJhkttjmTJhGL/m+c690khkAI5etbKtHjI5AGY1AhPjC/ScG4iLEfkLDug0sKwMzw/8aH3yRbxP4uJllCLwMBVFeMapADXi75Y/Gy017aJL2tkJBIdkenphF/dmrLiS86W46OjewJTnhAIa42U6EZEihBeHbt78lHZUf+8r21oGY7p6T5pWh9+vITs22TykWu6kqmKoyxklVF9MPH6aTpRrO20q8ORCplyfiG5vcuNQAnrGeTjCnYBga+eUQ0GEy0dhesuFdiRqISQ/Pk/xE5sYgO3kcamr6P9gIPLdRve46nYrSC9WqWU+i6pOV+Q3N5zxf4AusodlJW0va8AAAAASUVORK5CYII=",
14 - loadingImageStyle : window.xima.fc.form.loadingImageStyle || ".xm-form-loader-icon { text-align:center; -webkit-animation: spin 0.5s ease-in-out infinite; -moz-animation: spin 0.5s ease-in-out infinite; animation: spin 0.5s ease-in-out infinite;} @-moz-keyframes spin { 100% { -moz-transform: rotateY(360deg); } }@-webkit-keyframes spin { 100% { -webkit-transform: rotateY(360deg); } }@keyframes spin { 100% { -webkit-transform: rotateY(360deg); transform:rotateY(360deg); } }"
15 - },options);
7 +== 2. Eventlistener für Formularauswahl registrieren z.B.: ==
16 16  
17 - var d = $.extend({
18 - "xfc-rp-inline":true,
19 - "xfc-rp-form-only":true,
20 - "xfc-pp-external":true,
21 - "xfc-rp-usejq":false,
22 - "xfc-rp-keepalive":false,
23 - "xfc-rp-usecss":true,
24 - "xfc-rp-useui":true,
25 - "xfc-pp-base-url": o.form_base,
26 - "fcpuid":window.xima.fc.form.fcpuid
27 - }, {"auto":"1","form_id":"253","form_container_id":"content"}, o.data);
9 +{{code language="javascript"}}
10 +function myFormCycleCallback(msg){
11 + $('#result').html('Nachricht von: "<b>' + msg.origin + '</b>" Formular mit id: "<b>' + msg.data + '</b>" wurde ausgewählt.' );
12 + renderForm(msg.data);
13 +}
28 28  
29 - function success(html){
30 - o.form_container.html(html.replace(/\$/g,'jQuery'));
31 - checkIsLogin();
32 - }
15 +window.addEventListener("message", myFormCycleCallback, false);
16 +{{/code}}
33 33  
34 - function error(data){
35 - o.form_container.html(data.responseText);
36 - checkIsLogin();
37 - }
38 38  
39 - function renderFromLoginForm(element){
19 +== 3. Ergebenis speichern: ==
40 40  
41 - var form = element.closest('form');
42 - pass = $('INPUT[name=pass]', form),
43 - user = $('INPUT[name=user]', form);
21 +{{html clean="false"}}
22 + <div class="hljs" id="result"></div>
23 +{{/html}}
44 44  
45 - if (user.val() && pass.val()) {
46 - render(user.val(), pass.val());
47 - }
48 - }
49 49  
50 - function checkIsLogin(){
51 - $('.xfc-template .login INPUT[type=submit]', o.form_container).click(function(){
52 - renderFromLoginForm($(this));
53 - return false;
54 - }).addClass('xm-bound-login');
55 - }
26 +== 4. Formular einbinden: ==
56 56  
57 - function buildLoader(){
58 - o.form_container.html('');
28 +{{code language="js"}}
29 +window.renderForm = function(formId){
30 + var myBase = 'https://help6.formcycle.eu/xwiki/bin/edit/Examples/IncludeFormViaExternalContext/';
31 + var fcBase = 'https://pro.formcloud.de/formcycle';
32 + var myFormContainer = $('#content');
33 +
34 + var form = $.ajax({
35 + type: "GET",
36 + url: fcBase + '/form/provide/' + formId,
37 + data:{
38 + //Render-Parameter
39 + "xfc-rp-inline":true, //Verwendete resourcen auflösen
40 + "xfc-rp-form-only":true, //Formular ohne HTML, BODY etc.
41 + "xfc-rp-usejq":false, //jQuery einbinden
42 + "xfc-rp-keepalive":false, //Ping zur Sessionverlängerung
43 + "xfc-rp-usecss":true, //Use Formcycle CSS files
44 + "xfc-rp-useui":true, //jQueryUI einbinden
45 + //Prozess-Parameter
46 + "xfc-pp-external":true, //Externer Formularrequest
47 + "xfc-pp-base-url":fcBase, //URL zum FormCycle
48 + "xfc-pp-success-url": myBase + "/anfrage-versendet.html", //CMS Seite bei erfolg
49 + "xfc-pp-error-url": myBase + "/anfrage-fehler.html" //CMS Seite bei Fehler
50 + },
51 + cache: false,
52 + async: false,
53 + success:function(html){
54 + myFormContainer.html(html);
55 + },
56 + crossDomain: true
57 + });
58 +}
59 +{{/code}}
59 59  
60 - var l = $('<div>').addClass('xm-form-loader-icon').appendTo(o.form_container);
61 - $('<style>').text(o.loadingImageStyle).appendTo(l);
62 - $('<img>').attr('src',o.loadingImageURL).appendTo(l);
63 - }
64 64  
65 - function render(user, pass){
66 - d = (user && pass) ? $.extend(d, {
67 - "xfc-rp-username": user,
68 - "xfc-rp-password": pass
69 - }) : d;
62 +== 5. Ergebenis Formular: ==
70 70  
71 - console.log(o.form_base + '/form/provide/' + o.form_id)
64 +{{html clean="false"}}
65 + <div class="hljs" id="content"></div>
66 +{{/html}}
72 72  
73 - $.ajax($.extend({
74 - type: "GET",
75 - url: o.form_base + '/form/provide/' + o.form_id,
76 - data: d,
77 - cache: false,
78 - async: false,
79 - beforeSend:buildLoader,
80 - success: success,
81 - crossDomain: true
82 - }, options.ajax )).fail(error);
83 - }
84 84  
85 - o.form_id = o.form_id;
86 - o.form_container_id = (o.form_container_id) ? o.form_container_id : 'content';
87 - o.form_container = (o.form_container_id) ? $('#'+o.form_container_id) : o.form_container;
88 - o.form_container = (o.form_container) ? o.form_container : $('.tx-xm-formcycle, .xfc-template-body').first();
89 - o.form_base = o.form_base;
90 -
91 - if (o.data && o.data.hasOwnProperty("xfc-pp-base-url")) o.form_base = o.data["xfc-pp-base-url"];
92 - if (o.form_action == 'login') $(renderFromLoginForm(trigger)); else $(render);
93 -})(jQuery, options, trigger)})
94 94  
95 -jQuery( document ).ready(function() {
96 - window.xima.fc.form.load({form_container_id:'content', form_base:'https://demo7.formcycle.eu/formcycle', form_id:'564'});
97 -});
98 98  
99 -*/
100 100  
101 - </script>
102 - <style type="text/css">
103 - span.box{
104 - display: block;
105 - padding: 20px;
106 - }
107 - </style>{{/html}}
108 108  
109 -Sie können das Formular direkt per AJAX ohne IFrames in Ihre Webseite einbinden. Unterstützung der möglichen Einbindungsoptionen finde Sie in FORMCYCLE direkt unter [[Veröffentlichen>>doc:Formcycle.UserInterface.MyForms.Publish.WebHome||target="_blank"]].
110 110  
111 - {{code}} <!DOCTYPE html>
112 - <html>
113 - <head>
114 - <meta charset="utf-8">
115 - <!-- jQuery must be loaded-->
116 - <script src="https://demo7.formcycle.eu/formcycle/form/includes/010-jquery-min.js?_nc=1637667410192"></script>
117 - <!-- configure path to your server, the id of the content element where the form should placed into and id of the form.-->
118 - <script src="https://demo7.formcycle.eu/formcycle/form/include.js?auto=1&form_container_id=content&form_id=564&form_base=https://demo7.formcycle.eu/formcycle"></script>
119 - </head>
120 -
121 - <body class="body">
122 - <!-- this is the div where the form will be placed into -->
123 - <div id="content"></div>
124 - </body>
125 - </html>
126 - {{/code}}
74 +Für das folgenden Beispiel wird zu Demonstrationszwecken eine eigene [[HTML-Seite>>attach:iframe.html]] in einem iframe dargestellt:
127 127  
128 128  {{html clean="false"}}
129 129   <style type="text/css">
... ... @@ -150,17 +150,25 @@
150 150   text-align:center;
151 151   }
152 152  
153 - span.box{
154 - display: block;
155 - padding: 20px;
101 + .resizer {
102 + display:flex;
103 + margin:0;
104 + padding:0;
105 + resize:both;
106 + overflow:hidden
156 156   }
108 +
109 + .resizer > .resized {
110 + flex-grow:1;
111 + margin:0;
112 + padding:0;
113 + border:0;
114 + height: inherit;
115 + }
116 + .border { border:4px dashed black; }
157 157   </style>
158 158  
159 -
160 - <iframe id="customerdemo" style="width:100%; height:600px">
161 -
162 - <div class="hljs" id="content"></div>
163 - <script type="text/javascript" src="https://demo7.formcycle.eu/formcycle/form/includes/010-jquery-min.js?_nc=1637667410192" ></script>
164 - <script type="text/javascript" src="https://demo7.formcycle.eu/formcycle/form/include.js?form_id=564&form_base=https%3A%2F%2Fdemo7.formcycle.eu%2Fformcycle&auto=1&form_container_id=content" ></script>
165 - </iframe>
119 + <div class="resizer border" style="height: 1000px;">
120 + <iframe id="customerdemo" class="resized" src="https://help7.formcycle.eu/xwiki/bin/download/Examples/IncludeAJAX/iframe.html"></iframe>
121 + </div>
166 166  {{/html}}