Von Version 7.3
bearbeitet von gru
am 05.10.2022, 13:00
Änderungskommentar: Es gibt keinen Kommentar für diese Version
Auf Version 12.1
bearbeitet von gru
am 02.03.2023, 09:30
Änderungskommentar: Neuen Anhang content.html hochladen

Zusammenfassung

Details

Seiteneigenschaften
Titel
... ... @@ -1,1 +1,1 @@
1 -Formular per AJAX einbinden
1 +Formular über externen Kontext einbinden
Inhalt
... ... @@ -1,130 +128,3 @@
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 -
128 128  {{html clean="false"}}
129 129   <style type="text/css">
130 130   pre{
... ... @@ -150,17 +150,29 @@
150 150   text-align:center;
151 151   }
152 152  
153 - span.box{
154 - display: block;
155 - padding: 20px;
26 + .resizer {
27 + display:flex;
28 + margin:0;
29 + padding:0;
30 + resize:both;
31 + overflow:hidden
156 156   }
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; }
157 157   </style>
158 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>
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>
166 166  {{/html}}
48 +
49 +Hinweis: Aus Kompatibilitätsgründen wird der Inhalt auf dieser Seite in einem iframe dargestellt.
50 +
51 +
content.html
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.gru
Größe
... ... @@ -1,0 +1,1 @@
1 +19.2 KB
Inhalt
... ... @@ -1,0 +1,192 @@
1 +<html>
2 + <head>
3 +<link href="/xwiki/webjars/wiki%3Axwiki/webjar-blueimp-gallery/3.4.0/css/blueimp-gallery.min.css" type="text/css" rel="stylesheet">
4 +<link href="/xwiki/webjars/wiki%3Axwiki/xwiki-platform-image-lightbox-webjar/15.0/less/lightbox.less?evaluate=true" type="text/css" rel="stylesheet">
5 +<link href="/xwiki/webjars/wiki%3Axwiki/xwiki-platform-tree-webjar/15.0/tree.min.css?evaluate=true" type="text/css" rel="stylesheet">
6 +<link href="/xwiki/webjars/wiki%3Axwiki/selectize.js/0.13.3/css/selectize.bootstrap3.css" type="text/css" rel="stylesheet">
7 +
8 + <link href="/xwiki/webjars/wiki%3Axwiki/drawer/3.2.2/css/drawer.min.css" rel="stylesheet" type="text/css">
9 +
10 +
11 +
12 +
13 +
14 +<link href="/xwiki/bin/skin/skins/flamingo/style.min.css?cache-version=1675075602000&amp;skin=XWiki.DefaultSkin&amp;colorTheme=xwiki%3AFlamingoThemes.Iceberg&amp;colorThemeVersion=9.1" rel="stylesheet" type="text/css" media="all">
15 +<link href="/xwiki/bin/skin/skins/flamingo/print.min.css?cache-version=1675075602000&amp;skin=XWiki.DefaultSkin&amp;colorTheme=xwiki%3AFlamingoThemes.Iceberg&amp;colorThemeVersion=9.1" rel="stylesheet" type="text/css" media="print">
16 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/skin/resources/css/xwiki.bundle.min.css?cache-version=1675075601000&amp;colorTheme=FlamingoThemes.Iceberg&amp;language=de">
17 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/skin/resources/uicomponents/search/searchSuggest.min.css?cache-version=1675075602000">
18 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/skin/resources/uicomponents/rating/rating.min.css?cache-version=1675075602000">
19 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/skin/resources/uicomponents/suggest/xwiki.selectize.min.css?cache-version=1675075602000">
20 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/skin/resources/uicomponents/widgets/select/select.min.css?cache-version=1675075602000">
21 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/skin/resources/uicomponents/viewers/tags.min.css?cache-version=1675075602000&amp;colorTheme=FlamingoThemes.Iceberg">
22 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/skin/resources/uicomponents/pagination/pagination.min.css?cache-version=1675075602000">
23 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/AnnotationCode/Style?language=de&amp;docVersion=2.1">
24 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/Makro/M-ExternalURLCheckbox?language=de&amp;docVersion=3.1">
25 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/XWiki/Mentions/MentionsMacro?language=de&amp;docVersion=6.1">
26 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/CustomCSS/CSS-FontFC?language=de&amp;docVersion=3.1">
27 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/Makro/M-Content?language=de&amp;docVersion=3.1">
28 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/Makro/M-Panel?language=de&amp;docVersion=3.1">
29 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/CustomCSS/CSS-Headings?language=de&amp;docVersion=1.1">
30 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/CookieConsent/WebHome?language=de&amp;docVersion=4.1">
31 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/AnnotationCode/Settings?language=de&amp;docVersion=2.1">
32 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/CustomCSS/CSS-Fontawesome6?language=de&amp;docVersion=3.3">
33 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/Makro/M-ExternalConsentDialog?language=de&amp;docVersion=3.1">
34 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Refactoring/Code/RefactoringConfiguration?language=de&amp;docVersion=4.1">
35 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/XWiki/Ratings/RatingsUIX?language=de&amp;docVersion=1.1">
36 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/Makro/M-ListItem?language=de&amp;docVersion=3.1">
37 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Tour/HomepageTour/WebHome?language=de&amp;docVersion=1.1">
38 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/Makro/M-SmallCaps?language=de&amp;docVersion=5.1">
39 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/CustomJS/LanguageSelector?language=de&amp;docVersion=1.1">
40 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/Makro/M-Tooltip?language=de&amp;docVersion=3.1">
41 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Image/Style/Code/DefaultImageStyleStyleSheet?language=de&amp;docVersion=1.1">
42 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/CustomCSS/CSS-Boxen?language=de&amp;docVersion=1.1">
43 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/Makro/M-Table?language=de&amp;docVersion=4.1">
44 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/Makro/M-ExternalVimeoVideo?language=de&amp;docVersion=3.1">
45 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/Makro/M-MainMenuTiles?language=de&amp;docVersion=3.1">
46 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/CustomCSS/EM-Style?language=de&amp;docVersion=1.1">
47 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/CustomCSS/CSS-Body?language=de&amp;docVersion=1.14">
48 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/Makro/M-Figure?language=de&amp;docVersion=3.1">
49 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/IconThemes/FontAwesome?language=de&amp;docVersion=2.1">
50 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/XWiki/Notifications/Code/Macro/NotificationsMacro?language=de&amp;docVersion=5.1">
51 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/XWiki/Notifications/Code/NotificationsDisplayerUIX?language=de&amp;docVersion=3.1">
52 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/XWiki/SharePage?language=de&amp;docVersion=3.1">
53 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/XWiki/PDFExport/WebHome?language=de&amp;docVersion=1.1">
54 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/XWiki/Like/LikeUIX?language=de&amp;docVersion=3.1">
55 + </head>
56 + <body>
57 +
58 +<div class="row">
59 + <div id="xwikicontent" class="col-xs-12">
60 + <script>
61 + console.log("init", typeof $);//, $.fn.jquery);
62 + delete define.amd;
63 + </script>
64 +
65 + <script type="text/javascript" src="https://pro.formcloud.de/formcycle/form/includes/010-jquery-min.js?_nc=1620383292614"></script>
66 + <!--<script type="text/javascript" src="https://pro.formcloud.de/formcycle/form/includes/020-jquery-ui-min.js?_nc=20210325123132" ></script>-->
67 + <script>
68 + console.log("init2", typeof jQuery, jQuery.fn.jquery);
69 + window.fail = $;
70 + $.noConflict();
71 + console.log("init2", typeof jQuery, typeof window.fail, jQuery.fn.jquery);
72 + </script>
73 + <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>-->
74 + <style type="text/css">
75 + pre{
76 + margin:0;
77 + }
78 +
79 +
80 + .extra .hljs-string{
81 + font-weight:bold;
82 + color:red;
83 + }
84 +
85 + iframe, .hljs{
86 + max-width:980px;
87 + border:2px solid #515151;
88 + }
89 +
90 + .hljs{
91 + max-width:985px;
92 + }
93 +
94 + span.box{
95 + display: block;
96 + padding: 20px;
97 + }
98 + </style>
99 +
100 + <script type="text/javascript">
101 + console.log(typeof jQuery.xutil, typeof window.fail.xutil);
102 + fcjq = jQuery;
103 + console.log(typeof fcjq.xutil, fcjq === jQuery, jQuery === window.fail);
104 + //console.log("BE",window.fcjq);
105 + //$.noConflict();
106 + //console.log("AF",window.fcjq);
107 +
108 + function myFormCycleCallback(msg){
109 + var formID =msg.data;
110 + console.log('formID',msg.data.formId);
111 + var myBase = 'https://help6.formcycle.eu/xwiki/bin/edit/Examples/IncludeFormViaExternalContext/';
112 + var fcBase = 'https://pro.formcloud.de/formcycle';
113 + var myFormContainer = jQuery('#content');
114 + if (typeof formID !== 'object' && typeof formID !== 'Object' && typeof formID !== 'undefined') {
115 + //console.log("SADKJGAFGSALIFABGSFLHSAFHLSAHFLIHASIFHLIHFASILHLSAHFLIHSALIH");
116 + console.log('Nachricht von: "' + msg.origin + '" Formular mit id: "' + msg.data + '" wurde ausgewählt.');
117 + jQuery('#result').html('Nachricht von: "' + msg.origin + '" Formular mit id: "' + msg.data + '" wurde ausgewählt.' );
118 +
119 +
120 + myFormContainer.html('');
121 + myFormContainer.html('<iframe id="xm-form" src="'+fcBase+'/form/provide/'+formID+'" style="width:100%; height:1000px" scrolling="yes" frameborder="0" />');
122 +
123 +
124 + }
125 + //renderForm(msg.data);
126 + }
127 + console.log("Adding eventlistener");
128 + window.addEventListener("message", myFormCycleCallback, false);
129 + console.log("Eventlistener added");
130 +
131 +window.renderForm = function(formId){
132 + var myBase = 'https://help6.formcycle.eu/xwiki/bin/edit/Examples/IncludeFormViaExternalContext/';
133 + var fcBase = 'https://pro.formcloud.de/formcycle';
134 + var myFormContainer = jQuery('#content');
135 +
136 + var form = jQuery.ajax({
137 + type: "GET",
138 + url: fcBase + '/form/provide/' + formId,
139 + data:{
140 + //Render-Parameter
141 + "xfc-rp-inline":true, //Verwendete resourcen auflösen
142 + "xfc-rp-form-only":true, //Formular ohne HTML, BODY etc.
143 + "xfc-rp-usejq":false, //jQuery einbinden
144 + "xfc-rp-keepalive":false, //Ping zur Sessionverlängerung
145 + "xfc-rp-usecss":true, //Use Formcycle CSS files
146 + "xfc-rp-useui":true, //jQueryUI einbinden
147 + //Prozess-Parameter
148 + "xfc-pp-external":true, //Externer Formularrequest
149 + "xfc-pp-base-url":fcBase//, //URL zum FormCycle
150 + //"xfc-pp-success-url": myBase + "/anfrage-versendet.html", //CMS Seite bei erfolg
151 + //"xfc-pp-error-url": myBase + "/anfrage-fehler.html" //CMS Seite bei Fehler
152 + },
153 + cache: false,
154 + async: false,
155 + success:function(html){
156 + console.log('Form loaded:',html.length);//,html);
157 + //myFormContainer.html(html);
158 + //if (!jQuery('#contentiframe').length) {
159 + // myFormContainer.html('<iframe id="contentiframe"></iframe>');
160 + //}
161 + //var iframe = document.getElementById('contentiframe'),
162 + //iframedoc = iframe.contentDocument || iframe.contentWindow.document;
163 + //iframedoc.body.innerHTML = html.replace(/\$/g,'jQuery');
164 + //myFormContainer.html(html.replace(/\$/g,'jQuery'));
165 + myFormContainer.html('');
166 + myFormContainer.html('<iframe id="xm-form" src="'+fcBase+'/form/provide/'+formId+'?xfc-height-changed-evt=true" style="width:100%; height:1000px" scrolling="yes" frameborder="0" />');
167 + },
168 + crossDomain: true
169 + });
170 +}
171 +
172 + </script>
173 +
174 + <h1>Formular einbinden und "Externen Kontext" Seite verwenden<a class="edit_section" role="button" title="Bearbeiten" href="/xwiki/bin/edit/Examples/IncludeFormViaExternalContext?section=1"><span class="fa fa-pencil"></span><span class="sr-only">Bearbeiten</span></a></h1>
175 +
176 + <p>
177 + </p><h2>1. Externen Kontext via iFrame einbinden z.B.<a class="edit_section" role="button" title="Bearbeiten" href="/xwiki/bin/edit/Examples/IncludeFormViaExternalContext?section=2"><span class="fa fa-pencil"></span><span class="sr-only">Bearbeiten</span></a></h2>
178 + <br>
179 + <br>
180 + <!--<a href="https://thalassa.formcycle.de/formcycle/external/forms/main.xhtml">https://thalassa.formcycle.de/formcycle/external/forms/main.xhtml</a>
181 + <br/>-->
182 + <a href="https://pro.formcloud.de/formcycle/external/forms/main.xhtml">https://pro.formcloud.de/formcycle/external/forms/main.xhtml</a>
183 + <br>
184 + <p></p>
185 +
186 + <iframe src="https://pro.formcloud.de/formcycle/external/forms/main.xhtml" width="100%" height="340px">
187 + <span>Ihr Browser unterstützt keine iFrames</span>
188 + </iframe><div class="wikimodel-emptyline"></div><h2 id="H2.EventlistenerfFCrFormularauswahlregistrierenz.B.:" class="wikigeneratedid"><span>2. Eventlistener für Formularauswahl registrieren z.B.:</span><a class="edit_section" role="button" title="Bearbeiten" href="/xwiki/bin/edit/Examples/IncludeFormViaExternalContext?section=3"><span class="fa fa-pencil"></span><span class="sr-only">Bearbeiten</span></a></h2><div class="wikimodel-emptyline"></div><p>&nbsp;<br><span class="box"><span class="code"><span style="font-weight: bold; color: #008000; ">function</span> myFormCycleCallback(msg){<br>&nbsp;$(<span style="color: #BA2121; ">'#result'</span>).html(<span style="color: #BA2121; ">'Nachricht von: "&lt;b&gt;'</span> <span style="color: #666666; ">+</span> msg.origin <span style="color: #666666; ">+</span> <span style="color: #BA2121; ">'&lt;/b&gt;" Formular mit id: "&lt;b&gt;'</span> <span style="color: #666666; ">+</span> msg.data <span style="color: #666666; ">+</span> <span style="color: #BA2121; ">'&lt;/b&gt;" wurde ausgewählt.'</span> );<br>&nbsp;renderForm(msg.data);<br>}<br><br><span style="color: #008000; ">window</span>.addEventListener(<span style="color: #BA2121; ">"message"</span>, myFormCycleCallback, <span style="font-weight: bold; color: #008000; ">false</span>);</span></span></p><div class="wikimodel-emptyline"></div><h2 id="H3.Ergebenisspeichern:" class="wikigeneratedid"><span>3. Ergebenis speichern:</span><a class="edit_section" role="button" title="Bearbeiten" href="/xwiki/bin/edit/Examples/IncludeFormViaExternalContext?section=4"><span class="fa fa-pencil"></span><span class="sr-only">Bearbeiten</span></a></h2> <div class="hljs" id="result">Nachricht von: "https://pro.formcloud.de" Formular mit id: "3776" wurde ausgewählt.</div><div class="wikimodel-emptyline"></div><h2 id="H4.Formulareinbinden:" class="wikigeneratedid"><span>4. Formular einbinden:</span><a class="edit_section" role="button" title="Bearbeiten" href="/xwiki/bin/edit/Examples/IncludeFormViaExternalContext?section=5"><span class="fa fa-pencil"></span><span class="sr-only">Bearbeiten</span></a></h2><div class="box"><div class="code"><span style="color: #008000; ">window</span>.renderForm <span style="color: #666666; ">=</span> <span style="font-weight: bold; color: #008000; ">function</span>(formId){<br> <span style="font-weight: bold; color: #008000; ">var</span> myBase <span style="color: #666666; ">=</span> <span style="color: #BA2121; ">'https://help6.formcycle.eu/xwiki/bin/edit/Examples/IncludeFormViaExternalContext/'</span>;<br> <span style="font-weight: bold; color: #008000; ">var</span> fcBase <span style="color: #666666; ">=</span> <span style="color: #BA2121; ">'https://pro.formcloud.de/formcycle'</span>;<br> <span style="font-weight: bold; color: #008000; ">var</span> myFormContainer <span style="color: #666666; ">=</span> $(<span style="color: #BA2121; ">'#content'</span>);<br> &nbsp;&nbsp;<br> <span style="font-weight: bold; color: #008000; ">var</span> form <span style="color: #666666; ">=</span> $.ajax({<br>&nbsp;&nbsp;type<span style="color: #666666; ">:</span> <span style="color: #BA2121; ">"GET"</span>,<br>&nbsp;&nbsp;url<span style="color: #666666; ">:</span> fcBase <span style="color: #666666; ">+</span> <span style="color: #BA2121; ">'/form/provide/'</span> <span style="color: #666666; ">+</span> formId,<br>&nbsp;&nbsp;data<span style="color: #666666; ">:</span>{<br> &nbsp;&nbsp;<span style="font-weight: italic; color: #408080; ">//Render-Parameter<br></span> &nbsp;&nbsp;<span style="color: #BA2121; ">"xfc-rp-inline"</span><span style="color: #666666; ">:</span><span style="font-weight: bold; color: #008000; ">true</span>, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-weight: italic; color: #408080; ">//Verwendete resourcen auflösen <br></span> &nbsp;&nbsp;<span style="color: #BA2121; ">"xfc-rp-form-only"</span><span style="color: #666666; ">:</span><span style="font-weight: bold; color: #008000; ">true</span>, &nbsp;&nbsp;&nbsp;&nbsp;<span style="font-weight: italic; color: #408080; ">//Formular ohne HTML, BODY etc.<br></span> &nbsp;&nbsp;<span style="color: #BA2121; ">"xfc-rp-usejq"</span><span style="color: #666666; ">:</span><span style="font-weight: bold; color: #008000; ">false</span>, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-weight: italic; color: #408080; ">//jQuery einbinden<br></span> &nbsp;&nbsp;<span style="color: #BA2121; ">"xfc-rp-keepalive"</span><span style="color: #666666; ">:</span><span style="font-weight: bold; color: #008000; ">false</span>, &nbsp;&nbsp;&nbsp;&nbsp;<span style="font-weight: italic; color: #408080; ">//Ping zur Sessionverlängerung <br></span> &nbsp;&nbsp;<span style="color: #BA2121; ">"xfc-rp-usecss"</span><span style="color: #666666; ">:</span><span style="font-weight: bold; color: #008000; ">true</span>, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-weight: italic; color: #408080; ">//Use Formcycle CSS files<br></span> &nbsp;&nbsp;<span style="color: #BA2121; ">"xfc-rp-useui"</span><span style="color: #666666; ">:</span><span style="font-weight: bold; color: #008000; ">true</span>, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-weight: italic; color: #408080; ">//jQueryUI einbinden<br></span> &nbsp;&nbsp;<span style="font-weight: italic; color: #408080; ">//Prozess-Parameter<br></span> &nbsp;&nbsp;<span style="color: #BA2121; ">"xfc-pp-external"</span><span style="color: #666666; ">:</span><span style="font-weight: bold; color: #008000; ">true</span>, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-weight: italic; color: #408080; ">//Externer Formularrequest<br></span> &nbsp;&nbsp;<span style="color: #BA2121; ">"xfc-pp-base-url"</span><span style="color: #666666; ">:</span>fcBase, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-weight: italic; color: #408080; ">//URL zum FormCycle<br></span> &nbsp;&nbsp;<span style="color: #BA2121; ">"xfc-pp-success-url"</span><span style="color: #666666; ">:</span> myBase <span style="color: #666666; ">+</span> <span style="color: #BA2121; ">"/anfrage-versendet.html"</span>, <span style="font-weight: italic; color: #408080; ">//CMS Seite bei erfolg<br></span> &nbsp;&nbsp;<span style="color: #BA2121; ">"xfc-pp-error-url"</span><span style="color: #666666; ">:</span> myBase <span style="color: #666666; ">+</span> <span style="color: #BA2121; ">"/anfrage-fehler.html"</span> &nbsp;&nbsp;<span style="font-weight: italic; color: #408080; ">//CMS Seite bei Fehler &nbsp;<br></span> &nbsp;},<br>&nbsp;&nbsp;cache<span style="color: #666666; ">:</span> <span style="font-weight: bold; color: #008000; ">false</span>,<br>&nbsp;&nbsp;async<span style="color: #666666; ">:</span> <span style="font-weight: bold; color: #008000; ">false</span>,<br>&nbsp;&nbsp;success<span style="color: #666666; ">:</span><span style="font-weight: bold; color: #008000; ">function</span>(html){ <br>&nbsp;&nbsp;&nbsp;myFormContainer.html(html);<br>&nbsp;&nbsp;},<br>&nbsp;&nbsp;crossDomain<span style="color: #666666; ">:</span> <span style="font-weight: bold; color: #008000; ">true</span><br>&nbsp;});<br>}</div></div><div class="wikimodel-emptyline"></div><h2 id="H5.ErgebenisFormular:" class="wikigeneratedid"><span>5. Ergebenis Formular:</span><a class="edit_section" role="button" title="Bearbeiten" href="/xwiki/bin/edit/Examples/IncludeFormViaExternalContext?section=6"><span class="fa fa-pencil"></span><span class="sr-only">Bearbeiten</span></a></h2> <div class="hljs" id="content"><iframe id="xm-form" src="https://pro.formcloud.de/formcycle/form/provide/3776" style="width:100%; height:1000px" scrolling="yes" frameborder="0"></iframe></div>
189 + </div>
190 + </div>
191 + </body>
192 +</html>
iframe.html
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.gru
Größe
... ... @@ -1,0 +1,1 @@
1 +893 bytes
Inhalt
... ... @@ -1,0 +1,22 @@
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>