Issue With Modals | Community
Skip to main content

Issue With Modals

  • November 1, 2022
  • 5 replies
  • 0 views
S

Hi,

The following code is executed each time I create a modal:
--------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------
    var modalClient = client.instance(modalContext['instances.create'][0].instanceGuid);
        client.on('modalReady', function(){
              modalClient.trigger(message);
    });

        modalClient.on('modal.close', function() {
        // The modal has been closed.
            client.off('modalReady');
        });
--------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------
I create a new 'on' listener each time because the instanceGuid for the modal is different each time, and I need to trigger that particular modal.

My problem is that I get error messages on the second (and subsequent) times when I open the modal. The error is: Cannot access instance [insert guid here].

It is occurring on the line: modalClient.trigger(message);

I believe the problem stems from the fact that each time the displayModal function is called, it creates the client.on('modalReady'... function, and each of these is staying 'alive' when the modal is destroyed -- so when 'modalReady' is triggered, the error occurs once for each of the previous incarnations of the modal that have been destroyed.

I have tried using "client.off('modalReady');" on the modal.close event -- but this doesn't seem to work.

Could anyone help?

Thanks,

SGL

    5 replies

    Tipene
    • Tipene
    • November 2, 2022

    Hey, @simon27!

    Can you try moving the "client.off('modalReady');" inside the "client.on('modalReady')" method, after the trigger method? This should ensure that the trigger executes, and then the event handler is immediately removed from the parent client.

    Let me know how you go!

    Tipene

    S
    • Simon27
    • Author
    • November 2, 2022

    Hi Tipene,

    Thanks for the response. I only added "client.off('modalReady');" to try and fix the issue. I still get the problem whether it is there or not.

    The trigger always executes with or without that line. I want to cancel previous versions of the 'modalReady' listener as these give error messages for each modal that was destroyed.

    Thanks,

    SGL.

    Tipene
    • Tipene
    • November 2, 2022
    Hey SGL,
     
    Likely what's happening is that every time the trigger executes, it's adding the custom event to an array that's associated with the parent client. When the modal is closed/destroyed, the custom event isn't destroyed since it's associated with the parent client, not the modal client. Next, when a new modal is created it still tries to call the first item on the custom event array from the parent client but because the event from the first modal is still present, it generates an error since that instanceGuid is no longer valid. 
     
    So, if you try adding the client.off method within "client.on('modalReady')", that should ensure that the custom event is removed from the parent client event array after it's been executed. The only other thing you'll need to do is name the callback function within the client.on method so the client.off method has a point of reference:
     
      var modalClient = client.instance(modalContext['instances.create'][0].instanceGuid);
            client.on('modalReady', function sendMessage(){
                  modalClient.trigger(message);
                  client.off('modalReady', sendMessage);
        });
          modalClient.on('modal.close', function() {
            // The modal has been closed.            
            });
     
    Let me know if you have any questions!
     
    Tipene
      S
      • Simon27
      • Author
      • November 2, 2022

      Hi Tipene,

      That's working now, thanks.

      I guessed that the custom events were still live, but I couldn't see why "client.off('modalReady');" didn't kill them. It was naming the callback function that seems to have done the trick.

      Thanks,

      SGL.

      Tipene
      • Tipene
      • November 2, 2022
      No worries, happy to help!
       
      Have a great day :)
       
      Tipene
      Terms & ConditionsCookie settingsAccessibility statement