variable from Bootbox input

Question

I'm using bootbox for the first time. I'm using fullcalendar.io and instead of using basic alerts I have to use bootbox.

When I click on a day of the calendar a bootbox alert pops up and inside of it I have to receive in input the title of the event to add on the calendar, and the type of the event (meeting or ...).

The problem is that I don't know how to create inputs in a bootbox alert and, even if I did, I don't know how to then use this 2 inputs result as a variable to add them into the calendar.

const events = [];

document.addEventListener('DOMContentLoaded', function () {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    selectable: true,
    initialView: 'dayGridMonth',
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    dateClick: function (dateClickInfo) {
      createEvent(dateClickInfo.dateStr, 'Some event', undefined);
      bootbox.prompt("Inesrt the name of the event", function (title) {
      }
    },
  });

  calendar.render();
}),

function createEvent(title) {
  const event = {
    title: "",
    type: ""
  }
  events.push(event);
};

This is my super-basic code. I don't even know how to add the second input for the type of the event to the same bootbox. (I think I need to use the same bootbox because it calls the function who needs to have both the variables).

https://stackoverflow.com/a/18588708/5947043 might help you – ADyson Apr 20 '22 at 08:34 — ADyson, Apr 20 '22 at 08:34

score 0 · Answer 1 · answered Sep 05 '22 at 20:41

Bootbox modals are just Bootstrap modals, which in turn are just positioned divs - you have to handle the result of calling them in a callback function, since we can't block the flow of execution like a normal alert/confirm/prompt dialog.

This should work:

dateClick: function (dateClickInfo) {
    bootbox.prompt("Insert the name of the event", function (title) {
        if(title) {
            createEvent(dateClickInfo.dateStr, title, null);
        }
    }
}

Granted, your createEvent() method doesn't match how you're calling it, but I'm assuming the second argument was supposed to be the title.

variable from Bootbox input

1 Answers1