Änderungen von Dokument Formular über externen Kontext einbinden

Zusammenfassung

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

Details

Seiteneigenschaften

Titel

...	...	@@ -1,1 +1,1 @@
1		-Formular über externen Kontext einbinden
	1	+Formular per AJAX einbinden

Dokument-Autor

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

Inhalt

...	...	@@ -1,120 +1,158 @@
1		-{{html clean="false"}}
2		- <style type="text/css">
3		- pre{
	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>
	3	+
	4	+<style type="text/css">
	5	+ pre{
4	4	margin:0;
5		- }
	7	+ }
6	6
7		- .xm-form{
8		- margin:0 auto;
9		- }
10		-
11		- .extra .hljs-string{
	9	+.xm-form{
	10	+margin:0 auto;
	11	+}
	12	+
	13	+ .extra .hljs-string{
12	12	font-weight:bold;
13	13	color:red;
14		- }
	16	+ }
15	15
16		- iframe, .hljs{
	18	+ iframe, .hljs{
17	17	max-width:700px;
18	18	border:2px solid #515151;
19		- }
	21	+ }
20	20
21		- .hljs{
	23	+ .hljs{
22	22	max-width:985px;
23		- text-align:center;
24		- }
	25	+text-align:center;
	26	+ }
25	25
26		- .resizer {
27		- display:flex;
28		- margin:0;
29		- padding:0;
30		- resize:both;
31		- overflow:hidden
32		- }
33		-
34		- .resizer > .resized {
35		- flex-grow:1;
36		- margin:0;
37		- padding:0;
38		- border:0;
39		- height: inherit;
40		- }
41		- .border { border:4px dashed black; }
	28	+ span.box{
	29	+ display: block;
	30	+ padding: 20px;
	31	+ }
42	42	</style>
43		-{{/html}}
44	44
45		-== 1. Externen Kontext via iFrame einbinden z.B. ==
	34	+ <script>
	35	+ $.noConflict();
46	46
47		-[[https://pro.form.cloud/formcycle/external/forms/main.xhtml]]
	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	+ }
48	48
49		-TODO: iframe
	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)})
50	50
51		-== 2. Eventlistener für Formularauswahl registrieren z.B.: ==
	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	+});
52	52
53		-{{code language="javascript"}}
54		-function myFormCycleCallback(msg){
55		- $('#result').html('Nachricht von: "<b>' + msg.origin + '</b>" Formular mit id: "<b>' + msg.data + '</b>" wurde ausgewählt.' );
56		- renderForm(msg.data);
57		-}
58	58
59		-window.addEventListener("message", myFormCycleCallback, false);
60		-{{/code}}
61	61
62		-== 3. Ergebenis speichern: ==
	129	+ </script>
	130	+ <style type="text/css">
	131	+ span.box{
	132	+ display: block;
	133	+ padding: 20px;
	134	+ }
	135	+ </style>{{/html}}
63	63
64		-TODO: Iframe
65		-{{html clean="false"}}
66		- <div class="hljs" id="result"></div>
67		-{{/html}}
	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"]].
68	68
	139	+ {{code}} <!DOCTYPE html>
	140	+ <html>
	141	+ <head>
	142	+ <meta charset="utf-8">
	143	+ <!-- jQuery must be loaded-->
	144	+ <script src="https://demo2.formcycle.eu/formcycle/form/includes/010-jquery-min.js?_nc=1601035790902"></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://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	+ </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}}
69	69
70		-== 4. Formular einbinden: ==
71		-
72		-{{code language="js"}}
73		-window.renderForm = function(formId){
74		- var myBase = 'https://help7.formcycle.eu/xwiki/bin/view/Examples/IncludeExternalContext/';
75		- var fcBase = 'https://pro.form.cloud/formcycle';
76		- var myFormContainer = $('#content');
77		-
78		- var form = $.ajax({
79		- type: "GET",
80		- url: fcBase + '/form/provide/' + formId,
81		- data:{
82		- //Render-Parameter
83		- "xfc-rp-inline":true, //Verwendete resourcen auflösen
84		- "xfc-rp-form-only":true, //Formular ohne HTML, BODY etc.
85		- "xfc-rp-usejq":false, //jQuery einbinden
86		- "xfc-rp-keepalive":false, //Ping zur Sessionverlängerung
87		- "xfc-rp-usecss":true, //Use Formcycle CSS files
88		- "xfc-rp-useui":true, //jQueryUI einbinden
89		- //Prozess-Parameter
90		- "xfc-pp-external":true, //Externer Formularrequest
91		- "xfc-pp-base-url":fcBase, //URL zum FormCycle
92		- "xfc-pp-success-url": myBase + "/anfrage-versendet.html", //CMS Seite bei erfolg
93		- "xfc-pp-error-url": myBase + "/anfrage-fehler.html" //CMS Seite bei Fehler
94		- },
95		- cache: false,
96		- async: false,
97		- success:function(html){
98		- myFormContainer.html(html);
99		- },
100		- crossDomain: true
101		- });
102		-}
103		-{{/code}}
104		-
105		-
106		-== 5. Ergebenis Formular: ==
107		-
108	108	{{html clean="false"}}
109		- <div class="resizer border" style="height: 1000px;">
110		- <iframe id="content" class="resized" src="https://help7.formcycle.eu/xwiki/bin/download/Examples/IncludeAJAX/iframe.html"></iframe>
111		- </div>
	157	+ <div class="hljs" id="content"></div>
112	112	{{/html}}
113		-
114		-
115		-
116		-
117		-
118		-Hinweis: Aus Kompatibilitätsgründen wird der Inhalt auf dieser Seite in einem iframe dargestellt.
119		-
120		-

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>