1. 首頁
  2. 問答
  3. 如何避免表單提交與骨幹的GET請求

如何避免表單提交與骨幹的GET請求

2016-11-05 51 views
2

我想寫一個可編輯的表使用Backbone.js。如何避免表單提交與骨幹的GET請求

這是我Backbone.js的應用：

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <title>Resume builder!</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script> 

    <style> 
     .jumbotron { 
      height: 100vh; 
     } 

     body { 
      background-color: white !important; 
     } 

     .table-bordered th, 
     .table-bordered td { 
      border: 1px solid #ddd!important 
     } 
    </style> 

</head> 

<body> 

    <div class="jumbotron"> 
     <div class=container> 
      <h1>Resume builder</h1> 

      <table class="table table-bordered"> 
       <thead> 
        <tr> 
         <th>Degree</th> 
         <th>Starting date</th> 
         <th>Ending date</th> 
         <th>Details</th> 
        </tr> 
       </thead> 

       <tbody id="informations"> 
        <script type="text/template" id="info-row"> 
         <tr> 
          <td> 
           <%=title%> 
          </td> 
          <td> 
           <%=start%> 
          </td> 
          <td> 
           <%=end%> 
          </td> 
          <td> 
           <%=details%> 
          </td> 
          <td> 
           <botton class="btn btn-primary" data-action="modify">edit</botton> 
           <botton class="btn btn-danger" data-action="delete">delete</botton> 
          </td> 
          <tr> 
        </script> 

       </tbody> 
      </table> 

      <div id="actions"> 
       <botton class="btn btn-primary" id="addInformation">Add information</botton> 
      </div> 


      <script type="text/template" id="info-modify"> 
       <div class="modal fade" id="edit-modal" role="dialog"> 
        <div class="modal-dialog"> 
         <div class="modal-content"> 
          <div class="modal-header"> 
           <button type="button" class="close" data-dismiss="modal">&times;</button> 
           <h4 class="modal-title">INFORMATION</h4> 
          </div> 
          <div class="modal-body"> 
           <form role="form"> 
            <div> 
             <div class="radio"> 
              <label><input type="radio" data-type="education" name="type" <%= (type == "education") ? "checked" : ""%>> Education</label> 
             </div> 

             <div class="radio"> 
              <label><input type="radio" data-type="experience" name="type" <%= (type == "experience") ? "checked" : ""%>> Experience</label> 
             </div> 
            </div> 

            <div class="form-group"> 
             <label>Title for Degree or experience (e.g. Computer Sci. | Software dev.):</label> 
             <input type="text" class="form-control" value="<%=title%>" name="title"> 
            </div> 

            <div class="form-group"> 
             <label>Start date:</label> 
             <input type="number" class="form-control" value="<%=start%>" name="start"> 
            </div> 

            <div class="form-group"> 
             <label>End date:</label> 
             <input type="number" class="form-control" value="<%=end%>" name="end"> 
            </div> 

            <div class="form-group"> 
             <label>Details:</label> 
             <textarea rows="5" class="form-control" name="details"><%=details%></textarea> 
            </div> 

            <button type="submit" class="btn btn-success">Submit</button> 
           </form> 
          </div> 
          <div class="modal-footer"> 
           <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
          </div> 
         </div> 
        </div> 
      </script> 

      </div> 
     </div> 

     <div id="modal"> 
     </div> 

</body> 

<script> 
    $(function() { 
     var baseModalView = Backbone.View.extend({ 
      el: $("#modal"), 
      className: 'modal fade hide', 
      template: _.template($("#info-modify").html()), 
      events: { 
       'hidden': 'teardown', 
       "click [type='submit']": "notify" 
      }, 
      initialize: function() { 
       _.bindAll(this, "show", "teardown", "render", "notify"); 
       this.render(); 
       this.show(); 
      }, 
      show: function() { 
       this.$el.modal('show'); 
      }, 
      teardown: function() { 
       this.$el.data('modal', null); 
       this.remove(); 
      }, 
      render: function() { 
       this.$el.empty(); 
       this.setElement(this.template(this.model.toJSON())); 
      }, 
      notify: function() { 
       var self = this; 
       this.model.set({ 
        type: self.$el.find("[type='radio']:checked").data("type"), 
        start: self.$el.find("[name='start']").val(), 
        end: self.$el.find("[name='end']").val(), 
        details: self.$el.find("textarea").text() 
       }); 
      } 
     }); 

     var InformationModel = Backbone.Model.extend({ 
      id: -1, 
      defaults: { 
       type: " ", 
       title: " ", 
       start: 2015, 
       end: 2016, 
       details: " " 
      } 
     }); 

     var InformationView = Backbone.View.extend({ 
      events: { 
       "click [data-action='modify']": "modifyInformation", 
       "click [data-action='delete']": "deleteInformation" 
      }, 
      template: _.template($("#info-row").html()), 
      initialize: function() { 
       _.bindAll(this, "render", "modifyInformation", "deleteInformation"); 
       this.render(); 
      }, 
      render: function() { 
       this.setElement(this.template(this.model.toJSON())); 
      }, 
      modifyInformation: function() { 
       var self = this; 
       modalView = new baseModalView({ 
        model: self.model, 
        template: _.template($("#info-modify").html()) 
       }); 
      }, 
      deleteInformation: function() { 
       this.model.destroy(); 
      } 
     }) 

     var InformationCollection = Backbone.Collection.extend({ 
      url: "../dummy/", 
      model: InformationModel 
     }); 

     var InformationsView = Backbone.View.extend({ 
      el: $("#informations"), 
      initialize: function() { 
       _.bindAll(this, "render", "addInformation"); 
       var self = this; 
       this.collection = new InformationCollection(); 

       this.collection.bind("all", this.render, this); 

       this.collection.fetch(); 

       // I know this is not a Backbone way... 
       $("#addInformation").on("click", function() { 
        self.addInformation(); 
       }); 
      }, 
      render: function() { 
       this.$el.empty(); 
       this.collection.each(function(information) { 
        var informationView = new InformationView({ 
         model: information 
        }); 
        this.$el.append(informationView.el); 
       }, this); 
      }, 
      addInformation: function() { 
       var self = this; 
       modalView = new baseModalView({ 
        model: new InformationModel() 
       }); 
      } 
     }); 


     new InformationsView(); 

     $("form").submit(function(e) { 
      e.preventDefault(); 
      return false; 
     }); 
    }); 
</script> 

</html>

問題：

後，我edit一個錶行，並點擊提交，骨幹送一個陌生GET請求。

enter image description here

來源

2016-11-05 Node.JS

+1

我不認爲這是相關的，但你」在您的示例html中，將'typo'd'button'設置爲'botton'。 – JonRed

回答

2

當你按下按鈕submit正在提交表單。

此代碼

$("form").submit(function(e) { 
      e.preventDefault(); 
      return false; 
     });

實際上不會發生，當執行該代碼爲制止這種，形式還不在DOM存在。只有在創建模態視圖時纔會添加。

這不是測試，而是速戰速決應該是：

$(document).on("submit", "form", function(e) { 
      e.preventDefault(); 
      return false; 
     });

這將頁面上的所有「提交」事件作出響應，然後檢查他們是否屬於「形式」元素之前處理該功能。

另一種解決方案，我認爲這是可取的，因爲所有功能都封裝在您的視圖中，因此將模式模板中的常規按鈕替換爲提交按鈕。

<button type="button" class="btn btn-success">Submit</button>

這應該停止從射擊提交事件，但你需要改變操作處理程序的baseModalView視圖的頂部。

來源

2016-11-06 17:33:04 JonRed

1

如果您在Backbone視圖中有表單，請處理該視圖中的表單，而不使用全局jQuery事件。

說你有這個簡單的視圖模板：

<div id="test-view"> 

    <form id="test-form"> 
     <input type="text" name="test"> 
     <button type="submit">Submit</button> 
    </form> 
</div>

，那麼該觀點只需要抓住提交其形式爲：

var FormView = Backbone.View.extend({ 
    events: { 
     "submit #test-form": "onSubmit" 
    }, 
    onSubmit: function(e) { 
     e.preventDefault(); 
     console.log("test-form submit prevented"); 
    } 
}); 

var view = new FormView({ 
    el: $('#test-view') 
});

來源

2016-11-07 17:58:38

相關問題

 相關問題