Von Version 7.2
bearbeitet von gru
am 05.10.2022, 12:43
Änderungskommentar: Es gibt keinen Kommentar für diese Version
Auf Version 9.8
bearbeitet von gru
am 05.10.2022, 13:45
Änderungskommentar: Es gibt keinen Kommentar für diese Version

Zusammenfassung

Details

Seiteneigenschaften
Inhalt
... ... @@ -1,7 +1,35 @@
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>
1 +{{html clean="false"}}
2 + <style type="text/css">
3 + span.box{
4 + display: block;
5 + padding: 20px;
6 + }
7 + </style>
8 +{{/html}}
3 3  
4 -<style type="text/css">
10 +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"]].
11 +
12 + {{code}} <!DOCTYPE html>
13 + <html>
14 + <head>
15 + <meta charset="utf-8">
16 + <!-- jQuery must be loaded-->
17 + <script src="https://demo7.formcycle.eu/formcycle/form/includes/010-jquery-min.js?_nc=1637667410192"></script>
18 + <!-- configure path to your server, the id of the content element where the form should placed into and id of the form.-->
19 + <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>
20 + </head>
21 +
22 + <body class="body">
23 + <!-- this is the div where the form will be placed into -->
24 + <div id="content"></div>
25 + </body>
26 + </html>
27 + {{/code}}
28 +
29 +Die Einbindung erfolgt hier zur Demonstration in eine eigene HTML-Seite in einem iframe:
30 +
31 +{{html clean="false"}}
32 + <style type="text/css">
5 5   pre{
6 6   margin:0;
7 7   }
... ... @@ -25,137 +25,26 @@
25 25   text-align:center;
26 26   }
27 27  
28 - span.box{
29 - display: block;
30 - padding: 20px;
56 + .resizer {
57 + display:flex;
58 + margin:0;
59 + padding:0;
60 + resize:both;
61 + overflow:hidden
31 31   }
32 -</style>
33 33  
34 -<script>
35 - console.log("before noConflict");
36 - $.noConflict();
37 - console.log("after noConflict");
64 + .resizer > .resized {
65 + flex-grow:1;
66 + margin:0;
67 + padding:0;
68 + border:0;
69 + width: 100%;
70 +height: 1000px;
71 + }
72 + .ugly { border:4px dashed black; }
73 + </style>
38 38  
39 -window.xima.fc.form.load = (function(options, trigger){
40 -(function($, options, trigger){
41 -
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);
47 -
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);
59 -
60 - function success(html){
61 - o.form_container.html(html.replace(/\$/g,'jQuery'));
62 - checkIsLogin();
63 - }
64 -
65 - function error(data){
66 - o.form_container.html(data.responseText);
67 - checkIsLogin();
68 - }
69 -
70 - function renderFromLoginForm(element){
71 -
72 - var form = element.closest('form');
73 - pass = $('INPUT[name=pass]', form),
74 - user = $('INPUT[name=user]', form);
75 -
76 - if (user.val() && pass.val()) {
77 - render(user.val(), pass.val());
78 - }
79 - }
80 -
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 - }
87 -
88 - function buildLoader(){
89 - o.form_container.html('');
90 -
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 - }
95 -
96 - function render(user, pass){
97 - d = (user && pass) ? $.extend(d, {
98 - "xfc-rp-username": user,
99 - "xfc-rp-password": pass
100 - }) : d;
101 -
102 - console.log(o.form_base + '/form/provide/' + o.form_id)
103 -
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 - }
115 -
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)})
125 -
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 -});
129 -
130 -
131 -
132 - </script>
133 - <style type="text/css">
134 - span.box{
135 - display: block;
136 - padding: 20px;
137 - }
138 - </style>{{/html}}
139 -
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"]].
141 -
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>
75 + <div class="resizer ugly">
76 + <iframe id="customerdemo" class="resized" src="https://help7.formcycle.eu/xwiki/bin/download/Examples/IncludeAJAX/iframe.html"></iframe>
77 + </div>
161 161  {{/html}}
iframe.html
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.gru
Größe
... ... @@ -1,0 +1,1 @@
1 +788 bytes
Inhalt
... ... @@ -1,0 +1,17 @@
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 + </head>
10 +
11 + <body class="body">
12 + <h1>Beispielwebseite</h1>
13 + <p>Mit dem obenstehenden Code kann ein FORMCYCLE Formular per AJAX in die Website geladen werden.</p>
14 + <!-- this is the div where the form will be placed into -->
15 + <div id="content"></div>
16 + </body>
17 +</html>