Hi Christopher Kennedy, thank you for your response.

To answer your questions, it's a custom API that fetches the data of the Ivanti incident from Ivanti (third-party provider) and yes, I am seeing the response from calling the API endpoint. The API endpoint is called on the load of the ticket/app so the data are already in the div even before the modal is called.

Below are parts of the codes that are used for the modal:

1. Function to populate div with the data from the API response (on load of the ticket/app)

//
// Show Ivanti incident Task/s
//
function showIvantiIncidentTasks(data, ivantiIncidentId) {
  // Retrieve Ivanti incident task/s details
  var tasks;

  if (data.tasks !== null ) {
    tasks = Object.values(data.tasks);
  }

  console.log("  Ivanti Incident tasks OK");

  // Display Ivanti incident task/s
  var source = $('#view-ivanti-incident-tasks').html();
  var template = Handlebars.compile(source);
  var newHTML = template({tasks});

  $('#tasks-' + ivantiIncidentId).append(newHTML);
}

2. The div that contains the data

<script id="view-ivanti-incident-tasks" type="text/x-handlebars-template">
    <p class="data">Ivanti Incident Tasks:</p>
    <br/>
    {{#if tasks}}
        {{#each tasks}}
            <div class="task-details">
                <p>Status: <span class="data">{{status}}</span></p>
                <p>Created on: <span class="data dateTime">{{createdDateTime}}</span></p>
                <p>Owner Team: <span class="data">{{ownerTeam}}</span></p>
                <p>Owner: <span class="data">{{owner}}</span></p>
                <p>Subject: <span class="data">{{subject}}</span></p>
                <p>Details: <span class="data">{{{details}}}</span></p>
            </div>
        {{/each}}
    {{else}}
        <p>No tasks available</p>
    {{/if}}
</script>

3. The button that is used to call the modal

<a href="#" id="viewTasks" onclick="viewTasks('{{incidentId}}')">View Tasks</a>

4. The function that is called by the button

//
// Display Ivanti Incident Tasks
//
function viewTasks(incidentId) {
  convertDateTime();
  var html = $("#tasks-" + incidentId).html();
  client.invoke('instances.create', {
    location: 'modal',
    url: 'assets/modal.html',
    size: { // optional
      width: '80vw',
      height: '70vh'
    }
  }).then(function(modalContext) {
    // The modal is on the screen now!
    var modalClient = client.instance(modalContext['instances.create'][0].instanceGuid);
    client.on('modalReady', function setHtml(){
      modalClient.trigger('drawData', html);
      client.off("modalReady", setHtml);
    });
    modalClient.on('modal.close', function() {
    // The modal has been closed.
      console.log('The modal has been closed');
    });
  });
};

5. Below are the contents of modal.html

<!DOCTYPE html>
<html lang="en-gb" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>Technology Incident Zendesk App</title>
        <link href="//cdn.jsdelivr.net/combine/npm/@zendeskgarden/css-bedrock,npm/@zendeskgarden/css-grid,npm/@zendeskgarden/css-buttons,npm/@zendeskgarden/css-forms,npm/@zendeskgarden/css-utilities,npm/@zendeskgarden/css-callouts" rel="stylesheet" />
        <link href="main.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js" integrity="sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh" crossorigin="anonymous"></script>
        <script type="text/javascript" src="https://assets.zendesk.com/apps/sdk/2.0/zaf_sdk.js"></script>
        <script src="modal.js" defer></script>
    </head>

    <body>
        <div id="view_container">
        </div>

        <script>
            var client = ZAFClient.init();
            client.on('app.registered', function(){
                var ticketClientPromise = client.get('instances').then(function(instancesData) {
                    var instances = instancesData.instances;
                    for (var instanceGuid in instances) {
                        if (instances[instanceGuid].location === 'ticket_sidebar') {
                            return client.instance(instanceGuid);
                        }
                    }
                });
                ticketClientPromise.then(function(ticketClient) {
                    //send a message back to the parent client to let it know the modal is now ready for events to be triggered
                    ticketClient.trigger('modalReady');
                });
            });
            client.on('drawData', insertModalHtml);
            function insertModalHtml(data){
                $("#view_container").html(data);
            };
        </script>
    </body>
</html>

Let me know if you need anything to better understand my issue. Looking forward to your reply.

Thank you,
Benessa