Databases
StackOverflow2013
Postsdbo
POBackbone is not binding to form submissions
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POBackbone is not binding to form submissions
    text
    copied!<p>My super simple backbone app is not picking up a form submission and acting upon it. I have this app sitting on rails which is simply spitting out JSON.</p> <p>My app is an attempt to recreate <a href="http://www.jamesyu.org/2011/01/27/cloudedit-a-backbone-js-tutorial-by-example/" rel="nofollow">James Yu's CloudEdit</a> &amp; <a href="http://documentcloud.github.com/backbone/docs/todos.html" rel="nofollow"> Jérôme Gravel-Niquet's Todo's App</a>. I'm only having issues with creating new Song objects. Rails picks up the POST and responds with JSON &amp; HTML when backbone should have processed the form data and added it to the ordered list. I'm using the ICanHaz Gem for JS Templates.</p> <p>Any ideas?</p> <p>// Main Application View </p> <pre><code>window.AppView = Backbone.View.extend({ el: $("#songs_app"), events: { "submit form#new_song": "createSong" }, initialize: function(){ _.bindAll(this, 'addOne', 'addAll'); Songs.bind('add', this.addOne); Songs.bind('reset', this.addAll); Songs.bind('all', this.render); Songs.fetch(); //This Gets the Model from the Server }, addOne: function(song) { var view = new SongView({model: song}); this.$("#song_list").append(view.render().el); }, addAll: function(){ Songs.each(this.addOne); }, newAttributes: function(event) { var new_song_form = $(event.currentTarget).serializeObject(); //alert (JSON.stringify(new_dog_form)); return { song: { title: new_song_form["song[title]"], artist: new_song_form["song[artist]"] }} }, createSong: function(e) { e.preventDefault(); //This prevents the form from submitting normally var params = this.newAttributes(e); Songs.create(params); //TODO - Clear the form fields after submitting } }); </code></pre> <p>// Song View</p> <pre><code>window.SongView = Backbone.View.extend({ tagName: "li", initialize: function(){ }, collapse: function(){ $(this.el).removeClass("active"); }, render: function(){ var song = this.model.toJSON(); $(this.el).html(ich.song_item(song)); return this }, }); </code></pre> <p>// index.html.erb</p> <pre><code>&lt;div id="songs_app"&gt; &lt;h1 id="logo"&gt;Test App&lt;/h1&gt; &lt;ol id="song_list"&gt; &lt;/ol&gt; &lt;/div&gt; &lt;%= render 'form' %&gt; &lt;script id="song_item" type="text/html"&gt; &lt;div id='{{id}}'&gt; &lt;div class='listTrackContent'&gt; &lt;a href="#show/{{id}}"&gt;{{title}} by {{artist}}&lt;/a&gt; &lt;ol class="{{id}}"&gt; &lt;/ol&gt; &lt;/div&gt; &lt;/div&gt; &lt;/script&gt; &lt;script id="similar_song_item" type="text/html"&gt; &lt;li&gt; &lt;a href="{{trackUrl}}"&gt;{{title}}&lt;/a&gt; by &lt;a href="{{artistUrl}}"&gt;{{artist}}&lt;/a&gt; &lt;/li&gt; &lt;/script&gt; </code></pre> <p>// songs_controller.rb</p> <pre><code>def create @song = Song.new(params[:song]) respond_to do |format| if @song.save format.html { redirect_to(@song, :notice =&gt; 'Song was successfully created.') } format.json { render :json =&gt; @song, :status =&gt; :created, :location =&gt; @song } else format.html { render :action =&gt; "new" } format.json { render :json =&gt; @song.errors, :status =&gt; :unprocessable_entity } end end end </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload