Formular per AJAX einbinden

author	version	line-number	content
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://demo2.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	}
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 \|\| {},
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	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
139	{{code}} <!DOCTYPE html>
140	<html>
141	<head>
142	<meta charset="utf-8">
143	<!-- jQuery must be loaded-->
144	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
145	<!-- configure path to your server, the id of the content element where the form should placed into and id of the form.-->
146	<script src="https://demo2.formcycle.eu/formcycle/form/include.js?auto=1&form_container_id=content&form_id=564&form_base=https://demo2.formcycle.eu/formcycle"></script>
147	</head>
148
149	<body class="body">
150	<!-- this is the div where the form will be placed into -->
151	<div id="content"></div>
152	</body>
153	</html>
154	{{/code}}
155
156	{{html clean="false"}}
157	<div class="hljs" id="content"></div>
158	{{/html}}

1

{{html clean="false"}} <script type="text/javascript" src="https://demo2.formcycle.eu/formcycle/form/includes/010-jquery-min.js?_nc=1601035790902" ></script>

pre{

margin:0;

}

.xm-form{

margin:0 auto;

}

.extra .hljs-string{

font-weight:bold;

color:red;

}

iframe, .hljs{

max-width:700px;

border:2px solid #515151;

}

.hljs{

max-width:985px;

text-align:center;

}

span.box{

display: block;

padding: 20px;

}

</style>

$.noConflict();

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); } }"

},options);

var d = $.extend({

"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'));

checkIsLogin();

}

function error(data){

64

o.form_container.html(data.responseText);

checkIsLogin();

}

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());

}

}

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)

$.ajax($.extend({

type: "GET",

url: o.form_base + '/form/provide/' + o.form_id,

data: d,

cache: false,

async: false,

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'});

});

</script>

span.box{

display: block;

padding: 20px;

}

</style>{{/html}}

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

139

{{code}} <!DOCTYPE html>

<html>

<head>

144

145