Von Version 11.10
bearbeitet von gru
am 02.03.2023, 09:19
Änderungskommentar: Es gibt keinen Kommentar für diese Version
Auf Version 7.2
bearbeitet von gru
am 05.10.2022, 12:43
Änderungskommentar: Es gibt keinen Kommentar für diese Version

Zusammenfassung

Details

Seiteneigenschaften
Titel
... ... @@ -1,1 +1,1 @@
1 -Formular über externen Kontext einbinden
1 +Formular per AJAX einbinden
Inhalt
... ... @@ -1,122 +1,161 @@
1 -== 1. Externen Kontext via iFrame einbinden z.B. ==
1 +{{html clean="false"}} <script type="text/javascript" src="https://demo7.formcycle.eu/formcycle/form/includes/010-jquery-min.js?_nc=1637667410192" ></script>
2 +<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>
2 2  
3 -[[https://pro.form.cloud/formcycle/external/forms/main.xhtml]]
4 +<style type="text/css">
5 + pre{
6 + margin:0;
7 + }
4 4  
5 -TODO: iframe
9 + .xm-form{
10 + margin:0 auto;
11 + }
6 6  
7 -== 2. Eventlistener für Formularauswahl registrieren z.B.: ==
13 + .extra .hljs-string{
14 + font-weight:bold;
15 + color:red;
16 + }
8 8  
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 -}
18 + iframe, .hljs{
19 + max-width:700px;
20 + border:2px solid #515151;
21 + }
14 14  
15 -window.addEventListener("message", myFormCycleCallback, false);
16 -{{/code}}
23 + .hljs{
24 + max-width:985px;
25 + text-align:center;
26 + }
17 17  
18 -== 3. Ergebenis speichern: ==
28 + span.box{
29 + display: block;
30 + padding: 20px;
31 + }
32 +</style>
19 19  
20 -TODO: Iframe
21 -{{html clean="false"}}
22 - <div class="hljs" id="result"></div>
23 -{{/html}}
34 +<script>
35 + console.log("before noConflict");
36 + $.noConflict();
37 + console.log("after noConflict");
24 24  
39 +window.xima.fc.form.load = (function(options, trigger){
40 +(function($, options, trigger){
25 25  
26 -== 4. Formular einbinden: ==
42 + var options = options || {},
43 + o = $.extend({
44 + 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=",
45 + 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); } }"
46 + },options);
27 27  
28 -{{code language="js"}}
29 -window.renderForm = function(formId){
30 - var myBase = 'https://help7.formcycle.eu/xwiki/bin/view/Examples/IncludeExternalContext/';
31 - var fcBase = 'https://pro.form.cloud/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}}
48 + var d = $.extend({
49 + "xfc-rp-inline":true,
50 + "xfc-rp-form-only":true,
51 + "xfc-pp-external":true,
52 + "xfc-rp-usejq":false,
53 + "xfc-rp-keepalive":false,
54 + "xfc-rp-usecss":true,
55 + "xfc-rp-useui":true,
56 + "xfc-pp-base-url": o.form_base,
57 + "fcpuid":window.xima.fc.form.fcpuid
58 + }, {"auto":"1","form_id":"253","form_container_id":"content"}, o.data);
60 60  
60 + function success(html){
61 + o.form_container.html(html.replace(/\$/g,'jQuery'));
62 + checkIsLogin();
63 + }
61 61  
62 -== 5. Ergebenis Formular: ==
65 + function error(data){
66 + o.form_container.html(data.responseText);
67 + checkIsLogin();
68 + }
63 63  
64 -{{html clean="false"}}
65 - <div class="hljs" id="content"></div>
66 -{{/html}}
70 + function renderFromLoginForm(element){
67 67  
72 + var form = element.closest('form');
73 + pass = $('INPUT[name=pass]', form),
74 + user = $('INPUT[name=user]', form);
68 68  
76 + if (user.val() && pass.val()) {
77 + render(user.val(), pass.val());
78 + }
79 + }
69 69  
81 + function checkIsLogin(){
82 + $('.xfc-template .login INPUT[type=submit]', o.form_container).click(function(){
83 + renderFromLoginForm($(this));
84 + return false;
85 + }).addClass('xm-bound-login');
86 + }
70 70  
88 + function buildLoader(){
89 + o.form_container.html('');
71 71  
91 + var l = $('<div>').addClass('xm-form-loader-icon').appendTo(o.form_container);
92 + $('<style>').text(o.loadingImageStyle).appendTo(l);
93 + $('<img>').attr('src',o.loadingImageURL).appendTo(l);
94 + }
72 72  
96 + function render(user, pass){
97 + d = (user && pass) ? $.extend(d, {
98 + "xfc-rp-username": user,
99 + "xfc-rp-password": pass
100 + }) : d;
73 73  
74 -Für das folgenden Beispiel wird zu Demonstrationszwecken eine eigene [[HTML-Seite>>attach:iframe.html]] in einem iframe dargestellt:
102 + console.log(o.form_base + '/form/provide/' + o.form_id)
75 75  
76 -{{html clean="false"}}
77 - <style type="text/css">
78 - pre{
79 - margin:0;
80 - }
104 + $.ajax($.extend({
105 + type: "GET",
106 + url: o.form_base + '/form/provide/' + o.form_id,
107 + data: d,
108 + cache: false,
109 + async: false,
110 + beforeSend:buildLoader,
111 + success: success,
112 + crossDomain: true
113 + }, options.ajax )).fail(error);
114 + }
81 81  
82 - .xm-form{
83 - margin:0 auto;
84 - }
116 + o.form_id = o.form_id;
117 + o.form_container_id = (o.form_container_id) ? o.form_container_id : 'content';
118 + o.form_container = (o.form_container_id) ? $('#'+o.form_container_id) : o.form_container;
119 + o.form_container = (o.form_container) ? o.form_container : $('.tx-xm-formcycle, .xfc-template-body').first();
120 + o.form_base = o.form_base;
121 +
122 + if (o.data && o.data.hasOwnProperty("xfc-pp-base-url")) o.form_base = o.data["xfc-pp-base-url"];
123 + if (o.form_action == 'login') $(renderFromLoginForm(trigger)); else $(render);
124 +})(jQuery, options, trigger)})
85 85  
86 - .extra .hljs-string{
87 - font-weight:bold;
88 - color:red;
89 - }
126 +jQuery( document ).ready(function() {
127 + window.xima.fc.form.load({form_container_id:'content', form_base:'https://demo7.formcycle.eu/formcycle', form_id:'564'});
128 +});
90 90  
91 - iframe, .hljs{
92 - max-width:700px;
93 - border:2px solid #515151;
94 - }
95 95  
96 - .hljs{
97 - max-width:985px;
98 - text-align:center;
99 - }
100 100  
101 - .resizer {
102 - display:flex;
103 - margin:0;
104 - padding:0;
105 - resize:both;
106 - overflow:hidden
107 - }
132 + </script>
133 + <style type="text/css">
134 + span.box{
135 + display: block;
136 + padding: 20px;
137 + }
138 + </style>{{/html}}
108 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; }
117 - </style>
140 +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"]].
118 118  
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>
142 + {{code}} <!DOCTYPE html>
143 + <html>
144 + <head>
145 + <meta charset="utf-8">
146 + <!-- jQuery must be loaded-->
147 + <script src="https://demo7.formcycle.eu/formcycle/form/includes/010-jquery-min.js?_nc=1637667410192"></script>
148 + <!-- configure path to your server, the id of the content element where the form should placed into and id of the form.-->
149 + <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>
150 + </head>
151 +
152 + <body class="body">
153 + <!-- this is the div where the form will be placed into -->
154 + <div id="content"></div>
155 + </body>
156 + </html>
157 + {{/code}}
158 +
159 +{{html clean="false"}}
160 + <div class="hljs" id="content"></div>
122 122  {{/html}}
iframe.html
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.gru
Größe
... ... @@ -1,1 +1,0 @@
1 -893 bytes
Inhalt
... ... @@ -1,22 +1,0 @@
1 -<!DOCTYPE html>
2 -<html>
3 - <head>
4 - <meta charset="utf-8">
5 - <!-- jQuery must be loaded-->
6 - <script src="https://demo7.formcycle.eu/formcycle/form/includes/010-jquery-min.js?_nc=1637667410192"></script>
7 - <!-- configure path to your server, the id of the content element where the form should placed into and id of the form.-->
8 - <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>
9 - <style>
10 - h1.page, p.page {
11 - text-align: center;
12 - }
13 - </style>
14 - </head>
15 -
16 - <body class="body">
17 - <h1 class="page">Beispielwebseite</h1>
18 - <p class="page">Mit dem obenstehenden Code kann ein FORMCYCLE Formular per AJAX in die Website geladen werden.</p>
19 - <!-- this is the div where the form will be placed into -->
20 - <div id="content"></div>
21 - </body>
22 -</html>