can't display correctely the page with ajax
bonjour
Mon probleme est le suivant : j utilise les memes page pour les evenement mouseover et clique. alors lorsque j clique sur un lien et je passe la souris sur lien , les pages sont imbriquées les une des autres.
et voici page index.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title> Accueil</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../css/bootstrap.min.css"/>
<link rel="stylesheet" href="../css/style.css"/>
<link rel="stylesheet" href="../css/responsive.css"/>
</head>
<body >
<div class="container">
<header class="main-header">
<div class="row" id="top-header">
<img class="logo col-lg-2 " src="../img/logo.png" alt="ARTMATIC"/>
<form class="form-inline">
<!-- la barre de recherche -->
<div class="input-group col-sm-3 col-lg-offset-1" style="margin-bottom:-130px">
<input type="text" class="form-control" placeholder="Search for..." style="margin-top:4px">
<span class="input-group-btn">
<a href="#" class=" btn btn-danger glyphicon glyphicon-search" ></a>
</span>
</div>
<!-- fin barre de recherche -->
</form>
<!-- la barre de recherche -->
<form class="navbar-form navbar-right inline-form pull-right">
<div class="form-group">
<input type="search" class="input-sm form-control" placeholder="Recherche">
<button type="submit" class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-eye-open"></span> Chercher</button>
</div>
</form>
<!-- fin barre de recherche -->
</div>
<!-- fin 1 ere ligne du logo et barre de recherche:: top-header-->
<!--menu -->
<div class="container-fluid ">
<div id="main-menu">
<nav class=" navbar navbar-inverse ">
<ul class="nav navbar-nav" >
<li class="menu-greuna"> <a href="ramette-papier.php" class="menu-white">Ramettes de papier</a> </li>
<li class="menu-rose" > <a href="cartouche-consomable.php">Cartouches & Consommables</a> </li>
<li class="menu-vert"> <a href="informatique.php" >Informatique</a> </li>
<li class="menu-bleu"> <a href="classement.php">Classement & Archivage</a> </li>
<li class="menu-orange"><a href="fourniture.php">Fourniture scolaire</a></li>
</ul>
</nav>
<div id="contenu-menu">
<?php
$d="contenu-menu/";
if(isset($_GET['p'])){
$p=strtolower($_GET['p']);
if(preg_match("/^[a-z0-9]+$/",$p) && file_exists($d.$p.".php")){
include $d.$p.".php";
}
else{
include $d."404.html";
}
}
else{
include $d."index.html";
}
?>
</div>
</div>
</div>
</header>
<div id="content">
</div>
<!-- colonne de droite le contenu -->
</div>
</body>
<footer>
</footer>
<script src="../js/jquery-1.12.0.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/navigation.js"></script>
<script>
$(document).ready(function(){
$('.content').click(function(){
/*$('#contenu-menu').empty();*/
alert ('bonjour');
});
});
</script>
</div>
</body>
</html>
$(document).ready(function(){
$("#main-menu a").bind('mouseover focus',function(){
page=$(this).attr("href");
$("a ").removeClass('active');
$(this).addClass('active');
$.ajax({
url: "contenu-menu/"+page,
cache:false,
success:function(html){
afficher(html);
},
error:function(XMLHttpRequest, textStatus, errorThrown){
alert(textStatus);
}
})
return false;
});
$("#main-menu a").bind('click',function(){
page=$(this).attr("href");
$("a ").removeClass('active');
$(this).addClass('active');
$.ajax({
url: "contenu-menu/"+page,
cache:false,
success:function(html){
$('#content').empty().append(html).fadeIn(500);
$('[class="col"]').css('width',' 410px');
$('[class="col"]').css('line-height','40px');
$('[class="col"]').css('margin-bottom','10px');
$('[class="col"]').css('margin-right','13px');
$('section').css('background-color','red');
},
error:function(XMLHttpRequest, textStatus, errorThrown){
alert(textStatus);
}
})
return false;
});
$(".container").hover(function(){
$('#contenu-menu').empty().fadeOut(500);
});
$("#content").hover(function(){
$('#contenu-menu').empty().fadeOut(500);
});
function afficher(data)
{
$('#contenu-menu').empty().append(data).fadeIn(500);
}
});
merci pour votre aide
4 réponses
Salut,
Personne ne peut te "proposer une solution" puisqu'à aucun moment tu n'explique explicitement ton problème.
salut
mon probleme est tres simple et clair, lorsque je clique sur un menu j ai une page qui s'affiche , et lorsque je passe ma souris sur un lien , il ya un autre contenu qui s'affiche. mais les deux contenu s imbriquent(se chevauchent, les contentu s affichent les un sur les autres).
et mon code ajax et index ci-dessus.
j espere que je me suis bien exprimé maintenant
La question est comment avec mon code ajax, afficher plusieurs page a la meme place , en utilisant des evenement differents