Difference between compiled and executed javascript program

this we can call the deepening of this question.

We are still in a Spring Boot project with Java 1.8, and the problem is applying the logic described in the linked question, to a pre-existing program that does many other things at the same time. It is possible that the flow structure is also questionable, so any suggestions are still welcome.

Anyway, the flow is as follows:

• On the main.html page, which is the entry point, there is a button that calls the endpoint:

@GetMapping(value = {"/getConsole"})
public String getConsole(HttpSession session) {
    Console console = service.setupConsole();
    session.setAttribute("console", console);
    return "console";
}

In the service the Console object is populated with several fields, the ones we are interested in for this analysis are 3 and they are all lists of strings.

• The “console.html” page uses thymeleaf to include: a fragment with CDNs

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet">

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

a style sheet (which should not affect the flow) and 3 html pages in the body.

• In one of these 3 included html pages, there is a Card with a select that triggers an AJAX call passing the choice made, receiving as response the same html page but filled with some fields (different for each option).

The recalled endpoint that handles this operation also contains the model in question:

@GetMapping(value = {"/getCompiledPage"})
public String getCompiledPage(@RequestParam("type") String type, Model model, HttpSession session) {

    MyPage selectedPage = service.getSelectedPage(type, ((Console) session.getAttribute("console")).getPages());

    if (selectedPage == null) {
        log.error("selectedPage is not valid");
        return "error";
    }
    
    model.addAttribute("selectedPage", selectedPage);
    model.addAttribute("inputs", getFieldNamesExcluding(Arrays.asList("title", "type", "link", "referenceDates")));

    return "templatePage";
}

And the page it calls up is obviously the same page that made the AJAX call, as it returns the answer.

• At the end of this same page I inserted at the end of the div with the main logic, in the body, this snippet:

<button type="button" onclick="start()">Press here</button>

<script th:inline="javascript">
    function start() {
        /*<![CDATA[*/
            var inputs= /*[[${inputs}]]*/ 'default';
            console.log("inputs: ",inputs);
        /*]]>*/
    }
</script>

When I access the page and choose the type option I'm interested in, I actually get the page filled out (I've checked it with console.log), with this particular part:

<button type="button" onclick="start()">Press here</button>

<script>
    function start() {
        /*<![CDATA[*/
            var inputs= ["countries","inputTypes","tableNames"];
            console.log("inputs: ",inputs);
        /*]]>*/
    }
</script>

So the process should be correct I tell myself.

And instead as soon as I click the button (which I put just to test the functionality, otherwise I would need to use the value of that string list in another script) I get: inputs: null

With this body in the 'Source' (accessible via browser analysis tools):

<button type="button" onclick="start()">Press here</button>

<script>
    function start() {
        /*<![CDATA[*/
            var inputs= null;
            console.log("inputs: ",inputs);
        /*]]>*/
    }
</script>

I would expect that there is no difference between compiled page and running page, yet it changes everything in the communication between model and javascript. Although in the problem linked at the beginning, with almost identical logic, the result obtained was correct.

Basically I would like the list of strings to be displayed by the console.log to give me confidence that that model arrived correctly from the controller to the html page and then I can use it for other scripts.

Silly mistake.

Certainly writing the question in such a well-defined way helped me to find the solution as well.

The problem was in the fact that the response of the AJAX call was being processed on success, to update only a particular div in the page. Therefore, by inserting the script externally, it was not being nominated for updating.