Dialogs not showing

[KK-Designs]

When I test my Monaca app on mobile, non of the dialog messages show. In the web version, it works fine. How do I fix this?

[yong-asial]

@KK-Designs what kind of dialog messages are showing?

[KK-Designs]

It's not showing anything, not errors too. I am using app.dialog.alert() and app.dialog.prompt(). It works fine on other projects tho.

[yong-asial]

@yong-asial I see... Can you check the log file? You can configure log file (`Log Output') as follows https://en.docs.monaca.io/products_guide/monaca_localkit/overview#preferences-dialog

Also, may we know what project template are you using? or you can share us a code snippets so that we can have a look?

[KK-Designs]

This is the log file: logs.txt

[KK-Designs]

@yong-asial Also I am using the Framework7 Tab View template.

This is my code:

/* eslint-disable no-undef */
/* eslint-disable no-inline-comments */
const $ = Dom7;

const app = new Framework7({
    name: 'Group Driving', // App name
    theme: 'auto', // Automatic theme detection
    el: '#app', // App root element

    // App store
    store: store,
    // App routes
    routes: routes,
});

// Login Screen
$('#my-login-screen .login-button').on('click', async function() {
    const username = $('#my-login-screen [name="username"]').val();
    const password = $('#my-login-screen [name="password"]').val();

    function getCode() {
        return Math.random().toString().substring(2, 8);
    }

    let code = getCode();
    console.log(code);
    let verifyPhoneDialog;
    console.log('Log 1');
    await fetch(`...`);
    console.log('Log 2');
    function verifyPhone() {
        if (localStorage.getItem('loginCreds')) return;
        setTimeout(async () => {
            if (localStorage.getItem('loginCreds')) return;
            await fetch(`...`);
            app.dialog.close(verifyPhoneDialog.el, true);
            // Deactivate code
            code = 0;
            app.dialog.alert('You took too long and I invalidated your code. Please try again', 'Timeout', verifyPhone);
        }, 900000);
        verifyPhoneDialog = app.dialog.prompt('Enter 6 digit code', 'Verify Phone', async (cbOK) => {
            if (localStorage.getItem('loginCreds')) return;
            if (cbOK === code) {
                // Deactivate code
                code = 0;
                await fetch(`...`);
                localStorage.setItem('loginCreds', JSON.stringify({ nickname: username, phone: password }));

                // Close login screen
                app.loginScreen.close('#my-login-screen');

                // Alert username and password
                app.dialog.alert(`Welcome ${username}!<br/>Create or join a group to get started.`);
            } else {
                app.dialog.alert('Incorrect code', undefined, verifyPhone);
            }
        });

    }
    verifyPhone();
});

window.onload = () => {
    if (!localStorage.getItem('darkMode')) {
        localStorage.setItem('darkMode', false);
    }

    if (!localStorage.getItem('loginCreds')) {
        $('.login-screen-open').trigger('click');
    }

    if (!localStorage.getItem('unit')) {
        localStorage.setItem('unit', 'US');
    }

    $('#reset-data').on('click', () => {
        if (localStorage.getItem('loginCreds')) {
            localStorage.removeItem('loginCreds');
            localStorage.removeItem('darkMode');
            localStorage.removeItem('unit');
            app.dialog.alert('Data successfuly reseted', undefined, location.reload);
        } else {
            app.dialog.alert('You are not logged in! I can\'t reset nothing!');
        }
    });

    $('#editNickname').val(JSON.parse(localStorage.getItem('loginCreds')) && JSON.parse(localStorage.getItem('loginCreds')).nickname ? JSON.parse(localStorage.getItem('loginCreds')).nickname : '');
    $('#editPhone').val(JSON.parse(localStorage.getItem('loginCreds')) && JSON.parse(localStorage.getItem('loginCreds')).phone ? JSON.parse(localStorage.getItem('loginCreds')).phone : '');
    $('#unit').val(localStorage.getItem('unit') ? localStorage.getItem('unit') : 'US');
    if (localStorage.getItem('darkMode')) {
        $('#darkToggle').prop('checked', false);
    } else {
        $('#darkToggle').prop('checked', true);
    }
    window.addEventListener('storage', () => {
        $('#editNickname').val(JSON.parse(localStorage.getItem('loginCreds')) && JSON.parse(localStorage.getItem('loginCreds')).nickname ? JSON.parse(localStorage.getItem('loginCreds')).nickname : '');
        $('#editPhone').val(JSON.parse(localStorage.getItem('loginCreds')) && JSON.parse(localStorage.getItem('loginCreds')).phone ? JSON.parse(localStorage.getItem('loginCreds')).phone : '');
        $('#unit').val(localStorage.getItem('unit') ? localStorage.getItem('unit') : 'US');
        if (localStorage.getItem('darkMode')) {
            $('#darkToggle').prop('checked', false);
        } else {
            $('#darkToggle').prop('checked', true);
        }
    }, false);

    $('#darkToggle').on('click', () => {
        localStorage.setItem('darkMode', $('#darkToggle').prop('checked'));
    });

    $('#unit').change(() => {
        localStorage.setItem('unit', $('#unit').val());
    });

    $('#saveData').on('click', () => {
        saveSettings([
            {
                element: $('#editNickname'),
                storageKey: 'loginCreds',
                isLogin: true,
                login: {
                    nickname: true,
                    phone: false,
                },
            },
            {
                element: $('#editPhone'),
                storageKey: 'loginCreds',
                isLogin: true,
                login: {
                    nickname: false,
                    phone: true,
                },
            },
        ]);
        app.dialog.alert('Data saved');
    });
};

function saveSettings(storage) {
    storage.forEach(element => {
        if (element.isLogin) {
            const oldNickname = JSON.parse(localStorage.getItem('loginCreds')).nickname;
            const oldPhone = JSON.parse(localStorage.getItem('loginCreds')).phone;
            if (element.login.nickname && !element.login.phone) {
                localStorage.setItem(element.storageKey, JSON.stringify({ nickname: element.element.val(), phone: oldPhone }));
            }
            if (!element.login.nickname && element.login.phone) {
                localStorage.setItem(element.storageKey, JSON.stringify({ nickname: oldNickname, phone: element.element.val() }));
            }
        }
    });
}

Sorry length size.

[yong-asial]

@KK-Designs The error is on this line await fetch(...); If you use Monaca Debugger, it will throws an error in Monaca debugger app as well as Debugger tab in Cloud IDE if you are connected.

Cloud IDE - Debugger Tab

Monaca Debugger

Please read following articles for how you can use Monaca debugger to debug the application

• https://en.docs.monaca.io/products_guide/debugger
• https://en.docs.monaca.io/tutorials/monaca_ide/testing_debugging

[KK-Designs]

I'm not sure why it says file:// protocol. Mine URL starts with https://. Could it be CORS interfering? I didn't include my API URL bc it wasn't private so I hid it using .... When I do with the actual URL, I get Log 1 but not Log 2. works. Fine on the web version.

[KK-Designs]

@yong-asial This is the new code with the fixed URLs. The code still doesn't work btw.

/* eslint-disable no-undef */
/* eslint-disable no-inline-comments */
const $ = Dom7;

const app = new Framework7({
    name: 'Group Driving', // App name
    theme: 'auto', // Automatic theme detection
    el: '#app', // App root element

    // App store
    store: store,
    // App routes
    routes: routes,
});

// Login Screen
$('#my-login-screen .login-button').on('click', async function() {
    const username = $('#my-login-screen [name="username"]').val();
    const password = $('#my-login-screen [name="password"]').val();

    function getCode() {
        return Math.random().toString().substring(2, 8);
    }

    let code = getCode();
    console.log(code);
    let verifyPhoneDialog;
    // This line is broken on mobile, Pls fix
    await fetch(`https://group-driving.kkdesigns.repl.co/?phone=1${password}&code=${code}&event=sendCode`, { mode: 'no-cors' });
    function verifyPhone() {
        if (localStorage.getItem('loginCreds')) return;
        setTimeout(async () => {
            if (localStorage.getItem('loginCreds')) return;
            await fetch(`https://group-driving.kkdesigns.repl.co/?phone=1${password}&event=timeout`, { mode: 'no-cors' });
            app.dialog.close(verifyPhoneDialog.el, true);
            // Deactivate code
            code = 0;
            app.dialog.alert('You took too long and I invalidated your code. Please try again', 'Timeout', verifyPhone);
        }, 900000);
        verifyPhoneDialog = app.dialog.prompt('Enter 6 digit code', 'Verify Phone', async (cbOK) => {
            if (localStorage.getItem('loginCreds')) return;
            if (cbOK === code) {
                // Deactivate code
                code = 0;
                await fetch(`https://group-driving.kkdesigns.repl.co/?phone=1${password}&event=success`, { mode: 'no-cors' });
                localStorage.setItem('loginCreds', JSON.stringify({ nickname: username, phone: password }));

                // Close login screen
                app.loginScreen.close('#my-login-screen');

                // Alert username and password
                app.dialog.alert(`Welcome ${username}!<br/>Create or join a group to get started.`);
            } else {
                app.dialog.alert('Incorrect code', undefined, verifyPhone);
            }
        });

    }
    verifyPhone();
});

window.onload = () => {
    if (!localStorage.getItem('darkMode')) {
        localStorage.setItem('darkMode', false);
    }

    if (!localStorage.getItem('loginCreds')) {
        $('.login-screen-open').trigger('click');
    }

    if (!localStorage.getItem('unit')) {
        localStorage.setItem('unit', 'US');
    }

    $('#reset-data').on('click', () => {
        if (localStorage.getItem('loginCreds')) {
            localStorage.removeItem('loginCreds');
            localStorage.removeItem('darkMode');
            localStorage.removeItem('unit');
            app.dialog.alert('Data successfuly reseted', undefined, () => location.reload());
        } else {
            app.dialog.alert('You are not logged in! I can\'t reset nothing!');
        }
    });

    $('#editNickname').val(JSON.parse(localStorage.getItem('loginCreds')) && JSON.parse(localStorage.getItem('loginCreds')).nickname ? JSON.parse(localStorage.getItem('loginCreds')).nickname : '');
    $('#editPhone').val(JSON.parse(localStorage.getItem('loginCreds')) && JSON.parse(localStorage.getItem('loginCreds')).phone ? JSON.parse(localStorage.getItem('loginCreds')).phone : '');
    $('#unit').val(localStorage.getItem('unit') ? localStorage.getItem('unit') : 'US');
    if (localStorage.getItem('darkMode')) {
        $('#darkToggle').prop('checked', false);
    } else {
        $('#darkToggle').prop('checked', true);
    }
    window.addEventListener('storage', () => {
        $('#editNickname').val(JSON.parse(localStorage.getItem('loginCreds')) && JSON.parse(localStorage.getItem('loginCreds')).nickname ? JSON.parse(localStorage.getItem('loginCreds')).nickname : '');
        $('#editPhone').val(JSON.parse(localStorage.getItem('loginCreds')) && JSON.parse(localStorage.getItem('loginCreds')).phone ? JSON.parse(localStorage.getItem('loginCreds')).phone : '');
        $('#unit').val(localStorage.getItem('unit') ? localStorage.getItem('unit') : 'US');
        if (localStorage.getItem('darkMode')) {
            $('#darkToggle').prop('checked', false);
        } else {
            $('#darkToggle').prop('checked', true);
        }
    }, false);

    $('#darkToggle').on('click', () => {
        localStorage.setItem('darkMode', $('#darkToggle').prop('checked'));
    });

    $('#unit').change(() => {
        localStorage.setItem('unit', $('#unit').val());
    });

    $('#saveData').on('click', () => {
        saveSettings([
            {
                element: $('#editNickname'),
                storageKey: 'loginCreds',
                isLogin: true,
                login: {
                    nickname: true,
                    phone: false,
                },
            },
            {
                element: $('#editPhone'),
                storageKey: 'loginCreds',
                isLogin: true,
                login: {
                    nickname: false,
                    phone: true,
                },
            },
        ]);
        app.dialog.alert('Data saved');
    });
};

function saveSettings(storage) {
    storage.forEach(element => {
        if (element.isLogin) {
            const oldNickname = JSON.parse(localStorage.getItem('loginCreds')).nickname;
            const oldPhone = JSON.parse(localStorage.getItem('loginCreds')).phone;
            if (element.login.nickname && !element.login.phone) {
                localStorage.setItem(element.storageKey, JSON.stringify({ nickname: element.element.val(), phone: oldPhone }));
            }
            if (!element.login.nickname && element.login.phone) {
                localStorage.setItem(element.storageKey, JSON.stringify({ nickname: oldNickname, phone: element.element.val() }));
            }
        }
    });
}

EDIT: Fixed reload error, and possibly tried to fix the issue.

[KK-Designs]

I fixed the issue, CORS was blocking the fetch() function to work. Adding { mode: 'no-cors' } seemed to fix it.