From version 1.4
edited by gru
on 02.03.2023, 11:12
Change comment: There is no comment for this version
To version 1.2
edited by gru
on 28.07.2021, 10:30
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -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 src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
2 + <script src="https://demo7.formcycle.eu/formcycle/form/include.js?auto=0&form_container_id=content&form_id=253&form_base=https://demo7.formcycle.eu/formcycle"></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, .content { border:none; }
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 -Note: For compatibility reasons, the content on this page is displayed in an iframe.
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 +You can include the form without //iframes// by loading it via an asynchronous HTTP request (AJAX). Support for the possible embedding options can be found in FORMCYCLE directly under [[Publish>>doc:Formcycle.UserInterface.MyForms.Publish.WebHome]].
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://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 put -->
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}}