add documentation for JS admin backend code

[sknopp]

Hi!

Issue Overview

I've nearly finished developing some basic ticket booking elements for torro-forms. But i can't figure out how to correctly include my JS code so it is executed AFTER the form elements have been loaded. Currently i'm helping myself by just using setTimeout() 😞

Current Behavior

So my JS code is included in the extension.php as shown by example code.:

class Extension extends Extension_Base {
        // [...]
	protected function register_assets() {
                // [...]
		$this->assets->register_script( 'admin-ticketselection-element', 'assets/js/admin-ticketselection-element.js', array(
			'deps'			=> array( 'jquery', 'torro-template-tag-fields', 'torro-admin-form-builder' ),
			'ver'			=> $this->version,
			'in_footer'		=> true,
			'localize_name' => '',
			'localize_data' => array(

			)
		));
                // [...]
         }
        // [...]
}

The admin-ticketselection-element.js looks as follows:

( function( torro, $ ) {
	'use strict';
    $(document).ready(function(){
		setTimeout(function(){
	        $(".plugin-lib-ticketchoices-control").each(function(index){
	            let self = $(this);
	            $(this).find("option").each(function(option_index){
	                if($(this).attr('value') == self.data("value")){
	                    $(this).attr('selected', '');
	                }
	            });
	        });
		}, 2000); //yepp, hacked! But only god knows how to get this code executed at the right time!
    });
}( window.torro, window.jQuery ) );  // <-- HOW DO I USE THOSE CORRECTLY?!

Possible Solution

Please document what to do to get the code running at the right time after the page has loaded.

Screenshots / Video

This is, how it looks at the moment. The values for the dropdown fields should be set by JS above:

Thank you for any helpful hint! 😊