How to apply js and css to ajax loaded content?

Question

When content get loaded through ajax, neither theme.css or js get applied. Below is code snippet,

controller

    $twig = \Drupal::service('twig');
        $twigFilePath = drupal_get_path('module', 'mythemename') . '/templates/test.html.twig';
        $template =  $twig->loadTemplate($twigFilePath);
      $markup = $template->render(array('gainerList' => $gainerList, 'loseList' => $looserList));

        $build = array(
            '#type' => 'markup',
            '#markup' => $markup,
            '#attached' => array(
                'css' => array(
                    drupal_get_path('themes', 'mythemename') . '/css/theme.css'
                )
            )
        );
        return new Response(render($build));

Is there any issue with above code?

Also below testing code does not hide the second

.

 $build = array(
            '#type' => 'markup',
            '#markup' => '<p>Demo text content</p> <p style="display:none">Demo text content</p>',
        );
        return new Response(render($build));

Js file code snippet:

(function ($, Drupal) {
  'use strict';

  Drupal.behaviors.company = {
    attach: function(context, settings) {
        $.ajax({
                url: "get-top-performing-fund",
                type: 'GET',
                success:function(data, error){
                    console.log(data);
                    $('#topPerforming').html();
                    $('#topPerforming').html(data);
                }
        });
    }
}
})(jQuery, Drupal);

Answer 1

Is there any issue with above code?

Yes, you're using the D7 approach. In D8 it is different. You need to create a libraries.yml file where you will define your CSS and JS files.

See:

Adding stylesheets (CSS) and JavaScript (JS) to a Drupal 8 module

Adding stylesheets (CSS) and JavaScript (JS) to a Drupal 8 theme

Once you have a library you can attach it like this:

  '#attached' => array(
    'library' => array(
      'your_theme/library_name',
    ),