JS lesson 2: CSS pseudo class

We can use CSS pseudo class to select items we need.

<select>
<optgroup>
<option selected>1</option>
<option>2</option>
<option>3</option>
</optgroup>
</select>
select option:selected === select > optgroup > option:selected

select option:myproperty  // this is wrong

Javascrint and Jquery way of finding elements
select option:first-child === $(select).find(option).first();
select option:last-child === $(select).find(option).first();

JS lesson 1: var self=this, $.extend, CSS selector

var self=this;

In JS ‘this’ refers to current object where it’s used. However, sometimes we want to use objects that are outside scope. In below example we will do just that:

Note: self is being used in manner of pointer to object that we need

var userItem = {
name: “Yan”,
init: function() {
var self = this; // this == userItem;
$(“#btn”).on(“click”, function(event) {
alert(this.name); // error: this == btn
alert(self.name); // self.name == btn
});
}
};
userItem.init();

JQuery $.extend

$.extend is used to clone add one object to another. This provides sort of expanding the target object with other object.

Object a:

var user = {
name: “Yan”,
address: “Clementi”
}

Object b:

var engineer = $.extent({}, user, {
level: “beginner”
});

Note: engineer now will have it’s on fields and fields from user.

Note2: $.extent({}, user, {——}); means that everything inside {——} and user will be cloned to empty object {} , later it will be assigned to engineer

engineer == {
name: “Yan”,
address: “Clementi”,
level: “beginner”
}

Note 3:  if we don’t use {} but use some other object, new object will be overwritten, see example below:

var manager = $.extent(user, engineer , {
salary: “1”
});

manager == user     // true

Note4: since JQuery api for $.extend overwrites the target, in our case it’s user here, then when we compare user==manager it’s true, because we assigned user with new fields to manager. https://api.jquery.com/jquery.extend/

 CSS selector

<X div class=”question question-enhanced another-class”>
    <X div class=”body”>
       <X div class=”options”>
           <X div id = #1 class=”option”>
           </div>
       </div>
   </div>
</div>
<X div class=”question”>
   <X div class=”body”>
      <X div id = #2 class=”option”>
      </div>
   </div>
</div>

Example1:   .question .body .option (e.g. .option) == #1 and #2
Example2:   .question > .body > .option == #2
Example3:   .question.question-enhanced .body

Note that there is space before . and another version doesn’t have space.
If there is space it means that class are on the same level, but if got no space before . means it belongs to that class. Here is the example

.question.question-enhanced .body          represents

<X div class=”question question-enhanced body”>

.question.question-enhanced.body             represents

<X div class=”question question-enhanced”>

<X div class=”<body”>  </div> </div>

https://www.w3schools.com/cssref/css_selectors.asp

#id   – selects specific id
.class  – selects specific class

How to test your Ajax call using JSP

If you building the web app and want to test your Ajax call by calling the controller here is the snippet you can use.

$(document).ready(function() {
$.ajax({
type: "GET", 
url: "/YourControllerURL"
}).done(function(data) {
console.log(data);
});
});
  1. place the snippet inside the tag inside JSP
  2. in chrome press F12 for developer tools in chrome.
  3. navigate to console tab
  4. in browser navigate to JSP with snippet code.

 

Alternatively, you can view the navigation tab inside the developer tools and see your ajax request and response from controller.

Sweetness of this approach compared to Postman, is that you don’t need to provide all the authorization details.

Note: for testing purpose change your controller to GET method

Note 2: great article to learn about Ajax methods:

https://learn.jquery.com/ajax/jquery-ajax-methods/

Also if you need to pass data to your controller you can use bellow snippet. It returns json, of course your controller must return json too.


var data = {some data you need for your controller ex. id}
$(document).ready(function() {
$.ajax({
type: "GET", 
url: "/YourControllerURL",
contentType: "application/json",
dataType: "json",
data:data
}).done(function (nameOfJsonControllerReturns){ 

console.log(nameOfJsonControllerReturns.data); 

}); 
}); 

Steps to follow after adding new column to table

To add new column to table follow this steps:

  1. write the sql statement
  2. test it in workbench
  3. add it to sprint x->new.sql
  4. add the rollback statement that removes the column to sprint x->rollback.sql
  5. edit the corresponding XXX_init.sql, so that once init runs, it will not be confused with new column

Small hint:

How to copy data from one column to another:

update TABLE set destinationColumn=copyFromColumn;

for this to work remove the safe update from workbench settings.

Edit->Preferences->SQL editor, untick safe updates, reconnect to db

 

Using the Chart.js

I need to use new chart.js to render the pie charts. However, I don’t know how to use it,

these are the steps I followed:

  1. Install node.js from installer then restart
  2. in command prompt: npm install npm -g
  3. add the canvas id to the place where you want to see the chart
    <canvas id="myChart" width="400" height="400"></canvas>
  4. add the script for the chart
    1. <script>
      var ctx = document.getElementById("myChart");
      var myChart = new Chart(ctx, {

      ……………………………..}

new Chart is the constructor for the chart.