I'm trying to understand if it's possible to place a select input on the right of a radio input in a custom bootbox dialog. Example:
bootbox.prompt({
title: "This is a prompt with a set of radio inputs!",
message: '<p>Please select an option below:</p>',
inputType: 'radio',
inputOptions: [
{
text: 'Choice One',
value: '1',
},
{
text: 'Choice Two',
value: '2',
},
{
text: 'Choice Three',
value: '3',
}
],
callback: function (result) {
console.log(result);
}
});
This will show three radio items.
I want to place on the right of, say, 'Choice Two' a select:
inputType: 'select',
inputOptions: [
{
text: 'Choose one...',
value: '',
},
{
text: 'Choice One',
value: '1',
}]
But I don't understand if this is possible with bootbox.
Related
I am trying to add an onChange function that can add and delete options in the cascader menu. I would like to be able to select existing menu options and add options on to them as well.
My example data structure looks like this:
const [dataTitle, setDataTitle] = useState([
{
label: '2022',
value: '2022',
children: [
{
label: 'Fall',
value: 'Fall',
children: [
{
label: 'Week 1',
value: 'Week 1',
children: [
{
label: 'Practice 1',
value: 'Practice 1',
},
{
label: 'Practice 2',
value: 'Practice 2',
},
{
label: 'Practice 3',
value: 'Practice 3',
},
{
label: 'Practice 4',
value: 'Practice 4',
},
{
label: 'Game 1',
value: 'Game 1',
},
]
},
{
label: 'Week 2',
value: 'Week 2',
},
{
label: 'Week 3',
value: 'Week 3',
},
],
},
],
},
]);
I am using these onChange events below to add a 'create-new-option' button and to add the new option when prompted.
const handleLabelChange = (value, selectedOptions) => {
const lastOption = selectedOptions[selectedOptions.length - 1];
// Check if the last selected option has a value of 'create-new-option'
if (lastOption.value === 'create-new-option') {
// Prompt user for new option name
const newOptionName = prompt('Enter a name for the new option:');
// Add the new option to the options data
const newOption = {
label: newOptionName,
value: newOptionName,
};
let newDataTitle = [...dataTitle];
let parentOption = newDataTitle.find(o => o.value === lastOption.parentValue);
if (!parentOption) {
parentOption = { children: [] };
newDataTitle.push(parentOption);
}
// Check if parentOption.children is defined before trying to push
if (parentOption.children) {
parentOption.children.push(newOption);
}
setDataTitle(newDataTitle);
}
};
const addCreateNewOption = (options) => {
return options.map(option => {
return {
...option,
children: option.children
? [...addCreateNewOption(option.children), {value: 'create-new-option', label: 'Create new option', parentValue: option.value}]
: [{value: 'create-new-option', label: 'Create new option', parentValue: option.value}]
};
});
};
My issue is having the new option display in the correct spot and under the correct parents. It works correctly with the second level (I can add a 'Spring' Option and it correctly shows up under 2022 / Spring) but none others.
CodeSandbox Recreation
Right know I hace a Modal/Pop-up which shows a bunch of checkboxes, but I want to be able to put some headings or something such as that between some of them because some are part of one category and others not and there will be a lot of checkboxes and it will be really difficult to differenciate if I dont have something like that, the code I hace right know is the follwoing, thanks in advice :)
title: "This is a prompt with a set of checkbox inputs!",
inputType: 'checkbox',
inputOptions: [{
text: 'Choice One',
value: '1',
},
{
text: 'Choice Two',
value: '2',
},
{
text: 'Choice Three',
value: '3',
},
{
text: 'Choice One',
value: '1',
},
{
text: 'Choice Two',
value: '2',
},
{
text: 'Choice Three',
value: '3',
},
{
text: 'Choice One',
value: '1',
},
{
text: 'Choice Two',
value: '2',
},
{
text: 'Choice Three',
value: '3',
},
{
text: 'Choice One',
value: '1',
},
{
text: 'Choice Two',
value: '2',
},
{
text: 'Choice Three',
value: '3',
}],
callback: function (result) {
if(result){
$('#opcion1').val(result);
save();
window.location = base_url_admin+'record/reporte';
console.log(result);
}
}
});```
I'm creating a TinyMCE Plugin for Wordpress. It has a textbox and a listbox field, both staying in a modal window.
Code below:
(function () {
tinymce.create('tinymce.plugins.windowdata', {
init : function(ed, url) {
ed.addButton('showModal', {
title: 'Show Modal',
image: url + '/img/button.png',
onclick: function () {
ed.windowManager.open({
title: 'Minestra',
body: [
{type: 'textbox', name: 'Field', label: 'Number', value: '', tooltip: 'Tooltip', maxLength: 3, classes: 'i1n'}, //textbox
{type: 'listbox', label: 'Listbox', classes: 'i1lb', values: [
{text: '', value: ''},
{text: 'Number', value: 'lone_number'},
{text: 'Bar', value: 'bar'},
]}, //listbox
],
onsubmit: function () {
var n1 = document.getElementsByClassName('mce-i1n')[0].value; //textbox value
var t1 = document.getElementsByClassName('mce-i1lb')[0].getElementsByTagName('button')[0].getElementsByClassName('mce-txt')[0].innerHTML; //listbox value
ed.execCommand('mceInsertContent', 0, n1+' is of type '+t1) //write contents
}
})
}
});
}
)
My question is about how to get the field values. What i did works very well with the textbox (the n1 var inside the onsubmit() method), but the listbox gets the same text that is shown to TinyMCE user (the text var in each listbox item).
What i want is a way to get the value instead; plus, i suppose i didn't get the right way to do it, not even with textbox. Anyone can help me? Thank you.
Better way to generate content is:
onsubmit: function (e) {
// Insert content when the window form is submitted
e.insertContent('Textbox content: ' + e.data.Field);
e.insertContent('Listbox content: ' + e.data.Listbox)
}
I solved by my own: i had to give a name to all of my fields:
{type: 'textbox', name: 'Field', label: 'Number', value: '', tooltip: 'Tooltip', maxLength: 3, classes: 'i1n'}, //textbox
{type: 'listbox', name: 'Listbox', label: 'Listbox', classes: 'i1lb', values: [
{text: '', value: ''},
{text: 'Number', value: 'lone_number'},
{text: 'Bar', value: 'bar'},
]
At this point, to generate my content i got values this way:
onsubmit: function (e) {
e.data.Field;
e.data.Listbox;
}
and used this to write in TinyMCE textarea. To get values back i had to modify textbox field this way:
{type: 'textbox', name: 'Field', label: 'Number', value: '', tooltip: 'Tooltip', maxLength: 3, classes: 'i1n', value: ed.selection.getContent()}
Similarly with listbox
I'm using Horsey plugin to create an autocomplete for my text input. I'm using the key/value pairs (3rd example here) and I want to POST the key value (id in my app), not the text value of my search.
horsey(document.querySelector('#search_field'), {
source: [{ list: [
{ value: 'banana', text: 'Bananas from Amazon Rainforest' },
{ value: 'apple', text: 'Red apples from New Zealand' },
{ value: 'orange', text: 'Oranges from Moscow' },
{ value: 'lemon', text: 'Juicy lemons from the rich Amalfitan Coast' }
]}],
getText: 'text',
getValue: 'value'
});
So I understand I have to call getValue function from somewhere but I'm not sure how.
You can use predictNextSearch(info) that runs when a tag is inserted.
horsey(document.querySelector('#search_field'), {
source: [{ list: [
{ value: 'banana', text: 'Bananas from Amazon Rainforest' },
{ value: 'apple', text: 'Red apples from New Zealand' },
{ value: 'orange', text: 'Oranges from Moscow' },
{ value: 'lemon', text: 'Juicy lemons from the rich Amalfitan Coast' }
]}],
getText: 'text',
getValue: 'value',
predictNextSearch(info) {
//get the suggestion selected by the user
console.log(info.selection.value);
}
});
Hope this help!
I would like to know how to append jquery ui autocomplete elements once the page is active.
The idea is that there are two elements and I would like to add the third element once a submit button is pressed.
Here is my code:
$(function() {
var projects = [{
value: '123',
label: 'Element 1',
desc: 'Element 1 Description',
icon: 'element1icon.png'
},{
value: '456',
label: 'Element 2',
desc: 'Element 2 Description',
icon: 'element2icon.png'
}
,];
$("#desc1").autocomplete({
minLength: 0,
source: projects,
focus: function(event, ui) {
$("#desc1").val(ui.item.label);
return false;
},
select: function(event, ui) {
$("#desc1").val(ui.item.label);
$("#desc-id1").val(ui.item.value);
return false;
}
})
.data('ui-autocomplete')._renderItem = function(ul, item) {
return $('<li>')
.append('<a>' + item.label + '<br>' + item.desc + '</a>')
.appendTo(ul);
};
});
$( "#submit" ).click(function() {
var itemtoadd = $("#addelementtext").val();
alert("This action should insert the element " + itemtoadd);
});
HERE IS THE FIDDLE
EDIT:
The idea is that the old textbox appears with the new element ELEMENT 3 as if it was declared like this:
var projects = [{
value: '123',
label: 'Element 1',
desc: 'Element 1 Description',
icon: 'element1icon.png'
},{
value: '456',
label: 'Element 2',
desc: 'Element 2 Description',
icon: 'element2icon.png'
},{
value: '789',
label: 'Element 3',
desc: 'Elemen 3 Description',
icon: 'element3icon.png'
},
,];
Add it before the button:
$('#submit').before('<input type="text" value="test" />');
http://jsfiddle.net/2GvuB/1/