Tag Archives: Javascript

Javascript – Add query parameter to current URL without reload

The following example adds a query parameter to the URL without refreshing the page but only works on modern HTML5 browsers.

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Add query parameter to the url without reload</title>
</head>
<body>
  <button onclick="updateURL();">Update</button>
  <script type="text/javascript">
    function updateURL() {
      if (history.pushState) {
          var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?para=hello';
          window.history.pushState({path:newurl},'',newurl);
      }
    }
  </script>
</body>
</html>

 

Reference: StackOverflow – How do we update URL or query strings using javascript/jQuery without reloading the page?

Javascript – Simple Statistic

Previously i have a post about getting the average value of a numeric array using ?Underscore.

 

If you need more statistical functions other than getting the mean value. You could try Simple Statistics.

Visit the above link and play with it. Here is an example on getting some common statistics value in Javascript.

// numbers from 1 to 100
var myData = [];
for (var i = 0; i < 99; i++) {
  myData[i] = i + 1;
}

ss.mean(myData);
ss.min(myData);
ss.quantile(myData , 0.2);

 

Done =)

Reference:

Javascript – Get average value of a numeric array using Underscore

Underscore provides a lot of useful helper functions in Javascript programming. Here is an example of getting an average value of a numeric array.

<!DOCTYPE html>
<html>
<head>
  <title>Get average value of an array using underscore</title>
  <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
</head>
<body>
  <div id="average"></div>
  <script type="text/javascript">
    var values = [13, 17, 11, 24, 56, 31, 27, 19];
    document.getElementById("average").innerHTML = arrayAverage(values);

    function arrayAverage(arr) {
      return _.reduce(arr, function(memo, num) {
        return memo + num;
      }, 0) / (arr.length === 0 ? 1 : arr.length);
    }
  </script>
</body>
</html>

 

Done =)

Reference:

jQuery – Determine which radio box is checked

Assume you have the following HTML form:

<form id="weather-form">
  <input name="weather" type="radio" value="sunny">Sunny
  <input name="weather" type="radio" value="cloudy">Cloudy
  <input name="weather" type="radio" value="rainy">Rainy
</form>

 

To get the checked value using jQuery:

var result = $("#weather-form input[name=weather]:checked").val();
// OR
var result = $("input[name=weather]:checked", "#weather-form").val();

Continue reading jQuery – Determine which radio box is checked

Javascript – Encode and decode URL like %20

When you want to create an url which contains special charaters like the whitespace, you need to convert it to %20 ascii value. In Javascript, you could simply make use of the built-in encodeURI() and decodeURI() as follow.

console.log(encodeURI("http://localhost:8000/?greeting=" + "Welcome to Eureka!"));
// Output
http://localhost:8000/?greeting=Welcome%20to%20Eureka!


console.log(decodeURI("http://localhost:8000/?greeting=Welcome%20to%20Eureka!"));
// Output
// http://localhost:8000/?greeting=Welcome to Eureka!

 

You can do it in PHP as well.
PHP – URL Encode and Decode

Done =)

Reference:

Javascript – Determine which event is triggered

Recently i have been working with Dashing which is a great tool to displaying information as a dashboard. I would like to show the dashboard on a big TV. Everything works fine on my Mac but when it is shown on the TV screen, the onclick event is not triggered.

I need to check which event is triggered when i press on the TV screen. The web developer console in Chrome of Firebug in Firefox could help you to determine which event is triggered. For example, the menu bar of Eureka! has the following HTML structure.

<div class="nav-menu">
  <ul>
    <li class="page_item page-item-1630"><a href="http://eureka.ykyuen.info/about-eureka/">About</a></li>
    <li class="page_item page-item-8284"><a href="http://eureka.ykyuen.info/portfolio/">Portfolio</a></li>
    <li class="page_item page-item-731"><a href="http://eureka.ykyuen.info/faz-jewelry/">Faz Jewelry</a></li>
    <li class="page_item page-item-6494"><a href="http://eureka.ykyuen.info/linux-commands/">Linux Commands</a></li>
    <li class="page_item page-item-8388"><a href="http://eureka.ykyuen.info/reads/">Reads</a></li>
    <li class="page_item page-item-7349"><a href="http://eureka.ykyuen.info/syntax-highlight/">Syntax Highlight</a></li>
    <li class="page_item page-item-9773"><a href="http://eureka.ykyuen.info/%e6%97%85%e8%a1%8c%e8%a8%98/">旅行記</a></li>
  </ul>
</div>

 

I would like to monitor all the events which are triggered by the first li.page_item element. This can be done by inputing the following command in the console.
Continue reading Javascript – Determine which event is triggered

Chrome – Bypass Access-Control-Allow-Origin on Mac

About a year ago, i posted an article about allowing the Javascript accessing the local file system in order to read the local JSON file.

 

So if you are using Mac, you need to quit the Chrome application. Then execute the following command in Terminal.

/usr/bin/open -a "/Applications/Google Chrome.app" --args --allow-file-access-from-files

 

Reference: Disable same origin policy in Chrome on Mac OSX

AngularJS – Service VS Factory VS Provider

Design pattern is very important if you want to build a manageable and scalable application. In AngularJS, we could develop module, which is also regarded as a dependency, for specific feature and it could be injected to the controller whenever it is needed. This dependency injection design help us to build clean and well structured application and reduce redundant code.

There are different ways to create the dependency. Most common terms are service, factory and provider which are all singleton and you can find a lot of discussion online about their differences, when and how to use them. Here are some notes which summarize the AngularJS documentation about writing Provider.
 

 

1. When a dependency is injected to the controller, the injector from AngularJS framework will register a recipe such that the injected controller could make use of the type provided by the dependency.
Continue reading AngularJS – Service VS Factory VS Provider

Meteor – High Network IO as it keeps polling MongoDB

I was working on a Meteor project which is connected to a mongoDB hosted on MongoLab. Since it is a sandbox plan, the oplog of the mongoDB instance is not available and in that case the Meteor will keep polling the mongoDB in around every 10 seconds. This causes a very high consumption on CPU and network bandwidth.

If you are running, Meteor 0.7.0 or above and your mongoDB has oplog enabled. You won’t experienced the problem.

Since the oplog is not available so the only workaround which i could think of is to unsubscribe the dataset. Here is a main.js which is executed when the app is loaded and when the user is idle for than 3 mins. Stop the subscription and that will stop polling the mongoDB.
Continue reading Meteor – High Network IO as it keeps polling MongoDB