Your library reference 0 does not exist

Developer Experience Widget Development
1

Hi

I’m trying to use the embedded html widget to insert a time fetched by api from myzmannim.com onto the display. The code seems to work well when tested on codepen.io however I get the following error when inserted to xibo.

Your library reference 0 does not exist.

Here is the fill code

HTML

<div id="shema-main">--:--</div>

Style Sheet

#shema-main {
    font-size:8vw;
    font-weight:bold;
    text-align:center;
    font-family:Arial, sans-serif;
}

JavaScript

(async () => {
    const USER_ID = "**********";
    const API_KEY = "***********************************************";
    const LAT = 53.4872;
    const LNG = -2.2901;

    function fetchLocationID() {
        const params = new URLSearchParams({
            User: USER_ID,
            Key: API_KEY,
            Coding: "JS",
            Latitude: LAT,
            Longitude: LNG
        });
        return fetch("https://api.myzmanim.com/engine1.json.aspx/searchGps", {
            method: "POST",
            headers: {
                "Content-Type": "application/x-www-form-urlencoded",
                "Accept": "application/json"
            },
            body: params.toString()
        }).then(r => r.json()).then(data => data.LocationID);
    }

    function fetchShemaMA72(locationID) {
        const todayISO = new Date().toISOString().split("T")[0];
        const params = new URLSearchParams({
            User: USER_ID,
            Key: API_KEY,
            Coding: "JS",
            Language: "en",
            LocationID: locationID,
            InputDate: todayISO
        });
        return fetch("https://api.myzmanim.com/engine1.json.aspx/getDay", {
            method: "POST",
            headers: {
                "Content-Type": "application/x-www-form-urlencoded",
                "Accept": "application/json"
            },
            body: params.toString()
        }).then(r => r.json()).then(data => data.Zman.ShemaMA72);
    }

    try {
        const locID = await fetchLocationID();
        const iso = await fetchShemaMA72(locID);
        const d = new Date(iso);
        const hh = String(d.getHours()).padStart(2,'0');
        const mm = String(d.getMinutes()).padStart(2,'0');
        document.getElementById("shema-main").textContent = `${hh}:${mm}`;
    } catch (e) {
        document.getElementById("shema-main").textContent = "—";
        console.error(e);
    }
})();

Can someone please shed some light on this?

Many thanks!

2

Hi @sbleitner , Welcome to the Xibo Community!

Are you using CMS version 4.3.1?

If so, you can’t use array notation, such as [0] , in the Javascript box as this is reserved for Media Library references.

If you need to use array notation, your JavaScript should be put into the HEAD box, inside script tags:

<script> </script>
3

Thanks! That has solved the issue.

1 Like