Note that there are some explanatory texts on larger screens.

plurals
  1. PORails creating duplicate records and making double calls to delete the same record when using Ajax
    primarykey
    data
    text
    <p>I have initially created a ROR project (which worked perfectly) and now trying to implement Ajax into this as my client side project. I have been using Rails for a while but this is my first experience with Ajax. For some reason when I am adding a new instance of ExerciseLogs, Rails creates 2 exact same records of it.</p> <p>I see the follwoing calls in the network tab</p> <pre><code>Request URL: xxx/exercise_logs/67 Request Method:GET Status Code:200 OK Request URL: xxx/exercise_logs/68 Request Method:GET Status Code:200 OK </code></pre> <p>When deleting (click on Delete link on exercise_logs\index page) I am being asked to confirm my action and even if I choose to cancel the record is deleted. Initially I was getting an error "Cannot find ExerciseLog with id of XX". After a bit of goggling I added e.stopPropagation(); to my script. Now I am not getting the error but I can see in the Network tab the following:</p> <pre><code>Request URL:xxx/exercise_logs/2 Request Method:DELETE Status Code:302 Found Request URL:xxx/exercise_logs Request Method:GET Status Code:404 Not Found </code></pre> <p>in my Rails terminal:</p> <p>Started DELETE "/exercise_logs" for 127.0.0.1 at 2013-12-21 18:04:51 +0000</p> <p>ActionController::RoutingError (No route matches [DELETE] "/exercise_logs"): actionpack (3.2.11) lib/action_dispatch/middleware/debug_exceptions.rb:21:in</p> <p>I imagine that the create and delete doubling of calls must be connected but I cannot figure why. I don't have duplicate scripts with the same code and I am pulling my hair out at this point cause I cannot figure this out.</p> <p>I used console.log in the script to check how many times each method is being called and I can see it being called only once. Is it some configuration problem with Rails?</p> <p>My code is quite long. Index.js:</p> <pre><code>var displaySideNav = function(el) { if (el.attr("href") != "/site/dashboard") { $(".side-nav").addClass('hide'); }else { $(".side-nav").removeClass('hide'); } }; var displayNoticesAndAlerts = function() { $('#notice:not(:empty)').removeClass("hide"); $('#notice_signed_in:not(:empty)').removeClass("hide"); $('#alert:not(:empty)').removeClass("hide"); $('#alert_signed_in:not(:empty)').removeClass("hide"); }; var selectedElement = $(document).find('#nav .selected'); displaySideNav(selectedElement); displayNoticesAndAlerts(); var displayResponse = function(response) { $("#loading").addClass('hide'); console.log("displayResponse"); var content = $("#content"); var filteredResponse = $(response).find("#content").children(); content.html(filteredResponse); var selectedElement = $(document).find('#nav .selected'); displaySideNav(selectedElement); content.find('#notice:not(:empty)').removeClass("hide"); content.find('#notice_signed_in:not(:empty)').removeClass("hide"); content.find('#alert:not(:empty)').removeClass("hide"); content.find('#alert_signed_in:not(:empty)').removeClass("hide"); content.find('#exercise_log_exercise_date, #food_intake_log_intake_date, #weight_log_measured_on').datepicker({dateFormat: 'yy-mm-dd'}); content.find('.chosen-select').chosen(); content.find('#accordion').accordion(); $(document).on("click","#recipes th a, #recipes .pagination a", function() { $.getScript(this.href); return false; } ); var female = content.find("input#profile_gender_female"); if (female.attr('checked')) { $("div#woman").attr('style', 'display:block;'); } content.find("input[name='profile[gender]']").on('change', function(){ $("#woman").toggle(); } ); morrisTemplate = { element: 'weight_logs_chart', data: $('#weight_logs_chart').data('weight-logs'), xkey: 'measured_on', ykeys: ['weight'], labels: ['Weight'], smooth: true, postUnits: 'kg', goals: [$('#min').text(), $('#max').text()], goalStrokeWidth: 1, goalLineColors: ['#FF0000' ] }; content.find("a").on("click", loadAjax); content.find("form").on("submit", submitForm); if ($('#myfirstchart').length&gt;0 ){ Morris.Line(morrisTemplate); } }; var submitForm = function(e) { e.preventDefault(); $(this).find("input[type=submit]").attr("disabled", "disabled"); $(this).off("submit"); $("#loading").removeClass('hide'); var url = $(this).attr("action"); var method = $(this).attr("method"); var data = {}; $(this).find("input, select").each(function() { var name = $(this).attr("name"); var value = $(this).val(); data[name] = value; }); $.ajax({ url: url, type: method, data: data, success: displayResponse }); }; var loadAjax = function(e) { e.stopPropagation(); e.preventDefault(); $('ul.side-nav a').css('border-bottom','none'); $(this).attr("disabled", "disabled"); $(this).css('border-bottom','1px solid black'); $("#loading").show(); var url = $(this).attr("href"); var method = $(this).attr("data-method") || "get"; if(method === "delete" &amp;&amp; confirm("Are you sure?")) { $(this).parents("tr").remove(); } $.ajax({ url: url, type: method, success: displayResponse }); }; $(".side-nav a").on("click", loadAjax); </code></pre> <p>application.js</p> <pre><code>//= require jquery //= require jquery_ujs //= require jquery.ui.datepicker //= require jquery.ui.accordion //= require raphael //= require morris //= require pwstrength //= require chosen //= require foundation/foundation //= require foundation/foundation.topbar //= require foundation/foundation.forms //= require foundation/foundation.tooltips //= require foundation/foundation.reveal.js //= require_tree $(function(){ $(document).foundation( ); }); </code></pre> <p>sample controller destroy action:</p> <pre><code>def destroy @exercise_log = ExerciseLog.find(params[:id]) @exercise_log.destroy respond_to do |format| format.html { redirect_to exercise_logs_url } format.json { head :no_content } end end </code></pre> <p>sample controller create action:</p> <pre><code> def create @exercise_log = ExerciseLog.new(params[:exercise_log]) @exercise_log.calories_burned = @exercise_log.calculate_calories_burned respond_to do |format| if @exercise_log.save format.html { redirect_to @exercise_log, notice: 'Exercise log was successfully created.' } format.json { render json: @exercise_log, status: :created, location: @exercise_log } else format.html { render action: "new" } format.json { render json: @exercise_log.errors, status: :unprocessable_entity } end end end </code></pre> <p>I will really appreciate your help.</p> <p>EDIT: view/exercise_logs/index.html.erb</p> <pre><code>&lt;div&gt; &lt;div id="notice_signed_in" class="notice hide"&gt;&lt;%= notice %&gt;&lt;/div&gt; &lt;div id="alert_signed_in" class="alert hide"&gt;&lt;%= alert %&gt;&lt;/div&gt; &lt;/div&gt; &lt;h1&gt;Listing exercise logs&lt;/h1&gt; &lt;% if @exercise_logs.any? %&gt; &lt;table&gt; &lt;tr&gt; &lt;th&gt;Date&lt;/th&gt; &lt;th&gt;Calories burned&lt;/th&gt; &lt;th&gt;Type of activity&lt;/th&gt; &lt;th&gt;Length in minutes&lt;/th&gt; &lt;th&gt;&lt;/th&gt; &lt;th&gt;&lt;/th&gt; &lt;th&gt;&lt;/th&gt; &lt;/tr&gt; &lt;% @exercise_logs.each do |exercise_log| %&gt; &lt;tr&gt; &lt;td&gt;&lt;%= exercise_log.exercise_date %&gt;&lt;/td&gt; &lt;td&gt;&lt;%= exercise_log.calories_burned %&gt;&lt;/td&gt; &lt;td&gt;&lt;%= exercise_log.activity.name %&gt;&lt;/td&gt; &lt;td&gt;&lt;%= exercise_log.length %&gt;&lt;/td&gt; &lt;td&gt;&lt;%= link_to 'Show', exercise_log %&gt;&lt;/td&gt; &lt;td&gt;&lt;%= link_to 'Edit', edit_exercise_log_path(exercise_log) %&gt;&lt;/td&gt; &lt;td&gt;&lt;%= link_to 'Destroy', exercise_log, method: :delete %&gt;&lt;/td&gt; &lt;/tr&gt; &lt;% end %&gt; &lt;/table&gt; &lt;% else %&gt; &lt;div&gt;You have not logged any exercise activities yet. Press the button below to log one.&lt;/div&gt; &lt;% end %&gt; &lt;br/&gt; &lt;%= link_to 'New Exercise log', new_exercise_log_path, class: "small button radius" %&gt; </code></pre> <p>EDIT 2: terminal log on creation of 2 records:</p> <pre><code>Started POST "/exercise_logs" for 127.0.0.1 at 2013-12-21 20:18:45 +0000 Processing by ExerciseLogsController#create as */* Parameters: {"utf8"=&gt;"V", "authenticity_token"=&gt;"bXZvZgj6gd45mqQOOXNIb0uwB0E1Q D0ioNeXKMxAstg=", "exercise_log"=&gt;{"exercise_date"=&gt;"2013-12-03", "length"=&gt;"43" , "user_id"=&gt;"1", "activity_id"=&gt;"2"}, "undefined"=&gt;"", "commit"=&gt;"Create Exerci se log"} ←[1m←[36mUser Load (1.0ms)←[0m ←[1mSELECT "users".* FROM "users" WHERE "users "."id" = 1 LIMIT 1←[0m ←[1m←[35mActivity Load (1.0ms)←[0m SELECT "activities".* FROM "activities" WH ERE "activities"."id" = 2 LIMIT 1 ←[1m←[36m (0.0ms)←[0m ←[1mbegin transaction←[0m ←[1m←[35mSQL (4.0ms)←[0m INSERT INTO "exercise_logs" ("activity_id", "calorie s_burned", "created_at", "exercise_date", "length", "updated_at", "user_id") VAL UES (?, ?, ?, ?, ?, ?, ?) [["activity_id", 2], ["calories_burned", 186], ["crea ted_at", Sat, 21 Dec 2013 20:18:45 UTC +00:00], ["exercise_date", Tue, 03 Dec 20 13], ["length", 43], ["updated_at", Sat, 21 Dec 2013 20:18:45 UTC +00:00], ["use r_id", 1]] ←[1m←[36m (28.0ms)←[0m ←[1mcommit transaction←[0m Redirected to http://localhost:3000/exercise_logs/98 Completed 302 Found in 55ms (ActiveRecord: 34.0ms) Started POST "/exercise_logs" for 127.0.0.1 at 2013-12-21 20:18:45 +0000 Processing by ExerciseLogsController#create as JS Parameters: {"utf8"=&gt;"V", "authenticity_token"=&gt;"bXZvZgj6gd45mqQOOXNIb0uwB0E1Q D0ioNeXKMxAstg=", "exercise_log"=&gt;{"exercise_date"=&gt;"2013-12-03", "length"=&gt;"43" , "user_id"=&gt;"1", "activity_id"=&gt;"2"}, "commit"=&gt;"Create Exercise log"} ←[1m←[35mUser Load (1.0ms)←[0m SELECT "users".* FROM "users" WHERE "users"."i d" = 1 LIMIT 1 ←[1m←[36mActivity Load (1.0ms)←[0m ←[1mSELECT "activities".* FROM "activities " WHERE "activities"."id" = 2 LIMIT 1←[0m ←[1m←[35m (0.0ms)←[0m begin transaction ←[1m←[36mSQL (4.0ms)←[0m ←[1mINSERT INTO "exercise_logs" ("activity_id", "cal ories_burned", "created_at", "exercise_date", "length", "updated_at", "user_id") VALUES (?, ?, ?, ?, ?, ?, ?)←[0m [["activity_id", 2], ["calories_burned", 186] , ["created_at", Sat, 21 Dec 2013 20:18:45 UTC +00:00], ["exercise_date", Tue, 0 3 Dec 2013], ["length", 43], ["updated_at", Sat, 21 Dec 2013 20:18:45 UTC +00:00 ], ["user_id", 1]] ←[1m←[35m (23.0ms)←[0m commit transaction Redirected to http://localhost:3000/exercise_logs/99 Completed 302 Found in 52ms (ActiveRecord: 29.0ms) Started GET "/exercise_logs/98" for 127.0.0.1 at 2013-12-21 20:18:45 +0000 Processing by ExerciseLogsController#show as */* Parameters: {"id"=&gt;"98"} ←[1m←[36mUser Load (1.0ms)←[0m ←[1mSELECT "users".* FROM "users" WHERE "users "."id" = 1 LIMIT 1←[0m ←[1m←[35mExerciseLog Load (1.0ms)←[0m SELECT "exercise_logs".* FROM "exercise _logs" WHERE "exercise_logs"."id" = ? LIMIT 1 [["id", "98"]] ←[1m←[36mActivity Load (1.0ms)←[0m ←[1mSELECT "activities".* FROM "activities " WHERE "activities"."id" = 2 LIMIT 1←[0m Rendered exercise_logs/show.html.erb within layouts/application (4.0ms) Rendered application/_main_nav.html.erb (3.0ms) Rendered application/_side.html.erb (5.0ms) Completed 200 OK in 77ms (Views: 64.0ms | ActiveRecord: 3.0ms) Started GET "/exercise_logs/99" for 127.0.0.1 at 2013-12-21 20:18:45 +0000 Processing by ExerciseLogsController#show as JS Parameters: {"id"=&gt;"99"} ←[1m←[35mUser Load (1.0ms)←[0m SELECT "users".* FROM "users" WHERE "users"."i d" = 1 LIMIT 1 ←[1m←[36mExerciseLog Load (1.0ms)←[0m ←[1mSELECT "exercise_logs".* FROM "exer cise_logs" WHERE "exercise_logs"."id" = ? LIMIT 1←[0m [["id", "99"]] ←[1m←[35mActivity Load (1.0ms)←[0m SELECT "activities".* FROM "activities" WH ERE "activities"."id" = 2 LIMIT 1 Rendered exercise_logs/show.html.erb within layouts/application (6.0ms) Rendered application/_main_nav.html.erb (3.0ms) Rendered application/_side.html.erb (7.0ms) Completed 200 OK in 73ms (Views: 67.0ms | ActiveRecord: 3.0ms) </code></pre> <p><strong>UPDATE</strong></p> <p>I managed to get rid of double creation of records (by trying a number of advises from <a href="https://stackoverflow.com/questions/4231885/rails-3-ujs-controller-gets-called-twice-by-link-to-remote">Rails 3 UJS - controller gets called twice by link_to :remote</a> and <a href="https://stackoverflow.com/questions/7411271/form-submitted-twice-due-to-remote-true">Form submitted twice, due to :remote=&gt;true</a>) but what i still have problem with is that when I delete a record, even though I cancel, the record still gets deleted.</p> <p>this is my terminal output:</p> <pre><code>Started DELETE "/exercise_logs/138" for 127.0.0.1 at 2013-12-22 00:30:17 +0000 Processing by ExerciseLogsController#destroy as */* Parameters: {"id"=&gt;"138"} ←[1m←[36mUser Load (0.0ms)←[0m ←[1mSELECT "users".* FROM "users" WHERE "users "."id" = 1 LIMIT 1←[0m ←[1m←[35mExerciseLog Load (0.0ms)←[0m SELECT "exercise_logs".* FROM "exercise _logs" WHERE "exercise_logs"."id" = ? LIMIT 1 [["id", "138"]] ←[1m←[36m (0.0ms)←[0m ←[1mbegin transaction←[0m ←[1m←[35mSQL (2.0ms)←[0m DELETE FROM "exercise_logs" WHERE "exercise_logs"."i d" = ? [["id", 138]] ←[1m←[36m (23.0ms)←[0m ←[1mcommit transaction←[0m Redirected to http://localhost:3000/exercise_logs Completed 302 Found in 30ms (ActiveRecord: 25.0ms) Started DELETE "/exercise_logs" for 127.0.0.1 at 2013-12-22 00:30:17 +0000 ActionController::RoutingError (No route matches [DELETE] "/exercise_logs"): actionpack (3.2.11) lib/action_dispatch/middleware/debug_exceptions.rb:21:in ` call' actionpack (3.2.11) lib/action_dispatch/middleware/show_exceptions.rb:56:in `c all' railties (3.2.11) lib/rails/rack/logger.rb:32:in `call_app' railties (3.2.11) lib/rails/rack/logger.rb:16:in `block in call' activesupport (3.2.11) lib/active_support/tagged_logging.rb:22:in `tagged' railties (3.2.11) lib/rails/rack/logger.rb:16:in `call' actionpack (3.2.11) lib/action_dispatch/middleware/request_id.rb:22:in `call' rack (1.4.5) lib/rack/methodoverride.rb:21:in `call' rack (1.4.5) lib/rack/runtime.rb:17:in `call' activesupport (3.2.11) lib/active_support/cache/strategy/local_cache.rb:72:in `call' rack (1.4.5) lib/rack/lock.rb:15:in `call' actionpack (3.2.11) lib/action_dispatch/middleware/static.rb:62:in `call' railties (3.2.11) lib/rails/engine.rb:479:in `call' railties (3.2.11) lib/rails/application.rb:223:in `call' rack (1.4.5) lib/rack/content_length.rb:14:in `call' railties (3.2.11) lib/rails/rack/log_tailer.rb:17:in `call' rack (1.4.5) lib/rack/handler/webrick.rb:59:in `service' C:/Ruby193/lib/ruby/1.9.1/webrick/httpserver.rb:138:in `service' C:/Ruby193/lib/ruby/1.9.1/webrick/httpserver.rb:94:in `run' C:/Ruby193/lib/ruby/1.9.1/webrick/server.rb:191:in `block in start_thread' Rendered C:/Ruby193/lib/ruby/gems/1.9.1/gems/actionpack-3.2.11/lib/action_disp atch/middleware/templates/rescues/routing_error.erb within rescues/layout (1.0ms ) </code></pre> <p>*****I would like to thank all of you who tried to help :) *****</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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