Blog posts about javascript

  • How to set this when calling a javascript function

    February 04, 2014 | Tags: Javascript, jQuery, Snippet
    Ever wondered how the this entity was set in a function like for instance a jQuery event handler? Or maybe even needed to invoke that event handler from code passing the object that would be accessed through this within the function? The secret is to use the call-function that is available on every function in JavaScript.

    If you for instance have an event handler setup in jQuery like the one below:
    function buttonClickHandler(e) {
    $(this).addClass('clicked');
    }

    $('a.btn').click(buttonClickHandler);
    ..that you would like to invoke from code and passing the object that would be accessed through this within the function, using the call-function on your event handler function will do the trick:
    var btn = $('#button1');
    buttonClickHandler.call(btn);

    The syntax of the call-function is: call(thisArg[, arg1[, arg2[, ...]]]). The first parameter you pass is what will be accessible through the this entity. Then follows optional parameters that will be passed as parameters to the function being called in the given order.

    If you which to pass an object as this to a function that takes two parameters (lets say showName(firstName, surName)) you would do it like this:
    function showName(firstName, surName) {
    $(this).val(firstName + ' ' + surName);
    }

    var element = $('#element');
    showName.call(element, 'alice', 'cooper');

  • Convert JSON string to JavaScript objects safely

    February 03, 2014 | Tags: Javascript, JSON, jQuery
    If you have a JSON string that you want to convert into JavaScript object but doesn't want to use eval (which you should avoid due to the security implications), you can either use jQuery.parseJSON() or - if you're not using jQuery - use a dedicated JSON library such as JSON 3.
    // using jQuery
    var myObject = jQuery.parseJSON(myJSONString);

    // using JSON 3 (for polyfill in older browsers)
    var myObject2 = JSON.parse(myJSONString);

  • Passing arguments to another javascript function

    September 30, 2013 | Tags: Javascript, Snippet
    If you which to forward a call from one function to another passing all the parameters which were sent to the first function this can be done by using apply and passing arguments:
    function myFunction(args){
    myOtherFunction.apply(this, arguments);
    }

    function myOtherFunction(fieldA, fieldB){
    alert(fieldA + " " + fieldB);
    }

    myFunction('hello','world');

    Please note!The call to apply uses arguments and not args. This is intended and not a typo. The parameter args allows the function myFunction to receive arguments. The arguments object is an array of all the parameters sent to the function. If you don't want to specify which parameters myOtherFunction takes you can use arguments[0] etc in order to access the posted parameters.


  • $(window).height() vs $(document).height()

    April 23, 2013 | Tags: Javascript, Troubleshooting, jQuery
    I was trying to use the $(window).height() method in jQuery to get the height of the browser window but was instead getting the document height in return (same as $(document).height()).

    So, what to do if window height returns document height instead?

    Solution

    The problem is most likely that your HTML document lacks a <!DOCTYPE>-definition. So the solution to the problem is to add a valid <!DOCTYPE> like <!DOCTYPE HTML> in the top of the HTML file. When done $(window).height() should start to report the proper window height and not the document's.



  • Repeat array in javascript

    August 30, 2011 | Tags: Javascript, Snippet
    This little snippet is useful if you want to extend an array in javascript with posts by repeating the content of the original array.

    For instance, your array contains "a", "b", "c". You wish to build an array of 8 posts repeating the initial values. This function would then return a new array containing "a", "b", "c", "a", "b", "c", "a", "b".
    <script type="text/javascript">
          

    function repeatArray(arr, count) {
    var ln = arr.length;
    var b = new Array();
    for(i=0; i<count; i++) {
    b.push(arr[i%ln]);
    }

    return b;
    }

    </script>
    And a little test bed:
    var a = new Array();
          

    a.push("test1");
    a.push("test2");
    a.push("test3");

    var b = repeatArray(a, 13);

    alert(b.length);