marcamillion marcamillion - 1 month ago 8
Javascript Question

How do I make sure this ajax call only happens when a user interacts with it, not on page load?

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:


  1. How do I make sure that the
    $.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.

Answer

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?