Änderungen von Dokument Formular über externen Kontext einbinden
Zusammenfassung
-
Seiteneigenschaften (1 geändert, 0 hinzugefügt, 0 gelöscht)
-
Anhänge (0 geändert, 2 hinzugefügt, 0 gelöscht)
Details
- Seiteneigenschaften
-
- Inhalt
-
... ... @@ -1,80 +1,12 @@ 1 -== 1. Externen Kontext via iFrame einbinden z.B. == 2 - 3 -[[https://pro.form.cloud/formcycle/external/forms/main.xhtml]] 4 - 5 -TODO: iframe 6 - 7 -== 2. Eventlistener für Formularauswahl registrieren z.B.: == 8 - 9 - 10 - 11 - 12 -{{code language="javascript"}}function myFormCycleCallback(msg){ 13 - $('#result').html('Nachricht von: "<b>' + msg.origin + '</b>" Formular mit id: "<b>' + msg.data + '</b>" wurde ausgewählt.' ); 14 - renderForm(msg.data); 15 -} 16 - 17 -window.addEventListener("message", myFormCycleCallback, false);{{/code}} 18 - 19 - 20 -== 3. Ergebenis speichern: == 21 - 22 -{{html clean="false"}} 23 - <div class="hljs" id="result"></div> 1 +{{html clean="false"}} 2 + <style type="text/css"> 3 + span.box{ 4 + display: block; 5 + padding: 20px; 6 + } 7 + </style> 24 24 {{/html}} 25 - 26 - 27 -== 4. Formular einbinden: == 28 - 29 -{{code language="js"}} 30 -window.renderForm = function(formId){ 31 - var myBase = 'https://help6.formcycle.eu/xwiki/bin/edit/Examples/IncludeFormViaExternalContext/'; 32 - var fcBase = 'https://pro.formcloud.de/formcycle'; 33 - var myFormContainer = $('#content'); 34 - 35 - var form = $.ajax({ 36 - type: "GET", 37 - url: fcBase + '/form/provide/' + formId, 38 - data:{ 39 - //Render-Parameter 40 - "xfc-rp-inline":true, //Verwendete resourcen auflösen 41 - "xfc-rp-form-only":true, //Formular ohne HTML, BODY etc. 42 - "xfc-rp-usejq":false, //jQuery einbinden 43 - "xfc-rp-keepalive":false, //Ping zur Sessionverlängerung 44 - "xfc-rp-usecss":true, //Use Formcycle CSS files 45 - "xfc-rp-useui":true, //jQueryUI einbinden 46 - //Prozess-Parameter 47 - "xfc-pp-external":true, //Externer Formularrequest 48 - "xfc-pp-base-url":fcBase, //URL zum FormCycle 49 - "xfc-pp-success-url": myBase + "/anfrage-versendet.html", //CMS Seite bei erfolg 50 - "xfc-pp-error-url": myBase + "/anfrage-fehler.html" //CMS Seite bei Fehler 51 - }, 52 - cache: false, 53 - async: false, 54 - success:function(html){ 55 - myFormContainer.html(html); 56 - }, 57 - crossDomain: true 58 - }); 59 -} 60 -{{/code}} 61 - 62 - 63 -== 5. Ergebenis Formular: == 64 - 65 65 {{html clean="false"}} 66 - <div class="hljs" id="content"></div> 67 -{{/html}} 68 - 69 - 70 - 71 - 72 - 73 - 74 - 75 -Für das folgenden Beispiel wird zu Demonstrationszwecken eine eigene [[HTML-Seite>>attach:iframe.html]] in einem iframe dargestellt: 76 - 77 -{{html clean="false"}} 78 78 <style type="text/css"> 79 79 pre{ 80 80 margin:0; ... ... @@ -90,8 +90,9 @@ 90 90 } 91 91 92 92 iframe, .hljs{ 93 - max-width:700px; 94 - border:2px solid #515151; 25 + max-width:1400px; 26 + /*border:2px solid #515151;*/ 27 + width: 100%; 95 95 } 96 96 97 97 .hljs{ ... ... @@ -114,10 +114,14 @@ 114 114 border:0; 115 115 height: inherit; 116 116 } 117 - .border { border: 4px dashed black; }50 + .border, .content { border:none; } 118 118 </style> 119 119 120 - <div class="resizer border" style="height: 1000px;">121 - <iframe id="c ustomerdemo" class="resized" src="https://help7.formcycle.eu/xwiki/bin/download/Examples/IncludeAJAX/iframe.html"></iframe>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> 122 122 </div> 123 123 {{/html}} 57 + 58 +Hinweis: Aus Kompatibilitätsgründen wird der Inhalt auf dieser Seite in einem iframe dargestellt. 59 + 60 +
- content.html
-
- Author
-
... ... @@ -1,0 +1,1 @@ 1 +XWiki.gru - Größe
-
... ... @@ -1,0 +1,1 @@ 1 +17.6 KB - Inhalt
-
... ... @@ -1,0 +1,212 @@ 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&skin=XWiki.DefaultSkin&colorTheme=xwiki%3AFlamingoThemes.Iceberg&colorThemeVersion=9.1" rel="stylesheet" type="text/css" media="all"> 17 +<link href="/xwiki/bin/skin/skins/flamingo/print.min.css?cache-version=1675075602000&skin=XWiki.DefaultSkin&colorTheme=xwiki%3AFlamingoThemes.Iceberg&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&colorTheme=FlamingoThemes.Iceberg&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&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&docVersion=2.1"> 26 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/Makro/M-ExternalURLCheckbox?language=de&docVersion=3.1"> 27 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/XWiki/Mentions/MentionsMacro?language=de&docVersion=6.1"> 28 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/CustomCSS/CSS-FontFC?language=de&docVersion=3.1"> 29 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/Makro/M-Content?language=de&docVersion=3.1"> 30 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/Makro/M-Panel?language=de&docVersion=3.1"> 31 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/CustomCSS/CSS-Headings?language=de&docVersion=1.1"> 32 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/CookieConsent/WebHome?language=de&docVersion=4.1"> 33 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/AnnotationCode/Settings?language=de&docVersion=2.1"> 34 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/CustomCSS/CSS-Fontawesome6?language=de&docVersion=3.3"> 35 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/Makro/M-ExternalConsentDialog?language=de&docVersion=3.1"> 36 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Refactoring/Code/RefactoringConfiguration?language=de&docVersion=4.1"> 37 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/XWiki/Ratings/RatingsUIX?language=de&docVersion=1.1"> 38 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/Makro/M-ListItem?language=de&docVersion=3.1"> 39 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Tour/HomepageTour/WebHome?language=de&docVersion=1.1"> 40 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/Makro/M-SmallCaps?language=de&docVersion=5.1"> 41 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/CustomJS/LanguageSelector?language=de&docVersion=1.1"> 42 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/Makro/M-Tooltip?language=de&docVersion=3.1"> 43 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Image/Style/Code/DefaultImageStyleStyleSheet?language=de&docVersion=1.1"> 44 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/CustomCSS/CSS-Boxen?language=de&docVersion=1.1"> 45 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/Makro/M-Table?language=de&docVersion=4.1"> 46 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/Makro/M-ExternalVimeoVideo?language=de&docVersion=3.1"> 47 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/Makro/M-MainMenuTiles?language=de&docVersion=3.1"> 48 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/CustomCSS/EM-Style?language=de&docVersion=1.1"> 49 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/CustomCSS/CSS-Body?language=de&docVersion=1.14"> 50 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/Makro/M-Figure?language=de&docVersion=3.1"> 51 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/IconThemes/FontAwesome?language=de&docVersion=2.1"> 52 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/XWiki/Notifications/Code/Macro/NotificationsMacro?language=de&docVersion=5.1"> 53 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/XWiki/Notifications/Code/NotificationsDisplayerUIX?language=de&docVersion=3.1"> 54 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/XWiki/SharePage?language=de&docVersion=3.1"> 55 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/XWiki/PDFExport/WebHome?language=de&docVersion=1.1"> 56 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/XWiki/Like/LikeUIX?language=de&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 + <p> 183 + </p><h2>1. Externen Kontext via iFrame einbinden z.B.</h2> 184 + <br> 185 + <br> 186 + <!--<a href="https://thalassa.formcycle.de/formcycle/external/forms/main.xhtml">https://thalassa.formcycle.de/formcycle/external/forms/main.xhtml</a> 187 + <br/>--> 188 + <a href="https://pro.formcloud.de/formcycle/external/forms/main.xhtml">https://pro.formcloud.de/formcycle/external/forms/main.xhtml</a> 189 + <br> 190 + <p></p> 191 + 192 + <iframe src="https://pro.formcloud.de/formcycle/external/forms/main.xhtml" width="100%" height="340px"> 193 + <span>Ihr Browser unterstützt keine iFrames</span> 194 + </iframe> 195 + <div class="wikimodel-emptyline"></div> 196 + <h2 id="H2.EventlistenerfFCrFormularauswahlregistrierenz.B.:" class="wikigeneratedid"><span>2. Eventlistener für Formularauswahl registrieren z.B.:</span></h2> 197 + <div class="wikimodel-emptyline"></div><p> <br> 198 + <span class="box"><span class="code"><span style="font-weight: bold; color: #008000; ">function</span> myFormCycleCallback(msg){<br> $(<span style="color: #BA2121; ">'#result'</span>).html(<span style="color: #BA2121; ">'Nachricht von: "<b>'</span> <span style="color: #666666; ">+</span> msg.origin <span style="color: #666666; ">+</span> <span style="color: #BA2121; ">'</b>" Formular mit id: "<b>'</span> <span style="color: #666666; ">+</span> msg.data <span style="color: #666666; ">+</span> <span style="color: #BA2121; ">'</b>" wurde ausgewählt.'</span> );<br> 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> 199 + <div class="wikimodel-emptyline"></div> 200 + <h2 id="H3.Ergebenisspeichern:" class="wikigeneratedid"><span>3. Ergebenis speichern:</span></h2> 201 + <div class="hljs" id="result"></div> 202 + <div class="wikimodel-emptyline"></div> 203 + <h2 id="H4.Formulareinbinden:" class="wikigeneratedid"><span>4. Formular einbinden:</span></h2> 204 + <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> <span style="color: #BA2121; ">'https://help6.formcycle.eu/xwiki/bin/edit/Examples/IncludeFormViaExternalContext/'</span>;<br> <span style="font-weight: bold; color: #008000; ">var</span> fcBase <span style="color: #666666; ">=</span> <span style="color: #BA2121; ">'https://pro.formcloud.de/formcycle'</span>;<br> <span style="font-weight: bold; color: #008000; ">var</span> myFormContainer <span style="color: #666666; ">=</span> $(<span style="color: #BA2121; ">'#content'</span>);<br> <br> <span style="font-weight: bold; color: #008000; ">var</span> form <span style="color: #666666; ">=</span> $.ajax({<br> type<span style="color: #666666; ">:</span> <span style="color: #BA2121; ">"GET"</span>,<br> url<span style="color: #666666; ">:</span> fcBase <span style="color: #666666; ">+</span> <span style="color: #BA2121; ">'/form/provide/'</span> <span style="color: #666666; ">+</span> formId,<br> data<span style="color: #666666; ">:</span>{<br> <span style="font-weight: italic; color: #408080; ">//Render-Parameter<br></span> <span style="color: #BA2121; ">"xfc-rp-inline"</span><span style="color: #666666; ">:</span><span style="font-weight: bold; color: #008000; ">true</span>, <span style="font-weight: italic; color: #408080; ">//Verwendete resourcen auflösen <br></span> <span style="color: #BA2121; ">"xfc-rp-form-only"</span><span style="color: #666666; ">:</span><span style="font-weight: bold; color: #008000; ">true</span>, <span style="font-weight: italic; color: #408080; ">//Formular ohne HTML, BODY etc.<br></span> <span style="color: #BA2121; ">"xfc-rp-usejq"</span><span style="color: #666666; ">:</span><span style="font-weight: bold; color: #008000; ">false</span>, <span style="font-weight: italic; color: #408080; ">//jQuery einbinden<br></span> <span style="color: #BA2121; ">"xfc-rp-keepalive"</span><span style="color: #666666; ">:</span><span style="font-weight: bold; color: #008000; ">false</span>, <span style="font-weight: italic; color: #408080; ">//Ping zur Sessionverlängerung <br></span> <span style="color: #BA2121; ">"xfc-rp-usecss"</span><span style="color: #666666; ">:</span><span style="font-weight: bold; color: #008000; ">true</span>, <span style="font-weight: italic; color: #408080; ">//Use Formcycle CSS files<br></span> <span style="color: #BA2121; ">"xfc-rp-useui"</span><span style="color: #666666; ">:</span><span style="font-weight: bold; color: #008000; ">true</span>, <span style="font-weight: italic; color: #408080; ">//jQueryUI einbinden<br></span> <span style="font-weight: italic; color: #408080; ">//Prozess-Parameter<br></span> <span style="color: #BA2121; ">"xfc-pp-external"</span><span style="color: #666666; ">:</span><span style="font-weight: bold; color: #008000; ">true</span>, <span style="font-weight: italic; color: #408080; ">//Externer Formularrequest<br></span> <span style="color: #BA2121; ">"xfc-pp-success-url"</span><span style="color: #666666; ">:</span> myBase <span style="color: #666666; ">+</span> <span style="color: #BA2121; ">"/anfrage-versendet.html"</span>, <span style="font-weight: italic; color: #408080; ">//CMS Seite bei erfolg<br></span> <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> <span style="font-weight: italic; color: #408080; ">//CMS Seite bei Fehler <br></span> },<br> cache<span style="color: #666666; ">:</span> <span style="font-weight: bold; color: #008000; ">false</span>,<br> async<span style="color: #666666; ">:</span> <span style="font-weight: bold; color: #008000; ">false</span>,<br> success<span style="color: #666666; ">:</span><span style="font-weight: bold; color: #008000; ">function</span>(html){ <br> myFormContainer.html(html);<br> },<br> crossDomain<span style="color: #666666; ">:</span> <span style="font-weight: bold; color: #008000; ">true</span><br> });<br>}</div></div> 205 + <div class="wikimodel-emptyline"></div> 206 + <h2 id="H5.ErgebenisFormular:" class="wikigeneratedid"><span>5. Ergebnis Formular:</span></h2> 207 + <div class="hljs" id="content"> 208 + </div> 209 + </div> 210 + </div> 211 + </body> 212 +</html>
- content_en.html
-
- Author
-
... ... @@ -1,0 +1,1 @@ 1 +XWiki.gru - Größe
-
... ... @@ -1,0 +1,1 @@ 1 +17.6 KB - Inhalt
-
... ... @@ -1,0 +1,212 @@ 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&skin=XWiki.DefaultSkin&colorTheme=xwiki%3AFlamingoThemes.Iceberg&colorThemeVersion=9.1" rel="stylesheet" type="text/css" media="all"> 17 +<link href="/xwiki/bin/skin/skins/flamingo/print.min.css?cache-version=1675075602000&skin=XWiki.DefaultSkin&colorTheme=xwiki%3AFlamingoThemes.Iceberg&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&colorTheme=FlamingoThemes.Iceberg&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&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&docVersion=2.1"> 26 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/Makro/M-ExternalURLCheckbox?language=de&docVersion=3.1"> 27 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/XWiki/Mentions/MentionsMacro?language=de&docVersion=6.1"> 28 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/CustomCSS/CSS-FontFC?language=de&docVersion=3.1"> 29 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/Makro/M-Content?language=de&docVersion=3.1"> 30 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/Makro/M-Panel?language=de&docVersion=3.1"> 31 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/CustomCSS/CSS-Headings?language=de&docVersion=1.1"> 32 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/CookieConsent/WebHome?language=de&docVersion=4.1"> 33 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/AnnotationCode/Settings?language=de&docVersion=2.1"> 34 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/CustomCSS/CSS-Fontawesome6?language=de&docVersion=3.3"> 35 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/Makro/M-ExternalConsentDialog?language=de&docVersion=3.1"> 36 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Refactoring/Code/RefactoringConfiguration?language=de&docVersion=4.1"> 37 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/XWiki/Ratings/RatingsUIX?language=de&docVersion=1.1"> 38 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/Makro/M-ListItem?language=de&docVersion=3.1"> 39 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Tour/HomepageTour/WebHome?language=de&docVersion=1.1"> 40 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/Makro/M-SmallCaps?language=de&docVersion=5.1"> 41 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/CustomJS/LanguageSelector?language=de&docVersion=1.1"> 42 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/Makro/M-Tooltip?language=de&docVersion=3.1"> 43 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Image/Style/Code/DefaultImageStyleStyleSheet?language=de&docVersion=1.1"> 44 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/CustomCSS/CSS-Boxen?language=de&docVersion=1.1"> 45 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/Makro/M-Table?language=de&docVersion=4.1"> 46 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/Makro/M-ExternalVimeoVideo?language=de&docVersion=3.1"> 47 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/Makro/M-MainMenuTiles?language=de&docVersion=3.1"> 48 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/CustomCSS/EM-Style?language=de&docVersion=1.1"> 49 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/CustomCSS/CSS-Body?language=de&docVersion=1.14"> 50 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/Makro/M-Figure?language=de&docVersion=3.1"> 51 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/IconThemes/FontAwesome?language=de&docVersion=2.1"> 52 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/XWiki/Notifications/Code/Macro/NotificationsMacro?language=de&docVersion=5.1"> 53 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/XWiki/Notifications/Code/NotificationsDisplayerUIX?language=de&docVersion=3.1"> 54 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/XWiki/SharePage?language=de&docVersion=3.1"> 55 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/XWiki/PDFExport/WebHome?language=de&docVersion=1.1"> 56 +<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/XWiki/Like/LikeUIX?language=de&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 + <p> 183 + </p><h2>1. Include external context via iFrame e.g.:</h2> 184 + <br> 185 + <br> 186 + <!--<a href="https://thalassa.formcycle.de/formcycle/external/forms/main.xhtml">https://thalassa.formcycle.de/formcycle/external/forms/main.xhtml</a> 187 + <br/>--> 188 + <a href="https://pro.formcloud.de/formcycle/external/forms/main.xhtml">https://pro.formcloud.de/formcycle/external/forms/main.xhtml</a> 189 + <br> 190 + <p></p> 191 + 192 + <iframe src="https://pro.formcloud.de/formcycle/external/forms/main.xhtml" width="100%" height="340px"> 193 + <span>Your browser does not support iFrames</span> 194 + </iframe> 195 + <div class="wikimodel-emptyline"></div> 196 + <h2 id="H2.EventlistenerfFCrFormularauswahlregistrierenz.B.:" class="wikigeneratedid"><span>2. Register event listener for form selection e.g.:</span></h2> 197 + <div class="wikimodel-emptyline"></div><p> <br> 198 + <span class="box"><span class="code"><span style="font-weight: bold; color: #008000; ">function</span> myFormCycleCallback(msg){<br> $(<span style="color: #BA2121; ">'#result'</span>).html(<span style="color: #BA2121; ">'Nachricht von: "<b>'</span> <span style="color: #666666; ">+</span> msg.origin <span style="color: #666666; ">+</span> <span style="color: #BA2121; ">'</b>" Formular mit id: "<b>'</span> <span style="color: #666666; ">+</span> msg.data <span style="color: #666666; ">+</span> <span style="color: #BA2121; ">'</b>" wurde ausgewählt.'</span> );<br> 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> 199 + <div class="wikimodel-emptyline"></div> 200 + <h2 id="H3.Ergebenisspeichern:" class="wikigeneratedid"><span>3. Save result:</span></h2> 201 + <div class="hljs" id="result"></div> 202 + <div class="wikimodel-emptyline"></div> 203 + <h2 id="H4.Formulareinbinden:" class="wikigeneratedid"><span>4. Include form:</span></h2> 204 + <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> <span style="color: #BA2121; ">'https://help6.formcycle.eu/xwiki/bin/edit/Examples/IncludeFormViaExternalContext/'</span>;<br> <span style="font-weight: bold; color: #008000; ">var</span> fcBase <span style="color: #666666; ">=</span> <span style="color: #BA2121; ">'https://pro.formcloud.de/formcycle'</span>;<br> <span style="font-weight: bold; color: #008000; ">var</span> myFormContainer <span style="color: #666666; ">=</span> $(<span style="color: #BA2121; ">'#content'</span>);<br> <br> <span style="font-weight: bold; color: #008000; ">var</span> form <span style="color: #666666; ">=</span> $.ajax({<br> type<span style="color: #666666; ">:</span> <span style="color: #BA2121; ">"GET"</span>,<br> url<span style="color: #666666; ">:</span> fcBase <span style="color: #666666; ">+</span> <span style="color: #BA2121; ">'/form/provide/'</span> <span style="color: #666666; ">+</span> formId,<br> data<span style="color: #666666; ">:</span>{<br> <span style="font-weight: italic; color: #408080; ">//Render-Parameter<br></span> <span style="color: #BA2121; ">"xfc-rp-inline"</span><span style="color: #666666; ">:</span><span style="font-weight: bold; color: #008000; ">true</span>, <span style="font-weight: italic; color: #408080; ">//Verwendete resourcen auflösen <br></span> <span style="color: #BA2121; ">"xfc-rp-form-only"</span><span style="color: #666666; ">:</span><span style="font-weight: bold; color: #008000; ">true</span>, <span style="font-weight: italic; color: #408080; ">//Formular ohne HTML, BODY etc.<br></span> <span style="color: #BA2121; ">"xfc-rp-usejq"</span><span style="color: #666666; ">:</span><span style="font-weight: bold; color: #008000; ">false</span>, <span style="font-weight: italic; color: #408080; ">//jQuery einbinden<br></span> <span style="color: #BA2121; ">"xfc-rp-keepalive"</span><span style="color: #666666; ">:</span><span style="font-weight: bold; color: #008000; ">false</span>, <span style="font-weight: italic; color: #408080; ">//Ping zur Sessionverlängerung <br></span> <span style="color: #BA2121; ">"xfc-rp-usecss"</span><span style="color: #666666; ">:</span><span style="font-weight: bold; color: #008000; ">true</span>, <span style="font-weight: italic; color: #408080; ">//Use Formcycle CSS files<br></span> <span style="color: #BA2121; ">"xfc-rp-useui"</span><span style="color: #666666; ">:</span><span style="font-weight: bold; color: #008000; ">true</span>, <span style="font-weight: italic; color: #408080; ">//jQueryUI einbinden<br></span> <span style="font-weight: italic; color: #408080; ">//Prozess-Parameter<br></span> <span style="color: #BA2121; ">"xfc-pp-external"</span><span style="color: #666666; ">:</span><span style="font-weight: bold; color: #008000; ">true</span>, <span style="font-weight: italic; color: #408080; ">//Externer Formularrequest<br></span> <span style="color: #BA2121; ">"xfc-pp-success-url"</span><span style="color: #666666; ">:</span> myBase <span style="color: #666666; ">+</span> <span style="color: #BA2121; ">"/anfrage-versendet.html"</span>, <span style="font-weight: italic; color: #408080; ">//CMS Seite bei erfolg<br></span> <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> <span style="font-weight: italic; color: #408080; ">//CMS Seite bei Fehler <br></span> },<br> cache<span style="color: #666666; ">:</span> <span style="font-weight: bold; color: #008000; ">false</span>,<br> async<span style="color: #666666; ">:</span> <span style="font-weight: bold; color: #008000; ">false</span>,<br> success<span style="color: #666666; ">:</span><span style="font-weight: bold; color: #008000; ">function</span>(html){ <br> myFormContainer.html(html);<br> },<br> crossDomain<span style="color: #666666; ">:</span> <span style="font-weight: bold; color: #008000; ">true</span><br> });<br>}</div></div> 205 + <div class="wikimodel-emptyline"></div> 206 + <h2 id="H5.ErgebenisFormular:" class="wikigeneratedid"><span>5. Resulting form:</span></h2> 207 + <div class="hljs" id="content"> 208 + </div> 209 + </div> 210 + </div> 211 + </body> 212 +</html>