jS

Rails : acting weird : why layout is rendered when format.js

I don’t know why I am getting this issue. I have set remote: true in link_to helper method in view. and the controller is supposed to look like

class ProfilesController < ApplicationController
  def index
  end

  def profile_setting
    respond_to do |format|
      format.js
    end
  end
end

I have the file views/profiles/profile_setting.js.erb. I can even pry into the .js template using binding.pry [using pry-rails gem]. It renders the template but also renders layout i.e. layouts/application.html.erb.  Continue reading →

Advertisements

Refactoring javascript : managing existing js code

As an web developer we always have so many problems regarding Javascript as our lines of codes in our app grow. The root cause of these problems are

  • There are so many files. In any of the files you might have missing semicolons, or used undefined variables
  • You often forget to put var before variable declaration, and this put the variable in the global scope
    • This variable might conflict with same variable name you used in other part of your code.

Solution

  $(function () {
    if ($('body.shares').length == 0 && $('body.pact_profile_page').length == 0)  return false;
    ...
  });

  // Basic syntax would be
  $(document).ready(function () {
    var target_element_is_not_loaded = ($('.your-target-selector').length > 0);
    if (target_element_is_not_loaded) return false;
    
    ...
  });

The basic idea is, you only execute your code if your targeted page is loaded. Means if your JS code is meant for posts page then you do not need to load this code else where.

 

Other Links

http://jyaasa.com/blog/refactoring-javascript-managing-existing-js-code

Codeclimate : JSLint : Expected ‘===’ and instead saw ‘==’, How to pass analyzer

If you check your JS code using JSLint then it generally shows warning messages like

Expected '!==' and instead saw '!='.
Expected '===' and instead saw '=='

It is found that every suggestions it make are subject to risks. These suggestions are not considered to be followed exactly.

  • Expected ‘===’ and instead saw ‘==’. (Line 64) 
    if ($('#referers_cell_number').val == '') {
  • Missing semicolon. (Line 75) 
    })
  • Expected ‘!==’ and instead saw ‘!=’. (Line 83) 
    if (addressid != '') {
  • Expected ‘!==’ and instead saw ‘!=’. (Line 90) 
    if (data != null) {
  • Expected ‘===’ and instead saw ‘==’. (Line 93) 
    if (refId == '' || typeof(refId) == "undefined") {

However, there is a different way to follow these suggestions… like this

The == and != operators do type coercion before comparing. This is bad because it causes ' \t\r\n' == 0 to be true. This can mask type errors.

When comparing to any of the following values, use the === or !== operators (which do not do type coercion): 0 '' undefined null false true

If you only care that a value is truthy or falsy, then use the short form. Instead of

(foo != 0)

just say

(foo)

and instead of

(foo == 0)

say

(!foo)

The === and !== operators are preferred.

importance of not writing parenthesis ‘( )’ after function name in callbacks

Suppose you want to assign an event handler function to an click event of any element

$(document).on('click', '.disable-user', disableUserConfirmation());

when you run the app the function disableUserConfirmation()  gets executed any way, however the event handler function expected to run when the event is triggered wont work. You can see the error in the console.

Uncaught TypeError: undefined is not a function

What happens in callbacks is, when the jQuery’s function ‘on’ want to execute the function object it just appends the parenthesis after the function name and executes it.

jQuery : JS : Disable/Enable scroll bars programmatically

/**
 * Disables the scroll of window
 *
 * @param selectorOfWindow
 * @author Shiva Bhusal
 */
function disableScroll(selectorOfWindow){
 $(selectorOfWindow).find('html, body').css({
 'overflow': 'hidden',
 'height': '100%'
 })
}
/**
 * Restores the scroll of window
 *
 * @param selectorOfWindow
 * @author Shiva Bhusal
 */
function restoreScroll(selectorOfWindow){
 $(selectorOfWindow).find('html, body').css({
 'overflow': 'auto',
 'height': 'auto'
 })
}

jQuery: Change value in serialized form: Rails Change request method before sending data

/**
 * Change the request method from serialized form to 'get'
 * @param form Serialized form object
 * @returns {Serialized form}
 */
function changeRequestMethod(form) {
 // Keeping track from where this request is generated
 form.push({name: 'reqFrom', value: 'verify'});
 $.each(form, function (i, field) {
   if (field.name == '_method') {
   field.value = 'get';
   return form;
   }
 });
 return form;
}

var formData = $('.bid-form').serializeArray();
formData = changeRequestMethod(formData);