Unable to submit form from Modal


  • Shane Barbetta

    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 Hughes
    Zendesk Developer Advocacy

    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.


  • Shane Barbetta

    Hi Tipene Hughes,

    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.


  • Erica Girges
    Zendesk Developer Advocacy
    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!

Please sign in to leave a comment.

Powered by Zendesk