Loading external page template and enqueue script from plugin causes 403 forbidden error

I have a plugin, which creates a panel on following page:

mysite.com/wp-content/plugins/myplugin/includes/mypanel.php

I want to use this panel on following page

mysite.com/mypanel

Solution that I tried was to using mypanel.php as page template as below:

add_filter( 'page_template', 'wpa3396_page_template' );
function wpa3396_page_template( $page_template )
{
    if ( is_page( 'mypanel' ) ) {
        $page_template = dirname( __FILE__ ) . '/includes/mypanel.php';
    }
    return $page_template;
}

This way the page displays but none of the javascript works. So I have tried to import plugin’s javascript in functions php.

add_action('wp_enqueue_scripts','Load_Template_Scripts_wpa83855');
function Load_Template_Scripts_wpa83855(){

    if ( strpos(get_page_template(), 'mypanel.php') !== false ) {
        wp_enqueue_script('wtd', $_SERVER['DOCUMENT_ROOT'].'/wp-content/plugins/myplugin/js/wtd.js');
    }

}

Which resulted 403 forbidden error. I added tried adding an .htaccess folder into plugin’s page but it continued to give error.

Please tell me what is the correct way to solve this problem.

EDIT:
After some answers below (thanks everyone). I moved my codes to my plugin’s page, and no more 403 forbidden error. But my buttons are not working, and I feel like my js file not run over the page.

My js file starts with: jQuery(document).ready(function()

Here final code on plugin’s page:

/* Make tisort-tasarla page as template */
add_filter( 'page_template', 'wpa3396_page_template' );
function wpa3396_page_template( $page_template )
{
    if ( is_page( 'tisort-tasarla' ) ) {
        $page_template = dirname( __FILE__ ) . '/includes/tshirt-designer-design-template.php';
    }
    return $page_template;
}
/* Add Javascript to T-Shirt Design Page */

add_action('wp_enqueue_scripts','Load_Template_Scripts_wpa83855');
function Load_Template_Scripts_wpa83855(){

    if ( is_page( 'tisort-tasarla' ) ) {
        wp_enqueue_script( 'wtd', plugins_url( '/js/wtd.js' , __FILE__ ), array( 'jquery' ));        
    }    
}

Solutions Collecting From Web of "Loading external page template and enqueue script from plugin causes 403 forbidden error"

Your CODE is fine, the reason you are getting 403 error is because $_SERVER['DOCUMENT_ROOT'] returns absolute PATH to your web root, not URL.

JavaScript needs to be added as URL. So, you may use Load_Template_Scripts_wpa83855 function in your plugin and then use:

wp_enqueue_script( 'wtd', plugins_url( '/js/wtd.js' , __FILE__ ) );

CODE to add JavaScript.

Note: obviously you can make the CODE even better using logic like what @nathan used in his answer, i.e. adding:

add_action('wp_enqueue_scripts','Load_Template_Scripts_wpa83855');

within the wpa3396_page_template() function in if ( is_page( 'mypanel' ) ) {} condition block; but that’s not the reason of the error. Server PATH cannot be accessed by browser, that’s why the server returns Access Forbidden error.

Full CODE (Updated):

Here is the full CODE for your convenience (add it in your main plugin file):

add_filter( 'page_template', 'wpse_262042_page_template' );
function wpse_262042_page_template( $page_template ) {
    if( is_page( 'mypanel' ) ) {
        add_action( 'wp_enqueue_scripts', 'wpse_262042_enqueue_scripts' );
        $page_template = plugin_dir_path( __FILE__ ) . 'includes/mypanel.php';
    }
    return $page_template;
}

function wpse_262042_enqueue_scripts() {
    wp_enqueue_script( 'wtd', plugins_url( 'js/wtd.js' , __FILE__ ), array( 'jquery' ) );
}

If you already have, or are planning to have, a page called ‘mypanel’, then you can use the page_template filter to filter the template used on that page. I’m assuming that’s what you’re doing.

We can use the page_template filter to use a custom template for this page. While using this filter, we can add an action to enqueue scripts specific for this page.

add_filter( 'page_template', 'wpse_262042_page_template', 10, 1 );
function wpse_262042_page_template( $page_template ) {
  if( is_page( 'mypanel' ) ) {
    add_action( 'wp_enqueue_scripts', 'wpse_262042_enqueue_scripts' );
    $page_template = plugin_dir_path( __FILE__ ) . 'includes/mypanel.php';
  }
  return $page_template;
}
function wpse_262042_enqueue_scripts() {
  wp_enqueue_script( 'wpse-262042', plugins_url( '/js/wpse-262042.js', __FILE__ ) );
}

In the /includes/mypanel.php template file, make sure to call wp_head() and wp_footer() otherwise the enqueued scripts won’t be printed.