Plugin Jquery pas chargé avec méthode ajax par Sebastien- - page 1

Bonjour,

Je suis en train de réaliser mon portfolio photo, pour un projet de fin de stage.

Je voudrais utiliser la méthode Ajax avec jquery. Le menu ne doit pas se recharger lorsqu'on clique sur un lien, au contraire de la balise section qui contient le titre et le carrousel, régit par un plugin jquery fotorama. le plugin n'est plus supporté, donc je vais devoir trouver une solution sans modifier le plugin. Voila ce que ça devrait donner normalement :

lien vers site sans AJAX

J'ai modifié les pages html pour que lorsqu'on clique sur un lien (seulement street et portrait fonctionnent pour le moment), le code html recherché est bien pris en compte dans le chargement de la page, mais le jquery n'est pas pris en compte pour le carrousel ... Voici le test avec la méthode ajax :

lien vers site avec AJAX

voici mon code jquery concernant la méthode d'appel :

(function ($) {

    $(function () {

        /* alert ('OK1'); */

        $('a#street').on('click', function () {

            /* alert ('OK6'); */

            $.ajax({
                url: "streetTestAjax.html", success: function (result) {
                    $('section').html(result);
                    $('section .titre, section #caroussel').css('transform', 'translate(0)');
                }
            });

        });

        $('a#portrait').on('click', function () {

            /* alert ('OK5'); */

            $.ajax({
                url: "portraitTestAjax.html", success: function (result) {
                    $('section').html(result);
                    $('section .titre, section #caroussel').css('transform', 'translate(0)');
                }
            });

        });


    });

})(jQuery);

le code HTML de la page principale avec le menu :

<!DOCTYPE html>
<html lang="fr">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>SebGacPhoto</title>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
    integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous" />
  <link href="../css/style.css" rel="stylesheet" />
  <link href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet" />
  <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=PT+Mono" rel="stylesheet">
  

</head>

<body>
  <header>
    <div class="menuGauche">
      <a href="#">
        <h2 id="titre1">SebGac</h2>
      </a>
      <nav>
        <a>GALERIES PHOTO</a>
        <ul id="categories">
          <li><a id="voyages" href="#">Voyages <i class="fas fa-arrow-down"></i><i class="fas fa-arrow-up"></i></a>
            <ul class="continents">
              <li><a id="asie" href="#">Asie <i class="fas fa-arrow-down"></i><i class="fas fa-arrow-up"></i></a> 
                <ul class="asie">
                  <li><a id="inde" href="#">Inde</a></li>
                  <li><a id="japon" href="#">Japon</a></li>
                  <li><a id="coree" href="#">Corée du Sud</a></li>
                  <li><a id="mongolie" href="#">Mongolie</a></li>
                  <li><a id="chine" href="#">Chine</a></li>
                  <li><a id="vietnam" href="#">Vietnam</a></li>
                  <li><a id="laos" href="#">Laos</a></li>
                  <li><a id="thailande" href="#">Thailande</a>
                  </li>
                </ul>
              </li>
              <li><a id="europe" href="#">Europe <i class="fas fa-arrow-down"></i><i class="fas fa-arrow-up"></i></a>
                <ul class="europe">
                  <li><a id="france" href="#">France</a></li>
                  <li><a id="allemagne" href="#">Allemagne</a></li>
                  <li><a id="autriche" href="#">Autriche</a></li>
                  <li><a id="slovenie" href="#">Slovénie</a></li>
                  <li><a id="croatie" href="#">Croatie</a></li>
                  <li><a id="montenegro" href="#">Monténegro</a></li>
                  <li><a id="albanie" href="#">Albanie</a></li>
                  <li><a id="grece" href="#">Grèce</a></li>
                  <li><a id="Turquie" href="#">Turquie</a></li>
                </ul>
              </li>
              <li><a id="amsud" href="#">AmSud <i class="fas fa-arrow-down"></i><i class="fas fa-arrow-up"></i></a>
                <ul class="amsud">
                  <li><a id="chili" href="#">Chili</a></li>
                  <li><a id="bolivie" href="#">Bolivie</a></li>
                  <li><a id="perou" href="#">Pérou</a></li>
                  <li><a id="argentine" href="#">Argentine</a></li>
              </ul>
              </li>
            </ul>
          </li>
          <li><a id="street" href="#">Street</a></li>
          <li><a id="architecture" href="#">Architecture</a></li>
          <li><a id="portrait" href="#">Portrait</a></li>
          <li><a id="mariage" href="#">Mariage</a></li>
        </ul>
        <div id="about">
          <a href="#">SUR MOI</a>
          <a href="#">CONTACT</a>
          <a href="#">LIVRE D'OR</a>
        </div>
      </nav>
    </div>

    <div class="liseret">
      <div id="menuburger">
        <a id="bouton" href="#">
          <i id="icone" class="fas fa-bars"></i>
        </a>
      </div>
      <div id="portfolio">
        <p>PORTFOLIO SEBGAC</p>
      </div>
    </div>
  </header>

  <section>


  </section>

</body>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>

<script type="text/javascript" src="../js/appelAjax.js"></script>

<script type="text/javascript" src="../js/menuCoulissant.js"></script>

</html>

Merci d'avance !

EDIT :

J'ai trouvé une solution, à savoir remettre le lien du script du plugin dans ma page dynamique. Mais je me demande si c'est une bonne solution, est-ce qu'il n'y a pas de risque de conflit par la suite ? Car du coup j'ai deux fois l'adresse du script dans ma page HTML

Voici le contenu de ma page dynamique Street par exemple :

<div class="titre">
      <h2>Galerie Photo Street</h2>
    </div>
    <div id="caroussel">
      <div>
        <div class="fotorama" data-width="100%" data-height="88%" data-ratio="800/600" data-nav="thumbs"
          data-fit="contain" data-thumbwidth="30" data-thumbheight="30" data-arrows="true" data-click="true"
          data-swipe="true" data-trackpad="true" data-keyboard="true" data-allowfullscreen="native">
          <img src="../images/portrait/portrait1.jpg" />
          <img src="../images/portrait/portrait2.jpg" />
          <img src="../images/portrait/portrait3.jpg" />
          <img src="../images/portrait/portrait4.jpg" />
          <img src="../images/portrait/portrait5.jpg" />
          <img src="../images/portrait/portrait6.jpg" />
          <img src="../images/portrait/portrait7.jpg" />
          <img src="../images/portrait/portrait8.jpg" />
          <img src="../images/portrait/portrait9.jpg" />

        </div>
      </div>
    </div>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js
"></script>

-
Edité par Sebastien- 16 avril 2019 à 13:17:57

Plugin Jquery pas chargé avec méthode ajax

Plugin Jquery pas chargé avec méthode ajax

Supprimer

Modérer

Signaler le message aux modérateurs