bootboxjs prompt type not recognized - the given example in the documentation is ineffective

I have been experimenting with the functionality of in my project. I started off by using their example code to test if it works.

Following the guidelines provided, I have integrated the latest versions of bootstrap, jquery, and bootstrap js, along with bootboxjs. The code snippet I am testing is as follows:

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);
    }
});

Upon running this code, I encountered the following error:

Uncaught Error: invalid prompt type

https://i.sstatic.net/G829e.png

Despite facing this issue, I find this library quite impressive and would like to implement it in my project. However, I seem to be stuck at the moment. Any suggestions?

Answer №1

The issue has been successfully addressed. Initially, I only utilized bootbox.min.js, but it turned out that I also needed to include bootbox.locales.min.js. Lesson learned - always read the manual...

Furthermore, I use webpack (via laravel-mix) to consolidate all libraries into a single .js file. It appears that loading bootbox.all.min.js (Production build with locales) as the final element has made a difference.

Below is my successful webpack.mix.js configuration:

const mix = require('laravel-mix');

mix
    .copyDirectory('resources/libs/font-awesome/fonts', 'public/fonts')
    .styles(
        [
            // snipped...
        ],
        'public/css/app.css'
    )
    .scripts(
        [
            'resources/libs/jquery/jquery-3.4.1.min.js',
            'resources/libs/bootstrap/bootstrap.bundle.min.js',
            // various other js libraries...
            'resources/libs/bootbox/bootbox.all.min.js',
        ],
        'public/js/app.js'
    );

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjusting the height of each suggested item in Jquery autocomplete

I am currently facing an issue with the autocomplete input on my web app. The suggested list items have a height that is too small, making it difficult to select one item on a tablet using fingers. .ui-autocomplete.ui-widget { font-family: Verdana, Arial, ...

Trouble with z-index | initial div out of four malfunctioning

Currently, I am attempting to practice by replicating the design shown in this image: https://i.sstatic.net/iIA2q.jpg However, I have encountered an issue that has been persisting for some time: https://i.sstatic.net/grABz.png I'm struggling to un ...

What steps should I take to resolve the issue with running npm start?

I am encountering an issue while using React and trying to run my application. When I execute "npm run start," I receive the following error message: npm ERR! Missing script: "start" npm ERR! npm ERR! Did you mean one of these? npm ERR! npm star # Mark ...

What is the best way to prevent the body from scrolling when scrolling on a fixed div without making the body's scroll bar disappear?

Is there a way to prevent the body from scrolling while I scroll on a fixed div? I attempted using overflow:hidden for the body, which stops scrolling but causes the page to shake when the scroll bar disappears. Is there a solution that allows me to keep ...

Bootstrap navigation bar unresponsive on mobile devices

<nav class="navbar navbar-expand-sm fixed-top navbar-dark bg-dark"> <a class="navbar-brand" href="#">Yehee-Lounge</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav ...

The angular.copy() function cannot be used within angular brackets {{}}

Within my controller, I am utilizing the "as vm" syntax. To duplicate one data structure into a temporary one, I am employing angular.copy(). angular.copy(vm.data, vm.tempData = []) Yet, I have a desire to transfer this code to the template view so that ...

Tips for ensuring a synchronous `setState` in React following an axios response

When making HTTP requests with axios, I encounter an issue where setState is happening before pushing the data to the 'orders' Array. This results in the data not being printed in the correct way. Using SetTimeout as a workaround works, but I wan ...

Is there a method to include query parameters in a middleware and transfer them to the server router in Next.js?

Next.js version 12.2.5 I attempted to use a URL object for adding query parameters as mentioned here, but it did not work as expected. Is there a method to include query parameters in a middleware that can be accessed using useRouter() on the server side ...

Tips on increasing video size upon visiting a website. HTML, JavaScript, and potentially jQuery can be used for video animation

Is there a way to create a video pop-up in the same window when visiting a website? I want the video to increase in height from 0 to a specific height and move slightly upwards. Are there JavaScript or jQuery functions that can achieve this effect? I wou ...

"Getting an 'Undefined index' error while accessing a JavaScript variable in PHP

Every row in my table contains an Edit button. I managed to fetch the row number by clicking on the Edit button using JavaScript, but I am unsure how to do it in PHP. My attempt to pass the variable from JS to PHP resulted in an error: Undefined index ...

Using ANT to swap out values in JavaScript code

My HTML page includes a <script> tag with the following code: <script type="text/javascript"> window.location ="THIRD PARTY URL" </script> The code above functions correctly. Now, I need to change the value of the Third Party URL f ...

Encountering the error 'node' getProperty of undefined while trying to retrieve data from an array stored in my state variable

Hello, I am currently developing an app that retrieves images from Instagram using axios. I have successfully stored the image files in an array named 'posts' within my state. Looping through this array to display each image is not an issue for m ...

Managing Page Refresh using AngularJS Service and Views

In my single-page application (SPA), I have implemented two views: a list view and a detail view. To pass data between these two controllers, I am utilizing a service called StateService. The issue arises when the user refreshes the browser page, causing ...

Using AJAX with the GET method, send a form submission to retrieve a response using XMLHTTPRequest

I am working on a form where users can select values from two dropdown menus. The options in the dropdowns are populated dynamically from a JavaScript file, which contains a list of exchange rates. I have written the code to calculate and display the resul ...

The ngAfterContentInit lifecycle hook is not triggered when the parent component updates the child component

I am trying to understand the functionality of the ngOnChanges callback in Angular. I have implemented it to observe changes in a property annotated with the Input decorator as shown below: @Input() postsToAddToList: Post[] = []; However, after compiling ...

Using React Router can sometimes lead to an issue where the React components are

My server side rendering is set up for performance, but I am encountering discrepancies between the client and server renderings. The client initially renders <!-- react-empty: 1 --> instead of components, which leads to a different checksum. As a re ...

The Vue.js modal is unable to resize below the width of its containing element

My challenge is to implement the Vue.js modal example in a larger size. I adjusted the "modal-container" class to be 500px wide, with 30px padding and a max-width of 80%. However, I'm facing an issue where the "modal-mask" class, containing the contai ...

Intersecting realms document

Currently I am working on a web store using Magento Go. Unfortunately, this platform does not support server side scripting languages such as PHP. Despite this limitation, I still need to save order data post successful checkout and share it with my shippi ...

What is the proper way to parse an array of JSON objects?

Here is the data I need help with: var information = [ { "_id": "5e458e2ccf9b1326f11b5079", "xxTitle": "testtttttttttttt", "hhhhhhhhhh": "sssssssss", "xxzzzzzz": null, "oooooooooooooo": "ssssss", "xxDescription": "sssssss", "xxDetails": "ssssssss", "llll. ...

`Issues encountered with resizing the menu``

Looking to create a unique restaurant horizontal list bar for my application. The goal is to have a horizontal menu that displays 3 options on the screen at a time, with the middle one being the largest and the two flanking it smaller in size. As I scroll ...