Änderungen von Dokument Formular über externen Kontext einbinden

Zusammenfassung

• Seiteneigenschaften (2 geändert, 0 hinzugefügt, 0 gelöscht)
• Anhänge (0 geändert, 1 hinzugefügt, 0 gelöscht)
  • iframe.html

Details

Seiteneigenschaften

Dokument-Autor

...	...	@@ -1,1 +1,1 @@
1		-XWiki.sas
	1	+XWiki.gru

Inhalt

...	...	@@ -1,139 +1,12 @@
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%2Fdemo2.formcycle.eu%2Fformcycle&auto=1&form_container_id=content" ></script>
3		-
4		-<style type="text/css">
5		- pre{
6		- margin:0;
7		- }
8		-
9		-.xm-form{
10		-margin:0 auto;
11		-}
12		-
13		- .extra .hljs-string{
14		- font-weight:bold;
15		- color:red;
16		- }
17		-
18		- iframe, .hljs{
19		- max-width:700px;
20		- border:2px solid #515151;
21		- }
22		-
23		- .hljs{
24		- max-width:985px;
25		-text-align:center;
26		- }
27		-
28		- span.box{
29		- display: block;
30		- padding: 20px;
31		- }
	1	+{{html clean="false"}}
	2	+ <style type="text/css">
	3	+ span.box{
	4	+ display: block;
	5	+ padding: 20px;
	6	+ }
32	32	</style>
	8	+{{/html}}
33	33
34		- <script>
35		- $.noConflict();
36		-
37		-window.xima.fc.form.load = (function(options, trigger){
38		-(function($, options, trigger){
39		-
40		- var options = options || {},
41		- o = $.extend({
42		- 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=",
43		- 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); } }"
44		- },options);
45		-
46		- var d = $.extend({
47		- "xfc-rp-inline":true,
48		- "xfc-rp-form-only":true,
49		- "xfc-pp-external":true,
50		- "xfc-rp-usejq":false,
51		- "xfc-rp-keepalive":false,
52		- "xfc-rp-usecss":true,
53		- "xfc-rp-useui":true,
54		- "xfc-pp-base-url": o.form_base,
55		- "fcpuid":window.xima.fc.form.fcpuid
56		- }, {"auto":"1","form_id":"253","form_container_id":"content"}, o.data);
57		-
58		- function success(html){
59		- o.form_container.html(html.replace(/\$/g,'jQuery'));
60		- checkIsLogin();
61		- }
62		-
63		- function error(data){
64		- o.form_container.html(data.responseText);
65		- checkIsLogin();
66		- }
67		-
68		- function renderFromLoginForm(element){
69		-
70		- var form = element.closest('form');
71		- pass = $('INPUT[name=pass]', form),
72		- user = $('INPUT[name=user]', form);
73		-
74		- if (user.val() && pass.val()) {
75		- render(user.val(), pass.val());
76		- }
77		- }
78		-
79		- function checkIsLogin(){
80		- $('.xfc-template .login INPUT[type=submit]', o.form_container).click(function(){
81		- renderFromLoginForm($(this));
82		- return false;
83		- }).addClass('xm-bound-login');
84		- }
85		-
86		- function buildLoader(){
87		- o.form_container.html('');
88		-
89		- var l = $('<div>').addClass('xm-form-loader-icon').appendTo(o.form_container);
90		- $('<style>').text(o.loadingImageStyle).appendTo(l);
91		- $('<img>').attr('src',o.loadingImageURL).appendTo(l);
92		- }
93		-
94		- function render(user, pass){
95		- d = (user && pass) ? $.extend(d, {
96		- "xfc-rp-username": user,
97		- "xfc-rp-password": pass
98		- }) : d;
99		-
100		- console.log(o.form_base + '/form/provide/' + o.form_id)
101		-
102		- $.ajax($.extend({
103		- type: "GET",
104		- url: o.form_base + '/form/provide/' + o.form_id,
105		- data: d,
106		- cache: false,
107		- async: false,
108		- beforeSend:buildLoader,
109		- success: success,
110		- crossDomain: true
111		- }, options.ajax )).fail(error);
112		- }
113		-
114		- o.form_id = o.form_id;
115		- o.form_container_id = (o.form_container_id) ? o.form_container_id : 'content';
116		- o.form_container = (o.form_container_id) ? $('#'+o.form_container_id) : o.form_container;
117		- o.form_container = (o.form_container) ? o.form_container : $('.tx-xm-formcycle, .xfc-template-body').first();
118		- o.form_base = o.form_base;
119		- if (o.data && o.data.hasOwnProperty("xfc-pp-base-url")) o.form_base = o.data["xfc-pp-base-url"];
120		- if (o.form_action == 'login') $(renderFromLoginForm(trigger)); else $(render);
121		-})(jQuery, options, trigger)})
122		-
123		-jQuery( document ).ready(function() {
124		-window.xima.fc.form.load({form_container_id:'content', form_base:'https://demo.formcycle.eu/formcycle', form_id:'253'});
125		-});
126		-
127		-
128		-
129		- </script>
130		- <style type="text/css">
131		- span.box{
132		- display: block;
133		- padding: 20px;
134		- }
135		- </style>{{/html}}
136		-
137	137	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"]].
138	138
139	139	{{code}} <!DOCTYPE html>
...	...	@@ -145,8 +145,8 @@
145	145	<!-- configure path to your server, the id of the content element where the form should placed into and id of the form.-->
146	146	<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>
147	147	</head>
148		-
149		- <body class="body">
	21	+
	22	+ <body class="body">
150	150	<!-- this is the div where the form will be placed into -->
151	151	<div id="content"></div>
152	152	</body>
...	...	@@ -153,6 +153,53 @@
153	153	</html>
154	154	{{/code}}
155	155
	29	+Die Einbindung erfolgt hier zur Demonstration in eine eigene HTML-Seite in einem iframe:
	30	+
156	156	{{html clean="false"}}
157		- <div class="hljs" id="content"></div>
	32	+ <style type="text/css">
	33	+ pre{
	34	+ margin:0;
	35	+ }
	36	+
	37	+ .xm-form{
	38	+ margin:0 auto;
	39	+ }
	40	+
	41	+ .extra .hljs-string{
	42	+ font-weight:bold;
	43	+ color:red;
	44	+ }
	45	+
	46	+ iframe, .hljs{
	47	+ max-width:700px;
	48	+ border:2px solid #515151;
	49	+ }
	50	+
	51	+ .hljs{
	52	+ max-width:985px;
	53	+ text-align:center;
	54	+ }
	55	+
	56	+ .resizer {
	57	+ display:flex;
	58	+ margin:0;
	59	+ padding:0;
	60	+ resize:both;
	61	+ overflow:hidden
	62	+ }
	63	+
	64	+ .resizer > .resized {
	65	+ flex-grow:1;
	66	+ margin:0;
	67	+ padding:0;
	68	+ border:0;
	69	+ width: 100%;
	70	+ height: inherit;
	71	+ }
	72	+ .border { border:4px dashed black; }
	73	+ </style>
	74	+
	75	+ <div class="resizer border" style="height: 1000px;">
	76	+ <iframe id="customerdemo" class="resized" src="https://help7.formcycle.eu/xwiki/bin/download/Examples/IncludeAJAX/iframe.html"></iframe>
	77	+ </div>
158	158	{{/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>