Änderungen von Dokument Formular per AJAX einbinden
Änderungskommentar:
Zurück zur Version 2.3
Zusammenfassung
-
Seiteneigenschaften (1 geändert, 0 hinzugefügt, 0 gelöscht)
Details
- Seiteneigenschaften
-
- Inhalt
-
... ... @@ -1,13 +1,6 @@ 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> -->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 3 4 - 5 -<script type="text/javascript">$.noConflict()</script> 6 -<script type="text/javascript" src="https://demo2.formcycle.eu/formcycle/form/includes/010-jquery-min.js?_nc=1601035790902" ></script> 7 -<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&xfc-rp-useui=false" ></script> 8 -<script type="text/javascript">$.noConflict()</script> 9 - 10 - 11 11 <style type="text/css"> 12 12 pre{ 13 13 margin:0; ... ... @@ -37,9 +37,110 @@ 37 37 padding: 20px; 38 38 } 39 39 </style> 40 -{{/html}} 41 41 34 + <script> 35 + $.noConflict(); 42 42 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 + } 85 + 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)}) 122 + 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 + 43 43 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"]]. 44 44 45 45 {{code}} <!DOCTYPE html>