discord.js - Imagine ❄•16mo ago

Modal Interaction

Hi there, well appreciated to have your assisting... I am new in discordjs currently trying to create a ticket bot for my server, and stuck at modal submission part... Would like to have any of your professional advise on my case..

58 Replies

d.js toolkit•16mo ago

- What's your exact discord.js npm list discord.js and node node -v version? - Not a discord.js issue? Check out #other-js-ts. - Consider reading #how-to-get-help to improve your question! - Explain what exactly your issue is. - Post the full error stack trace, not just the top part! - Show your code! - Issue solved? Press the button!

FGOP•16mo ago

FGOP•16mo ago

https://sourceb.in/GlIqnbKSB6 https://sourceb.in/ildbdyyRXk https://sourceb.in/bmcAogpMDN

SourceBin

ticket.js

Instantly share your code with the world.

SourceBin

InteractionCreate.js

Instantly share your code with the world.

SourceBin

Event Handler.js

Instantly share your code with the world.

FGOP•16mo ago

I am trying to do two collector into ticket.js 1. SelectionMenu Collector 2. Button Collector currently on the stage of selectionCollector, to create different Modal to each selection, and once they filled the Modal will proceed to create ticket

ShompiFlen•16mo ago

and what is your issue

FGOP•16mo ago

my issue here is 1. couldnt show modal 2. while submitted model, it doesnt create a thread /send embed as expected... https://srcb.in/o8nXF16QYJ

SourceBin

ticket.js

Instantly share your code with the world.

ShompiFlen•16mo ago

okay so... what does your bot do and what doesn't there is a lot of code we need to narrow this

FGOP•16mo ago

so it's mainly regarding ticket 1. Create ticket panel, with selection menu (support | billing) (works) 2. Once selected support/ billing, user will need to fill up it's modal forms 3. Once filled up, it will create thread and send welcomeEmbed and show the modal input as an embed (like a form embed) 4. At welcomeEmbed will have several buttons including (resolve, close, receipt) 5. Each button got their interaction. However currently modal doesn't pop up, currently stuck at step(2) All I need is to make interaction within ticket.js using collectors, since the bot got the other commands like giveaway, suggestion and all those general needed... And I'm not pretty sure if I could make two collector into one .js file... (selectorCollector and button collector) I guess if this explain what you wanna know....

ShompiFlen•16mo ago

ill check again in a couple of minutes okay wait, im seeing a lot of wrong stuff here to begin with interaction.mentions.channels.first(); this is not a thing in an interaction object, interaction do not have mentions also doing this interaction.channel.messages.delete(interaction); i dont think this works if interaction is an Interaction object, interactions are not messages themselves afaik you need to clarify here whether or not interaction is a message or an interaction those are different things

FGOP•15mo ago

It works pretty good, interaction is used as a message not a button/selection interaction could you help check why is the interaction to create room (in threads) doenst works

ShompiFlen•15mo ago

explain and show the related code explain your intention

FGOP•15mo ago

https://sourceb.in/IamVjAdH8f this is the code, let me explain

SourceBin

Create Modal for user fill up form

Instantly share your code with the world.

FGOP•15mo ago

to Create a support ticket for my server players to submit their ticket based on their needs, also needed to log each of the ticket

FGOP•15mo ago

ShompiFlen•15mo ago

okay and what part doesnt work where does it break also what version of discord.js are you using this looks like V13 well its a mix ov V13 and V14

FGOP•15mo ago

haha, i am using ChatGPT as a based code thats why quite confusing... discordjsv14.13

ShompiFlen•15mo ago

just remember to use chatgpt as a guide not as a copy and paste thing because now i know why this code is half wrong interaction.channel.createMessageComponentCollector({ componentType: ComponentType.STRING_SELECT }); the ComponentType is not longer in screaming case use ComponentType.StringSelect

                const selectedValue = i.values[0];
                const ticketType = selectedValue;

                const selectedValue = i.values[0];
                const ticketType = selectedValue;

this is a bit of nitpicking but this double assignment is just unnecessary ok so the code for now works until you show the modal to the user what happens after you click submit?

FGOP•15mo ago

I have adjst a little codes to remove the double assignment, and amend for StringSlect https://sourceb.in/7dvSsfauRd currently the codes doesnt work is show the modal after selection

SourceBin

Create Modal for user fill up form

Instantly share your code with the world.

ShompiFlen•15mo ago

okay wait so i see another issue now

FGOP•15mo ago

pardon , i dont have any knwoledge in coding a bot... thats why to ask chatgpt for a foundation , and i know its knowledge base only updated till discord.js v13 ok

ShompiFlen•15mo ago

you are waiting for a modal submition inside your string select collector which is filtering it out since its not a string select menu interaction

FGOP•15mo ago

ah so i need create new collector for it or should i remove the collector filter the component type?

ShompiFlen•15mo ago

either that or you can handle this modal submittions globally in your interaction create event i dont think thats a good idea ah wait, you need the information from the select menus to be available after the modal submition right?

FGOP•15mo ago

yes

FGOP•15mo ago

similar to this

ShompiFlen•15mo ago

okay so there is another unnecesary thing

 const ticketType = i.values[0];

                if (ticketType) {

 const ticketType = i.values[0];

                if (ticketType) {

this is not necessary since the only reason to receive a select menu interaction here is if the user selected something so i.values[0] should always have a value

FGOP•15mo ago

i see

ShompiFlen•15mo ago

that if statement is not necessary there okay once you remove that you can create the base of the modal in a more global scope (outside the if statements) this is the base

const supportModal = new ModalBuilder()
                            .setCustomId('supportmodal')
                            .setTitle('Support Ticket Form');

const supportModal = new ModalBuilder()
                            .setCustomId('supportmodal')
                            .setTitle('Support Ticket Form');

you can move that out of there then this part

                        // Show the modal to the user
                        await i.showModal(supportModal);

                        // Show the modal to the user
                        await i.showModal(supportModal);

you can remove that from the if statements and move it to the outer scope of where you build the text input fields, since anyway you are going to show a modal to the user, you can call this after you build them, just once then after you show the modal, right below it you can wait for a submition using i.awaitModalSubmit() https://old.discordjs.dev/#/docs/discord.js/main/class/SelectMenuInteraction?scrollTo=awaitModalSubmit const modalInteraction = await i.awaitModalSubmit({time: 60_000}), altough you need to catch the rejection from this if the user never submits the modal

FGOP•15mo ago

one second , i am trying to understand I have two Modal here, one is supportmodal and another is billingmodal

ShompiFlen•15mo ago

yes but both get build depending on the choice in the select menu, right?

FGOP•15mo ago

yep

ShompiFlen•15mo ago

also you are using the customId of the select menu you should use the actual value the customid is the id of the select menu, not the choices these if statements

// Handle ticket creation based on the selected ticket type
                    if (i.customId === 'supportselection') {

// Handle ticket creation based on the selected ticket type
                    if (i.customId === 'supportselection') {

should be if(i.values[0] === 'supportselection') for example show me your select menu

FGOP•15mo ago

one sec

            // Create menu for Panel 

            const ticketSelection = new StringSelectMenuBuilder()
                .setCustomId('ticket_selection')
                .setPlaceholder('Select a Ticket category you want to create.')
                .addOptions(
                    new StringSelectMenuOptionBuilder()
                        .setLabel('Support Ticket')
                        .setValue('supportselection')
                        .setEmoji('🛠'),
                    new StringSelectMenuOptionBuilder()
                        .setLabel('Billing Ticket')
                        .setValue('billingselection')
                        .setEmoji('💵'),
                );

            const ticketSelectionRow = new ActionRowBuilder().addComponents(ticketSelection);

            // Create menu for Panel 

            const ticketSelection = new StringSelectMenuBuilder()
                .setCustomId('ticket_selection')
                .setPlaceholder('Select a Ticket category you want to create.')
                .addOptions(
                    new StringSelectMenuOptionBuilder()
                        .setLabel('Support Ticket')
                        .setValue('supportselection')
                        .setEmoji('🛠'),
                    new StringSelectMenuOptionBuilder()
                        .setLabel('Billing Ticket')
                        .setValue('billingselection')
                        .setEmoji('💵'),
                );

            const ticketSelectionRow = new ActionRowBuilder().addComponents(ticketSelection);

ShompiFlen•15mo ago

yea so your if statements should depend on i.values[0] instead of the customid of the select menu

FGOP•15mo ago

i see, then i remove the i.value i will use customID instead

ShompiFlen•15mo ago

you got it wrong you dont have to use custom id you have to use the value the custom id will always be ticket_selection

FGOP•15mo ago

value = billingselection? this .setValue('billingselection') one sec, let me try amend that

ShompiFlen•15mo ago

the value the user selected is i.values[0], which will be one of billingselection or supportselection, your if statements that check for this are currently checking for the custom id of the interaction, thats the wrong part

FGOP•15mo ago

omg, it works so nice now, thanks for your expertise , heres my latest codes https://sourceb.in/WB5YBocngo but now problem are: 1. when player selected menu got error:

TypeError: supportModal.isModalSubmit is not a function
    at InteractionCollector.<anonymous> (/home/devbot/commands/prefix/staff_utility/ticket.js:257:40)
    at InteractionCollector.emit (node:events:526:35)
    at InteractionCollector.handleCollect (/home/devbot/node_modules/discord.js/src/structures/interfaces/Collector.js:133:14)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

TypeError: supportModal.isModalSubmit is not a function
    at InteractionCollector.<anonymous> (/home/devbot/commands/prefix/staff_utility/ticket.js:257:40)
    at InteractionCollector.emit (node:events:526:35)
    at InteractionCollector.handleCollect (/home/devbot/node_modules/discord.js/src/structures/interfaces/Collector.js:133:14)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

2. unable to submit forms like picture, dont have any erorr shows

SourceBin

Create Modal for user fill up form

Instantly share your code with the world.

FGOP•15mo ago

maybe I should have use i.isModalSubmit

ShompiFlen•15mo ago

no await supportModal.isModalSubmit(); you need to actually save this modal submition here also no thats not right i told you to use i.awaitModalSubmit()

FGOP•15mo ago

ShompiFlen•15mo ago

then save the modal as follows const submition = await i.awaitModalSubmit(), submition will be the modal interaction coming from that channel

FGOP•15mo ago

found it

ShompiFlen•15mo ago

although you are not taking into consideration other users or anyone that can see the thread from submiting a modal

FGOP•15mo ago

owh, then how can i make a private threads? I got it now

FGOP•15mo ago

After that, how can i add the modal fields?https://sourceb.in/pCqsGN49Eg

SourceBin

Create Modal for user fill up form

Instantly share your code with the world.

FGOP•15mo ago

const submittedSupport1 = supportModalInteraction.getTextInputValue("support_first");
                        const submittedSupport2 = supportModalInteraction.getTextInputValue("support_second");
                        const submittedSupport3 = supportModalInteraction.getTextInputValue("support_third");
                        const submittedSupport4 = supportModalInteraction.getTextInputValue("support_forth");

const submittedSupport1 = supportModalInteraction.getTextInputValue("support_first");
                        const submittedSupport2 = supportModalInteraction.getTextInputValue("support_second");
                        const submittedSupport3 = supportModalInteraction.getTextInputValue("support_third");
                        const submittedSupport4 = supportModalInteraction.getTextInputValue("support_forth");

ShompiFlen•15mo ago

yea that works i think

FGOP•15mo ago

but i got this TypeError:

supportModalInteraction.getTextInputValue is not a function
    at InteractionCollector.<anonymous> (/home/devbot/commands/prefix/staff_utility/ticket.js:274:75)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

supportModalInteraction.getTextInputValue is not a function
    at InteractionCollector.<anonymous> (/home/devbot/commands/prefix/staff_utility/ticket.js:274:75)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

ShompiFlen•15mo ago

ah, because its modalInteraction.fields.getTextInputValue

FGOP•15mo ago

i saw some of them they use fields. ah bruh hahaha

FGOP•15mo ago

now it works so well iceCreamCat

weird thing is once i submitted have such error, however in my ticket the submission is recorded? is there any missing part of the code? https://sourceb.in/cKFdnBiWn6

SourceBin

Create Modal for user fill up form

Instantly share your code with the world.

ShompiFlen•15mo ago

you need to reply to the modal submition

FGOP•15mo ago

ok , let me research on this Hi ShompiFlen, sorry for bother again, I still couldnt understand the reply to the modal submission

                    // Show the modal to the user
                    i.showModal(supportModal);

                    const supportSubmission = await i.awaitModalSubmit({ time: 60_000 }).catch(error => {
                        console.error(error)
                        return;
                    });

                    if (supportSubmission) {

                        if (supportSubmission.isModalSubmit()) {

                    // Show the modal to the user
                    i.showModal(supportModal);

                    const supportSubmission = await i.awaitModalSubmit({ time: 60_000 }).catch(error => {
                        console.error(error)
                        return;
                    });

                    if (supportSubmission) {

                        if (supportSubmission.isModalSubmit()) {

https://sourceb.in/MCGL6Ejw16

ShompiFlen•15mo ago

you have to do supportSubmission.reply() reply to the modal interaction

FGOP•15mo ago

thanks alot Shompi, nw it works very good, waveBoye

. Thank you for your expertise !!! now still got ticket buttons to do... i will try my best do somemore research!!

Gaming

Programming

Modal Interaction