11480 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous, débutant dans le javascript mais ayant grand besoin de l'utiliser je me suis lancer a l’assaut d'un projet assez fou.. le Ajax.
J'ai récuperer un template avec du javascript que j'ai modifier a ma sauce et tout fonctionne niquel (au niveau de l'affichage).
Ce qui ne fonctionne pas c'est que, sur mon site, j'ai plein de petites <form> sur des "produits" qui au final forment un panier.
Lors de l'envoi de ces form, le code ajax doit en théorie se lancer. Ce qui cause un effet de non raffraichissement de la page.
Avant de le poser dans mon code, je l'avais tester en dehors (sur un dossier différent) et il marche parfaitement..
Si quelqu'un a une idée de pourquoi ca fonctionne pas, cela me serait d'une grande aide Smiley smile


Lien de la page qui fonctionne pas : http://rocketxbox.com/sell
Lien de la page en dehors du site : http://rocketxbox.com/sell/Ajax

Code du ajax en question :
$(function () {
    $('form').on('submit', function (e) {
      console.log();
      var spanid = $(this).attr("id")
        $.ajax({
            type: 'post',
            url: 'reponse.php',
            data: $(this).serialize(),
            success: function (result) {
              $('#id01').fadeIn('slow', function(){
              document.getElementById('modalp').innerHTML = result;
               $('#id01').delay(5000).fadeOut(); 
            });
            }
        });
        e.preventDefault(); // avoid to execute the actual submit of the form.
    });
});


Code d'un <form> parmis tant d'autres :
<li class="product">
  <div class="rl-name"><b>Blanc Titane</b></div>
  <div class="rl-img"><img src="../img/p/5/0/50-cart_default.jpg" alt="Animus GP - Blanc Titane"></div>
  <div class="rl-price"><b><em class="poeprice">1.37</em> EUR</b></div>
  <div class="rl-buy cf">
    <div class="rl-numberbox">
      <div class="b">Maximum : <em>3</em></div>
    </div>
    <form>
      <div class="rl-number fl"><i>Qty:</i><input class="rl-int items-quantity" name="quantity" value="1" min="1" max="3" type="number"></div>
      <div class="rl-btn"><input class="rlbtn poeadd" value="Sell" type="submit"></div>
    </form>
  </div>
</li>

Modifié par misterb63 (13 Oct 2018 - 20:54)