Envoi de la page ajax formulaire recharge au lieu d'envoyer la demande

Question

Je me bats pour créer une shoutbox pour django. Tout fonctionne bien maintenant en ce qui concerne la lecture des données de la base de données, mais quand je veux ajouter un nouveau cri, toute la page est rechargée, et de ce que j'ai pu vérifier - l'action du formulaire reste la même sous l'URL spécifiée. Qu'est-ce que je fais mal ici?

HTML:

<div id="shoutbox">  
    <form method="post" id="form" class="shoutbox-form"> 
     <table> 
      <tr> 
       <td><label>User</label></td> 
       <td><input class="text user" id="nick" type="text" MAXLENGTH="25" /></td> 
      </tr> 
      <tr> 
       <td><label>Message</label></td> 
       <td><input class="text" id="shout" type="text" MAXLENGTH="255" /></td> 
      </tr> 
      <tr> 
       <td></td> 
       <td><input id="send-shout" type="submit" value="Dodaj!" /></td> 
      </tr> 
     </table> 
    </form> 
    <div id="shoutbox-container"> 
     <span class="clear"></span> 
     <div class="shoutbox"> 
      <div id="shoutbox-loading"><img src="css/images/loading.gif" alt="Loading..." /></div> 
      <ul> 
      </ul> 
     </div> 
    </div> 
</div> 

jQuery:

$(document).ready(function(){ 
    var inputUser = $("#nick"); 
    var inputMessage = $("#shout"); 
    var loading = $("#shoutbox-loading"); 
    var messageList = $(".shoutbox > ul"); 

    function updateShoutbox(){ 
     messageList.hide(); 
     loading.fadeIn(); 
     $.ajax({ 
      type: "POST", 
      url: "/shouts/", 
      data: "action=refresh", 
      dataType: "json", 
      success: function(data){ 
       loading.fadeOut(); 
       var c = data["response"]; 
       messageList.html(c); 
       messageList.fadeIn(2000); 
      } 
     }); 
    } 
    function checkForm(){ 
     if(inputUser.attr("value") && inputMessage.attr("value")) 
      return true; 
     else 
      return false; 
    } 

    updateShoutbox(); 


    $("#shoutbox-form").submit(function(){ 
     if(checkForm()){ 
      var nick = inputUser.attr("value"); 
      var message = inputMessage.attr("value"); 
      $("#send-shout").attr({ disabled:true, value:"Sending..." }); 
      $("#send-shout").blur(); 
      $.ajax({ 
       type: "POST", 
       async: true, 
       url: "/shouts/", 
       data: "action=insert&user=" + nick + "&message=" + message, 
       //data: {"action" : "insert", "user": user, "message": message}, 
       dataType: "json", 
       complete: function(data){ 
        var c = data["response"]; 
        messageList.html(c); 
        updateShoutbox(); 
        $("#send-shout").attr({ disabled:false, value:"Shout!" }); 
       } 
      }); 
     } 
     else alert("All fields needed!"); 
     return false; 
    });  
}); 

Mon URL:

url(r'^shouts/?$', "shoutbox"), 

et la fonction:

def shoutbox(request, user=None, message=None): 
    response = "" 
    if not request.POST.get("action"): 
     return HttpResponseRedirect('/') 
    else: 
     req = request.POST.get("action") 
     if req == "insert": 
      response = shoutbox_add(message, user) 
     elif req == "refresh": 
      response = shoutbox_get(20) 

    if request.is_ajax(): 
     result = simplejson.dumps({ 
      'response': response 
     }, cls=LazyEncoder) 
     return HttpResponse(result, mimetype='application/javascript') 

Answer 1

Votre formulaire a id 'forme' et 'forme shoutbox' classe, de sorte que votre sélecteur doit être

$("#form").submit(function(){ 

ou

$(".shoutbox-form").submit(function(){