简体   繁体   中英

JQuery Not Working On Mobile Devices - Dropdown & Load Function

Still kinda new to JQuery. Currently my JQuery code is not working correctly on any mobile devices. My drop down is not appearing on an iPhone. The drop down works on an older Samsung Edge 7, but the load function is not loading the additional .php page which is in the same file. On a newer Samsung device like Galaxy 10, the it appears that the drop down is not working. Everything does work on a computer aka desktop / laptop devices just the way I want it, but cannot seem to get mobile to work. Went to the browsers and not receiving any javascript errors.

How it should work is... This years table automatically displays on load. When select last year from drop down, it should change and hide this years table and loads in last years table from a different php page within the same file. Did add a loader icon because the table takes a bit to upload and display. Once load in, it removes the loader icon from the page and user than can toggle back and forth as needed.

Please look at the code below and tell me what am I missing for mobile devices?

<select style='height:50px; border:none; font-size:28px; font-weigth:bolder;' name='year_to_date' id='year_to_date'  required >
    <option value="current_year">2020</option> 
    <option value="previous_year">2019</option>                                                 
</select>

<script type=”text/javascript” src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script> 
<script>
    $(document).ready(function(){
        $('#loading').hide();
    });

    $("#year_to_date").change(function () {
        $('#current_year').hide();
        $('#loading').show();
        if($('#year_to_date').val() == 'previous_year') {
            $("#previous_year").load("statistics_prev.php", function(){
            $( "div" ).remove( "#loading" );                        
         });
            $('#previous_year').show();
        }   else {
            $('#current_year').show(); 
            $('#previous_year').hide();
            $('#loading').hide();
        }
    });
</script>

Found out, it wasn't the jquery was the issue. It was the test server that I was on. Test server blocked some rights or some aspects of the jquery causing the mobile version not to perform as well as the computer version.. Went to live and had to tweek the code due to requests and it is now working.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM