How to remove first option from select drop down option value

We may get a task sometime to remove the first value from the drop down like Chosse Country, Empty option, --Select-- etc.,

We can have lot of option to remove this. But here we can use simple css style option. Let see the code.

<select name="test">
    <option value="" style="display: none"></option>

    <option value="">Option 2</option>
    <option value="">Option 3</option>
    <option value="">Option 4</option>
    <option value="">Option 5</option>
  </select>

The style:display:none do the job for you!

Load css based on browser identification

Loading a CSS file based on browser is not a good idea, However I will share the below code to identify browser.

Let it to do by javascript by onload method.

<script type="text/javascript">
 //Short code with ternary
 window.onload = function() {

  var link = document.createElement('link');
  link.rel = "stylesheet";
  link.type = "text/css";

  //Browser Detection
  link.href = (navigator.userAgent.indexOf("Chrome") != -1) ?link.href = "./css/grid.css";
    : (!(window.ActiveXObject) && "ActiveXObject" in window) ? link.href = "./css/iegrid.css";
      : "";
  document.querySelector("head").appendChild(link);
 }
</script>

Some people may document.write method, but It will not work in all case. Since document.write will swipes out the screen. So based on your task situation you should use this.

How to send Cookie in Request header

I did one file upload with Form data by using fetch. I tried to send Cookie and content type as multipart/form-data. But its not taking these two attributes in header. Finally I solved it through ajax as well as fetch.

1. If you want to send cookie you must add credentials like below.

fetch('/users', {
  credentials: 'same-origin'
})

Suppose if its a cross origin request, credentials should be like below.

fetch('https://xxxxxxxx.com:4321/users', {
  credentials: 'include'
})

and Finally you dont want to add content type as multipart/form-data. Your request will add this automatically.

2. Suppose if you are using ajax request,  your code should be like below.

$.ajax({
       url : 'xxxxxxxxxxxxxxxxxxxxx',
       type : 'POST',
       data : formData,     // form data appended values
       processData: false,  // tell jQuery not to process the data
       contentType: false,  // tell jQuery not to set contentType -  It will set multipart by request automatically
       success : function(data) {
           console.log(data);
           alert(data);
       }
});


Check Internet explorer and open Network tab (F12) request header. Now all the header attributes were added perfectly.

Chrome may not show cookies in network tab, check Application tab, there cookies will be stored.

Chrome throwing 302 Error and Working fine in Internet Explorer

Ago some days back, I got an issue in chrome browser for one service which is returning a status code error 302. I checked the same in REST Client and this also returning error code 302.

But the same service working fine with IE browser. Initially I tried lot of tried with setting header filed cache etc., But nothing worked.

What are the possibilities for 302 status code error and How to handle it ?

The below are some of the possibilities only. But mostly it will be involved within this.

1. There is redirect issue. possibility, you might have used sendRedirect method instead of forward in java.

2. If you have load balancing then definitely there redirect will happen. The way of handling redirect may produce 302 issue.

3. Chrome throwing 302 exception since it have additional security than IE.

4. Check REST client (Chrome web store) older version, it wont produce this 302 error. But latest Rest client will produce 302 error.

5. Firewall also may produce 302 error, but in this case IE also wont work.

6. If you are using client side request through fetch, you add credential= same-origin. It will solve this issue. It will cookies for your request.

7. Finally , You have an option to play around with the below important attributes.
 Access-Control-Allow-Origin : http://www.xxxxxxx.com

Access-Control-Allow-Credentials : true

React JS - DatePicker

Date Picker

You should install and import the below for date picker.

npm install react-datepicker --save


App.jsx

import React from 'react';
  import DatePicker from 'react-datepicker';
  import moment from 'moment';

  class App extends React.Component {

    constructor(props) {
      super(props);
      this.state = {
        startDate : moment()
      };

      this.handleChange = this.handleChange.bind(this);
      
    }

    handleChange (date) {
      this.setState({
        startDate : date
      });
    }

     render() {
        return (
           <div>
              Hello World!!!
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />

  <br />
          <DatePicker
          selected={this.state.startDate}
          onChange={this.handleChange} />;
           </div>
        );
     }
  }

  export default App;

index.html
 datepicker css added here.

<!DOCTYPE html>
<html lang = "en">

   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
   </head>

<link rel="stylesheet" type="text/css" href="node_modules/react-datepicker/dist/react-datepicker.css"/>

   <body>
      <div id = "app"></div>
      <script src = "index.js"></script>
   </body>

</html>

main.js

Rendered the App from here,

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';


ReactDOM.render(<App />, document.getElementById('app'));

Output: