Problems with website and iPhones

[Waspman]

I have a page which is used to see if students have mastered certain elements in :a course.

It is quite simple, and works perfectly when using Windows or Linux PCs, Android devices and even old Windows phones (!), but get problems when using iPhones.

There are 2 problems depending on age of the iPhone.

Older iPhones don’t react to an onclick event:

                    for ($y = 0; $y < $itemcount; $y++) {
                        $chkval = $skills[$y];
                        $checked = '';
                        if ($chkval == "1") {
                            $checked = 'checked = "checked"  disabled="disabled"';
                        }
                        echo '<td style="text-align: center;">';
                        echo "<input type='checkbox' class='checkbox checkbox-success' " . $checked . "  onclick='chkcountfn($required,$y,\"$memid\") ' />";
                        echo'</td>';

The called Javascript code is:

            function chkcountfn(required, col, memid) {
                let divid = "row" + memid;
                let dateid = "date" + memid;
                let savebtn = "save" + memid;
                let skillstr = document.getElementById(divid).innerHTML;
                let datestr = document.getElementById(dateid).innerHTML;
                let changestr = memid;
                let char = skillstr[col];
                if (skillstr[col] === "0") {
                    char = "1";
                } else {
                    char = "0";
                }
                charReplaced = replaceChar(skillstr, char, col);
                
                alert(charReplaced); //<==========REMOVE===========================
                
                document.getElementById(divid).innerHTML = charReplaced;
                document.getElementById("changes").value = changestr;  //Used to check if later user tries to leave page without saving
                let btn = document.getElementById(savebtn);
                if (btn.classList.contains('disabled')) {
                    // remove the class
                    btn.classList.remove('disabled');
                }

                let count = 0;
                let ch = "1";
                for (let i = 0; i < charReplaced.length; i++) {
                    if (charReplaced.charAt(i) == ch) {
                        count++;
                    }
                }
                if (count >= required) {
                    if (datestr.length === 0) {
                        alert("Required number of skills acheived");
                        var today = new Date();
                        var dd = today.getDate();
                        var mm = today.getMonth() + 1;
                        var yyyy = today.getFullYear();
                        if (dd < 10) {
                            dd = '0' + dd;
                        }

                        if (mm < 10) {
                            mm = '0' + mm;
                        }
                        today = dd + '/' + mm + '/' + yyyy;
                        document.getElementById(dateid).innerHTML = today;
                    }
                }
            }

            function replaceChar(origString, replaceChar, index) {
                let firstPart = origString.substr(0, index);
                let lastPart = origString.substr(index + 1);
                let newString = firstPart + replaceChar + lastPart;
                return newString;
            }

In the case of older iPhones it would appear this Javascript code is not executed.

Secondly newer iPhones do use the above code, but when data is written back to the database using the Save button it gets corrupted:

The Save button code:

echo '<td style="text-align: center;"><a href = "javascript:savefn(' . $memid . ')" class = "btn btn-warning disabled" id="' . $saveid . '" ><span class = "fa fa-save"></span> Save</a></td>'

which calls the following Javascript code:

        function savefn(memid) {

            let divid = "row" + memid;
            let dateid = "date" + memid;
            let savebtn = "save" + memid;
            let classstr = <?php echo $classid; ?>;
            let badgestr = <?php echo $badgeid; ?>;
            let skillstr = document.getElementById(divid).innerHTML;
            let datestr = document.getElementById(dateid).innerHTML;
            //window.location.href = 'updatememberbadge.php?varr=' + passvar;
            window.location = "updatememberbadge.php?varr=" + classstr + "!" + badgestr + "!" + memid + "!" + skillstr + "!" + datestr;
        }

WHenever this executed by an iPhone the word “href” is inserted somewhere in the skillstr string, for example if the skillstr was “11111011110” any 4 of those characters would be replaced by href e.g. “111href1110”

Unfortunately, I do.n’t have an iPhone so am having difficulty understanding what the problem is, and testing it. W. Thanksould be grateful for any ideas

[katsry]

Your issues can be attributed to differences in how iPhones, especially older ones, handle JavaScript events and interpret the code. Here’s how you can tackle them:

Older iPhones have known issues with the onclick event. They often do not recognize an element as clickable unless it is styled with the CSS cursor property set to pointer. Try adding this style to your checkbox:

.checkbox {
    cursor: pointer;
}

Another approach would be to use event listeners in JavaScript:

document.addEventListener('DOMContentLoaded', function() {
    let checkboxes = document.querySelectorAll('.checkbox');
    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('click', function() {
            // Extract necessary values from checkbox attributes or data attributes and call chkcountfn
        });
    });
});

Issue with href getting inserted:

I’m not certain why the string “href” would be inserted randomly. However, the way you’re passing values by concatenating them in the URL is not very robust, and you might be encountering some string parsing or encoding issues.

Consider these improvements:

• Use encodeURIComponent() for each value you append to the URL. This function encodes special characters and ensures they are passed correctly.

window.location = "updatememberbadge.php?varr=" + encodeURIComponent(classstr) + "!" + encodeURIComponent(badgestr) + "!" + encodeURIComponent(memid) + "!" + encodeURIComponent(skillstr) + "!" + encodeURIComponent(datestr);

• Instead of manually constructing URLs with a lot of concatenated values, consider using AJAX (or Fetch) to send the data to the server. This would be more reliable and give you more control over the data you’re sending.

Testing on iPhones:

If you don’t have an iPhone, consider using online services like BrowserStack or Sauce Labs. These services let you test your web pages on real devices and browsers, including various iPhone models.

Lastly, ensure that your site is mobile-friendly and works across various devices.

[Waspman]

Many thanks for taking time to answer - I’ll try those when on the development PC.

[Waspman]

Thanks - the pointer trick worked for the early iPhone.

However it looks like the corruption problem lies somewhere in the chkcount function. If I put an alert immediately after the line:

                let skillstr = document.getElementById(divid).innerHTML;

the string shows as corrupted when an iPhone is used.
Assuming the original skillstr was 0000000000 then it becomes 0ahref=“tel:0000000000”>0000000000
Nowhere in any preceeding code is there an href=tel so I have no idea what is happening.