Modal contents are not populating when two (2) Zendesk tickets are open simultaneously | Community
Skip to main content

Modal contents are not populating when two (2) Zendesk tickets are open simultaneously

  • July 13, 2023
  • 5 replies
  • 0 views
Benessa

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

    5 replies

    C
    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?
    Benessa
    • Benessa
    • Author
    • July 17, 2023

    Hi @christopher53, 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

    C
    Hi Benessa,
     
    I see you have a ticket open about this.  I've taken over the ticket to work directly with you there.
      Nayden12
      • Nayden12
      • May 30, 2024

      Hi,

      I'm experiencing the same issue. Unfortunately, the solution was not shared here.

      I have a similar code and everything is working fine, and the modal is getting populated with the expected data, but once I move to a different opened ticket tab and open a modal, the window appears, but it remains empty.

      This is the code I'm using to open the modal:

      const openFileModal = useCallback(async (url: string) => {
    try {
        const client = getZendeskClient()
        const modalContext = await client.invoke("instances.create", {
            location: "modal",
            url: "assets/modal.html",
            size: { width: "80vw", height: "70vh" },
        })

        const modalClient = client.instance(
            modalContext["instances.create"][0].instanceGuid,
        )

        const setHtml = () => {
            const modalContentString = renderToString(
                fileType === "image" ? (
                    <ModalContent data={url} fileType="image" />
                ) : (
                    <ModalContent data={url} fileType="text" />
                ),
            )
            modalClient.trigger("drawData", modalContentString)
            client.off("modalReady", setHtml)
        }

        client.on("modalReady", setHtml)
        modalClient.on("modal.close", () => {})
    } catch (error) {
        console.error("Failed to open modal:", error)
    }
}, [])

      Ned

      Nayden12
      • Nayden12
      • May 30, 2024

      I managed to get it working somehow using the guide here:
      https://developerblog.zendesk.com/making-modals-work-in-zaf-v2-251b7c940e58

      Here are some snippets from my code as it might be useful to someone:

      modal.html___________________
    <body>
        <div id="modal"></div>
		<script>
            function parseParams(param_string) {
                const param_sub = param_string.replace("#", "").split("&")
                const param_obj = _.reduce(
                    param_sub,
                    (memo, k) => {
                        const kv = k.split("=")
                        memo[kv[0]] = kv[1]
                        return memo
                    },
                    {},
                )
                return param_obj
            }

            var client = ZAFClient.init()
            client.on("app.registered", function () {
                var params = parseParams(window.location.hash)
                var parent_guid = params.parent_guid

                var parentClient = client.instance(parent_guid)
                parentClient.trigger("modalReady")

                client.on("drawData", insertModalHtml)
                function insertModalHtml(data) {
                    $("#modal").html(data)
                }
            })
        </script>
    </body>

       

      Calling the Modal______________
const openFileModal = useCallback(
    async (url: string) => {
        try {
            const client = getZendeskClient()
            const context = await client.context()
            const parent_guid = context.instanceGuid

            const modalContext = await client.invoke("instances.create", {
                location: "modal",
                url: `assets/modal.html#parent_guid=${parent_guid}`,
                size: { width: "80vw", height: "70vh" },
            })

            const modalClient = client.instance(
                modalContext["instances.create"][0].instanceGuid,
            )

            const setHtml = () => {
                const modalContentString = renderToString(
                    fileType === "image" ? (
                        <ModalContent data={url} fileType="image" />
                    ) : (
                        <ModalContent data={url} fileType="text" />
                    ),
                )
                modalClient.trigger("drawData", modalContentString)
                client.off("modalReady", setHtml)
            }

            client.on("modalReady", setHtml)
            modalClient.on("modal.close", () => {})
        } catch (error) {
            console.error("Failed to open modal:", error)
        }
    },
    [fileType],
)

      Ned

      Terms & ConditionsCookie settingsAccessibility statement