Von Version 14.5
bearbeitet von gru
am 02.03.2023, 10:03
Änderungskommentar: Es gibt keinen Kommentar für diese Version
Auf Version 1.1
bearbeitet von gru
am 29.03.2021, 21:02
Änderungskommentar: Imported from XAR

Zusammenfassung

Details

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