AJAX & Lottie Animation

  範例 ：

1. 引用Lottie JS  https://cdnjs.com/libraries/lottie-web
 Page\Javascript\File URLs

 

2. 建立AJAX

DECLARE
BEGIN
  dbms_session.sleep(5);  --暫停5秒後再執行
  apex_util.set_preference(p_preference => 'DEMO',
                           p_value => apex_application.g_x01,
                           p_user => :app_user);
  apex_json.open_object;
  apex_json.write('return_status', 'S');
  apex_json.close_all;
EXCEPTION
  WHEN no_data_found THEN
    apex_json.open_object;
    apex_json.write('return_satus', 'E');
    apex_json.write('retrun_message', dbms_utility.format_error_stack);
    apex_json.close_all;
END;

3. Button Click Trigger  (參考1 , 參考2)

Action \ Execute JavaScript Code :

const myAnimRegion='myAnimRegion';
$x_Show(myAnimRegion);    /* 顯示Region(動畫顯示區域) */
if (typeof window.rippleLoaded == "undefined") /* 只顯示一次,免得多次顯示多個動畫 */
{
/* Load vector animation from project resources */
const anim = lottie.loadAnimation
(
    {
        container: document.getElementById(myAnimRegion), // required
        path: 'https://assets8.lottiefiles.com/packages/lf20_PygJmaEUwf.json', // required
        renderer: 'svg', // required
        loop: true, // optional
        autoplay: true, // optional
    }
);
 anim.onComplete = () => {
  console.log("My animation is complete");
};
  window.rippleLoaded = true 
};

apex.server.process( 'set_preference',
    { pageItems:'#P2_PREFERENCE',
      x01: apex.item('P2_PREFERENCE').getValue()
    },  // Parameter to be passed to the server
    {
        success: function (pData) {             // Success
            apex.message.showPageSuccess( "Changes saved!" );
        },
        error: function(pData){
            apex.message.clearErrors();
            apex.message.showErrors([
                    {
                    type:       "error",
                    location:   "page",
                    message:    "Save error!!!",
                    unsafe:     false
                    }
                ]);
        },
        dataType: "json" 
    }
).always( function() {
    // code that needs to run for both success and failure cases
    $x_Hide(myAnimRegion);
 }
 );;

*變更動畫顯示大小