Änderungen von Dokument Formular über externen Kontext einbinden

Zusammenfassung

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

Details

Seiteneigenschaften

Dokument-Autor

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

Inhalt

...	...	@@ -1,52 +1,81 @@
1		-{{html clean="false"}}
	1	+{{html clean="false"}} <script type="text/javascript" src="https://demo2.formcycle.eu/formcycle/form/includes/010-jquery-min.js?_nc=1601035790902" ></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>
2	2
3		-<script>
4		-/* console.log("before noConflict");
5		- $.noConflict();
6		- console.log("after noConflict");
	4	+<style type="text/css">
	5	+ pre{
	6	+ margin:0;
	7	+ }
7	7
8		-window.xima.fc.form.load = (function(options, trigger){
9		-(function($, options, trigger){
	9	+.xm-form{
	10	+margin:0 auto;
	11	+}
	12	+
	13	+ .extra .hljs-string{
	14	+ font-weight:bold;
	15	+ color:red;
	16	+ }
10	10
11		- var options = options || {},
	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	+ }
	32	+ </style>
	33	+
	34	+ <script>
	35	+ $.noConflict();
	36	+
	37	+window.xima.fc.form.load = (function(options, trigger){
	38	+(function($, options, trigger){
	39	+
	40	+ var options = options || {},
12	12	o = $.extend({
13	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	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	15	},options);
16		-
	45	+
17	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,
	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,
25	25	"xfc-pp-base-url": o.form_base,
26	26	"fcpuid":window.xima.fc.form.fcpuid
27	27	}, {"auto":"1","form_id":"253","form_container_id":"content"}, o.data);
28		-
	57	+
29	29	function success(html){
30	30	o.form_container.html(html.replace(/\$/g,'jQuery'));
31	31	checkIsLogin();
32	32	}
33		-
	62	+
34	34	function error(data){
35	35	o.form_container.html(data.responseText);
36	36	checkIsLogin();
37	37	}
38		-
	67	+
39	39	function renderFromLoginForm(element){
40		-
	69	+
41	41	var form = element.closest('form');
42	42	pass = $('INPUT[name=pass]', form),
43	43	user = $('INPUT[name=user]', form);
44		-
	73	+
45	45	if (user.val() && pass.val()) {
46	46	render(user.val(), pass.val());
47	47	}
48	48	}
49		-
	78	+
50	50	function checkIsLogin(){
51	51	$('.xfc-template .login INPUT[type=submit]', o.form_container).click(function(){
52	52	renderFromLoginForm($(this));
...	...	@@ -56,20 +56,20 @@
56	56
57	57	function buildLoader(){
58	58	o.form_container.html('');
59		-
	88	+
60	60	var l = $('<div>').addClass('xm-form-loader-icon').appendTo(o.form_container);
61	61	$('<style>').text(o.loadingImageStyle).appendTo(l);
62	62	$('<img>').attr('src',o.loadingImageURL).appendTo(l);
63	63	}
64		-
	93	+
65	65	function render(user, pass){
66	66	d = (user && pass) ? $.extend(d, {
67	67	"xfc-rp-username": user,
68	68	"xfc-rp-password": pass
69	69	}) : d;
70		-
	99	+
71	71	console.log(o.form_base + '/form/provide/' + o.form_id)
72		-
	101	+
73	73	$.ajax($.extend({
74	74	type: "GET",
75	75	url: o.form_base + '/form/provide/' + o.form_id,
...	...	@@ -81,23 +81,22 @@
81	81	crossDomain: true
82	82	}, options.ajax )).fail(error);
83	83	}
84		-
85		- o.form_id = o.form_id;
	113	+
	114	+ o.form_id = o.form_id;
86	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;
	116	+ o.form_container = (o.form_container_id) ? $('#'+o.form_container_id) : o.form_container;
88	88	o.form_container = (o.form_container) ? o.form_container : $('.tx-xm-formcycle, .xfc-template-body').first();
89	89	o.form_base = o.form_base;
90		-
91	91	if (o.data && o.data.hasOwnProperty("xfc-pp-base-url")) o.form_base = o.data["xfc-pp-base-url"];
92	92	if (o.form_action == 'login') $(renderFromLoginForm(trigger)); else $(render);
93	93	})(jQuery, options, trigger)})
94	94
95	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'});
	124	+window.xima.fc.form.load({form_container_id:'content', form_base:'https://demo.formcycle.eu/formcycle', form_id:'253'});
97	97	});
98	98
99		-*/
100	100
	128	+
101	101	</script>
102	102	<style type="text/css">
103	103	span.box{
...	...	@@ -113,7 +113,7 @@
113	113	<head>
114	114	<meta charset="utf-8">
115	115	<!-- jQuery must be loaded-->
116		- <script src="https://demo7.formcycle.eu/formcycle/form/includes/010-jquery-min.js?_nc=1637667410192"></script>
	144	+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
117	117	<!-- configure path to your server, the id of the content element where the form should placed into and id of the form.-->
118	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	119	</head>
...	...	@@ -126,41 +126,5 @@
126	126	{{/code}}
127	127
128	128	{{html clean="false"}}
129		- <style type="text/css">
130		- pre{
131		- margin:0;
132		- }
133		-
134		- .xm-form{
135		- margin:0 auto;
136		- }
137		-
138		- .extra .hljs-string{
139		- font-weight:bold;
140		- color:red;
141		- }
142		-
143		- iframe, .hljs{
144		- max-width:700px;
145		- border:2px solid #515151;
146		- }
147		-
148		- .hljs{
149		- max-width:985px;
150		- text-align:center;
151		- }
152		-
153		- span.box{
154		- display: block;
155		- padding: 20px;
156		- }
157		- </style>
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>
	157	+ <div class="hljs" id="content"></div>
166	166	{{/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>