Enqueue script dinamically

Question

I want to enqueue a script dynamically with Ajax. In a page there is a button that on click call the script button-script.js.

This is the code:

// Enqueue Ajax call
add_action('init', 'enqueue_ajax_call');
function enqueue_ajax_call() {
    wp_register_script('enqueue-ajax-call', 'path/to/file/ajax-call.js', array('jquery'));
    wp_localize_script('enqueue-ajax.call', 'ajax_call', array('ajaxurl' => admin_url('admin-ajax.php')));        
    wp_enqueue_script('enqueue-ajax-call');
}

// Enqueue script
add_action('wp_ajax_nopriv_buttonscript', 'enqueue_button_script');
add_action('wp_ajax_buttonscript', 'enqueue_button_script');
function enqueue_button_script(){
   add_action('wp_enqueue_scripts', function(){
       wp_register_script('button-js', 'path/to/file/button-script.js', array('jquery'), '1.0.0', true);
       wp_enqueue_script('button-js');
    });
}

// Ajax call
(function ($) {
"use strict";
    $(document).on('click', '.button', function() {
        $.ajax({
            url : ajax_call.ajax_url,
            data : {
                action : 'buttonscript',
            },
        });
    })
})(jQuery);

There is something wrong in the code or it is not possible to enqueue a script in this way? I know that it is easier to add a inline script or to enqueue the script directly on init, but it is necessary to enqueue the js file specifically after the button click. Thanks.

Answer 1

There's a fundamental misunderstanding of what AJAX does.

You cannot enqueue scripts directly from the PHP called from the javascript. You need to print something that can be used by the javascript making the AJAX call.

You can then use javascript to add that file to the DOM.

---

functions.php

//* Enqueue Ajax call on wp_enqueue_scripts hook
add_action( 'wp_enqueue_scripts', 'enqueue_ajax_call' );
function enqueue_ajax_call() {
    wp_register_script( 'enqueue-ajax-call', PATH_TO . 'ajax-call.js', [ 'jquery' ] );
    wp_localize_script( 'enqueue-ajax.call', 'ajax_call', [ 'ajaxurl' => admin_url(' admin-ajax.php' ) ] );        
    wp_enqueue_script( 'enqueue-ajax-call' );
}

//* Print the button script on the AJAX request.
add_action('wp_ajax_nopriv_buttonscript', 'enqueue_button_script');
add_action('wp_ajax_buttonscript', 'enqueue_button_script');
function enqueue_button_script(){
   echo PATH_TO . 'button-script.js';
   wp_die();
}

ajax-call.js

//* Ajax call
(function ($) {
"use strict";
  $( document ).on( 'click', '.button', function() {
    $.ajax({
      url : ajax_call.ajax_url,
        data : {
          action : 'buttonscript',
        },
      },
      function(filename){
        // Do something useful with the filename
        var script = document.createElement( 'script' );
        script.setAttribute( "src", filename );
        document.getElementsByTagName( "head" )[0].appendChild( script );
      });
  });
})(jQuery);