Topics

discord.js - Imagine an app•9mo 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•9mo 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!

FG•9mo ago

No description

FG•9mo ago

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

SourceBin

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.

FG•9mo 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•9mo ago

and what is your issue

FG•9mo 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

Instantly share your code with the world.

No description

ShompiFlen•9mo ago

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

FG•9mo 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•9mo 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

FG•9mo 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•9mo ago

explain and show the related code explain your intention

FG•9mo 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.

FG•9mo 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

FG•9mo ago

No description

ShompiFlen•9mo 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

FG•9mo ago

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

ShompiFlen•9mo 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?

FG•9mo 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.

No description

ShompiFlen•9mo ago

okay wait so i see another issue now

FG•9mo 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•9mo 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

FG•9mo ago

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

ShompiFlen•9mo 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?

FG•9mo ago

yes

FG•9mo ago

similar to this

No description

ShompiFlen•9mo 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

FG•9mo ago

i see

ShompiFlen•9mo 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

FG•9mo ago

blobsweats

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

ShompiFlen•9mo ago

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

FG•9mo ago

yep

ShompiFlen•9mo 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

FG•9mo 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•9mo ago

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

FG•9mo ago

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

ShompiFlen•9mo 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

FG•9mo ago

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

ShompiFlen•9mo 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

FG•9mo ago

ok

FG•9mo 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.

No description

FG•9mo ago

maybe I should have use i.isModalSubmit

ShompiFlen•9mo 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()

FG•9mo ago

ah

ShompiFlen•9mo ago

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

FG•9mo ago

found it

ShompiFlen•9mo ago

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

FG•9mo ago

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

FG•9mo 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.

FG•9mo 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•9mo ago

yea that works i think

FG•9mo 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•9mo ago

ah, because its modalInteraction.fields.getTextInputValue

FG•9mo ago

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

FG•9mo ago

now it works so well iceCreamCat

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.

No description

No description

ShompiFlen•9mo ago

you need to reply to the modal submition

FG•9mo 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•9mo ago

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

FG•9mo ago

thanks alot Shompi, nw it works very good, waveBoye

waveBoye

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

discord.js - Imagine an app Join

Support server for discord.js, a Node.js module to interact with the Discord bot API.

58KMembers

View on Discord

Want results from more Discord servers?

Add your server

More Posts

guildMemberUpdateIssue: **anytime someone's roles is updated or they change there nickname it double/triple posts to How can I add tag to discord forum using djs.Hello I am creating forums with but I wanna add tags.applied_tags fieldHello! Is it just me or is the `applied_tags` field missing from the edit methods (RESTPatchAPIChan voice problemno error but it didn't play the song ! ```js else if (args[0] === prefix + "play" || args[0] === pr Buttons will not re-enableI have a pagination system that should disable and enable buttons depending on what page the user is Attachment to EmbedHow do I attach an Attachment to the Embed Image? ```js const attachment = new AttachmentBuilder(can Is there a way to escape the "hide link embed" markdown sequence?I just checked `escapeMarkdown`. It allows me to escape pretty much all Discord-flavored markdown se wiki commandHi, i want to know is it possible. I am making a discord bot for my War Thunder squadron, and i want ImagesSo, i got a suggestion for my ticket bot, the user suggested that i added a thing where you can uplo How to use @discordjs/proxyI just want simple explanation, with an example if possible.