Modal contents are not populating when two (2) Zendesk tickets are open simultaneously
Hi all,
Currently, I have a working modal that is triggered by a button using the onclick event. There are three (3) buttons that trigger the modal but each of them contains different data. The contents of the modal are from the divs which were populated using Handlebars from a JSON response when calling the API endpoint. The divs are using unique IDs.
While doing some tests, I noticed that when two (2) Zendesk tickets are open simultaneously, the Modal is no longer populated on the second ticket that was opened but it is still working on the first ticket that was opened. When I tried refreshing the page, the Modal works fine on the ticket that is active but no longers works on the ticket that is inactive.
Kindly check this Loom video to understand better what I meant.
Looking forward to your reply.
Thank you,
Benessa
-
Hi Benessa,
Which API's are you fetching the modal data from? Are you seeing a response from the endpoint on cases where the modal has no data?
Also, when are you fetching the modal data? Before the click and creation of the modal? On click/creation? From the modal itself after creation?
-
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 -
Hi Benessa,
I see you have a ticket open about this. I've taken over the ticket to work directly with you there.
댓글을 남기려면 로그인하세요.
3 댓글