ajax_object is not defined when ajax calls the function

Question

When I call a function in PHP using ajax I get Uncaught (in promise) ReferenceError: ajax_object is not defined

html2canvas(document.getElementById("primary")).then(function(canvas) {
                        console.log("image_base64: ", canvas);


                        var data = {
                            'action': 'bingogames_canvas_save',
                            'play_id': play_id,
                            'image_base64': canvas.toDataURL()
                        };
                        jQuery.post(ajax_object.ajax_url, data, function(response) {
                            console.log('Got this from the server: ', response);
                        });

                    });

My jQuery function is in a template file. How am I supposed to enqueue the template file?

add_action( 'init', 'my_script_enqueuer' );
function my_script_enqueuer() {

wp_localize_script( 'add-order-front', 'ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );

 wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'add-order-front' );

}

Please help thank you.

Answer 1

As Codex says,

IMPORTANT! wp_localize_script() MUST be called after the script has been registered using wp_register_script() or wp_enqueue_script().

add_action( 'init', 'my_script_enqueuer' );
function my_script_enqueuer() {
  wp_enqueue_script( 'jquery' );
  # before enqueue,if not register then register  
  wp_enqueue_script( 'add-order-front' );
  wp_localize_script( 'add-order-front', 'ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}