Jquery Ajax error handling to ignore aborted

Error comes from when the web page refresh too much fast than it can load.

For example, a web page load a huge data, even with ajax pagination, and users refresh multiple times of this page

 

Solution which resolved this problem :

var unloaded = false;
$(window).bind('beforeunload', function(){
    unloaded = true;
});

$(document).ajaxError(function(event, request, settings) {
    if (unloaded || request.statusText == "abort") {
        return;
    }
    ...
}

Ref.
http://stackoverflow.com/questions/4807572/jquery-ajax-error-handling-to-ignore-aborted

Advertisements

[JS Practice] execute multiple functions successively on a value

Title :

Execute multiple functions successively on a value

Description:

Write a generic function chainer that takes a starting value, and an array of functions to execute on it. Return the final value after execution is complete.

Example

function add(num) { 
   return num + 1 
} 

function mult(num) { 
   return num * 30 
} 

chain(2, [add, mult]); // returns 90;

Continue reading

[AngularJS] Solution for Main page not display

Background : Angularjs application (angularjs version 1.3.15)
Problem : main page display nothing

Demo code (with a small small error but serious):

In app.js

angular.module('myApp', [
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'ngRoute'
])
  .config(function($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

In main.js

console.log('Before main controller');
var app = angular.module('myApp', []);
app.controller('MainCtrl', function ($scope) {
    console.log('In main controller');
});
console.log('After main controller');

In my console, it displays only :

Before main controller
After main controller

What’s wrong ??
Continue reading

[AngularJS] solution for jsonp not working

I got to try a http jsonp call an external url in AngularJS :

$http.jsonp('http://localhost/myJsonfile?callback=JSON_CALLBACK')
    .success(function(data){
       console.log('success');
    })
    .error(function () {
      console.log('error')
    });

Using jsonp and adding the “callback=JSON_CALLBACK” to the end of the url allows me to call an external url.
NB. Calling an external url by $http.get will return an “Cross-Origin Request Blocked” error.

My json file in /var/www is like this (only for test):

[{"id": "1"},
 {"id": "2"},
 {"id": "3"}
]

But the call always return an error 😦
Continue reading

[Javascript] Closure

Found a very good article in Chinese from the blog of Ruanyifeng which talking about the closure of javascript.

Before learning closure, it is better to understand the variable scope.

Learn by doing (all examples with # have been tested, try them):

  • #1 example
  • Global variable :

    var v1 = 1;
    function f1() {
      console.log(v1); // Display 1 in console
    }
    
  • #2 example
  • Local variable :

    function f2() {
      var v2 = 1;
    }
    console.log(v2); // Can't find variable:v2
    

    So local variable cannot be used outside of a function.

    Attention!
    There is an exception, local variable defined in function must use the “var” command, or it will be considered as a global variable, see an example:

  • #3 example
  • function f3() {
      v3 = 1;
    }
    f3(); // call function f3, the variable will be initialized 
    console.log(v3); // Display 1 in console
    

    Continue reading

    [jQuery] Comparison of getJSON and ajax

    Comparison of jQuery getJSON and ajax.

    I tried to debug this code in jQuery(the following), the object is to get the data from a json file and re-format the output data into an array, this array will be used in others functions later.

    $(document).ready(function() {
      var arr = [];
      // Get data from a json file
      $.getJSON("jsonfile.json", {}, function(data) {
        $.each(data, function(key, value) {
          arr.push(value); // Add data value to an array
        });
      });
      console.log(arr); // Print the array to console
    });
    

    Continue reading