Ajax poste actualise la page quand il ne devrait pas

Question

J'ai un jquery utilise des réponses post à un script grader.php, qui fonctionne parfaitement. En fonction des résultats, il apporte un formulaire afin qu'ils puissent envoyer un message avec des informations de contact. Lorsque j'essaie de publier sur le deuxième script pour traiter l'expéditeur, la page entière est actualisée sans afficher les données ou renvoyer le message approprié. Il s'avère que l'appel n'est pas fait du tout. Si vous voulez voir le staging site vous êtes invités à regarder. C'est une façon un peu ringarde pour moi de me mouiller les pieds avec jquery. Cependant, je crois que le script suspect est ici.

J'ai ajouté une alerte à l'événement click pour voir s'il déclenche même le clic sur le bouton de score. Aucun déclencheur d'alerte et tout ce que je reçois est une actualisation de la page.

Alternativement, y a-t-il moyen de publier des messages et des données de console pour voir exactement ce qui se passe?

HTML:

<div id="result"> 
    <form id="info" method="post" action=""> 
    <input name="phone_number" placeholder="phone number" type="text" size="20" value=""> 
    <input name="email_address" placeholder="email address" type="text" size="30" value=""> 
    <textarea cols="50" rows="10" placeholder="Questions? Comments?" name="comments"></textarea> 
    <input type="submit" id="score" name="score" value="Send"> 
    </form>'; 
</div> 

Jquery:

$("#score").click(function(event){ 
    alert("clicked"); 
    event.preventDefault ? event.preventDefault() : event.returnValue = false; 
    var info = $("#info").serialize(); 
    $('#result').fadeOut().html(""); 
    $.post('paider.php', info, function(data , status){ 
     $('#result').fadeIn().html(data); 
     alert(status); 
    }); 
}); 

Answer 1

Je pense qu'il ya 2 problèmes ici.

Problème 1: Comme la forme réside à l'intérieur #result, la mise en HTML de # résultat « » vide efficacement la forme avant la sérialisation? As-tu essayé?

$("#score").click(function(event){ 
    var info = $("#info").serialize(); 
    $('#result').fadeOut().html(""); 
    event.preventDefault ? event.preventDefault() : event.returnValue = false; 
    $.post('paider.php', info, function(data , status){ 
     $('#result').fadeIn().html(data); 
    }); 
}); 

Problème 2: Ok donc je pris un coup d'œil sur votre site de mise en scène et pense que j'ai trouvé la question. Vous commencez par avoir un formulaire similaire à celui de la question sur ce sujet, mais vous remplacez ensuite ce formulaire par un nouveau formulaire contenant maintenant un élément "#score" (input type = 'submit').

Vous appliquez votre gestionnaire d'événements jquery sur le chargement de document, mais à ce moment l'élément #score n'existe pas encore dans le DOM car vous ne l'avez pas encore chargé.

Vous croyez que vous exécutez le script dans $ ("# score") .cliquez mais en fait la page utilise simplement le comportement par défaut d'un formulaire sans action et un bouton de soumission.

Pour corriger ce problème, vous devez appliquer le gestionnaire d'événements soit à un niveau supérieur dans l'arborescence DOM ou vous pouvez le faire d'une manière plus facile de tester si tel est le problème

S'il vous plaît essayer dans votre premier # gestionnaire submitbuttonclick

$("#submitButton").click(function(event){ 
    event.preventDefault ? event.preventDefault() : event.returnValue = false; 
    var formdata = $('form').serialize(); 
    $.post('grader.php', formdata, function(data , status){ 
     $('ul').css('display', 'none'); 
     $('#result').fadeIn().html(data); 
     //Here add the handler for #score click 
     $("#score").off("click").on("click", function(event){ 
      //Insert code snippet shared above here 
     }); 
    }); 
}); 

ce que cela va faire est de lier l'événement, cliquez sur le bouton envoyer #score après qu'il a été écrit dans le DOM. Dans le cas où le script s'exécute plus d'une fois, nous ne voulons pas que le gestionnaire tire plusieurs fois, c'est pourquoi nous appelons d'abord "off".

Espérons que cela aide.