In my app/assets/javascripts/profiles.js, I have the following:
$(document).on('turbolinks:load', function() {
var sliders = $('.slider');
var buttons = $('.slider-step-value');
for ( var i = 0; i < sliders.length; i++ ) {
var button = $(sliders[i]).prev('p').find('button')[0];
var _slider_type = sliders[i].id.split('-')[1];
var _original_value = $('button#' + button.id).data(_slider_type + "-value");
noUiSlider.create(sliders[i], {
start: _original_value,
step: 1,
behaviour: 'tap',
connect: [true, false],
range: {
'min': 1,
'max': 10
}
});
attachEvent(sliders[i], button);
}
function attachEvent(slider,button){
slider.noUiSlider.on('update', function( values, handle ) {
button.innerText = parseInt(values[handle]);
var _profile_id = button.id.split('-').slice(4).join('-');
var _rating_type = button.id.split('-')[3]
var url = "/profiles/" + _profile_id + "/" + _rating_type + "_rating/?" + _rating_type + "=" + button.innerText
$.ajax({
type: "PATCH",
url: url,
success: function(){
// console.log(_profile_id + "'s " + _rating_type + " was successfully updated.");
},
error: function(){
// console.log(_profile_id + "'s " + _rating_type + " was NOT successfully updated.");
}
})
});
}
});
What happens when I reload any Profile#Show page, this is what the log looks like:
Started PATCH "/profiles/rebecca-nitzsche-st-george-s-college/speed_rating/?speed=7" for ::1 at 2016-10-31 14:51:56 -0500
Processing by ProfilesController#speed_rating as */*
Started PATCH "/profiles/rebecca-nitzsche-st-george-s-college/tackling_rating/?tackling=9" for ::1 at 2016-10-31 14:51:56 -0500
Processing by ProfilesController#tackling_rating as */*
Parameters: {"tackling"=>"9", "id"=>"rebecca-nitzsche-st-george-s-college"}
Started PATCH "/profiles/rebecca-nitzsche-st-george-s-college/passing_rating/?passing=7" for ::1 at 2016-10-31 14:51:56 -0500
Started PATCH "/profiles/rebecca-nitzsche-st-george-s-college/dribbling_rating/?dribbling=4" for ::1 at 2016-10-31 14:51:56 -0500
Parameters: {"speed"=>"7", "id"=>"rebecca-nitzsche-st-george-s-college"}
Processing by ProfilesController#passing_rating as */*
Parameters: {"passing"=>"7", "id"=>"rebecca-nitzsche-st-george-s-college"}
Profile Load (5.6ms) SELECT "profiles".* FROM "profiles" WHERE "profiles"."slug" = $1 ORDER BY "profiles"."id" ASC LIMIT $2 [["slug", "rebecca-nitzsche-st-george-s-college"], ["LIMIT", 1]]
Processing by ProfilesController#dribbling_rating as */*
Parameters: {"dribbling"=>"4", "id"=>"rebecca-nitzsche-st-george-s-college"}
Profile Load (53.0ms) SELECT "profiles".* FROM "profiles" WHERE "profiles"."slug" = $1 ORDER BY "profiles"."id" ASC LIMIT $2 [["slug", "rebecca-nitzsche-st-george-s-college"], ["LIMIT", 1]]
Profile Load (54.2ms) SELECT "profiles".* FROM "profiles" WHERE "profiles"."slug" = $1 ORDER BY "profiles"."id" ASC LIMIT $2 [["slug", "rebecca-nitzsche-st-george-s-college"], ["LIMIT", 1]]
Grade Load (9.0ms) SELECT "grades".* FROM "grades" WHERE "grades"."profile_id" = 7
Profile Load (5.4ms) SELECT "profiles".* FROM "profiles" WHERE "profiles"."slug" = $1 ORDER BY "profiles"."id" ASC LIMIT $2 [["slug", "rebecca-nitzsche-st-george-s-college"], ["LIMIT", 1]]
Grade Load (5.9ms) SELECT "grades".* FROM "grades" WHERE "grades"."profile_id" = 7
Grade Load (13.2ms) SELECT "grades".* FROM "grades" WHERE "grades"."profile_id" = 7
HABTM_Positions Load (14.7ms) SELECT "positions_profiles".* FROM "positions_profiles" WHERE "positions_profiles"."profile_id" = 7
Grade Load (13.5ms) SELECT "grades".* FROM "grades" WHERE "grades"."profile_id" = 7
HABTM_Positions Load (12.2ms) SELECT "positions_profiles".* FROM "positions_profiles" WHERE "positions_profiles"."profile_id" = 7
HABTM_Positions Load (147.3ms) SELECT "positions_profiles".* FROM "positions_profiles" WHERE "positions_profiles"."profile_id" = 7
Position Load (4.3ms) SELECT "positions".* FROM "positions" WHERE "positions"."id" = 7
Position Load (6.2ms) SELECT "positions".* FROM "positions" WHERE "positions"."id" = 7
HABTM_Positions Load (14.8ms) SELECT "positions_profiles".* FROM "positions_profiles" WHERE "positions_profiles"."profile_id" = 7
Position Load (9.1ms) SELECT "positions".* FROM "positions" WHERE "positions"."id" = 7
Achievement Load (3.5ms) SELECT "achievements".* FROM "achievements" WHERE "achievements"."profile_id" = 7
Achievement Load (89.6ms) SELECT "achievements".* FROM "achievements" WHERE "achievements"."profile_id" = 7
Position Load (83.1ms) SELECT "positions".* FROM "positions" WHERE "positions"."id" = 7
Achievement Load (6.0ms) SELECT "achievements".* FROM "achievements" WHERE "achievements"."profile_id" = 7
Video Load (5.0ms) SELECT "videos".* FROM "videos" WHERE "videos"."profile_id" = 7
Video Load (10.8ms) SELECT "videos".* FROM "videos" WHERE "videos"."profile_id" = 7
Achievement Load (12.9ms) SELECT "achievements".* FROM "achievements" WHERE "achievements"."profile_id" = 7
Video Load (98.2ms) SELECT "videos".* FROM "videos" WHERE "videos"."profile_id" = 7
Transcript Load (10.2ms) SELECT "transcripts".* FROM "transcripts" WHERE "transcripts"."profile_id" = 7
Transcript Load (2.7ms) SELECT "transcripts".* FROM "transcripts" WHERE "transcripts"."profile_id" = 7
Video Load (6.6ms) SELECT "videos".* FROM "videos" WHERE "videos"."profile_id" = 7
Transcript Load (5.7ms) SELECT "transcripts".* FROM "transcripts" WHERE "transcripts"."profile_id" = 7
User Load (4.9ms) SELECT "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2 [["id", 7], ["LIMIT", 1]]
User Load (8.3ms) SELECT "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2 [["id", 7], ["LIMIT", 1]]
Transcript Load (35.1ms) SELECT "transcripts".* FROM "transcripts" WHERE "transcripts"."profile_id" = 7
User Load (35.2ms) SELECT "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2 [["id", 7], ["LIMIT", 1]]
Rating Load (5.4ms) SELECT "ratings".* FROM "ratings" WHERE "ratings"."user_id" = 7 AND "ratings"."profile_id" = 7 LIMIT $1 [["LIMIT", 1]]
Rating Load (5.4ms) SELECT "ratings".* FROM "ratings" WHERE "ratings"."user_id" = 7 AND "ratings"."profile_id" = 7 LIMIT $1 [["LIMIT", 1]]
User Load (5.7ms) SELECT "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2 [["id", 7], ["LIMIT", 1]]
Rating Load (18.2ms) SELECT "ratings".* FROM "ratings" WHERE "ratings"."user_id" = 7 AND "ratings"."profile_id" = 7 LIMIT $1 [["LIMIT", 1]]
(20.2ms) BEGIN
(4.4ms) BEGIN
Rating Load (10.4ms) SELECT "ratings".* FROM "ratings" WHERE "ratings"."user_id" = 7 AND "ratings"."profile_id" = 7 LIMIT $1 [["LIMIT", 1]]
(10.9ms) BEGIN
(7.1ms) COMMIT
(4.9ms) BEGIN
(45.6ms) COMMIT
(42.7ms) COMMIT
(379.0ms) COMMIT
No template found for ProfilesController#tackling_rating, rendering head :no_content
No template found for ProfilesController#speed_rating, rendering head :no_content
No template found for ProfilesController#passing_rating, rendering head :no_content
Completed 204 No Content in 2224ms (ActiveRecord: 90.0ms)
Completed 204 No Content in 2312ms (ActiveRecord: 440.7ms)
No template found for ProfilesController#dribbling_rating, rendering head :no_content
Completed 204 No Content in 2311ms (ActiveRecord: 244.2ms)
Completed 204 No Content in 2271ms (ActiveRecord: 571.3ms)
I believe the bulk of those calls are coming from my set_profile method:
before_action :set_profile, only: [:show, :edit, :update, :destroy, :invite_user, :speed_rating, :tackling_rating, :dribbling_rating, :passing_rating, :profiles]
def set_profile
@profile = Profile.includes(:grades, :positions, :achievements, :videos, :transcripts).friendly.find(params[:id])
end
So all I need to be able to do is the following:
$.ajax call, only happens when a user interacts with the slider, not necessarily on first page load. Note that the slider needs to be updated on the first page load because it needs to set the start value to the _original_value as you can see in the noUiSlider.create call.Once I can figure that out, I believe most of those DB calls on the initial page load should disappear and my page load time should improve significantly.
Maybe use another event like slide or change: https://refreshless.com/nouislider/events-callbacks/
Or could it be that your create code is fireing the update event?