Fonction JQuery Ajax appelée deux fois avec les mêmes données

Je construis une page très simple qui est une liste de choses à faire. Il accepte l'entrée d'un utilisateur via un formulaire pour de nouvelles tâches, POST le to-do au serveur, puis reçoit (presque) les mêmes données et l'ajoute à une liste. Cependant, chaque fois que des données sont supposées être envoyées au serveur, la fonction $ .ajax est appelée deux fois.Fonction JQuery Ajax appelée deux fois avec les mêmes données

Mes js:

// todo.js 
function onload() { 
$("#datepicker").datepicker(); 
$("#todoform").submit(function(e){ 
    e.preventDefault(); 
    sendtodo(); 
    return false; 
}); 
} 
function sendtodo() { 
$.ajax({ 
    url: '/blog/todo/newtodo/', 
    type: "POST", 
    success: function(data) { 
    receivetodo(data); 
    }, 
    data: ({ 
    body: $('#newbodytextarea').val(), 
    title: $('#titleinput').val(), 
    dateDue: $('#datepicker').val(), 
    time: $('#timepicker').val(), 
    category: $('#newcategory').val()}), 
}); 
} 
function receivetodo(data) { 
$('#todobody').append(data); 
}

et une partie de mon code HTML:

<html> 
<head> 
<title>Todo list</title> 
<link href="/django_media/css/todo/todo.style.css" rel="stylesheet" type="text/css"> 
<link href="/django_media/css/jquery-ui-1.8.5.custom.css" rel="stylesheet" type="text/css"> 
<script type="text/javascript" src="/django_media/js/jquery.js"></script> 
<script type="text/javascript" src="/django_media/js/jquery-ui-custom.js"></script> 
<script type="text/javascript" src="/django_media/js/todo/todo.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    onload(); 
}); 
</script> 
</head> 
<body> 
[.................] 
</body> 
</html>

Dans le cas où il importe, je me sers de Django pour mon back-end. Les données renvoyées sont un <div> contenant un couple d'autres balises <div> et quelques balises <h1> et <p>. La partie du code qui ajoute le code HTML reçu à la page fonctionne correctement, sauf qu'elle l'ajoute deux fois (et les données sont réellement dans la base de données deux fois).

J'ai essayé d'utiliser $("#todoform").click(function(e){ au lieu de $("#todoform").submit(function(e){ mais cela n'a rien changé. Je me suis également assuré que onload() est seulement appelée une fois. Pourquoi sendtodo() s'exécute-t-il deux fois?

Si vous avez besoin d'un autre code, je peux aussi le poster.

Source

2010-09-23 Puddingfox

avez-vous coché $ ('# todoform'). ('events'). submit dans la console firebug pour voir si elle a été liée deux fois? – Iain

On dirait qu'il a été lié deux fois. Y at-il une fonction particulière que je peux utiliser pour effacer tous les gestionnaires d'événements avant de lier le gestionnaire? – Puddingfox

Vous pouvez utiliser '.unbind ('submit')' pour ce –

Probablement onload() est appelé deux fois, vérifiez toutes les occurrences de celui-ci grâce à votre code. Si vous appelez le .submit() deux fois, l'événement onsubmit est ajouté avec le code donné, non remplacé.

Pour déboguer, placez un alert('anything') à l'intérieur de sendtodo() et vérifiez s'il est réellement appelé deux fois lors de la soumission.

Vous pouvez également faire:

$('#todoform').removeAttr('onsubmit').submit(...

Mais il serait préférable de savoir pourquoi il est lié deux fois

Source

2010-09-23 04:22:22 ariel

'sendtodo()' est appelé deux fois lorsque je soumets le formulaire. Firebug montre que le même écouteur est lié à mon formulaire deux fois. – Puddingfox

Remplacer ceci:

$("#todoform").submit(function(e)

Avec ceci:

$("#todoform").unbind('submit').submit(function(e)

Source

2012-11-22 12:22:25 Nabeel

Fonction JQuery Ajax appelée deux fois avec les mêmes données

Répondre

Questions connexes