Google Maps and Tagify page broken

Wappler General Bugs
#1

Wappler 5.0.2 MacBook Max M1

Not sure what exactly happened, but an existing page that I have made no alterations to has just stopped working, the only components on this page are Tagify elements, about 5 of them, and a calendar.

The Calendar will no longer display at all, and although the tagify parts seem to work, the console is throwing multiple errors that seem to be related to tagify EDIT: and Calendar

2022-08-03_14-35-17
2022-08-03_14-35-171417×519 88.3 KB

The last few lines in the head section also seem to have altered ever so slightly to this

<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<script src="/dmxAppConnect/dmxBootstrap5Navigation/dmxBootstrap5Navigation.js" defer=""></script>
<script src="https://unpkg.com/@yaireo/tagify" defer=""></script>
<link rel="stylesheet" href="https://unpkg.com/@yaireo/tagify/dist/tagify.css" />
<script src="/dmxAppConnect/dmxTagify/dmxTagify.js" defer=""></script>
<script src="/dmxAppConnect/dmxBrowser/dmxBrowser.js" defer=""></script>
<script src="/dmxAppConnect/dmxBootstrap5Toasts/dmxBootstrap5Toasts.js" defer=""></script>
<script src="/dmxAppConnect/dmxBootstrap5Modal/dmxBootstrap5Modal.js" defer=""></script>
<script src="/dmxAppConnect/dmxBootstrap5Popovers/dmxBootstrap5Popovers.js" defer=""></script>
<script src="/dmxAppConnect/dmxGeolocation/dmxGeolocation.js" defer=""></script>
<script src="/dmxAppConnect/dmxBootstrap5Collapse/dmxBootstrap5Collapse.js" defer=""></script>
<script src="https://unpkg.com/@fullcalendar/google-calendar@4.4.2/main.min.js" defer></script>
<link rel="stylesheet" href="https://unpkg.com/@yaireo/tagify" defer />

The last line of this is interesting because when you open this link in your browser it is javascript, while in wapplers head it is adding it as a stylesheet.

Wappler 5.0.3 Released
#2

The last tag with tagify as stylesheet is indeed wrong, that should be removed. I think best is to remove all tags related to tagify and the calendar, then save the file it should re-add them. Probably gone wrong when it tried to update them to the latest version. In the code part you posted I only see a single calendar script tag, are the rest missing or didn’t you post all the includes?

#3

I took out all the relations to tagify as suggested, and added a new tagify component which readded 4 lines to the bottom of the head.

I just sent a portion of my head scripts, but here is the full one as I know I added my own calendar scripts as per the full calendar site in order to support the view i wanted to use.

<head>
    <base href="/">
    <script src="/dmxAppConnect/dmxAppConnect.js"></script>
    <meta charset="UTF-8">
    <title>Untitled Document</title>

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap/5/css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/style.css" />
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha384-ZvpUoO/+PpLXR1lu4jmpXWu80pZlYUAfxl5NsBMWOEPSjUn/6Z/hRTt8+pR6L4N2" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment-with-locales.min.js" integrity="sha256-VrmtNHAdGzjNsUNtWYG55xxE9xDTz4gF63x/prKXKH0=" crossorigin="anonymous"></script>
    <script src="/dmxAppConnect/dmxRouting/dmxRouting.js" defer=""></script>

    <link rel="stylesheet" href="https://unpkg.com/@fullcalendar/core@4.4.2/main.min.css" />
    <link rel="stylesheet" href="https://unpkg.com/@fullcalendar/core@4.4.2/main.css" />
    <link rel="stylesheet" href="https://unpkg.com/@fullcalendar/daygrid@4.4.2/main.css" />
    <link rel="stylesheet" href="https://unpkg.com/@fullcalendar/timegrid@4.4.2/main.css" />
    <link rel="stylesheet" href="https://unpkg.com/@fullcalendar/timeline@4.4.2/main.css" />
    <link rel="stylesheet" href="https://unpkg.com/@fullcalendar/resource-timeline@4.4.2/main.css" />
    <script src="https://unpkg.com/@fullcalendar/core@4.4.2/main.min.js" defer></script>
    <script src="https://unpkg.com/@fullcalendar/core@4.4.2/locales-all.min.js" defer></script>
    <script src="https://unpkg.com/@fullcalendar/interaction@4.4.2/main.min.js" defer></script>
    <script src="https://unpkg.com/@fullcalendar/daygrid@4.4.2/main.min.js" defer></script>
    <script src="https://unpkg.com/@fullcalendar/timegrid@4.4.2/main.min.js"></script>
    <script src="https://unpkg.com/@fullcalendar/timeline@4.4.2/main.js"></script>
    <script src="https://unpkg.com/@fullcalendar/resource-common@4.4.2/main.js"></script>
    <script src="https://unpkg.com/@fullcalendar/resource-timeline@4.4.2/main.js"></script>
    <script src="/dmxAppConnect/dmxCalendar/dmxCalendar.js" defer=""></script>
    <script src="/dmxAppConnect/dmxFormatter/dmxFormatter.js" defer=""></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAvrBLAHBLAHBLAHQ1VWNPA&amp;libraries=places"></script>
    <script src="/dmxAppConnect/dmxGooglePlaces/dmxGooglePlaces.js" defer=""></script>
    <script src="/dmxAppConnect/dmxGoogleMaps/dmxGoogleMaps.js" defer=""></script>
    <script src="/dmxAppConnect/dmxGoogleMaps/themes/silver.js"></script>
    <link rel="stylesheet" href="/dmxAppConnect/dmxValidator/dmxValidator.css" />
    <script src="/dmxAppConnect/dmxValidator/dmxValidator.js" defer=""></script>
    <link rel="stylesheet" href="/dmxAppConnect/dmxBootstrap5TableGenerator/dmxBootstrap5TableGenerator.css" />
    <link rel="stylesheet" href="/dmxAppConnect/dmxDatePicker/daterangepicker.min.css" />
    <script src="/dmxAppConnect/dmxDatePicker/daterangepicker.min.js" defer=""></script>
    <link rel="stylesheet" href="/dmxAppConnect/dmxDatePicker/dmxDatePicker.css" />
    <script src="/dmxAppConnect/dmxDatePicker/dmxDatePicker.js" defer=""></script>
    <link rel="stylesheet" href="css/bootstrap-icons.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <script src="/dmxAppConnect/dmxBootstrap5Navigation/dmxBootstrap5Navigation.js" defer=""></script>
    <script src="/dmxAppConnect/dmxBrowser/dmxBrowser.js" defer=""></script>
    <script src="/dmxAppConnect/dmxBootstrap5Toasts/dmxBootstrap5Toasts.js" defer=""></script>
    <script src="/dmxAppConnect/dmxBootstrap5Modal/dmxBootstrap5Modal.js" defer=""></script>
    <script src="/dmxAppConnect/dmxBootstrap5Popovers/dmxBootstrap5Popovers.js" defer=""></script>
    <script src="/dmxAppConnect/dmxGeolocation/dmxGeolocation.js" defer=""></script>
    <script src="/dmxAppConnect/dmxBootstrap5Collapse/dmxBootstrap5Collapse.js" defer=""></script>
    <script src="https://unpkg.com/@fullcalendar/google-calendar@4.4.2/main.min.js" defer></script>
    <script src="https://unpkg.com/@yaireo/tagify" defer></script>
    <link rel="stylesheet" href="https://unpkg.com/@yaireo/tagify/dist/tagify.css" />
    <script src="/dmxAppConnect/dmxTagify/dmxTagify.js" defer></script>
    <link rel="stylesheet" href="https://unpkg.com/@yaireo/tagify" defer />
</head>

And here is the calendar part itself

<dmx-datetime id="var_today_now" interval="minutes" utc="true"></dmx-datetime>
<dmx-value id="var_today_now_adjusted" dmx-bind:value="var_today_now.datetime.addHours(2)"></dmx-value>
<div class="mt-5">
    Schedule/Calendar
    <dmx-calendar id="availability_calendar" views="dayGridMonth,timeGridWeek,timeGridDay" view="timeGridWeek" dmx-bind:now-indicator="var_today_now_adjusted.value" locale="en-gb" dmx-on:eventclick="sc_fetch_single_availability.load({which_event: $event.event.id})" dmx-on:eventresize="sc_resize_event.load({event_to_resize: $event.event.start+$event.event.end+$event.event.id})">
        <dmx-calendar-source id="source_db" dmx-bind:events="sc_fetch_db_availability.data.query_availability" event-id="id_av" event-title="av_product_code" event-start="av_start_time" event-end="av_end_time" event-all-day="av_all_day" event-color="av_start_time < var_today_now.datetime ? cl_colour.replace('rgb','rgba').replace(')',',0.4)') : cl_colour" event-editable="pis_is_master" bs4-tooltip="" bs4-tooltip-title="event.extendedProps.av_seats_available+' Seats Available on '+event.extendedProps.pis_product_original_name+' – '+event.extendedProps.pis_external_product_identifier"></dmx-calendar-source>
    </dmx-calendar>
</div>
#4

Not sure if you need this, but I took a backup of the full site before updating from Wappler 4 to 5, this backup was when this part was still working fine.

<head>
    <base href="/">
    <script src="/dmxAppConnect/dmxAppConnect.js"></script>
    <meta charset="UTF-8">
    <title>Untitled Document</title>

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap/5/css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/style.css" />
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha384-ZvpUoO/+PpLXR1lu4jmpXWu80pZlYUAfxl5NsBMWOEPSjUn/6Z/hRTt8+pR6L4N2" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment-with-locales.min.js" integrity="sha256-VrmtNHAdGzjNsUNtWYG55xxE9xDTz4gF63x/prKXKH0=" crossorigin="anonymous"></script>
    <script src="/dmxAppConnect/dmxRouting/dmxRouting.js" defer=""></script>

    <link rel="stylesheet" href="https://unpkg.com/@fullcalendar/core@4.4.2/main.min.css" />
    <link rel="stylesheet" href="https://unpkg.com/@fullcalendar/core@4.4.2/main.css" />
    <link rel="stylesheet" href="https://unpkg.com/@fullcalendar/daygrid@4.4.2/main.css" />
    <link rel="stylesheet" href="https://unpkg.com/@fullcalendar/timegrid@4.4.2/main.css" />
    <link rel="stylesheet" href="https://unpkg.com/@fullcalendar/timeline@4.4.2/main.css" />
    <link rel="stylesheet" href="https://unpkg.com/@fullcalendar/resource-timeline@4.4.2/main.css" />
    <script src="https://unpkg.com/@fullcalendar/core@4.4.2/main.min.js"></script>
    <script src="https://unpkg.com/@fullcalendar/core@4.4.2/locales-all.min.js"></script>
    <script src="https://unpkg.com/@fullcalendar/interaction@4.4.2/main.min.js"></script>
    <script src="https://unpkg.com/@fullcalendar/daygrid@4.4.2/main.min.js"></script>
    <script src="https://unpkg.com/@fullcalendar/timegrid@4.4.2/main.min.js"></script>
    <script src="https://unpkg.com/@fullcalendar/timeline@4.4.2/main.js"></script>
    <script src="https://unpkg.com/@fullcalendar/resource-common@4.4.2/main.js"></script>
    <script src="https://unpkg.com/@fullcalendar/resource-timeline@4.4.2/main.js"></script>
    <script src="/dmxAppConnect/dmxCalendar/dmxCalendar.js" defer=""></script>
    <script src="/dmxAppConnect/dmxFormatter/dmxFormatter.js" defer=""></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAvrBLAHBLAHBLAHQ1VWNPA&amp;libraries=places"></script>
    <script src="/dmxAppConnect/dmxGooglePlaces/dmxGooglePlaces.js" defer=""></script>
    <script src="/dmxAppConnect/dmxGoogleMaps/dmxGoogleMaps.js" defer=""></script>
    <script src="/dmxAppConnect/dmxGoogleMaps/themes/silver.js"></script>
    <link rel="stylesheet" href="/dmxAppConnect/dmxValidator/dmxValidator.css" />
    <script src="/dmxAppConnect/dmxValidator/dmxValidator.js" defer=""></script>
    <link rel="stylesheet" href="/dmxAppConnect/dmxBootstrap5TableGenerator/dmxBootstrap5TableGenerator.css" />
    <link rel="stylesheet" href="/dmxAppConnect/dmxDatePicker/daterangepicker.min.css" />
    <script src="/dmxAppConnect/dmxDatePicker/daterangepicker.min.js" defer=""></script>
    <link rel="stylesheet" href="/dmxAppConnect/dmxDatePicker/dmxDatePicker.css" />
    <script src="/dmxAppConnect/dmxDatePicker/dmxDatePicker.js" defer=""></script>
    <link rel="stylesheet" href="css/bootstrap-icons.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <script src="/dmxAppConnect/dmxBootstrap5Navigation/dmxBootstrap5Navigation.js" defer=""></script>
    <script src="https://unpkg.com/@yaireo/tagify" defer=""></script>
    <link rel="stylesheet" href="https://unpkg.com/@yaireo/tagify/dist/tagify.css" />
    <script src="/dmxAppConnect/dmxTagify/dmxTagify.js" defer=""></script>
    <script src="/dmxAppConnect/dmxBrowser/dmxBrowser.js" defer=""></script>
    <script src="/dmxAppConnect/dmxBootstrap5Toasts/dmxBootstrap5Toasts.js" defer=""></script>
    <script src="/dmxAppConnect/dmxBootstrap5Modal/dmxBootstrap5Modal.js" defer=""></script>
    <script src="/dmxAppConnect/dmxBootstrap5Popovers/dmxBootstrap5Popovers.js" defer=""></script>
    <script src="/dmxAppConnect/dmxGeolocation/dmxGeolocation.js" defer=""></script>
</head>

And the backed up calendar part from Wappler 4

<dmx-datetime id="var_today_now" interval="minutes" utc="true"></dmx-datetime>
<dmx-value id="var_today_now_adjusted" dmx-bind:value="var_today_now.datetime.addHours(2)"></dmx-value>
<div class="mt-5">
    Schedule/Calendar
    <dmx-calendar id="availability_calendar" views="dayGridMonth,timeGridWeek,timeGridDay" view="timeGridWeek" dmx-bind:now-indicator="var_today_now_adjusted.value" locale="en-gb" dmx-on:eventclick="sc_fetch_single_availability.load({which_event: $event.event.id})" dmx-on:eventresize="sc_resize_event.load({event_to_resize: $event.event.start+$event.event.end+$event.event.id})">
        <dmx-calendar-source id="source_db" dmx-bind:events="sc_fetch_db_availability.data.query_availability" event-id="id_av" event-title="av_product_code" event-start="av_start_time" event-end="av_end_time" event-all-day="av_all_day" event-color="av_start_time < var_today_now.datetime ? cl_colour.replace('rgb','rgba').replace(')',',0.4)') : cl_colour" event-editable="pis_is_master" bs4-tooltip="" bs4-tooltip-title="event.extendedProps.av_seats_available+' Seats Available on '+event.extendedProps.pis_product_original_name+' – '+event.extendedProps.pis_external_product_identifier"></dmx-calendar-source>
    </dmx-calendar>
</div>
#5

Did you change something on the page that it got updated?

The changes that I can see are the wrong tagify tag:

<link rel="stylesheet" href="https://unpkg.com/@yaireo/tagify" defer />

and google calendar plugin seems to be added:

<script src="https://unpkg.com/@fullcalendar/google-calendar@4.4.2/main.min.js" defer></script>

The tagify tag shouldn’t be there and must be removed. The google calendar script is only needed if you use google calendar as datasource for your calendar, you can remove it if you don’t or move it up above the dmxCalendar.js include. I don’t see any other important changes and should probably make the page working again.

1 Like
#6

I did not make any other changes that would really cause it to update as far as i can tell, the only change was bringing it from Wappler 4 to 5, and then making normal alterations, like text, server connect scripts, but no tagify components added, nor additional calendar objects.

If I delete these 2 lines, they just auto regenerate on save

<script src="https://unpkg.com/@fullcalendar/google-calendar@4.4.2/main.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@yaireo/tagify" />

I instead moved the Google calendar part above dmx-calendar as suggested and the calendar still did not work, then i added defer to all the js scripts as you suggested and it is indeed working again, thank you.
The only way to get rid of the tagify line is to remove it in another text editor and then deploy in Wappler without saving.

#7
#8

I thought the wrong link tag was fixed a while ago, it is something that @George needs to check.

#9

This was reported and I don’t think has been resolved yet:

1 Like
#10

My calendar also quit working. It updated from 4.4.0 to 4.4.2 in several scripts, and also added ‘defer’ to each one. I removed ‘defer’ and it works. The problem is that Wappler adds it back no matter what. I had to load the page into a text editor, removed ‘defer’ and then ftp uploaded it.

1 Like
#11
#12

Fixed in Wappler 5.0.3

#13
#14

This topic was automatically closed after 32 hours. New replies are no longer allowed.