Event calendar refuses to disappear when loading same div with different page

This is very bizarre, what’s happening here. I’ve stripped down my code to the bare minimum to make sure there was nothing else interfering, so I can only assume this is either a bug in mobiscroll, or normal behaviour that I don’t understand.

Please take a look at the following test page, and click the buttons and you’ll see some strange behaviour, namely that the mobiscroll event calendar refuses to disappear even after I load an entirely different page.

https://app.benjicare.com/test.steps.php

Basically what’s happening is this.

Step 1 loads into a div, a page which generates the mobiscroll event calendar. The other two steps load (into the same div) other pages, which do not generate a mobiscroll event calendar. Each page is loaded into the same div, so clicking any step button overrides the content generated by the previous step, except the content generated by step 1 (calendar) refuses to be overridden and so it remains, even when you load different content into the same div.

If after loading either step 2 or 3, and you go back to step 1, it generates an additional event calendar. Any other step I go to, the event calendar remains, and every time I return to the calendar step, it adds an additional event calendar to my DOM. So it just keeps adding more and more calendars.

calendar%20steps

But here’s the really weird thing: At first I assumed I had an unclosed container somewhere and so my calendar div was spilling outside of the main content div, but that’s not actually the case. In fact, if you step through the chrome debugger, when you go to another step, the debugger thinks there is only one element with that ID, yet if you look in the HTML of the source tab you can clearly see multiple elements with the same ID. So somehow the browser won’t erase the mobiscroll calendar, but it thinks it has. Truly bizarre.

Please take a look at this, and step through the debugger on the “step()” function and you’ll see what I mean.

I’ve also tried using jquery’s “remove()” and “empty()” functions, but the calendar remains. I’m using mobiscroll version 5.17.1, and I’ve tried this on both Edge and Chrome on Windows 11 with the same results.

My Code

Other than the code on the main page (which you can see by looking at the source), here follows the code I have on each of the three steps I’m loading into the div.

Step 1

This is step 1 - Calendar
<div id=calendar style='height:100px'></div>

<script>
$('#calendar').mobiscroll5().eventcalendar();
</script>

Step 2

This is step 2

Step 3

This is step 3

That’s it. That’s literally all the code I have.

The problem is, that you need to destroy the calendar instance, before emptying the div / loading the new data. Otherwise the instance still exists, and will re-render.

$('#calendar').mobiscroll5('destroy');
1 Like

Thank you isti! That fixed it.