Help Needed: Mobiscroll Library Integration - "mobiscroll is not defined" Error

cohereandnow · 2024-09-27T20:46:16.779Z

I’m trying to integrate the Mobiscroll time picker into my Bubble app and keep running into the error:

“ReferenceError: mobiscroll is not defined”

Here’s what I’ve done so far:

Loaded the Mobiscroll CSS and JS files in the SEO/Metatags:

<link rel="stylesheet" href="https://cdn.mobiscroll.com/5.10.1/css/mobiscroll.min.css">
<script src="https://cdn.mobiscroll.com/5.10.1/js/mobiscroll.min.js"></script>

Added this to a hidden HTML element which is set to render when visible

<div class="my-custom-timepicker"></div>
<script>
  mobiscroll.settings = {
    theme: 'ios',
    themeVariant: 'light'
  };
  mobiscroll.timepicker('.my-custom-timepicker', {
    display: 'inline',
    timeFormat: 'hh:ii A',
    stepMinute: 1
  });
</script>

Tried initializing the picker using:

mobiscroll.timepicker('.my-custom-timepicker', {
    display: 'inline',
    timeFormat: 'hh:ii A',
    stepMinute: 1
});

I’ve tried adding a delay (setTimeout), using window.onload, and initializing via workflows with Bubble’s Toolbox plugin — but still, I get the same error.

I tried both showing the HTML then initializing and initializing then showing the HTML.

Has anyone successfully implemented Mobiscroll in their Bubble app? Any help or guidance would be greatly appreciated!

Thanks in advance!

system · 2024-12-06T20:46:55.124Z

This topic was automatically closed after 70 days. New replies are no longer allowed.