11540 sujets

JavaScript, DOM et API Web HTML5

bonjour à tous,

voilà j'ai un léger souci, j'ai créé une navigation en ajax suite à un tuto, en fait toute mes pages sont construites de la même manière, juste le contenu import_php qui change,
avec la méthode que j'utilise la navigation fonctionne mais si par exemple je suis sur la page bio et que je réactualise, la page bio se charge mais pas l'index qui la contient (en gros ce qui ne change pas n'est pas réactualisé donc mon menu js et mon import twitter ne se chargent pas)

voici mon code:



<?php
if(!isset($_GET['request'])) $_GET['request'] = "normal";
if($_GET['request'] != 'ajax'){
?>
 
<!doctype html>
<html lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>Galak Photography</title>
   
  <link rel="shortcut icon" href="favicon.ico">
  <link rel="icon" href="favicon.ico">
   
  <link href="css/reset.css" rel="stylesheet" type="text/css">
  <link href="css/main.css" rel="stylesheet" type="text/css">
  <link href="css/menu.css" rel="stylesheet" type="text/css">
  <link href="css/accueil.css" rel="stylesheet" type="text/css">
  <link href="css/bio.css" rel="stylesheet" type="text/css">
  <link href="css/in_the_city.css" rel="stylesheet" type="text/css">
  <link href="css/contact.css" rel="stylesheet" type="text/css">
  <link href="css/coda-slider.css" rel="stylesheet" type="text/css"> 
 
   
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="javascript/ghost_type.js"></script>
  <script src="javascript/multiple_accordion.js"></script>
  <script src="http://twitterjs.googlecode.com/svn/trunk/src/twitter.min.js"></script>
  <script src="javascript/main.js"></script>
  <script src="javascript/jquery-ui-1.8.20.custom.min.js"></script>
 
    <!-- This of course is required. The full version (not .min) is also included in the js directory --> 
  <script src="javascript/jquery.coda-slider-3.0.js"></script>
       
  <script type="text/javascript">
        $(document).ready(function(){
             
            $(".topnav li a").click(function(e){
                var lien = $(this).attr("href");
                var titre = $(this).attr("title");
            window.onpopstate = function(event) {
                $.ajax({
                    url: location.pathname + "?request=ajax",
                    success: function(data){
                        $("#import_php").fadeOut(500, function(){
                            $("#import_php").html(data);
                            $("#import_php").fadeIn(1000);
                        });
                    }
                });
            };             
                $.ajax({
                    url: lien + "?request=ajax",
                    success: function(data){
                        $("#import_php").fadeOut(500, function(){
                            $("#import_php").html(data);
                            history.pushState('', titre + ' | Galak', lien);
                            document.title = titre + ' | Galak';
                            $("#import_php").fadeIn(1000);
                        });
                    }
                });
                e.preventDefault();
            });
 
        });
    </script>
 
 
 
<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
 
</head>
 
<body>
 
<!--début container-->
<div id="container">
 
   
<!--début sidebar-->
    <div id="sidebar">
 
 
<!--début header--> 
      <header>
        <figure id="logo">
          <img src="http://localhost/galak/images/structurelles/logo2.png" alt="galak photography">
        </figure> 
      </header>
<!--fin header  -->
 
 
<!--début navigation-->     
      <nav>
        <ul class="topnav">
           
          <li><a title="Accueil" href="http://localhost/galak/index.php">Accueil</a></li>
           
          <li><a title="Bio" href="http://localhost/galak/pages/bio.php">Bio</a></li>
     
          <li><a id="bouton_portfolio">Portfolio</a>
           
            <ul>
              <li><a title="In the city" href="http://localhost/galak/pages/inthecity.php">In the city</a></li>             
              <li><a title="N.Y.C. State of mind" href="http://localhost/galak/pages/stateofmind.php">N.Y.C. State of mind</a></li>
              <li><a title="People" href="http://localhost/galak/pages/people.php">People</a></li>
            </ul>
             
          </li>
          <li><a title="Contact" href="http://localhost/galak/pages/contact.php">Contact</a></li>
           
        </ul>
      </nav>
<!--fin navigation-->
  
  
<!--début import twitter--> 
      <div id="import_twitter">
        <h2 class="titre_tweet">Dernier tweet:</h2>
        <div id="tweet">
          <p class="message_erreur">
             <img id="loader" alt="loader" src="http://localhost/galak/images/structurelles/ajax-loader.gif" />
          </p>
          <p class="lien_galakp2v"><a href="http://twitter.com/galakp2v">Si ça ne charge pas cliquez pour accéder sur ma page directement !</a>
          </p>
        </div>     
      </div>     
<!--fin import twitter--> 
 
  
<!--début footer-->
      <footer>
        <p>&copy;Tout droits réservés: galak 2013</p>
          <p>Réalisation du site:</p>
          <ul class="lien_nwd">
            <li><a href="http://newworkdesign.com/neworkdesignatcom/source/accueil.html" target="_blank">NWD</a></li>
          </ul>   
      </footer>
<!--fin footer-->
  
      
    </div>
<!--fin sidebar-->
 
 
<!--début import_php-->
  <div id="import_php">
  <?php } ?>
   
    <!--début div principale-->
    <div id="div_principale_accueil">
      <div id="pix">
        <div id="contenu_texte_accueil">
          <div id="testtype">
            <h1 id="phrase_1">&nbsp;&nbsp;"Capturer des instants,&nbsp;&nbsp;</h1><br>
            <h1 id="phrase_2">^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^&nbsp;&nbsp;Partager des moments."&nbsp;&nbsp;</h1>
          </div>
        </div>
      </div>   
    </div>
<!--fin div principale-->
 
<!--début du script de l'apparition de la phrase-->
 
<script type="text/javascript">
  $(document).ready(function () {
    $("#phrase_1").ghostType();            
    $("#phrase_2").ghostType();
  });
</script> 
 
<!--fin du script de l'apparition de la phrase-->
 
<?php if($_GET['request'] != 'ajax'){ ?>   
  </div>
<!--fin import_php-->
  
   
</div>
<!--fin container-->
 
 
</body>
</html>
<?php } ?>



en fait j'ai l'impression qu' au moment de la réactualisation le js de mon menu, de la galerie, etc ... n'est réinterprété !
si une âme charitable pouvais m'aider je lui en serai grandement reconnaissant ! Smiley smile
Modifié par Mench59 (20 Apr 2013 - 12:56)
Merci pour ta réponse Benj, mais je l'inscrit où et comment dans mon script ?


  <script type="text/javascript">
        $(document).ready(function(){
             
            $(".topnav li a").click(function(e){
                var lien = $(this).attr("href");
                var titre = $(this).attr("title");
            window.onpopstate = function(event) {
                $.ajax({
                    url: location.pathname + "?request=ajax",
                    success: function(data){
                        $("#import_php").fadeOut(500, function(){
                            $("#import_php").html(data);
                            $("#import_php").fadeIn(1000);
                        });
                    }
                });
            };             
                $.ajax({
                    url: lien + "?request=ajax",
                    success: function(data){
                        $("#import_php").fadeOut(500, function(){
                            $("#import_php").html(data);
                            history.pushState('', titre + ' | Galak', lien);
                            document.title = titre + ' | Galak';
                            $("#import_php").fadeIn(1000);
                        });
                    }
                });
                e.preventDefault();
            });
 
        });
    </script>