Wiki-Quellcode von Formular per AJAX einbinden

Zeige letzte Bearbeiter
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 {{html clean="false"}}
129 <style type="text/css">
130 pre{
131 margin:0;
132 }
133
134 .xm-form{
135 margin:0 auto;
136 }
137
138 .extra .hljs-string{
139 font-weight:bold;
140 color:red;
141 }
142
143 iframe, .hljs{
144 max-width:700px;
145 border:2px solid #515151;
146 }
147
148 .hljs{
149 max-width:985px;
150 text-align:center;
151 }
152
153 span.box{
154 display: block;
155 padding: 20px;
156 }
157 </style>
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>
166 {{/html}}