Le déclenchement de la touche de retour sur l'événement actualise de manière inattendue la page et donne une erreur indéfinie - JavaScript

Question

Lorsque je clique dans le champ, tapez du texte et appuyez sur Entrée au clavier, il déclenche la fonction initializeTable qui actualise la page et donne la forme d'erreur [0] indéfini. Cependant, lorsque j'utilise change event pour modifier la sélection de la liste déroulante, cela ne provoque pas ce comportement inattendu. Donc, je ne suis pas sûr pourquoi appuyer sur la touche de retour dans le champ de texte provoque tout cela. Merci pour la réponse.

<script> 
(function($){ 

var listview = $('#listview'); 

var lists = (function(){ 
    var criteria = { 
     dropFilter: { 
      insert: function(value){ 
       if(value) 

        return {"filter" : value}; 
      }, 
      msg: "Filtering..." 
     }, 
     searchFilter: { 
      insert: function(value){ 
       if(value) 
        return {"search" : value} 
      }, 
      msg: "Searching..." 
     } 

    } 
    return { 
     create: function(component){ 
      var component = component.href.substring(component.href.lastIndexOf('#') + 1); //sites 
      return component; 
     }, 
     setDefaults: function(component){ 
      var parameter = {}; 
      switch(component){ 
       case "sites": 
        parameter = { 
         'url': 'sites',       
         'order': 'site_num', 
         'per_page': '20' 
        } 
      } 
      return parameter; 
     }, 
     getCriteria: function(criterion){ 
      return criteria[criterion];  

     }, 
     addCriteria: function(criterion, method){ 
      criteria[criterion] = method; 
     } 
    } 
})(); 

var Form = function(form){ 
    var fields = []; 
    $(form[0].elements).each(function(){ 
     var field = $(this); 
     if(typeof field.attr('alter-data') !== 'undefined') fields.push(new Field(field)); 
    }) 
} 

Form.prototype = { 
    initiate: function(){ 
     for(field in this.fields){ 
      this.fields[field].calculate(); 
     } 
    }, 
    isCalculable: function(){ 
     for(field in this.fields){ 
       if(!this.fields[field].alterData){ 
       return false; 
      } 
     } 
     return true; 
    } 
} 

var Field = function(field){ 
    this.field = field; 
    this.alterData = true; 
    this.component = {'url' : window.location.hash.substring(window.location.hash.indexOf('#') + 1)}; 
    this.attach("change"); 
    this.attach("keypress"); 
} 

Field.prototype = { 
    attach: function(event){ 
     var obj = this; //our Field object 
     if(event == "change"){ 
      obj.field.bind("change", function(){ 
       return obj.calculate(); 
      }) 
     } 
     if(event == "keypress"){ 
      obj.field.bind("keypress", function(e){ 
       var code = (e.keyCode ? e.keyCode : e.which); 
       if(code == 13){ 
        return obj.calculate(); 
       } 
      }) 
     } 
    }, 
    calculate: function(){ 
     var obj = this, 
      field = obj.field, 
      component = obj.component, 
      msgClass = "msgClass", 
      msgList = $(document.createElement("ul")).addClass("msgClass"), 
      types = field.attr("alter-data").split(" "), 
      container = field.parent(), 
      messages = []; 

     field.next(".msgClass").remove(); 
     for(var type in types){ 
      var criterion = lists.getCriteria(types[type]); 
      if(field.val()){ 
       var result = criterion.insert(field.val()); 

       container.addClass("waitingMsg"); 
       messages.push(criterion.msg); 

       obj.alterData = true; 

       initializeTable(component, result); 

      } 
      else { 
       return false; 
       obj.alterData = false; 
      } 
     } 
     if(messages.length){ 
      for(msg in messages){ 
       msgList.append("<li>" + messages[msg] + "</li"); 
      } 
     } 
     else{ 
      msgList.remove(); 
     } 
    } 
} 

$('#dashboard a').click(function(){ 
    var currentComponent = lists.create(this); 
    var defaults = lists.setDefaults(currentComponent); 
    initializeTable(defaults); 
}); 

var initializeTable = function(defaults, custom){ 

    var custom = custom || {}; 

    var query_string = $.extend(defaults, custom); 

    var params = []; 
    $.each(query_string, function(key,value){ 
     params += key + '=' + value + "&"; 
    }) 
    var url = params.substring(params.indexOf("url")+4,9); 
    params = params.substring(params.indexOf("&")+1).replace(params.substring(params.lastIndexOf("&")),""); 

    $.ajax({ 
     type: 'GET', 
     url: '/' + url, 
     data: params, 
     dataType: 'html', 
     error: function(){}, 
     beforeSend: function(){}, 
     complete: function() {}, 
     success: function(response) { 
      listview.html(response); 

       var form = $('form'); 
       form.calculation(); 


     } 
    }) 


} 

$.extend($.fn, { 
    calculation: function(){ 

      var formReady = new Form($(this)); 

      if(!formReady.isCalculable){ 
       return false; 
      } 

    } 
}) 

})(jQuery) 
</script> 

Plutôt que de passer par le script entier, la question réelle est avec ceci:

if(event == "keypress"){ 
      obj.field.bind("keypress", function(e){ 
       var code = (e.keyCode ? e.keyCode : e.which); 
       if(code == 13){ 
        return obj.calculate(); 
       } 
      }) 
     } 
    } 

Answer 1

Enfin, je suis arrivé à travailler ce ceci:

  if(event == "keypress"){ 
      obj.field.bind("keypress", function(e){ 
       var code = (e.keyCode ? e.keyCode : e.which); 
       if(code == 13){ 
        e.preventDefault(); 
        return obj.calculate(); 
       } 
      }) 
     } 
    }, 

Par conséquent, nous avons d'abord empêchons par défaut, puis exécutez notre fonction personnalisée.