Discord Modal with SelectMenu - javascript

I'm trying to add a select menu inside a modal (I pretty sure it's possible) but I ended up in this situation and getting this error in the console:
const modal = new client.discord.ModalBuilder()
.setCustomId('verification-modal')
.setTitle('Verify yourself')
.addComponents([
new client.discord.ActionRowBuilder().addComponents(
new client.discord.SelectMenuBuilder()
.setCustomId('t')
.setPlaceholder('Nothing selected')
.addOptions(
{
label: 'Select me',
description: 'This is a description',
value: 'first_option',
},
{
label: 'You can select me too',
description: 'This is also a description',
value: 'second_option',
},
),
new client.discord.TextInputBuilder()
.setCustomId('verification-input')
.setLabel('Answer')
.setStyle(client.discord.TextInputStyle.Short)
.setMinLength(4)
.setMaxLength(12)
.setPlaceholder('ABCDEF')
.setRequired(true),
),
]);
await interaction.showModal(modal);
ode:events:490
throw er; // Unhandled 'error' event
^
DiscordAPIError[50035]: Invalid Form Body
data.components[0].components[0][UNION_TYPE_CHOICES]: Value of field "type" must be one of (4,).
if you have any solution '^^

Only text inputs are supported on modals.
documentation

Related

Update message with select menu in Discord.js v14

Discord.js Version: 14.6.0
I am currently working with select menu. When I interacted with the menu, supposing there should be edits on the message, and it does. The problem I'm currently having is the reset of the select menu. Every time I have interacted with the menu, the menu itself reset to it default setting.
Expected Output: (Having checkmark on the selected item and with the originally message edited)
Current Output: (Having original message edited but the menu is resetted)
I can only get either replying a new message and then have the menu working fine OR updating the original bot message but a resetted menu bar. Below I'm inserting the code I'm using. Let me know if you need more information.
index.js:
client.on('interactionCreate', async interaction => {
// ... Command Handler here
})
test.js:
const row = new Discord.ActionRowBuilder()
.addComponents(new Discord.SelectMenuBuilder()
.setCustomId('test')
.setPlaceholder('test 1')
.setMinValues(1)
.setMaxValues(1)
.addOptions(
{
label: 'test 1',
value: 'first_option'
},
{
label: 'test 2',
value: 'second_option'
}
))
const testEmbed = new Discord.EmbedBuilder()
.setTitle('Testing')
interaction.reply({ embeds: [testEmbed], components: [row] })
selectMenu.js:
const Embed = new Discord.EmbedBuilder()
.setTitle('Testing 2')
interaction.update({ embeds: [Embed] })
PS: The image of Expected Output is not perfect since I cannot do what I want. Imagine I want an edited message like the second photo and the select menu like the first photo.
You have to set the boolean default on one of the menu options to true, then it will be highlighted.
So if you want to highlight the first option it would be
const row = new Discord.ActionRowBuilder()
.addComponents(new Discord.SelectMenuBuilder()
.setCustomId('test')
.setPlaceholder('test 1')
.setMinValues(1)
.setMaxValues(1)
.addOptions(
{
label: 'test 1',
value: 'first_option',
default: true
},
{
label: 'test 2',
value: 'second_option'
}
)
);
If you would want to highlight the second option it would be
const row = new Discord.ActionRowBuilder()
.addComponents(new Discord.SelectMenuBuilder()
.setCustomId('test')
.setPlaceholder('test 1')
.setMinValues(1)
.setMaxValues(1)
.addOptions(
{
label: 'test 1',
value: 'first_option'
},
{
label: 'test 2',
value: 'second_option',
default: true
}
)
);

Simple approach to using TypeScript to specify all properties of object are of type string

I have the following ACTIONS object
const ACTIONS = {
FETCH_ERROR: 'API fetch error',
ACTIVATE_QUIZ: 'activate quiz',
ACTIVATE_RESULTS: 'activate results',
CHECK_ANSWER: 'check current answer',
NEXT_QUESTION: 'go to next question',
DEACTIVATE_QUIZ: 'deactivate quiz',
UPDATE_DATA: 'update all the data',
RESET_STATE: 'reset all the state'
}
And I want to specify that only properties of type string can be allowed in it. I have no idea of how to this, that's the reason I'm not proposing an attempt.
const ACTIONS: { [key: string]: string } = {
FETCH_ERROR: 'API fetch error',
ACTIVATE_QUIZ: 'activate quiz',
ACTIVATE_RESULTS: 'activate results',
CHECK_ANSWER: 'check current answer',
NEXT_QUESTION: 'go to next question',
DEACTIVATE_QUIZ: 'deactivate quiz',
UPDATE_DATA: 'update all the data',
RESET_STATE: 'reset all the state'
}
or use Record<keys, type> utility type:
const ACTIONS: Record<string, string> = {
FETCH_ERROR: 'API fetch error',
ACTIVATE_QUIZ: 'activate quiz',
ACTIVATE_RESULTS: 'activate results',
CHECK_ANSWER: 'check current answer',
NEXT_QUESTION: 'go to next question',
DEACTIVATE_QUIZ: 'deactivate quiz',
UPDATE_DATA: 'update all the data',
RESET_STATE: 'reset all the state'
}

showMessageBox promise is never called

The message box appears properly, but when I select one of the buttons, the closure doesn't trigger. Here is my code:
dialog.showMessageBox(options, (response, checkboxChecked) => {
/* More code like log statements, opening error boxes, etc*/
}
Options is defined as choices = ["Yes", "No"], message = "Confirm".
The code inside of the curly braces is never run.
Try:
const options = {
type: 'question',
buttons: ['Cancel', 'Yes, please', 'No, thanks'],
defaultId: 2,
title: 'Question',
message: 'Do you want to do this?',
detail: 'It does not really matter',
checkboxLabel: 'Remember my answer',
checkboxChecked: true,
};
dialog.showMessageBox(null, options, (response, checkboxChecked) => {
console.log(response);
console.log(checkboxChecked);
});

how to limit notification(notify)

I want to show just a one-time error message. But not other classnames ex (classname success message show itself every time but error message just one time shows). When I triggered error message last error message must close and open new error message.
$.notify(Util.Localize.Resource(
"bb53c064-e1d6-429d-b49f-bd1ec5fc83b6",
"{
en: 'Please Fill the Branch Name Field',
tr: 'Lütfen şube alanını giriniz.',
ar: 'يرجى ملء حقل اسم الفرع'
}"
),
{
position: 'top-right',
showAnimation: 'slideDown',
hideAnimation: 'slideUp',
className: 'error'
});
I add notify to util.js and get class name from view.
if (notificationType === Enum.NotificationType.Warning) {
if (document.getElementsByClassName("notifyjs-wrapper notifyjs-hidable").length !== 0)
return;
else {
$.notify(message, {
position: 'top-right',
showAnimation: 'slideDown',
hideAnimation: 'slideUp',
className: 'error'
});
}
}

Bootbox - how to dynamically change message content?

I was wondering if there is a way to dinamically update the content of a bootbox modal.
Example
bootbox.dialog({
message: "Hi there",
title: "My title",
buttons: {
main: {
label: "dismiss",
className: "btn-primary",
}
}
});
newMessage = "this is a new message"
Is there a way to replace that "Hi there" with the new string newMessage?
Thanks for any help or suggestion
yes, you can change bootbox msg by adding id reference to the msg. Below is sample code for it.
bootbox.dialog({
message: "<span id='dynamicMsg'>Hi there</span>",
title: "My title",
buttons: {
main: {
label: "dismiss",
className: "btn-primary",
}
}
});
//Add this line wherever you want to change msg
$("#dynamicMsg").text("This is dynamic msg");
Simple! Create a generic function:
function bootBoxModal(title, message, type) {
bootbox.dialog({
message: message,
title: title,
alertType: type,
buttons: {
main: {
label: 'Fechar', className: 'btn-default'}
}
});
}
Call the function now:
bootBoxModal("Title message",
"Content your message",
"type [alert,danger,warning,success]");
Another solution is just to replace the content directly, this example uses jQuery.
#jQuery
$('.modal-title').html('New Title');
$('.modal-body').html('New Message');

Categories

Resources