Bootstrap 3 не загружает все классы при вызове Ajax URL-запроса, но некоторые из них выполняются - PullRequest
Новая
       11

Bootstrap 3 не загружает все классы при вызове Ajax URL-запроса, но некоторые из них выполняются

0 голосов
/ 27 апреля 2020

Я задал вопрос вчера, не зная точно, как задать вопрос. Итак, вот мой исправленный вопрос.

Я использую Bootstrap 3, и он не загружает все классы полностью, когда функция Ajax вызывает "LEADS_2020_CARD. PHP". В одном из комментариев к моему предыдущему вопросу указывалось, что bootstrap 3 имеет много переопределений классов. Я искал и искал, и там не так много на этом топи c. Если моя проблема связана с переопределением классов, я просто не понимаю, почему он читает большинство классов, но игнорирует другие на странице "LEADS_2020_CARD. PHP", как единственное CSS, которое есть у меня в "PHP_LOADER. PHP" относится только к моему кольцу. Пожалуйста, помогите мне понять, спасибо. 

    php_loader.php

    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato" />

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" >


    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script  src="https://code.jquery.com/jquery-3.5.0.min.js"></script>



    <body onload="loadingAjax('myDiv');" style="font-family:Lato;background:#222222">
    <div id="myDiv"></div>
    </body>

    <script>
    $("#"+div_id).html('<div class="center"><div class="ring"></div><br><br><font color="white" face="arial" size="4"><b>Searching<br><?php echo $total_table_rows ?> records<div onload="myTimer();" style="color:white" id="demo"></div> <br>Please Wait ...</b></font></div>');
    $.ajax({
    type: "POST",
    url: "leads_2020_card.php?",
    data: "State_Code_table="+State_Code_table + "&category="+category+"&longitude="+longitude+"&latitude="+latitude,
    success: function(msg){
    $("#"+div_id).html(msg);
    }
    });
    <script>

    <script>
    var myVar=setInterval(function(){myTimer()},1);
    var count = <?php echo $my_count ?>;
    function myTimer() {
    if(count < <?php echo $max_count ?>) {
    $('.progress').css('width', count + "%");
    count += <?php echo $count_interval ?>;
    document.getElementById("demo").innerHTML = Math.round(count) +"%";
    // code to do when loading
    } else if(count > <?php echo $max_count ?>) {
    // code to do after loading
    count = <?php echo $max_count ?>;
    }
    }
    </script>

А вот мой CSS для этой страницы загрузчика 

    body {
      margin: 0;
      padding: 0;
      font-family: 'Montserrat';
      background: black;
      color: #fff;
    }
    .center {
      display: flex;
      text-align: center;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

    .ring {
      position: absolute;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      animation: ring 2s linear infinite;
    }
    @keyframes ring {
      0% {
        transform: rotate(0deg);
        box-shadow: 1px 5px 2px #e65c00;
      }
      50% {
        transform: rotate(180deg);
        box-shadow: 1px 5px 2px #18b201;
      }
      100% {
        transform: rotate(0360deg);
        box-shadow: 1px 5px 2px #0456c8;
      }
    }
    .ring::before {
      position: absolute;
      left: 0;
      content: "";
      top: 0;
      height: 100%;
      width: 100%;
      border-radius: 50%;
      box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
    }
    span {
      color: #737373;
      font-size: 20px;
      text-transform: uppercase;
      letter-spacing: 1px;
      line-height: 200px;
      animation: text 3s ease-in-out infinite;
    }
    @keyframes text {
      50% {
        color: black;
      }
    }
    </style>
    </head>
...