Änderungen von Dokument Formular per AJAX einbinden
Änderungskommentar:
Es gibt keinen Kommentar für diese Version
Zusammenfassung
-
Seiteneigenschaften (1 geändert, 0 hinzugefügt, 0 gelöscht)
Details
- Seiteneigenschaften
-
- Inhalt
-
... ... @@ -30,110 +30,9 @@ 30 30 padding: 20px; 31 31 } 32 32 </style> 33 +{{/html}} 33 33 34 - <script> 35 - $.noConflict(); 36 36 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 - 137 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 138 139 139 {{code}} <!DOCTYPE html>