1

I am fairly new to writing code in general. it's only been a year since I started.

I have a website the pulls a pageant from firestore. If the pageant has different categories, it will display the categories allowing the client to choose the category first before displaying the candidates for that category.

The problem that I have is that when clicking on the category, the alert fires but the actual function is ignored. This only happens on IOS.

I have tried multiple solutions on here.

Added cursor:pointer.

added role="button" when I used a div first instead of a button.

I tried .on('click', and so on).

I tried .click().

I tried wrapping it $(document).ready().

This one is static <div id="main-content-container" class="main-content-container"></div>

const mainContentContainer = document.getElementById('main-content-container');

renderPageant()
async function renderPageant() {
    let html = `
        <div id="render-candidates-container" class="render-candidates-container"></div>
    `
    mainContentContainer.innerHTML = html;

    const renderCandidatesContainer = document.getElementById('render-candidates-container');

    const doc_1 = await db.collection('Pageants').doc(value).get();
    const category = doc_1.data().isCategory
    if(category == true) {
        const querySnapshot = await db.collection('Pageants').doc(value).collection('Categories').get();
        $('#render-candidates-container').empty();
        
        console.log(querySnapshot.size)
        querySnapshot.forEach((doc_2) => {
            const button = document.createElement('button');
            button.setAttribute('id', doc_2.id + '-category-image');
            button.setAttribute('class', 'cursorPointerClass')
            button.innerHTML = `
                <img src="${doc_2.data().categoryBanner}" alt="category banner">
            `
            renderCandidatesContainer.insertBefore(button, renderCandidatesContainer.childNodes[3]);

            const categoryImage = document.getElementById(doc_2.id + '-category-image');
            categoryImage.addEventListener('click', function() {
                alert('Fired!')
                var x = {
                    pageantID: doc_1.id,
                    categoryID: doc_2.id,
                    category: true,
                    ovarallVotes: doc_1.data().overallVotes
                }
                timerCandBlock(x);
            }) 
        })
        return
    }

    var x = {
        pageantID: doc_1.id,
        categoryID: 'undefined',
        category: false,
        ovarallVotes: doc_1.data().overallVotes
    }
    timerCandBlock(x);            
    return
}

timerCandBlock(x); works fine since it actually works when in Chrome PC or Chrome Android. It even works when in inside Facebook in-app browser. But it just does not work when in IOS.

What am I missing here?

Kristian Monterde
  • 31
  • 3
  • could you reorder the code to call the function first and then the alert, I suspect the alert if blocking the continuation of the code running – Patrick Hume Aug 08 '22 at 17:07
  • @PatrickHume I have tried that as well. The alert still fires but the function is still being ignored. Only happens on IOS though. Works fine on PC and Android. – Kristian Monterde Aug 08 '22 at 17:14
  • ah ok I stand corrected, i would say have you tried "touchstart" but as its calling the alert and you put the timerCandBlock function in front of that to execute beforehand that suggests it is calling it but something within that function is not working correctly, if you put a console.log in the function can you confirm that it most certainly inst been called ? – Patrick Hume Aug 08 '22 at 17:24
  • @PatrickHume Yes, I forgot to add that to the post. I tried touchstart. I even add two listeners. One for touchstart and one for click. Both worked. It was able to detect on devtools when it was a touch OR a click. Also, I am unable to add console.log on the timerCandBlock function and verify because I dnt have an iPhone. I have no idea how would I try to debug that on my windows PC. But assuming that the function fires perfectly when using a PC or an Android phone, I am assuming that the function works fine. – Kristian Monterde Aug 08 '22 at 18:15
  • a lof of my users who are using IOS are telling me the exact same thing. That when they touch, nothing happens. But for all my users using android, works perfectly as intended. I have even paid 3 people with iphones to just keep testing the site everytime I uploaded a new version to see if would work. BUt nothing worked. – Kristian Monterde Aug 08 '22 at 18:18
  • are you able to create a stackoverflow minimal reproducible example or post a link to a version I can access, I can then use something like https://www.browserstack.com or testingbot.com to test the code on ISO but at the same time be able to debug it ? – Patrick Hume Aug 08 '22 at 18:43
  • also might be worth trying the cross browser event wire up from here https://stackoverflow.com/questions/14054272/click-event-listener-works-in-safari-in-osx-but-not-in-ios – Patrick Hume Aug 08 '22 at 18:46
  • This is my actual website: https://powerscents.app/ But if you want, you can use this testing page. This is what i gave to the 3 people I paid to test. https://powerscents.app/BbBondocPeninsula.html .. You go to that and it will immediately show you 4 categories. – Kristian Monterde Aug 08 '22 at 18:55
  • its as i thought the function IS being called but its throwing an error, in this bit of code ```js async function timerCandBlock(x) { const pageantID = x.pageantID const categoryID = x.categoryID const category = x.category const ovarallVotes = x.ovarallVotes ``` its thowing this error: ```js uncaught promise rejection typeerror undefined is not a function ``` that occurs on line : const pageantID = x.pageantID so i think the function is being called but is failing – Patrick Hume Aug 08 '22 at 19:36
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/247135/discussion-between-patrick-hume-and-kristian-monterde). – Patrick Hume Aug 08 '22 at 19:42

0 Answers0