JavaScript Archives - Dawid's Blog

How to select the active links using jQuery

There are numerous ways in which one can add active class to a link. One way is to use if statements to do so. Modern JS frameworks such as Angular, React and VueJS support route-link designed to manage routes in the application. The same effect can also be achieved with jQuery. It is certainly a

One way object binding in JS

This is something I've been putting together this weekend. Due to the fact, that ASP.NET is quite reluctant to get an array of results from a request, I've devised an alternative way of sending data to the server via Web.API. There are already several large frameworks that handle data-binding like Knockout and AngularJS, but these

Overriding onClick event in jQuery

Interesting problem today, I tried to override behaviour of an image. The simple approach of replacing behaviour obviously didn't work:

$("#game-image").click(function() { });

1	$("#game-image").click(function() { });

Neither $("#game-image").removeAttr('onclick'); did anything. There is a function unbind.

$("#game-image").unbind('onclick');

1	$("#game-image").unbind('onclick');

This can be followed by the 'overriding' function:

$("#game-image").unbind('onclick').click(function() {return"asdf";};

1	$("#game-image").unbind('onclick').click(function() {return"asdf";};

Using ng-class with Select

Today, I wanted to bind value from a select to a span. Depending on the value selected the colour of the label was supposed to be different. Using AngularJS, I introduced ng-class="". It allows you to change classes conditionally. This is an example:

<select ng-model="observation.status">
   <option value="final">Final</option>
   <option value="preliminary">Preliminary</option>
   <option value="registered">Registered</option>
   <option value="amended">Amended</option>
   <option value="cancelled">Cancelled</option>
   <option value="entered in error">Entered in Error</option>
</select>
<div class="col-xs-4">
   <span class="label" ng-class="{
      'label-success': observation.status == 'final',
      'label-warning': observation.status == 'preliminary',
      'label-primary': observation.status == 'registered',
      'label-info': observation.status == 'amended',
      'label-default': observation.status == 'cancelled',
      'label-danger': observation.status == 'entered in error'}" ng-bind="observation.status"></span>
</div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<option value="final">Final</option>

<option value="preliminary">Preliminary</option>

<option value="registered">Registered</option>

<option value="amended">Amended</option>

<option value="cancelled">Cancelled</option>

<option value="entered in error">Entered in Error</option>

</select>

<span class="label" ng-class="{

'label-success': observation.status == 'final',

'label-warning': observation.status == 'preliminary',

'label-primary': observation.status == 'registered',

'label-info': observation.status == 'amended',

'label-default': observation.status == 'cancelled',

'label-danger': observation.status == 'entered in error'}" ng-bind="observation.status"></span>

</div>

Opening Binary File from the Server using jQuery

Reading binary files in jQuery isn't particulary hard. There are two things really that we have to do. The first one is change the dataType to binary and the second one is setting the processsData to false.

$.ajax({
  url: "/data/some.mp3",
  type: "GET",
  dataType: "binary",
  processData: false,
  success: function(result) {
     //process your data here
  }
});

1

2

3

4

5

6

7

8

9

$.ajax({

url: "/data/some.mp3",

type: "GET",

dataType: "binary",

processData: false,

success: function(result) {

//process your data here

}

});

Category: JavaScript

How to select the active links using jQuery

One way object binding in JS

Overriding onClick event in jQuery

Using ng-class with Select

Opening Binary File from the Server using jQuery

Search

Categories