prog:apex_jquery_call_ajax
Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Beide Seiten der vorigen RevisionVorhergehende Überarbeitung | |||
prog:apex_jquery_call_ajax [2018/11/23 17:20] – [Verwenden] gpipperr | prog:apex_jquery_call_ajax [2018/12/10 19:56] (aktuell) – gpipperr | ||
---|---|---|---|
Zeile 1: | Zeile 1: | ||
+ | =====Oracle Apex 5 / 18 - Mit JQuery AJAX JSON in einer APEX Seite darstellen===== | ||
+ | |||
+ | <fc # | ||
+ | |||
+ | In einer JSON Schnittstelle, | ||
+ | |||
+ | Um es dem Support zu erleichtern die einzelnen Aufrufe der Schnittstelle mit diversen Parametern zu testen, wird dazu eine APEX Oberfläche entwickelt. | ||
+ | |||
+ | In der Oberfläche wird der JSON Record der Schnittstelle in der Seite angezeigt, gleichzeitig werden auch die Basis Daten aus der Applikation dargestellt. | ||
+ | |||
+ | Damit kann der Support dann vergleichen, | ||
+ | |||
+ | Die Verwendung der nativen Möglichkeiten von Apex/Oracle DB kommt nicht nicht Frage, da hier die Architektur von APEX versieht das der Rest Call von der Datenbank aus erfolgen muss. Die DB Maschine muss dazu dann wieder das SSL Zertifikat verarbeiten können und es muss eine Sicherheitsregel in der DB hinterlegt werden. In gehosteten Umgebungen ist das aber meist nicht so einfach umsetzbar. | ||
+ | |||
+ | |||
+ | <fc # | ||
+ | |||
+ | Der Aufruf der Schnittstelle erfolgt über JQuery.ajax, | ||
+ | |||
+ | Wird mit JQuery.ajax direkt gearbeitet kann einfach auf alle möglichen Settings zugegriffen werden, siehe => http:// | ||
+ | |||
+ | |||
+ | <note important> | ||
+ | |||
+ | Das beeinflusst dann auch alle weiteren APEX internen REST Aufrufe! | ||
+ | |||
+ | Wird so zum Beispiel der Content Type angepasst, gilt das für alle weiteren Calls! Und führt zu sehr merkwürdigen Fehlern in APEX 8-o ! | ||
+ | |||
+ | |||
+ | ---- | ||
+ | |||
+ | ==== Ein einfaches Beispiel für den notwendigen Code auf einer Seite === | ||
+ | |||
+ | |||
+ | Das ganze lässt sich wie immer noch schöner gestalten, z.B. in eine eigene Library auslagern, noch dynamischer etc. | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | === Code für die notwendigen Aufrufe=== | ||
+ | |||
+ | JavaScript Code für die Seite unter " | ||
+ | |||
+ | <code javascript> | ||
+ | // page Global | ||
+ | var xapikey | ||
+ | var pageResultItemName=' | ||
+ | var pageURLItemName=' | ||
+ | |||
+ | |||
+ | |||
+ | //Page Methods for the handling of the results | ||
+ | $.showMyError=function(jqXHR, | ||
+ | var message_text = '< | ||
+ | $s(pageResultItemName, | ||
+ | apex.message.showErrors([ | ||
+ | type : | ||
+ | , | ||
+ | , | ||
+ | , | ||
+ | , | ||
+ | } | ||
+ | | ||
+ | } | ||
+ | |||
+ | // set my Element on the page | ||
+ | $.setPageItem = function (json) { | ||
+ | console.log(json); | ||
+ | var textJson=JSON.stringify(json, | ||
+ | $s(pageResultItemName, | ||
+ | } | ||
+ | |||
+ | // AJAX Methods for the AJAX Call | ||
+ | |||
+ | // before sending something | ||
+ | // show spinner popup | ||
+ | |||
+ | | ||
+ | console.log(settings); | ||
+ | $.popup = apex.widget.waitPopup(); | ||
+ | } | ||
+ | |||
+ | // if all was fine | ||
+ | // Populate the page Item | ||
+ | $.onSucess = function (response) { | ||
+ | if (response instanceof Object) { | ||
+ | var json = response; | ||
+ | } | ||
+ | else { | ||
+ | var json = $.parseJSON(response); | ||
+ | } | ||
+ | $.setPageItem(json) | ||
+ | | ||
+ | |||
+ | // if error happens | ||
+ | // show error Message | ||
+ | | ||
+ | | ||
+ | | ||
+ | |||
+ | // after all is finshed | ||
+ | // this wil be called also after an error! | ||
+ | // remove the spinner popup | ||
+ | |||
+ | | ||
+ | console.log(errorStatus); | ||
+ | console.log($.popup); | ||
+ | $.popup.remove(); | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | // | ||
+ | // overwrite JQuery.ajax for our need | ||
+ | // | ||
+ | |||
+ | $.gpiJSON = function(url | ||
+ | , header | ||
+ | , myMethod | ||
+ | , data | ||
+ | , onBeforeSend | ||
+ | , onSucess | ||
+ | , onError | ||
+ | , onComplete) { | ||
+ | return jQuery.ajax({ | ||
+ | ' | ||
+ | , | ||
+ | , ' | ||
+ | , ' | ||
+ | , ' | ||
+ | , ' | ||
+ | , ' | ||
+ | , ' | ||
+ | , ' | ||
+ | , ' | ||
+ | }); | ||
+ | }; | ||
+ | |||
+ | |||
+ | </ | ||
+ | |||
+ | |||
+ | ---- | ||
+ | === Verwenden === | ||
+ | |||
+ | Der Aufruf der Schnittstelle erfolgt über einen Button auf der Seite, das Ergebnis wird in einem Textfeld dargestellt, | ||
+ | |||
+ | Der Button ist mit einer Dynamic Action verknüpft, bei Click wird JavaScript ausgeführt. | ||
+ | |||
+ | Dargestellt sind nur die notwendigsten Fragmente: | ||
+ | |||
+ | <code javascript> | ||
+ | apex.message.clearErrors(); | ||
+ | |||
+ | ..... | ||
+ | |||
+ | if ( call_method == ' | ||
+ | | ||
+ | , ' | ||
+ | |||
+ | }; | ||
+ | //debug - show data | ||
+ | $s(" | ||
+ | |||
+ | } | ||
+ | else { | ||
+ | data={}; | ||
+ | $s(" | ||
+ | } | ||
+ | | ||
+ | // define the data Header | ||
+ | header= { | ||
+ | ' | ||
+ | .... | ||
+ | , ' | ||
+ | }; | ||
+ | | ||
+ | //call | ||
+ | $.gpiJSON ( | ||
+ | url | ||
+ | , header | ||
+ | , call_method | ||
+ | , JSON.stringify(data) | ||
+ | , $.onBeforeSend | ||
+ | , $.onSucess | ||
+ | , $.onError | ||
+ | , $.onComplete | ||
+ | ); | ||
+ | } | ||
+ | |||
+ | </ | ||
+ | |||
+ | |||
+ | |||
+ | ---- | ||
+ | |||
+ | ==== Quellen ==== | ||
+ | |||
+ | JQuery API => http:// | ||
prog/apex_jquery_call_ajax.txt · Zuletzt geändert: 2018/12/10 19:56 von gpipperr