Ajax не срабатывает до перезагрузки страницы - PhoneGap - PullRequest
Новая
       6

Ajax не срабатывает до перезагрузки страницы - PhoneGap

0 голосов
/ 28 февраля 2020

Я создаю приложение phonegap и в него встроены функции ajax.

Во-первых, я хотел бы сказать, что нет проблем с CORS или белым списком, вызов AJAX на самом деле работает, но Кажется, он не активируется при загрузке страницы.

HTML: 

<div id="ajax-loader" style="background-image: url(images/loader.gif);background-position: top center;background-repeat: no-repeat;position:absolute; top:0; left:0; bottom:50px; right:0; width:100%; height:100%; border:none; margin:140px 0 50px 0; padding:0; overflow:hidden;"></div>
<div id="info"></div>

JS: 

  $.get("https://www.example.com/getPage.php?page=disclaimer",function(data){
         $("#info").append(data);
    }).done(function() {
         $('#ajax-loader').css('display','none');
  });

Как видно из названия, однажды я доступ к странице, я вижу preloader, как и ожидалось, но из консоли я не вижу никаких действий AJAX, как только я обновляю sh страницу с другой стороны, тогда все запускается как обычно.

I пытался поместить код внутри состояния DeviceReady и других состояний, но похоже, что это то же самое. Любые предложения по исправлению этой ошибки, чтобы AJAX срабатывал, как только я зашел на страницу?

РЕДАКТИРОВАТЬ: Первоначально я реализовал решение iFrame, которое работало так же, предварительный загрузчик показывает, пока страница загружается в фоновом режиме, затем он исчезает когда страница готова. IFrame занял около 4-7 секунд для большого количества открытого текста, поэтому я решил использовать AJAX, что занимает около 1-2 секунд.

FULL BODY: 

<body class="theme-light" data-highlight="blue2">    
<div id="page">

    <div id="page-preloader">
        <div class="loader-main"><div class="preload-spinner border-highlight"></div></div>
    </div>

    <div class="header header-fixed header-logo-app">
        <a href="pages.html" class="back-button header-title">Back to pages</a>
        <a href="pages.html" class="header-icon header-icon-1 back-button"><i class="fas fa-arrow-left"></i></a>
        <a href="#" class="header-icon header-icon-2" data-toggle-theme><i class="fa fa-moon"></i></a>
    </div>

    <div class="footer-menu footer-5-icons footer-menu-center-icon">
        <a href="book.html" ><i class="fa fa-car"></i><span>Book</span></a>
        <a href="dashboard.html" ><i class="fa fa-cog"></i><span>Dashboard</span></a>
        <a href="main.html"><i class="fa fa-home"></i><span>Home</span></a>
        <div class="clear"></div>
    </div>   


    <div class="page-content header-clear">   

        <div class="page-title has-subtitle">
            <div class="page-title-left">
                <a href="#" class="font-24">Disclaimer</a>
                <span class="color-highlight">Information</span>
            </div>
        </div>

    <div id="ajax-loader" style="background-image: url(images/loader.gif);background-position: top center;background-repeat: no-repeat;position:absolute; top:0; left:0; bottom:50px; right:0; width:100%; height:100%; border:none; margin:140px 0 50px 0; padding:0; overflow:hidden;"></div>
    <div id="info"></div>

    </div>

    <div class="menu-hider"></div>
</div>

<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/plugins.js"></script>
<script type="text/javascript" src="scripts/custom.js" async></script>
<script>

  $.get("https://www.example.com/getPage.php?page=disclaimer",function(data){
         $("#info").append(data);
    }).done(function() {
         $('#ajax-loader').css('display','none');
  });

</script>
</body>
...