javascript - How to avoid GET request on form submit with Backbone -
i trying write editable table using backbone.js.
this backbone.js app:
<!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">×</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 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(); // know not 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> question:
after edit table row , click on submit, backbone send strange get request.
the form being submitted when press submit button.
this code
$("form").submit(function(e) { e.preventdefault(); return false; }); won't stop happening, when code executed, form doesn't yet exist in dom. it's added when create modal view.
this not tested, quick fix should to:
$(document).on("submit", "form", function(e) { e.preventdefault(); return false; }); this respond "submit" events on page, , check if belong "form" element before processing function.
another solution, think preferable functionality encapsulated in view, replace submit button regular button in modal template.
<button type="button" class="btn btn-success">submit</button> this should stop submit event firing, you'll need change action handler top of basemodalview view.
Comments
Post a Comment