IndexedDB object 到 jQuery 自定义触发事件？

Question

I am working on IndexedDB functionality in JS - i would like to add some custom jquery trigger event with object of IndexedDB upon success callback, not sure whether it is possible but when i test event fired but it doesn't pass IndexedDB object

            if ( !window.indexedDB ) {
                console.log( `Your browser not support IndexedDB` ) ;
                return ;
            }
            const request = indexedDB.open( 'pdr' , 1 ) ;
            request.onupgradeneeded = ( event ) => {
                let db = event.target.result ;
                let store = db.createObjectStore( 'CanvasObjects' , {
                    autoIncrement : true
                } ) ;
            } ;
            request.onerror = ( event ) => {
                console.error( `Database error: ${event.target.errorCode}` ) ;
            } ;

            request.onsuccess = ( event ) => {
                const db = event.target.result ;
                console.log(db);
                jQuery( document ).trigger( 'test_db_connected' , db ) ;

            } ;

After that i perform function on test_db_connected jquery event with following code

jQuery( document ).on( 'test_db_connected' , function ( db ) {
    console.log( 'testing_db' ) ;
    console.log( db ) ; 
    const txn = db.transaction( 'CanvasObjects' , 'readwrite' ) ; 
   } ) ;

but with above code it create error

Uncaught TypeError: db.transaction is not a function

Further check i figure out that whatever object return on request.onsuccess is not same in jQuery custom trigger event.

Is there any possibilities to pass IndexedDB object to the custom jquery trigger event?

Appreciate your response.

Answer 1

You are not using jQuery's event methods correctly. The handler accepts additional parameters for any custom data you send. So your handler should look like this:

jQuery(document).on('test_db_connected', function(ev, db) {
  console.log('testing_db');
  console.log(db);
  const txn = db.transaction('CanvasObjects', 'readwrite');
  console.log(txn);
});

Additionally, you really should use jQuery's Event object for constructing and triggering custom event. The docs state that the String event type parameter is to be used for DOM level events. But this still works fine.

Working Solution