jquery hide() method is not working on tablet/mobile

Question

I have a JS function which only show one li element and hides all other li elements enclosed an unordered list based on device detection condition.

HTML

<ul id="menu">
    <li id="mainMenuGroup_mostPopular"></li>
    <li id="mainMenuGroup_slots"></li>
    <li id="mainMenuGroup_table"></li>
    <li id="mainMenuGroup_roulette"></li>
    <li id="mainMenuGroup_poker"></li>
    <li id="mainMenuGroup_mobileiOS"></li>
    <li id="mainMenuGroup_mobileAndroid"></li>
    <li id="mainMenuGroup_mobileWinPhone"></li>
</ul>

JS

function deviceDetectionScript() {

    var mobileDetection = new MobileDetect(window.navigator.userAgent);

    if (mobileDetection.mobile()) {

        if (mobileDetection.os() == 'iOS') {
            alert('iOS detected'); //alert is working fine on ipad
            $('ul#menu > li').not('#mainMenuGroup_mobileiOS').hide(); // this is not working
            show_tab_content('mobileiOS'); // this function makes the selected li active - working fine
        } 
        else if (mobileDetection.os() == 'AndroidOS') {
            alert('Android detected'); //alert is working fine on android tab
            $('ul#menu > li').not('#mainMenuGroup_mobileAndroid').hide(); // this is not working
            show_tab_content('mobileAndroid'); // this function makes the selected li active - working fine
        } 
        else if (mobileDetection.os() == 'WindowsMobileOS' || mobileDetection.os() == 'WindowsPhoneOS') {
            alert('windows detected'); //alert is working fine on windows phone
            $('ul#menu > li').not('#mainMenuGroup_mobileWinPhone').hide(); // this is not working
            show_tab_content('mobileWinPhone'); // this function makes the selected li active - working fine
        }

    }
}

I tried using alert inside the loop and the detection is working just fine along with one additional function show_tab_content('listID'); All these seems to be working fine apart from jquery hide() method $('ul#menu > li').not('#listID').hide();

I tried adding the else condition to check if it is not a mobile device and the script works fine on desktop browsers.

function deviceDetectionScript() {

    var mobileDetection = new MobileDetect(window.navigator.userAgent);

    if (mobileDetection.mobile()) {

        if (mobileDetection.os() == 'iOS') {
            // Same as above
        } 
        else if (mobileDetection.os() == 'AndroidOS') {
            // Same as above
        } 
        else if (mobileDetection.os() == 'WindowsMobileOS' || mobileDetection.os() == 'WindowsPhoneOS') {
            // Same as above
        }

    }
  else {
        alert('Desktop detected'); //alert is working fine on desktop
        $('ul#menu > li').not('#mainMenuGroup_poker').hide(); // this is working fine on desktop
        show_tab_content('poker'); // this function makes the selected li active - working fine
  }
} 

Is there anything I need to make sure that the hide() method also works on mobile/tablets?

Answer 1

I also faced some issue while dealing with mobile devices.

Can you please try this code instead

$('ul#menu > li').not('#mainMenuGroup_poker').each(function(){
var unwanted_li = $(this);
unwanted_li[0].style.display = 'none';
});

I have not tested the above code but I think it will work.

To add, the zero index of unwanted_li have the DOM reference of the object.

**** Exact Issue and Solution ****

After long investigation, this is what was the exact reason for this not working on mobile.

Two functions were working parallely in this scenario. One was calling as soon as the JS starts executing and the other one on document.ready.

In this scenario, document.ready was called even before the other function stopped working and hence there was no li which this function can hide.

For example (function names have been changed to keep the details confidential)

At line 1245

<script type="text/javascript">
    abc(false,true); // this is the function which was actually adding the li s
</script>

At line 1456

<script type="text/javascript">
    // Device detection
    $(document).ready(function() {
        hidingScript();
    });
</script>

So, in above case hidingScript started executing even before abc stopped loading html. To prevent this suggested change is

<script type="text/javascript">
    // Device detection
    $(document).ready(function() {
        abc();
        hidingScript();
    });
</script>

**In case abc is calling an ajax which is then appending the html, then you need to call hidingscript in the success event of ajax call

This change has been verified and is working fine.