Я обнаружил проблему с моим Navbar на Firefox. Проблема в том, что мой Navbar мигает .. Он постоянно растет и уменьшается.
Проблема не появляется на Chrome И Opera ..
Что вызывает эту проблему? Мой Ajax код здесь:
Данные этого вызова загружены, но возникает проблема мерцания .. (Проблема с консолью? Нет вообще
Как это должно выглядеть?: https://prnt.sc/s4pkme Спасибо за помощь
<script>
$(document).ready(function(){
$.ajax({
url: '../../ajax/getlastnamespaces.php',
type: 'GET',
dataType: 'html',
success: function(response){
$('#resultlastprojects').html(response);
}, error: function(data){
ShowMessageNotification('error', 'Le chargement du tableau a échoué...', 4000, 'top-end');
}
});
});
</script>
Дополнительный код здесь:
<?php
session_start();
if(isset($_SESSION["connection"]) && ($_SESSION["role"] >= 0)){
$title_page = "DashBoard - j";
$anneeactuel = date("Y");
$anneeprecedente = strval(date("Y")-1);
require_once("../../include/js/ShowNotif.php");
require_once("../../include/head.php");
?>
<!-- Main content -->
<div class="main-content" id="panel">
<!-- Topnav -->
<?php
require_once("../../include/navbar.php");
?>
<div class="header bg-primary pb-6">
<div class="container-fluid">
<div class="header-body">
<div class="row align-items-center py-4">
<div class="col-lg-6 col-7">
<h6 class="h2 text-white d-inline-block mb-0">DashBoard</h6>
<nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
<ol class="breadcrumb breadcrumb-links breadcrumb-dark">
<li class="breadcrumb-item"><a href="dashboard.php"><i class="fas fa-home"></i></a></li>
<li class="breadcrumb-item"><a href="dashboard.php">Dashboard</a></li>
<li class="breadcrumb-item active" aria-current="page">Accueil</li>
</ol>
</nav>
</div>
</div>
<script>
$(document).ready(function(){
$.ajax({
url: '../../ajax/getnumberofnamespaces.php',
type: 'GET',
dataType: 'JSON',
success: function(response){
var nbrprojectsofthisyear = response[0][0];
var nbrprojectsofprecedentyear = response[0][1];
var nbrprojectstotal = response[0][2];
var nbrprojectsparmois = response[1];
myChart.data.datasets[0].data = response[1];
myChart.data.labels = response[2];
myChart.update();
var pourcentageparrapportmoisdernier = response[3][0];
var pourcentageanneederniere = response[3][1];
var pourcentageanneesprecedente = response[3][2];
$('#nbrprojectstotal').html(nbrprojectstotal);
$('#nbrprojectsofthisyear').html(nbrprojectsofthisyear);
$('#nbrprojectsofprecedentyear').html(nbrprojectsofprecedentyear);
$('#pourcentageparrapportmoisdernier').html(pourcentageparrapportmoisdernier);
if(pourcentageparrapportmoisdernier <= 1){
$("#colortext").attr('class', 'mr-2 text-danger');
$("#sensfleche").attr('class', 'fa fa-arrow-down');
}
$('#pourcentageanneederniere').html(pourcentageanneederniere);
if(pourcentageanneederniere <= 1){
$("#colortextpourcentageparrapportmoisdernier").attr('class', 'mr-2 text-danger');
$("#sensflechepourcentageparrapportmoisdernier").attr('class', 'fa fa-arrow-down');
}
$('#pourcentageanneesprecedente').html(pourcentageanneesprecedente);
if(pourcentageanneesprecedente <= 1){
$("#colortextpourcentageanneesprecedente").attr('class', 'mr-2 text-danger');
$("#sensflechepourcentageanneesprecedente").attr('class', 'fa fa-arrow-down');
}
ShowMessageNotification('success', 'Le chargement des graphiques a réussi !', 4000, 'top-end');
}, error: function(html){
ShowMessageNotification('error', 'Le chargement des graphiques a échoué...', 4000, 'top-end');
}
});
});
</script>
<div class="row">
<div class="col-md-4">
<div class="card card-stats">
<!-- Card body -->
<div class="card-body">
<div class="row">
<div class="col">
<h5 class="card-title text-uppercase text-muted mb-0">NameSpaces</h5>
<span class="h2 font-weight-bold mb-0" id="nbrprojectstotal">LoadingProcess...</span>
</div>
<div class="col-auto">
<div class="icon icon-shape bg-gradient-red text-white rounded-circle shadow">
<i class="ni ni-chart-bar-32"></i>
</div>
</div>
</div>
<p class="mt-3 mb-0 text-sm">
<span id="colortext" class="text-success mr-2"><i id="sensfleche" class="fa fa-arrow-up"></i> <span id="pourcentageparrapportmoisdernier">LoadingProcess...</span>%</span>
<span class="text-nowrap">/ Mois dernier</span>
</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card card-stats">
<!-- Card body -->
<div class="card-body">
<div class="row">
<div class="col">
<h5 class="card-title text-uppercase text-muted mb-0">Nouveaux NameSpaces en <?= $anneeactuel; ?></h5>
<span class="h2 font-weight-bold mb-0" id="nbrprojectsofthisyear">LoadingProcess...</span>
</div>
<div class="col-auto">
<div class="icon icon-shape bg-gradient-info text-white rounded-circle shadow">
<i class="ni ni-spaceship"></i>
</div>
</div>
</div>
<p class="mt-3 mb-0 text-sm">
<span id="colortextpourcentageanneederniere" class="text-success mr-2"><i id="sensflechepourcentageanneederniere" class="fa fa-arrow-up"></i> <span id="pourcentageanneederniere">LoadingProcess...</span>%</span>
<span class="text-nowrap">/ Année précedente</span>
</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card card-stats">
<!-- Card body -->
<div class="card-body">
<div class="row">
<div class="col">
<h5 class="card-title text-uppercase text-muted mb-0">Nouveaux NameSpaces en <?= $anneeprecedente; ?></h5>
<span class="h2 font-weight-bold mb-0" id="nbrprojectsofprecedentyear">LoadingProcess...</span>
</div>
<div class="col-auto">
<div class="icon icon-shape bg-gradient-primary text-white rounded-circle shadow">
<i class="ni ni-chart-pie-35"></i>
</div>
</div>
</div>
<p class="mt-3 mb-0 text-sm">
<span id="colortextpourcentageanneesprecedente" class="text-success mr-2"><i id="sensflechepourcentageanneesprecedente" class="fa fa-arrow-up"></i> <span id="pourcentageanneesprecedente">LoadingProcess...</span>%</span>
<span class="text-nowrap">/ Années précedentes</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Page content -->
<div class="container-fluid mt--6">
<div class="row">
<div class="col-md-12">
<div class="card bg-default">
<div class="card-header bg-transparent">
<div class="row align-items-center">
<div class="col">
<h6 class="text-dark text-uppercase ls-1 mb-1">Vue Globale</h6>
<h5 class="h3 text-dark mb-0">NameSpaces déployés</h5>
</div>
<div class="col">
<ul class="nav nav-pills justify-content-end">
<li class="nav-item mr-2 mr-md-0" data-toggle="chart" data-target="#mycanvas" data-prefix="$" data-suffix="k">
<a class="nav-link py-2 px-3 active" data-toggle="tab">
<span class="d-none d-md-block">Mois</span>
<span class="d-md-none">M</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="card-body">
<!-- Chart -->
<div class="chart">
<!-- Chart wrapper -->
<canvas id="mycanvas" class="chart-canvas"></canvas>
</div>
</div>
</div>
</div>
</div>
<div id="resultlastprojects"></div>
<!-- Footer -->
<?php
require_once("../../include/footer.php");
?>
</div>
</div>
<!-- Argon Scripts -->
<!-- Core -->
<?php
require_once("../../include/js/js.php");
?>
<script>
// create initial empty chart
var ctx_live = document.getElementById("mycanvas");
var myChart = new Chart(ctx_live, {
type: 'line',
options: {
scales: {
yAxes: [{
gridLines: {
color: Charts.colors.gray[700],
zeroLineColor: Charts.colors.gray['rgb(249,249,249)'],
},
ticks: {
}
}]
},
},
data: {
labels: ['Jan', 'Feb', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
datasets: [{
label: 'NameSpaces ',
data: [0,0,0,0,0,0,0,0,0,0,0,0],
}]
}
});
</script>
<script>
$(document).ready(function(){
$.ajax({
url: '../../ajax/getlastnamespaces.php',
type: 'GET',
dataType: 'html',
success: function(response){
$('#resultlastprojects').html(response);
}, error: function(data){
ShowMessageNotification('error', 'Le chargement du tableau a échoué...', 4000, 'top-end');
}
});
});
</script>
</body>
</html>
<?php
}else{
header('Location: ../../connect.php');
} ?>
