2012-05-23 5 views
17

J'ai écrit une page Web où un utilisateur peut entrer une entrée de journal qui est stockée sur une base de données, puis récupérée et imprimée sur la page en utilisant ajax. Je suis encore tout nouveau à ajax et je me demandais si quelqu'un pourrait m'expliquer s'il vous plaît ce que fait return false; à la fin de mon code? et est-ce même nécessaire?Qu'est-ce que "return false"? faire?

Si je mets le deuxième code ajax après le return false le code ne fonctionne pas! Pouvez-vous s'il vous plaît m'expliquer pourquoi?

//handles submitting the form without reloading page 
$('#FormSubmit').submit(function(e) { 
    //stores the input of today's data 
    var log_entry = $("#LogEntry").val(); 
    // prevent the form from submitting normally 
    e.preventDefault(); 

    $.ajax({ 
     type: 'POST', 
     url: 'behind_curtains.php', 
     data: { 
      logentry: log_entry 
     }, 
     success: function() { 
      alert(log_entry); 
      //clears textbox after submission 
      $('#LogEntry').val(""); 
      //presents successs text and then fades it out 
      $("#entered-log-success").html("Your Entry has been entered."); 
      $("#entered-log-success").show().fadeOut(3000); 
     } 
    }); 
    //prints new log entries on page upon submittion 
    $.ajax({ 
     type: 'POST', 
     url: '/wp-content/themes/childOfFanwood/traininglog_behind_curtains.php', 
     data: { 
      log_entries_loop: "true" 
     }, 
     success: function(data) { 
      alert(data); 
      $("#log-entry-container").html(""); 
      $("#log-entry-container").html(data); 
     } 
    }); 
    return false; 
}); 
​ 
+0

arrête le comportement d'envoi de formulaire par défaut –

+0

@Dagon. Pas seulement ça. – gdoron

Répondre

35

Ce que je vais écrire ici est vrai pour événements jQuery,
Pour la vanille javascript lire @ T.J événements. Crowder commentaire au bas de la réponse


return false l'intérieur d'un rappel empêche le comportement par défaut. Par exemple, dans un événement submit, il ne soumet pas le formulaire.

return false arrête également la formation de bulles, de sorte que les parents de l'élément ignorent que l'événement s'est produit.

return false est équivalent à event.preventDefault() + event.stopPropagation()

Et bien sûr, tout le code qui existe après la ligne return xxx ne sera pas exécutée. (Comme avec tous les langages de programmation, je sais)

Peut-être vous il été utile:
Stop event bubbling - increases performance?


Un "vrai" démo pour expliquer la différence entre return false et event.preventDefault():

Majoration:

<div id="theDiv"> 
    <form id="theForm" > 
     <input type="submit" value="submit"/> 
    </form> 
</div>​ 

JavaScript:

$('#theDiv').submit(function() { 
    alert('DIV!'); 
}); 
$('#theForm').submit(function(e) { 
    alert('FORM!'); 
    e.preventDefault(); 
});​ 

maintenant ... lorsque l'utilisateur soumet le formulaire, le premier gestionnaire est la forme soumettre, qui preventDefault() -> la forme ne seront pas soumises, mais l'événement bulles la div, déclenchant son gestionnaire de soumission.

Live DEMO

Maintenant, si le formulaire de gestionnaire de soumettre annulerait le bouillonnement avec return false:

$('#theDiv').submit(function() { 
    alert('DIV!'); 
}); 
$('#theForm').submit(function(event) { 
    alert('FORM!'); 
    return false; 
    // Or: 
    event.preventDefault(); 
    event.stopPropagation(); 
});​ 

Le div ne sait même pas qu'il y avait une soumission de formulaire.

Live DEMO


Qu'est-return false faire dans les événements javascript vanille

return false à partir d'un gestionnaire DOM2 (addEventListener) ne fait rien du tout (ni empêche la valeur par défaut, ni le bouillonnement cesse; à partir d'un gestionnaire Microsoft DOM2-ish (attachEvent), il empêche la valeur par défaut mais ne bouillonne pas: à partir d'un gestionnaire DOM0 (onclick="return ..."), il empêche la valeur par défaut (à condition d'inclure le retour dans l'attribut) mais pas de bouillonnement; à partir d'un gestionnaire d'événement jQuery, il fait les deux, parce que c'est une chose jQuery. Détails et tests en direct ici - T.J. Crowder

+1

+1 pour répondre à la question, même après coup –

+0

+1 Oui, j'allais écrire sur 'stopPropagation' mais j'ai vu que vous l'aviez déjà mentionné :) – VisioN

+0

Est-ce que cela signifie que vous avez' e.preventDefault() 'vous n'avez pas besoin de 'return false', si les deux font la même chose? – Nope

2

Dans ce cas, return false; empêche l'action par défaut (ce qui est la soumission de formulaire).

Bien qu'il soit sans doute préférable d'utiliser e.preventDefault();

+0

Vous avez raison d'empêcher l'action par défaut, mais cela arrête aussi le bouillonnement. – gdoron

+0

'Dans ce cas' - la soumission du formulaire ne produirait pas de bulles. – ahren

+0

Pourquoi le pensez-vous? – gdoron

0

à cause de vous ajax pas votre formulaire pour être soumis à la procédure normale. Vous devez donc retourner false afin d'empêcher le comportement par défaut du formulaire.

3

Tout code après l'instruction return dans une fonction ne sera jamais exécuté. Il arrête l'exécution de la fonction et fait que cette fonction renvoie la valeur passée (false dans ce cas). Votre fonction est le rappel d'événement "submit". Si ce rappel renvoie false, le formulaire ne sera pas réellement envoyé. Sinon, il sera soumis comme il le ferait sans JavaScript.