how to get javascript file names from context path and load it dynamically

Question

I am developing struts application, in which on menu selection i return a jsp on ajax call and append it in container. It is working fine, but I want to load also javascript for that jsp.

I am using the below code, please guide me how do i load js file dynamically on ajax success:

function openPage( action ) {

showLoader( "Loading..." );
var url = getContextPath() + action;
$.ajax({
    url:url,
    cache: false,
    processData: false,
    contentType:'application/x-www-form-urlencoded',
    type: 'POST',
    success: function ( thePage ) {
        var pathToJSFiles = getContextPath() + "/WEB-INF/js" + action.substring(0, action.indexOf("/",2));
        // (/projectname/web-inf/js/clientregistration/...(2, 3, 4 javascript files here))

        // how to load above javascript files along with (the jsp page : thePage )
        
        $("#thePageContainer").fadeIn();
        document.getElementById("thePageContainer").innerHTML = "";
        document.getElementById("thePageContainer").innerHTML = thePage;
        window.parent.parent.scrollTo(0,0);
        hideLoader();
        $("#thePageContainer").fadeIn();
        

    },
    error: function (xhr, ajaxOptions, thrownError) {
        $("#thePageContainer").fadeIn();
        document.getElementById("thePageContainer").innerHTML = thrownError;
        hideLoader(); 
    }
});

}

The function getContextPath() returns the context path: /projectName

//returns context path
function getContextPath() {
    return window.location.pathname.substring(0, window.location.pathname.indexOf("/",2));
}

The files to load when jsp is loaded:

Looking forward for your response.

Thank you!

Answer 1

I got a workaround to this problem by adding function loadJSFiles in the success something like this:

function openPage( action ) {

showLoader( "Loading..." );
var url = getContextPath() + action;
$.ajax({
    url:url,
    cache: false,
    processData: false,
    contentType:'application/x-www-form-urlencoded',
    type: 'POST',
    success: function ( thePage ) {
        
        loadJSFiles( action );
        
        $("#thePageContainer").fadeIn();
        document.getElementById("thePageContainer").innerHTML = "";
        document.getElementById("thePageContainer").innerHTML = thePage;
        window.parent.parent.scrollTo(0,0);
        hideLoader();
        $("#thePageContainer").fadeIn();

    },
    error: function (xhr, ajaxOptions, thrownError) {
        $("#thePageContainer").fadeIn();
        document.getElementById("thePageContainer").innerHTML = thrownError;
        hideLoader(); 
    }
}); 
}

The function loadJSFiles:

function loadJSFiles(action) 
{
    //action url looks like: /clientRegistration/ClientRegistrationAction.action
    //where clientRegistration is the same name as folder of js files
    //i use it as folder, make a relevant path like /js/clientRegistration/clientregistrationMaintenance.js
    // and load it like below
    var packageAsFileNamePrefix = action.substring(0, action.indexOf("/",2));
    var maintenanceJsFilePath = "js" + packageAsFileNamePrefix + packageAsFileNamePrefix + "Maintenance.js";
    var listJsFilePath = "js" + packageAsFileNamePrefix + packageAsFileNamePrefix + "List.js";

    var jsFiles = [ maintenanceJsFilePath, listJsFilePath ];

    for(var i = 0; i < jsFiles.length; i++ )
    {
        var fileName = jsFiles[i];
        $.getScript( fileName ).done(function( script, textStatus ) {
          console.log( fileName + " loaded!" );
        })
        .fail(function( jqxhr, settings, exception ) {
          alert( "Failed to load JS file: " + fileName );
        });
    }
}