Änderungen von Dokument Formular über externen Kontext einbinden

Zusammenfassung

• Seiteneigenschaften (2 geändert, 0 hinzugefügt, 0 gelöscht)

Details

Seiteneigenschaften

Titel

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

Inhalt

...	...	@@ -1,3 +1,130 @@
	1	+{{html clean="false"}}
	2	+
	3	+<script>
	4	+/* console.log("before noConflict");
	5	+ $.noConflict();
	6	+ console.log("after noConflict");
	7	+
	8	+window.xima.fc.form.load = (function(options, trigger){
	9	+(function($, options, trigger){
	10	+
	11	+ var options = options || {},
	12	+ o = $.extend({
	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	+ 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	+ },options);
	16	+
	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,
	25	+ "xfc-pp-base-url": o.form_base,
	26	+ "fcpuid":window.xima.fc.form.fcpuid
	27	+ }, {"auto":"1","form_id":"253","form_container_id":"content"}, o.data);
	28	+
	29	+ function success(html){
	30	+ o.form_container.html(html.replace(/\$/g,'jQuery'));
	31	+ checkIsLogin();
	32	+ }
	33	+
	34	+ function error(data){
	35	+ o.form_container.html(data.responseText);
	36	+ checkIsLogin();
	37	+ }
	38	+
	39	+ function renderFromLoginForm(element){
	40	+
	41	+ var form = element.closest('form');
	42	+ pass = $('INPUT[name=pass]', form),
	43	+ user = $('INPUT[name=user]', form);
	44	+
	45	+ if (user.val() && pass.val()) {
	46	+ render(user.val(), pass.val());
	47	+ }
	48	+ }
	49	+
	50	+ function checkIsLogin(){
	51	+ $('.xfc-template .login INPUT[type=submit]', o.form_container).click(function(){
	52	+ renderFromLoginForm($(this));
	53	+ return false;
	54	+ }).addClass('xm-bound-login');
	55	+ }
	56	+
	57	+ function buildLoader(){
	58	+ o.form_container.html('');
	59	+
	60	+ var l = $('<div>').addClass('xm-form-loader-icon').appendTo(o.form_container);
	61	+ $('<style>').text(o.loadingImageStyle).appendTo(l);
	62	+ $('<img>').attr('src',o.loadingImageURL).appendTo(l);
	63	+ }
	64	+
	65	+ function render(user, pass){
	66	+ d = (user && pass) ? $.extend(d, {
	67	+ "xfc-rp-username": user,
	68	+ "xfc-rp-password": pass
	69	+ }) : d;
	70	+
	71	+ console.log(o.form_base + '/form/provide/' + o.form_id)
	72	+
	73	+ $.ajax($.extend({
	74	+ type: "GET",
	75	+ url: o.form_base + '/form/provide/' + o.form_id,
	76	+ data: d,
	77	+ cache: false,
	78	+ async: false,
	79	+ beforeSend:buildLoader,
	80	+ success: success,
	81	+ crossDomain: true
	82	+ }, options.ajax )).fail(error);
	83	+ }
	84	+
	85	+ o.form_id = o.form_id;
	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;
	88	+ o.form_container = (o.form_container) ? o.form_container : $('.tx-xm-formcycle, .xfc-template-body').first();
	89	+ o.form_base = o.form_base;
	90	+
	91	+ if (o.data && o.data.hasOwnProperty("xfc-pp-base-url")) o.form_base = o.data["xfc-pp-base-url"];
	92	+ if (o.form_action == 'login') $(renderFromLoginForm(trigger)); else $(render);
	93	+})(jQuery, options, trigger)})
	94	+
	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'});
	97	+});
	98	+
	99	+*/
	100	+
	101	+ </script>
	102	+ <style type="text/css">
	103	+ span.box{
	104	+ display: block;
	105	+ padding: 20px;
	106	+ }
	107	+ </style>{{/html}}
	108	+
	109	+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"]].
	110	+
	111	+ {{code}} <!DOCTYPE html>
	112	+ <html>
	113	+ <head>
	114	+ <meta charset="utf-8">
	115	+ <!-- jQuery must be loaded-->
	116	+ <script src="https://demo7.formcycle.eu/formcycle/form/includes/010-jquery-min.js?_nc=1637667410192"></script>
	117	+ <!-- configure path to your server, the id of the content element where the form should placed into and id of the form.-->
	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	+ </head>
	120	+
	121	+ <body class="body">
	122	+ <!-- this is the div where the form will be placed into -->
	123	+ <div id="content"></div>
	124	+ </body>
	125	+ </html>
	126	+ {{/code}}
	127	+
1	1	{{html clean="false"}}
2	2	<style type="text/css">
3	3	pre{
...	...	@@ -23,29 +23,17 @@
23	23	text-align:center;
24	24	}
25	25
26		- .resizer {
27		- display:flex;
28		- margin:0;
29		- padding:0;
30		- resize:both;
31		- overflow:hidden
	153	+ span.box{
	154	+ display: block;
	155	+ padding: 20px;
32	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; }
42	42	</style>
43	43
44		- <div class="resizer border" style="height: 1000px;">
45		- <iframe id="content" class="content" src="https://help7.formcycle.eu/xwiki/bin/download/Examples/IncludeExternalContext/content.html"></iframe>
46		- </div>
47		-{{/html}}
48	48
49		-Hinweis: Aus Kompatibilitätsgründen wird der Inhalt auf dieser Seite in einem iframe dargestellt.
50		-
51		-
	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>
	166	+{{/html}}