Asp.net - Bootstrap confirmation - FullCalendar => singleton weird behavior

56 Views Asked by At

I' trying to implement Bootstrap confirmation

on top of FullCalendar

the code posted below works for basically everything

except when I set "singleton" to "true"

<script src="~/Scripts/jquery-3.3.1.slim.min.js"></script>
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/Scripts/umd/popper.js"></script>
<script src="~/Scripts/umd/popper.min.js"></script>
<script src="~/Scripts/jquery-ui.min.js"></script>
<script src="~/Scripts/bootstrap.bundle.js"></script>
<script src="~/Scripts/bootstrap-confirmation.js"></script>
<script src="~/Scripts/moment-with-locales.min.js"></script>
<script src="~/Scripts/fullcalendar/fullcalendar.min.js"></script>
<script src="~/Scripts/fullcalendar/locale-all.js"></script>
<script src="~/Scripts/jquery.signalR-2.4.0.min.js"></script>
<script src="/signalr/hubs"></script>
<script type="text/javascript">


$(function () {
            hub = $.connection.planningHub;
            hub.client.update = function (v, s, e, is, ie) {
                fc.fullCalendar('refetchEvents');
            };
            $.connection.hub.start().done(function () {
                fc = $('#calendar').fullCalendar({
                    defaultView: 'agendaWeek',
                    header: {
                      ...
                    },
´
                    events: {
                      ...
                            };
                        }
                    },

                    eventClick: function (calEvent, jsEvent, view) {
                        jsEvent.preventDefault();
                        var fcId = calEvent.id;
                        var eventTarget = jsEvent.target;

                        $(eventTarget).confirmation({
// MAYBE HERE!

                            rootSelector: eventTarget,
// MAYBE HERE!

                            placement: 'left',
                            title: 'do you want to delete?',

// HERE!
                            singleton: true,
// HERE!
                            popout: false,
                            onConfirm: function () {
                                $.post('@Url.Action("DeletePlanning")', { id: fcId}, function (r) {
                                    switch ( r.status) {
                                        case 'success':
                                            fc.fullCalendar('refetchEvents');
                                            break;
                                        case 'error':
                                            console.error(r.message);
                                            rv();
                                            break;
                                     }
                                   }
                                );
                            },
                            oncancel: function () { },
                        });
                        $(eventTarget).confirmation('show');
                    }
                });
            });
        });

at that point it keep creating multiple popover,

with the difference that they close all at once when one closes.

Any Idea?

I really need it to be singleton!

(be forgiving, I'm really new in js and asp.net)

thanks in advance for the help

0

There are 0 best solutions below