This can happen if the value is NaN.

Solution :

Check for isNaN(myvar) before trying to create an array form it with [...Array(myvar)]

The post RangeError: Invalid array length appeared first on Techy Things.

     var self = this;
     var sel = (self.selected === -1)?true:false;
     var option = null;
     option = $("");
     option.val(-1).prop("selected", sel).text("(None)");
     this.$el.append(option);
     this.collection.forEach(function(model)
     {
       sel = (self.selected == model.get('id'))?true:false;
       option = $("");
       option.val(model.get("id")).prop("selected", sel).text(model.getName());
       self.$el.append(option);
     });

Method #2 - Via native "Option" object

                option = new Option(data.text, data.id, false, false);
                this.$('#entropy').append(option).trigger('change');

Method #3 - Just render two <select> and hide the unused one - think outside the box.

This is my preferred method when there are only two sets of valid options

html:

 <div class="control-group" id="encoding_profile_row_hevc">
 <label class="control-label">Encoding Profile</label>
 <div class="controls">
 <select name="encodingProfile" class="selectpicker span3" data-style="btn-select-gray" data-size="false" id="encodingProfileHevc">
 <option value="2">Main</option>
 <% if (systemInfo.get("yuv10bit") === true) {%><option value="6">Main 10</option><% } %>
 <% if (systemInfo.get("yuv422") === true && systemInfo.get("yuv10bit") === true) {%><option value="7">Main 4:2:2 10</option><% } %>
 </select>
 </div>
 </div>

 <div class="control-group hidden" id="encoding_profile_row_h264">
 <label class="control-label">Encoding Profile</label>
 <div class="controls">
 <select name="encodingProfile" class="selectpicker span3" data-style="btn-select-gray" data-size="false" id="encodingProfileH264">
 <option value="1">Baseline</option>
 <option value="2">Main</option>
 <option value="3">High</option>
 <% if (systemInfo.get("yuv10bit") == true) {%><option value="4">High 10</option><% } %>
 <% if (systemInfo.get("yuv422") === true) {%><option value="5">High 4:2:2</option><% } %>
 </select>
 </div>
 </div>


 onChangeCodec: function() {
 var codec = this.$("#codecAlgorithm").val();
 if (codec == "0")
 { //h264
 this.$("#encoding_profile_row_h264").removeClass("hidden");
 this.$("#encoding_profile_row_hevc").addClass("hidden");
 }
 else
 {
 this.$("#encoding_profile_row_hevc").removeClass("hidden");
 this.$("#encoding_profile_row_h264").addClass("hidden");
 }
 this.onChangeEncodingProfile();
 },

The post Three ways to add dropdown options via Javascripts appeared first on Techy Things.

 Inputs.Collection = Backbone.Collection.extend({
   model: Inputs.Model,
   url: "/apis/v2/inputs",
   sortAttribute: "name", // supported attributes are model's element names + any custom strategies below
   comparator: function(model) 
   {
     return Utils.genericComparator.call(this, model);
   },
   strategies: {},
   changeSort: function (sortAttribute) 
   {
     if (this.strategies[sortAttribute]) {
       this.comparator = this.strategies[sortAttribute];
       return;
     }
     this.comparator = Inputs.Collection.prototype.comparator;
     this.sortAttribute = sortAttribute;
   },
   parse: function (resp)
   {
     var data = ( resp && resp.input_list ) ? resp.input_list : [];
     return data;
   }
 });

Initialization of Sort Method in View

 initialize: function () // View Initialize
 {
   var self = this;
   this.collection = new Inputs.Collection();
   var currentMethod = app.storageModel.load("inputs:sort");
   if (currentMethod) {
     this.collection.changeSort(currentMethod);
   } else {
     app.storageModel.save("inputs:sort", this.collection.sortAttribute);
   }
   ...
 },
 afterRender: function() 
 {
   // Indicate to user what we are sorting
   var currentMethod = this.collection.sortAttribute;
   if (currentMethod && currentMethod.match(/_r$/)) {
     // reserve sorting
     this.$(".jsSort[data-sort=\""+currentMethod.replace(/_r$/,"")+"\"]").addClass("down");
   } else {
     this.$(".jsSort[data-sort=\""+currentMethod+"\"]").addClass("up");
   }
 },

Dynamic Code to Change Sort Method

 events: {
   "click .jsSort": "sortTable"
 },
 sortTable: function(e) 
 {
   var sortBy = $(e.currentTarget).data("sort");
   var currentMethod = app.storageModel.load("inputs:sort");
   if (sortBy === currentMethod) {
     sortBy += "_r"; // reserve sorting
   }
   this.collection.changeSort(sortBy);
   this.collection.sort();
   app.storageModel.save("inputs:sort", sortBy);
   this.render();
 },

Html Code

<div class="span4 sort jsSort unselectable" data-sort="name">Name</div>
<div class="span5 sort jsSort unselectable" data-sort="url">Connection</div>
<div class="span2 sort jsSort unselectable" data-sort="state">Status</div

Generic Sort Code

 // Comparator Function for Collection sort
 //
 // Usage: 
 // My.Collection = Backbone.Collection.extend({
 // sortAttribute: "name", // supported attributes are model's element names + any custom strategies below
 // comparator: function(model) { return Utils.genericComparator.call(this, model); },
 // strategies: { <your own custom strategy not covered by genericComparator> },
 // changeSort: function (sortAttribute) {
 // if (this.strategies[sortAttribute]) {
 // this.comparator = this.strategies[sortAttribute];
 // return;
 // }
 // this.comparator = My.Collection.prototype.comparator;
 // this.sortAttribute = sortAttribute;
 // },
 // ...
 // });
 Utils.genericComparator = function (model) 
 {
   var last = this.sortAttribute.slice(-2); // last 3 chars
   var reversed = false;
   var attribute = this.sortAttribute;
   if (last === "_r") {
     attribute = this.sortAttribute.substr(0, this.sortAttribute.length-2);
     reversed = true;
   }
 
   var value = model.get(attribute);
   var matches;
   if (matches = attribute.match(/\((.*)\)$/)) // ends with () ?
   { 
     // function call
     var fname = attribute.substring(0, attribute.length - matches[0].length);
     if (fname.indexOf(".") > 0) 
     { 
       var flist = fname.split(".");
       var args = matches[1].replace(/'/g, "");
       if (flist.length == 2) 
       {
         value = model[flist[0]][flist[1]](args);
       }
     } else {
       value = model[fname](matches[1]);
     }
   } 
   var retval = Utils.genericComparatorFromValue(value, reversed);
   return retval;
 };
 
 // Takes a value as input format it for consistant compare and optionally reverse it
 // Returns value prepped for compare
 Utils.genericComparatorFromValue = function (value, reversed) { 
   if (_.isUndefined(value)) {
     return value;
   }
 
   if (typeof value.toLowerCase === "function") {
     // string type 
     var string = value.toLowerCase();
     if (reversed) {
       string = string.split(""); // string to array
       string = _.map(string, function(letter) { return String.fromCharCode(-(letter.charCodeAt(0))); });
       return string;
     }
     return string;
   } else if (value === true || value === false) {
     // boolean type
     return reversed ? !value : value;
   } else if (value === null) {
     return value;
   } else {
     // integer, float
     return reversed ? -value : value;
   }
 };

The post Backbone Collection Flexible Value Sorting Solution appeared first on Techy Things.

The post jQuery prevent uploading too large file in Frontend appeared first on Techy Things.

  // prevent background of modal from scrolling
  // DOMMouseScroll for Firefox equivalent
  $(document).on("mousewheel DOMMouseScroll", ".modal-backdrop, .modal-body", function(event) {
    event.stopPropagation();
    event.preventDefault();
  });

  // prevent background of modal from scrolling
  var keysThatScroll = new Array(33,34,35,36,37,38,39,40);
  var DEBUG_KEY_SCROLL_PREVENTION = false;
  $(document).on("keydown", function(event) {
    var key = event.which;
    if ($.inArray(key,keysThatScroll) === -1) {
      if (DEBUG_KEY_SCROLL_PREVENTION) console.log("no worries for this key", key);
      return true; // no worries for this key
    }

    if ($(".modal-backdrop").length === 0) {
      if (DEBUG_KEY_SCROLL_PREVENTION) console.log("no modification when modal is off");
      return true; // no worries for these keys
    }

    if (event.target == null || event.target.tagName == null) { // should not happen
      if (DEBUG_KEY_SCROLL_PREVENTION) console.log("event.target or event.target.tagName is null or undefined");
      return true;
    }

    if (event.target.tagName.toLowerCase() === "body") {
      if (DEBUG_KEY_SCROLL_PREVENTION) console.log("keydown, on body, stopping");
      event.preventDefault();
      return false;
    }

    if (event.target.type == null) {
      if (DEBUG_KEY_SCROLL_PREVENTION) console.log("keydown, no type and not body, letting go");
      return true; // ok keep going
    }

    var type = event.target.type.toLowerCase();
    if (DEBUG_KEY_SCROLL_PREVENTION) console.log("keydown, type", type);
    if (type == 'input' || type == 'text' || type == 'textarea' ||type == 'select') {
      // normal keyup and keydown allowed in modals
      return true; // ok keep going
    }
    
    // stop scrolling keys in modal of further effects, for example if focus is on a button and keydown
    event.preventDefault();
    event.stopPropagation();
    return false; // in jQuery returning false does the same as preventDefault and stopPropagation
  });

Solution #2

   // extend Bootstrap modal to remove scrollbar during modal show
   var _show = $.fn.modal.Constructor.prototype.show;
   $.fn.modal.Constructor.prototype.show = function() {
      _show.apply(this, arguments);
      $("body").addClass("modal-on");
   };
   var _hide = $.fn.modal.Constructor.prototype.hide;
   $.fn.modal.Constructor.prototype.hide = function() {
      _hide.apply(this, arguments);
      $("body").removeClass("modal-on");
   };

along with CSS

html,
body {
   width: 100%;
   height: 100%;
   padding: 0;
   margin: 0;
}
body {
   overflow-y: scroll;
}

body.modal-on {
   overflow:hidden;
}

The post Mousewheel prevent body scroll on modal appeared first on Techy Things.

To fix

Expected a 'break' statement before 'default'.

Use

/* falls through */

The post jshint options appeared first on Techy Things.

<<

@philipraath @olignyf a beforeAll or beforeEach that is not inside of any describe will be applied to all suites/specs, as appropriate, during the execution of the suite.

>>

https://github.com/jasmine/jasmine/issues/811

The post Single beforeEach() in Jasmine appeared first on Techy Things.

/createSpyObj/ => " jasmine.createSpyObj"

/createSpy/ => "jasmine.createSpy"

/\.andCallFake/ => ".and.callFake"

/\.andReturn/ => ".and.returnValue"

/\.andCallThrough/ => ".and.callThrough"

/toNotMatch/ => "not.toMatch"

/this.addMatchers/ => "jasmine.addMatchers"

/\.calls\[0\]\./ => ".calls.first()"

/\.calls\[(\d)\]\./ => ".calls.all()[$1]"

/\.callCount/ => ".calls.count()"

runs and waitsFor have been removed and should be replaced with function(done) / done():

https://groups.google.com/forum/#!topic/jasmine-js/Q_4lyEWrZKI

Problem with Expected {XYZ} to equal Object({XYZ})

An Asset object should
✓ get deserialized for further tests
✓ be deserialized from a serialized protobuf message
✗ find tracks, resources, and chunks by id
- Expected ({ id: 0, type: 'PROTOBUF', chunk: [ ({ id: 0 }), ({ id: 1 }) ] }) to equal Object({ id: 0, type: 'PROTOBUF', chunk: [ Object({ id: 0 }), Object({ id: 1 }) ] }).
at Object. (js/tests/lib/assets/asset_spec.js:290:22)

Solution

beforeEach(function(done) {
  jasmine.addMatchers({
    toStringifyEqual: function(util, customEqualityTesters) {
      return {
        compare: function(actual, expected) {
          var result = {};
          var actual_ = JSON.stringify(actual);
          var expected_ = JSON.stringify(expected);
          result.pass = _.isEqual(actual_, expected_);
          return result;
        }
      }
    }
  });
});

Examples

Error : ReferenceError: createSpy is not defined

Solution

Replace with jasmine.createSpy

Error : On lines with .calls[0] some errors such as TypeError: Cannot read property 'args' of undefined

Solution

Replace .calls[0] with .calls.first()

The post Upgrade Jasmine 1.3 to 2.4 appeared first on Techy Things.

Return value:

-1 if not found

0 or higher than 0 as the index of the position found

Remove one part of a string

Method 1:

String.replace(//, "");

Method 2:

var indexEnd = myString.indexOf("CutHERE");

var newString = myString.substring(0, indexEnd);

Difference between String::substring() and String.substr()

substring(start, indexEnd)

With substring() the second parameter is the end index

substr(start, length)

With substr() the second parameter is the length to keep

Remove boundary whitespace : String.trim()

Use this from time to time

The post String manipulations in Javascripts appeared first on Techy Things.

One solution is using jQuery .serialize() function

Method #1: Sent using CGI params key=value pairs:

          var $form = this.$("form");
          var data = $form.serialize(); // becomes text with proper encoding for CGI params

          $.ajax({
            method: "POST",
            url: "/run.php",
            data: data,
            success: function (data)
            {
              var response;
              try {
                response = JSON.parse(data);
                if (response.message !== undefined && response.message.indexOf("Success") >= 0) {
                  notifier.info_x(response.message);
                }
                else {
                  if (response.message !== undefined) {
                    notifier.error_x(response.message);
                  }
                }
              }
              catch (e) {
                notifier.error_x("Could not parse response");
              }
            },
            error: function ()
            {
              notifier.error_x("Failed to send request");
            }
          });

Method #2 Sent using JSON text content (supports better multi-level objects):

          var $form = this.$("form");
          var json = JSON.stringify({ username: this.get("username"), password: this.get("password") });

      $.ajax({
        type: "POST",
        url: this.url(),
        contentType: "application/json",
        data: ,
          $.ajax({
            method: "POST",
            url: "/run.php",
            data: data,
            success: function (data)
            {
              var response;
              try {
                response = JSON.parse(data);
                if (response.message !== undefined && response.message.indexOf("Success") >= 0) {
                  notifier.info_x(response.message);
                }
                else {
                  if (response.message !== undefined) {
                    notifier.error_x(response.message);
                  }
                }
              }
              catch (e) {
                notifier.error_x("Could not parse response");
              }
            },
            error: function ()
            {
              notifier.error_x("Failed to send request");
            }
          });

If you are using PHP to read the JSON, you can use

if ($_SERVER['REQUEST_METHOD'] === "POST" // to create
 || $_SERVER['REQUEST_METHOD'] === "PUT") // to update
{
	$raw_request = file_get_contents('php://input');
	$request = json_decode($raw_request);
	$requestArray = get_object_vars($request);
}

The post Submit a form with ajax appeared first on Techy Things.