Unable to submit form from Modal | The place for Zendesk users to come together and share
Skip to main content
Question

Unable to submit form from Modal

  • August 9, 2023
  • 4 replies
  • 0 views
S

Hello,

I'm working on a Status.io integration and I'm having a bit of difficulty dealing with the ZAFClient in the context of a pop-out modal. My code can be found here:

https://github.com/sbarbett/status_io

When creating an incident, I have the app invoking a modal which contains a form with some fields that are necessary in the API request that gets sent to Status.io. However, I'm seeing some peculiar behavior. I had this working correctly before I tried putting the form inside a modal, by that I mean I was able to create an incident from the app. Now, when I try to submit the form from the modal, I'm getting an error in the console:

Uncaught TypeError: client.invoke is not a function
    <anonymous> http://localhost:4567/0/assets/modal.js:4
    <anonymous> http://localhost:4567/0/assets/modal.js:90

It's like it's looping back to the beginning of my modal.js script and the client object is no longer instantiated. I can see it instantiated, however, in the console when the app is initially loaded.

I am attempting to pass the parent client guid to the modal so I have access to the ticket and, to do so, I initially referred to this blog post to try and get it working: https://developerblog.zendesk.com/making-modals-work-in-zaf-v2-251b7c940e58

4 replies

S
  • Shane19
  • Author
  • August 9, 2023

I committed some changes to the repo just now. I added some more console.logs to try and pinpoint what's occurring. The stuff inside this event listener, which is anticipating the "click" of the "create incident" button within the modal, isn't even being interpreted.

document.getElementById('create-incident-modal').addEventListener('click', function() {
...
});

I'm trying to log a couple things in there, but they're not showing in the console. Instead, I get the error from my original post whenever the button is clicked. Again, it's like it's going back to the top of modal.js whenever the button is clicked, but it immediately errors on the first use of the "client" object, which is the "client.invoke" method.

Tipene
  • TipeneEmployee
  • Employee
  • August 16, 2023

Hey Shane,

I've only taken a cursory look at the code so far but can you try giving the client variable a unique name in your modal.js file - something like modalClient will do. I'm thinking there may be a conflict since the ZAFclient is being instantiated under the same variable name in both instances.

Let me know if this has any effect on what you're seeing.

 

    S
    • Shane19
    • Author
    • September 6, 2023

    Hi @tipene,

    Thanks for the suggestion and sorry I took so long to respond - just getting back from PTO. I tried changing the name of the client instantiated within the modal script to "modalClient," but, unfortunately, it was producing the same behavior. What is interesting is that the client is able to retrieve the list of infrastructural components from Status.io.

    The "infrastructure affected" selector is populated using an API call to Status.io that returns a list of components. When I click "create incident," however, and it is supposed to send the POST request to Status.io in order to create the incident, I'm seeing the peculiar error message.


    It's worth noting that I had the POST working before I tried moving the form into a modal, i.e. I was able to create incidents from the app, but the form was located in the sidebar. I wanted it in a modal due to the limited space in the sidebar.

    If there's any specific information that would help us get to the bottom of this, please let me know. The code on GitHub is still current. The only thing I didn't commit to the repo was the renaming of the instance of the Zendesk Client within the scope of the modal to "modalClient," but that didn't seem to make a difference.

    Best,
    Shane

    E
    • Erica26Employee
    • Employee
    • September 11, 2023
    Hi Shane! 
     
    Taking a look at the Medium article and comparing it to your code, the only difference I notice is that, in your app, the modal instance is trying to register prior to the parent guid being passed to it. I see that you have client.on('app.registered', init) in your modal.js file. 
     
    In the Medium example the modal is being created at the same time that the ticket app client is registered. So that when instances.create is ran the modal client has already been registered. In your app though, a button is being used to trigger the modal creation. 
     
    Right now, we have the modal trying to register before the button click but it doesn't yet have the parentGuid from the sidebar app.
     
    I suggest removing client.on('app.registered', init)from the modal.js file.
     
    Move the createModal function to the modal.js file (wrapped around the init) so that you can ensure the modal init takes place prior passing the data and parentGuid.
     
    Hope this helps!
     
    Erica 
     
    Terms & ConditionsCookie settingsAccessibility statement