问:
How to fix Bootstrap4 menu that doesn't get displayed properly on mobile
I created bootstrap 4 page with and the menu displayed properly on desktop but is not displaying well on mobile / tablet

tried some bootstarp classed but none of them works
http://www.siz.co.il/my.php?i=jtmytbllnddm.jpg
on desktop :
http://www.siz.co.il/my.php?i=vdznmltzncwf.jpg

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
    integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="css/style.css">
  <title>Document</title>
</head>
<nav class="navbar navbar-expand-lg navbar-light bg-primary">
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto">
      <form class="form-inline my-2 my-lg-0">
        <button class="btn btn-outline-light my-2 my-sm-0 mr-5" type="submit">Create new auction</button>
      </form>
      <li class="nav-item dropdown mr-5">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
          aria-haspopup="true" aria-expanded="false"><img src="images/avatar2.png" class="my-image rounded-circle"
            alt="">
          Harvey Matthews
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>
<div class="my-div bg-light">
  <div class="row">
    <div class="col-lg-8 col-sm-12">
      <h1 class="ml-5 mt-5">New auction</h1>
    </div>
    <div class="input-group mt-5 mb-4 col-lg-2 col-sm-12">
      <input placeholder="Load template" type="text" class="form-control text-primary" type="text" name="template"
        id="template">
      <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split text-primary"
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="sr-only">Toggle Dropdown</span>
      </button>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-8 col-sm-12">
      <p class="ml-5"> <u><span class="font-weight-bold">Pickup & Delivery details</span></u></p>
      <p class="ml-5 font-weight-bold">Origin</p>
      <div class="form-group ml-4 col-4">
        <label for="companyName">Company name</label>
        <input placeholder="Company name" class="form-control" type="text" name="companyName" id="companyName">
        <p class="text-danger font-weight-bold text-center"></p>
      </div>
    </div>
    <div class="col-lg-4 col-sm-12">
      <p class="text-primary"><i class="fas fa-book fa-lg"></i> Save as template</p>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-3 col-sm-12">
      <div class="form-group ml-4 col">
        <label for="country">Country</label>
        <input placeholder="Country" class="form-control" type="text" name="country" id="country">
        <p class="text-danger font-weight-bold text-center"></p>
      </div>
    </div>
    <div class="col-lg-3 col-sm-12">
      <label class="ml-5" for="companyName2">City</label>
      <div class="input-group ml-4 col">
        <input placeholder="City" type="text" class="form-control" type="text" name="city" id="city">
        <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split"
          data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <span class="sr-only">Toggle Dropdown</span>
        </button>
      </div>
    </div>
    <div class="col-lg-2 col-sm-12">
      <div class="form-group ml-4 col">
        <label for="zipCode">ZIP Code</label>
        <input placeholder="ZIP Code" class="form-control" type="text" name="zipCode" id="zipCode">
        <p class="text-danger font-weight-bold text-center"></p>
      </div>
    </div>
    <div class="col-lg-3 col-sm-12">
      <div class="form-group ml-4 col">
        <label for="address">Address</label>
        <input placeholder="Address" class="form-control" type="text" name="address" id="address">
        <p class="text-danger font-weight-bold text-center"></p>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-3 col-sm-12">
      <p class="ml-5 font-weight-bold">Destination</p>
      <div class="form-group ml-4 col-sm-12">
        <label for="companyName2">Company name</label>
        <input placeholder="Company name" class="form-control" type="text" name="companyName2" id="companyName2">
        <p class="text-danger font-weight-bold text-center"></p>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-3 col-sm-12">
      <label class="ml-5" for="companyName2">Country</label>
      <div class="input-group ml-4 col">
        <input placeholder="Country" type="text" class="form-control" type="text" name="country" id="country">
        <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split"
          data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <span class="sr-only">Toggle Dropdown</span>
        </button>
      </div>
    </div>
    <div class="col-lg-3 col-sm-12">
      <label class="ml-5" for="companyName2">State / Province</label>
      <div class="input-group ml-4 col">
        <input placeholder="State / Province" type="text" class="form-control" type="text" name="state" id="country">
        <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split"
          data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <span class="sr-only">Toggle Dropdown</span>
        </button>
      </div>
    </div>
  </div>
  <div class="row mt-3">
    <div class="col-lg-3 col-sm-12">
      <label class="ml-5" for="city2">City</label>
      <div class="input-group ml-4 col">
        <input placeholder="City" type="text" class="form-control" type="text" name="city2" id="city2">
        <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split"
          data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <span class="sr-only">Toggle Dropdown</span>
        </button>
      </div>
    </div>
    <div class="col-lg-2 col-sm-12">
      <div class="form-group ml-4 col">
        <label for="zipCode2">ZIP Code</label>
        <input placeholder="ZIP Code" class="form-control" type="text" name="zipCode2" id="zipCode2">
        <p class="text-danger font-weight-bold text-center"></p>
      </div>
    </div>
    <div class="col-lg-3 col-sm-12">
      <div class="form-group ml-4 col">
        <label for="address2">Address</label>
        <input placeholder="Address" class="form-control" type="text" name="address2" id="address2">
        <p class="text-danger font-weight-bold text-center"></p>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-1"></div>
    <div class="col-10">
      <hr>
    </div>
    <div class="col-1"></div>
  </div>
  <div class="row align-items-center">
    <div class="col-lg-3 col-sm-12">
      <p class="ml-5 font-weight-bold">Pickup & Delivery dates</p>
      <p class="ml-5">Pickup date</p>
      <div class="form-group ml-4 col-lg-6 col-sm-12">
        <input class="form-control" type="text" placeholder="15/6/19">
      </div>
    </div>
    <div class="col-3"></div>
    <div class="col-lg-3 col-sm-12 mt-5">
      <p class="ml-5">Pickup date</p>
      <div class="form-group ml-4 col-lg-6 col-sm-12">
        <input class="form-control" type="text" placeholder="15/6/19">
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-1"></div>
    <div class="col-10">
      <hr>
    </div>
    <div class="col-1"></div>
  </div>
  <div class="row align-items-center">
    <div class="col-lg-3 col-sm-12">
      <p class="ml-5 font-weight-bold">Pickup & Delivery time frames</p>
      <p class="ml-5">Pickup time frame</p>
      <p class="ml-5">
        <input type="radio" aria-label="Radio button for following text input">
        <span class="mr-2">Normal business hours</span>
        <input type="radio" aria-label="Radio button for following text input">
        <span class="mr-2">Custom </span>
      </p>
      <div class="form-group ml-4 col-lg-4 col-sm-12">
        <input class="form-control" type="text" placeholder="09:00"> -
        <input class="form-control" type="text" placeholder="16:00">
      </div>
    </div>
    <div class="col-3"></div>
    <div class="col-lg-3 col-sm-12 mt-5">
      <p class="ml-5">Delivery time frame</p>
      <p class="ml-5">
        <input type="radio" aria-label="Radio button for following text input">
        <span class="mr-2">Normal business hours</span>
        <input type="radio" aria-label="Radio button for following text input">
        <span class="mr-2">Custom </span>
      </p>
      <div class="form-group ml-4 col-lg-6 col-sm-12">
        <input class="form-control" type="text" placeholder="09:00"> -
        <input class="form-control" type="text" placeholder="16:00">
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-1"></div>
    <div class="col-10">
      <hr>
    </div>
    <div class="col-1"></div>
  </div>
  <div class="row">
    <div class="col-lg-12">
      <p class="ml-5 font-weight-bold">Incoterms</p>
      <p class="ml-5">
        <input class="dap" id="dap" onclick="changeDiv()" type="radio"
          aria-label="Radio button for following text input">
        <span class="mr-2">DAP</span>
        <input type="radio" aria-label="Radio button for following text input">
        <span class="mr-2">DAT</span>
        <input type="radio" aria-label="Radio button for following text input">
        <span class="mr-2">CIP</span>
        <input type="radio" aria-label="Radio button for following text input">
        <span class="mr-2">CPT</span>
        <input type="radio" aria-label="Radio button for following text input">
        <span class="mr-2">FCA</span>
        <input type="radio" aria-label="Radio button for following text input">
        <span class="mr-2">EXW</span>
      </p>
    </div>
  </div>
  <div class="row">
    <div class="col-1"></div>
    <div class="col-10">
      <hr>
    </div>
    <div class="col-1"></div>
  </div>
  <div id="changedDiv" class="row">
    <div class="col">
      <p class="ml-5 font-weight-bold">Shipping mode</p>
      <p class="ml-5">
        <input type="radio" aria-label="Radio button for following text input">
        <span class="mr-2">Air</span>
        <input type="radio" aria-label="Radio button for following text input">
        <span class="mr-2">Land</span>
        <input type="radio" aria-label="Radio button for following text input">
        <span class="mr-2">All</span>
      </p>
    </div>
  </div>
  <hr>
  <div class="row">
    <div class="col-1"></div>
    <div class="col-2">
      <button class="btn btn-outline-primary btn-block">Back</button>
    </div>
    <div class="col-6"></div>
    <div class="col-2">
      <button class="btn btn-primary btn-block">Next</button>
    </div>
    <div class="col-1"></div>
  </div>
</div>
</div>

<body>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>
  <script src="js/script.js"></script>
</body>

</html>
</code>```

I expect to show the navbar properly on mobile.

答:
A few things:

on small devices, the collapsible navigation did show-up but there
was no button to trigger the opening/closing of the collapsible area;

for this button, added the relevant data-target="#navbarSupportedContent" property you had added

your code was outside the  tag

working code snippet below:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">

        </button>

      <form class="form-inline my-2 ">
        <button class="btn btn-outline-light my-2 my-sm-0 mr-5" type="submit">Create new auction</button>
      </form>

         Harvey Matthews

          Action
          Another action

          Something else here

New auction

      <input placeholder="Load template" type="text" class="form-control text-primary" type="text" name="template" id="template">
      <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split text-primary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Toggle Dropdown
            </button>

 Pickup & Delivery details

Origin

        Company name
        <input placeholder="Company name" class="form-control" type="text" name="companyName" id="companyName">

 Save as template

        Country
        <input placeholder="Country" class="form-control" type="text" name="country" id="country">

      City

        <input placeholder="City" type="text" class="form-control" type="text" name="city" id="city">
        <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Toggle Dropdown
              </button>

        ZIP Code
        <input placeholder="ZIP Code" class="form-control" type="text" name="zipCode" id="zipCode">

        Address
        <input placeholder="Address" class="form-control" type="text" name="address" id="address">

Destination

        Company name
        <input placeholder="Company name" class="form-control" type="text" name="companyName2" id="companyName2">

      Country

        <input placeholder="Country" type="text" class="form-control" type="text" name="country" id="country">
        <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Toggle Dropdown
              </button>

      State / Province

        <input placeholder="State / Province" type="text" class="form-control" type="text" name="state" id="country">
        <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Toggle Dropdown
              </button>

      City

        <input placeholder="City" type="text" class="form-control" type="text" name="city2" id="city2">
        <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Toggle Dropdown
              </button>

        ZIP Code
        <input placeholder="ZIP Code" class="form-control" type="text" name="zipCode2" id="zipCode2">

        Address
        <input placeholder="Address" class="form-control" type="text" name="address2" id="address2">

Pickup & Delivery dates

Pickup date

        <input class="form-control" type="text" placeholder="15/6/19">

Pickup date

        <input class="form-control" type="text" placeholder="15/6/19">

Pickup & Delivery time frames

Pickup time frame

        <input type="radio" aria-label="Radio button for following text input">
        Normal business hours
        <input type="radio" aria-label="Radio button for following text input">
        Custom

        <input class="form-control" type="text" placeholder="09:00"> -
        <input class="form-control" type="text" placeholder="16:00">

Delivery time frame

        <input type="radio" aria-label="Radio button for following text input">
        Normal business hours
        <input type="radio" aria-label="Radio button for following text input">
        Custom

        <input class="form-control" type="text" placeholder="09:00"> -
        <input class="form-control" type="text" placeholder="16:00">

Incoterms

        <input class="dap" id="dap" onclick="changeDiv()" type="radio" aria-label="Radio button for following text input">
        DAP
        <input type="radio" aria-label="Radio button for following text input">
        DAT
        <input type="radio" aria-label="Radio button for following text input">
        CIP
        <input type="radio" aria-label="Radio button for following text input">
        CPT
        <input type="radio" aria-label="Radio button for following text input">
        FCA
        <input type="radio" aria-label="Radio button for following text input">
        EXW

Shipping mode

        <input type="radio" aria-label="Radio button for following text input">
        Air
        <input type="radio" aria-label="Radio button for following text input">
        Land
        <input type="radio" aria-label="Radio button for following text input">
        All

      <button class="btn btn-outline-primary btn-block">Back</button>

      <button class="btn btn-primary btn-block">Next</button>

```

Body:
I created bootstrap 4 page with and the menu displayed properly on desktop but is not displaying well on mobile / tablet

tried some bootstarp classed but none of them works
http://www.siz.co.il/my.php?i=jtmytbllnddm.jpg
on desktop :
http://www.siz.co.il/my.php?i=vdznmltzncwf.jpg

<!DOCTYPE html>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
    integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="css/style.css">
  <title>Document</title>

      <form class="form-inline my-2 my-lg-0">
        <button class="btn btn-outline-light my-2 my-sm-0 mr-5" type="submit">Create new auction</button>
      </form>

          Harvey Matthews

          Action
          Another action

          Something else here

New auction

      <input placeholder="Load template" type="text" class="form-control text-primary" type="text" name="template"
        id="template">
      <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split text-primary"
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Toggle Dropdown
      </button>

 Pickup & Delivery details

Origin

        Company name
        <input placeholder="Company name" class="form-control" type="text" name="companyName" id="companyName">

 Save as template

        Country
        <input placeholder="Country" class="form-control" type="text" name="country" id="country">

      City

        <input placeholder="City" type="text" class="form-control" type="text" name="city" id="city">
        <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split"
          data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Toggle Dropdown
        </button>

        ZIP Code
        <input placeholder="ZIP Code" class="form-control" type="text" name="zipCode" id="zipCode">

        Address
        <input placeholder="Address" class="form-control" type="text" name="address" id="address">

Destination

        Company name
        <input placeholder="Company name" class="form-control" type="text" name="companyName2" id="companyName2">

      Country

        <input placeholder="Country" type="text" class="form-control" type="text" name="country" id="country">
        <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split"
          data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Toggle Dropdown
        </button>

      State / Province

        <input placeholder="State / Province" type="text" class="form-control" type="text" name="state" id="country">
        <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split"
          data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Toggle Dropdown
        </button>

      City

        <input placeholder="City" type="text" class="form-control" type="text" name="city2" id="city2">
        <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split"
          data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Toggle Dropdown
        </button>

        ZIP Code
        <input placeholder="ZIP Code" class="form-control" type="text" name="zipCode2" id="zipCode2">

        Address
        <input placeholder="Address" class="form-control" type="text" name="address2" id="address2">

Pickup & Delivery dates

Pickup date

        <input class="form-control" type="text" placeholder="15/6/19">

Pickup date

        <input class="form-control" type="text" placeholder="15/6/19">

Pickup & Delivery time frames

Pickup time frame

        <input type="radio" aria-label="Radio button for following text input">
        Normal business hours
        <input type="radio" aria-label="Radio button for following text input">
        Custom

        <input class="form-control" type="text" placeholder="09:00"> -
        <input class="form-control" type="text" placeholder="16:00">

Delivery time frame

        <input type="radio" aria-label="Radio button for following text input">
        Normal business hours
        <input type="radio" aria-label="Radio button for following text input">
        Custom

        <input class="form-control" type="text" placeholder="09:00"> -
        <input class="form-control" type="text" placeholder="16:00">

Incoterms

        <input class="dap" id="dap" onclick="changeDiv()" type="radio"
          aria-label="Radio button for following text input">
        DAP
        <input type="radio" aria-label="Radio button for following text input">
        DAT
        <input type="radio" aria-label="Radio button for following text input">
        CIP
        <input type="radio" aria-label="Radio button for following text input">
        CPT
        <input type="radio" aria-label="Radio button for following text input">
        FCA
        <input type="radio" aria-label="Radio button for following text input">
        EXW

Shipping mode

        <input type="radio" aria-label="Radio button for following text input">
        Air
        <input type="radio" aria-label="Radio button for following text input">
        Land
        <input type="radio" aria-label="Radio button for following text input">
        All

      <button class="btn btn-outline-primary btn-block">Back</button>

      <button class="btn btn-primary btn-block">Next</button>

I expect to show the navbar properly on mobile.

Body:
A few things:

on small devices, the collapsible navigation did show-up but there
was no button to trigger the opening/closing of the collapsible area;

for this button, added the relevant data-target="#navbarSupportedContent" property you had added

your code was outside the <body> tag

working code snippet below:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">

<nav class="navbar navbar-expand-lg navbar-light bg-primary">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
            <span class="navbar-toggler-icon"></span>
        </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto">
      <form class="form-inline my-2 ">
        <button class="btn btn-outline-light my-2 my-sm-0 mr-5" type="submit">Create new auction</button>
      </form>
      <li class="nav-item dropdown mr-5">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="images/avatar2.png" class="my-image rounded-circle" alt=""> Harvey Matthews
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>
<div class="my-div bg-light">
  <div class="row">
    <div class="col-lg-8 col-sm-12">
      <h1 class="ml-5 mt-5">New auction</h1>
    </div>
    <div class="input-group mt-5 mb-4 col-lg-2 col-sm-12">
      <input placeholder="Load template" type="text" class="form-control text-primary" type="text" name="template" id="template">
      <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split text-primary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <span class="sr-only">Toggle Dropdown</span>
            </button>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-8 col-sm-12">
      <p class="ml-5"> <u><span class="font-weight-bold">Pickup & Delivery details</span></u></p>
      <p class="ml-5 font-weight-bold">Origin</p>
      <div class="form-group ml-4 col-4">
        <label for="companyName">Company name</label>
        <input placeholder="Company name" class="form-control" type="text" name="companyName" id="companyName">
        <p class="text-danger font-weight-bold text-center"></p>
      </div>
    </div>
    <div class="col-lg-4 col-sm-12">
      <p class="text-primary"><i class="fas fa-book fa-lg"></i> Save as template</p>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-3 col-sm-12">
      <div class="form-group ml-4 col">
        <label for="country">Country</label>
        <input placeholder="Country" class="form-control" type="text" name="country" id="country">
        <p class="text-danger font-weight-bold text-center"></p>
      </div>
    </div>
    <div class="col-lg-3 col-sm-12">
      <label class="ml-5" for="companyName2">City</label>
      <div class="input-group ml-4 col">
        <input placeholder="City" type="text" class="form-control" type="text" name="city" id="city">
        <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="sr-only">Toggle Dropdown</span>
              </button>
      </div>
    </div>
    <div class="col-lg-2 col-sm-12">
      <div class="form-group ml-4 col">
        <label for="zipCode">ZIP Code</label>
        <input placeholder="ZIP Code" class="form-control" type="text" name="zipCode" id="zipCode">
        <p class="text-danger font-weight-bold text-center"></p>
      </div>
    </div>
    <div class="col-lg-3 col-sm-12">
      <div class="form-group ml-4 col">
        <label for="address">Address</label>
        <input placeholder="Address" class="form-control" type="text" name="address" id="address">
        <p class="text-danger font-weight-bold text-center"></p>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-3 col-sm-12">
      <p class="ml-5 font-weight-bold">Destination</p>
      <div class="form-group ml-4 col-sm-12">
        <label for="companyName2">Company name</label>
        <input placeholder="Company name" class="form-control" type="text" name="companyName2" id="companyName2">
        <p class="text-danger font-weight-bold text-center"></p>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-3 col-sm-12">
      <label class="ml-5" for="companyName2">Country</label>
      <div class="input-group ml-4 col">
        <input placeholder="Country" type="text" class="form-control" type="text" name="country" id="country">
        <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="sr-only">Toggle Dropdown</span>
              </button>
      </div>
    </div>
    <div class="col-lg-3 col-sm-12">
      <label class="ml-5" for="companyName2">State / Province</label>
      <div class="input-group ml-4 col">
        <input placeholder="State / Province" type="text" class="form-control" type="text" name="state" id="country">
        <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="sr-only">Toggle Dropdown</span>
              </button>
      </div>
    </div>
  </div>
  <div class="row mt-3">
    <div class="col-lg-3 col-sm-12">
      <label class="ml-5" for="city2">City</label>
      <div class="input-group ml-4 col">
        <input placeholder="City" type="text" class="form-control" type="text" name="city2" id="city2">
        <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="sr-only">Toggle Dropdown</span>
              </button>
      </div>
    </div>
    <div class="col-lg-2 col-sm-12">
      <div class="form-group ml-4 col">
        <label for="zipCode2">ZIP Code</label>
        <input placeholder="ZIP Code" class="form-control" type="text" name="zipCode2" id="zipCode2">
        <p class="text-danger font-weight-bold text-center"></p>
      </div>
    </div>
    <div class="col-lg-3 col-sm-12">
      <div class="form-group ml-4 col">
        <label for="address2">Address</label>
        <input placeholder="Address" class="form-control" type="text" name="address2" id="address2">
        <p class="text-danger font-weight-bold text-center"></p>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-1"></div>
    <div class="col-10">
      <hr>
    </div>
    <div class="col-1"></div>
  </div>
  <div class="row align-items-center">
    <div class="col-lg-3 col-sm-12">
      <p class="ml-5 font-weight-bold">Pickup & Delivery dates</p>
      <p class="ml-5">Pickup date</p>
      <div class="form-group ml-4 col-lg-6 col-sm-12">
        <input class="form-control" type="text" placeholder="15/6/19">
      </div>
    </div>
    <div class="col-3"></div>
    <div class="col-lg-3 col-sm-12 mt-5">
      <p class="ml-5">Pickup date</p>
      <div class="form-group ml-4 col-lg-6 col-sm-12">
        <input class="form-control" type="text" placeholder="15/6/19">
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-1"></div>
    <div class="col-10">
      <hr>
    </div>
    <div class="col-1"></div>
  </div>
  <div class="row align-items-center">
    <div class="col-lg-3 col-sm-12">
      <p class="ml-5 font-weight-bold">Pickup & Delivery time frames</p>
      <p class="ml-5">Pickup time frame</p>
      <p class="ml-5">
        <input type="radio" aria-label="Radio button for following text input">
        <span class="mr-2">Normal business hours</span>
        <input type="radio" aria-label="Radio button for following text input">
        <span class="mr-2">Custom </span>
      </p>
      <div class="form-group ml-4 col-lg-4 col-sm-12">
        <input class="form-control" type="text" placeholder="09:00"> -
        <input class="form-control" type="text" placeholder="16:00">
      </div>
    </div>
    <div class="col-3"></div>
    <div class="col-lg-3 col-sm-12 mt-5">
      <p class="ml-5">Delivery time frame</p>
      <p class="ml-5">
        <input type="radio" aria-label="Radio button for following text input">
        <span class="mr-2">Normal business hours</span>
        <input type="radio" aria-label="Radio button for following text input">
        <span class="mr-2">Custom </span>
      </p>
      <div class="form-group ml-4 col-lg-6 col-sm-12">
        <input class="form-control" type="text" placeholder="09:00"> -
        <input class="form-control" type="text" placeholder="16:00">
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-1"></div>
    <div class="col-10">
      <hr>
    </div>
    <div class="col-1"></div>
  </div>
  <div class="row">
    <div class="col-lg-12">
      <p class="ml-5 font-weight-bold">Incoterms</p>
      <p class="ml-5">
        <input class="dap" id="dap" onclick="changeDiv()" type="radio" aria-label="Radio button for following text input">
        <span class="mr-2">DAP</span>
        <input type="radio" aria-label="Radio button for following text input">
        <span class="mr-2">DAT</span>
        <input type="radio" aria-label="Radio button for following text input">
        <span class="mr-2">CIP</span>
        <input type="radio" aria-label="Radio button for following text input">
        <span class="mr-2">CPT</span>
        <input type="radio" aria-label="Radio button for following text input">
        <span class="mr-2">FCA</span>
        <input type="radio" aria-label="Radio button for following text input">
        <span class="mr-2">EXW</span>
      </p>
    </div>
  </div>
  <div class="row">
    <div class="col-1"></div>
    <div class="col-10">
      <hr>
    </div>
    <div class="col-1"></div>
  </div>
  <div id="changedDiv" class="row">
    <div class="col">
      <p class="ml-5 font-weight-bold">Shipping mode</p>
      <p class="ml-5">
        <input type="radio" aria-label="Radio button for following text input">
        <span class="mr-2">Air</span>
        <input type="radio" aria-label="Radio button for following text input">
        <span class="mr-2">Land</span>
        <input type="radio" aria-label="Radio button for following text input">
        <span class="mr-2">All</span>
      </p>
    </div>
  </div>
  <hr>
  <div class="row">
    <div class="col-1"></div>
    <div class="col-2">
      <button class="btn btn-outline-primary btn-block">Back</button>
    </div>
    <div class="col-6"></div>
    <div class="col-2">
      <button class="btn btn-primary btn-block">Next</button>
    </div>
    <div class="col-1"></div>
  </div>
</div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="js/script.js"></script>


来源: stackexchange

问:
json complex schema reusable definitions, $ref validations in nested properties ignored
Trying to learn JSON schemas and I have a complex schema that is all based on relative URL's. When nesting properties call a definitions property defined in another file, the validations sometimes get ignored.

My goal is to basically make reusable definitions and frequently used enums/consts/definitions globally

Assume project tree is:

```<code>-------------------------------------------
| C:/project                              |
| `----main.json (file to be validated)   |
| `----/schemas                           |
|   `----base.json                        |
|   `----datatypes.json                   |
|   `----defs.json                        |
|   `----frequent.json                    |
|   `----/pii                             |
|     `----jobs.json                       |
-------------------------------------------
</code>```

Based on my understanding of how $id works at root level ref, is that it sets the base uri for the schema, where $ref is relative to. However, in some cases, my schema is not validated against false values, while others are. Nested, or otherwise.

datatypes.json

```<code>{
  "$id": "http://project.com/schemas/datatypes.json",
  "$schema" : "http://json-schema.org/draft-07/schema",

  "definitions" : {
    "type_number": {
      "type": "number",
      "default": 0.0
    },

    "type_integer": {
      "type": "integer",
      "default": 0
    },

    "type_nonempty_string" : {
      "type": "string",
      "minLength": 1,
      "pattern": "^([^\\s].*[^\\s]*)$"
    }
  }
}
</code>```

defs.json

```<code>{
  "$id": "http://project.com/schemas/defs.json",
  "$schema": "http://json-schema.org/draft-07/schema",
  "definitions": {
    "number": {
      "$ref": "./datatypes.json#/definitions/type_number"
    },
    "null_number": {
      "oneOf": [
        {
          "$ref": "#/definitions/number"
        },
        {
          "type": "null"
        }
      ]
    },
    "positive_number": {
      "$ref": "#/definitions/number",
      "minimum": 0.0
    },
    "positive_nonzero_number": {
      "$ref": "#/definitions/number",
      "exclusiveMinimum": 0.0
    },
    "integer": {"$ref": "./datatypes.json#/definitions/type_integer"},
    "positive_integer" : {
      "$ref": "#/definitions/integer",
      "minimum" : 0
    },
    "positive_nonzero_integer" : {
      "$ref": "#/definitions/integer",
      "exclusiveMinimum" : 0
    },

    "strict_object": {
      "type": "object",
      "additionalProperties": false
    },
    "nonempty_string": {"$ref": "./datatypes.json#/definitions/type_nonempty_string"},
    "nonempty_string_null" : {
      "oneOf": [
        {
          "$ref": "#/definitions/nonempty_string"
        },
        {
          "type": "null"
        }
      ]
    }
  }
}
</code>```

frequent.json

```<code>{
  "$id": "http://project.com/schemas/frequent.json",
  "$schema" : "http://json-schema.org/draft-07/schema",
  "definitions" : {
    "SEX_TYPES" : {
      "enum" : ["Male", "M","Female","F"]
    },
    "STATES" : {
      "$comment" : "assume this is an emum of states in US",
      "enum" : ["AK","AL","CT"]
    },

    "address" : {
      "$ref" : "./defs.json#/definitions/strict_object",
      "required" : ["street1", "city", "state", "zipcode"],
      "properties" : {
        "street1" : { "$ref" : "./defs.json#/definitions/nonempty_string" },
        "street2" : { "$ref" : "./defs.json#/definitions/nonempty_string" },
        "city" : { "$ref" : "./defs.json#/definitions/nonempty_string" },
        "state" : { "$ref" : "#/definitions/STATES" },
        "zipcode" : { "$ref" : "#/definitions/zipcode" }
      }
    },

    "zipcode": {
      "allOf": [
        {
          "$ref": "./defs.json#/definitions/nonempty_string"
        },
        {
          "pattern": "^(\\d{5})$"
        },
        {
          "not": {
            "pattern": "^(00000)$"
          }
        }
      ]
    }
  }
}
</code>```

base.json

```<code>{
  "$id": "http://project.com/schemas/base.json",
  "$schema" : "http://json-schema.org/draft-07/schema",
  "type": "object",
  "$ref": "./defs.json#/definitions/strict_object",
  "properties": {
    "main": {
      "$ref": "./defs.json#/definitions/strict_object",
      "required": ["age", "sex", "empl_num", "description", "address", "jobs"],
      "properties": {
        "age": {"$ref": "./defs.json#/definitions/positive_nonzero_integer"},
        "sex": {"$ref": "./frequent.json#/definitions/SEX_TYPES" },
        "empl_num" : {"$ref": "./defs.json#/definitions/positive_nonzero_integer"},
        "description": {"$ref": "./defs.json#/definitions/nonempty_string"},
        "jobs" : {"$ref": "pii/jobs.json"},
        "address": {"$ref": "./frequent.json#/definitions/address"}
      }
    }
  }
}
</code>```

pii/jobs.json

```<code>{
  "$id" : "http://project.com/schemas/pii/jobs.json",
  "$schema": "http://json-schema.org/draft-07/schema",
  "type" : "array",
  "minItems": 1,
  "items": {
    "$ref" : "../defs.json#/definitions/strict_object",
    "required": ["description","company","pay_details"],
    "properties" : {
      "description" : { "$ref" : "../defs.json#/definitions/nonempty_string" },
      "company" : {
        "$ref": "../defs.json#/definitions/strict_object",
        "required": ["name","address"],
        "properties": {
          "name" : { "$ref" :  "../defs.json#/definitions/nonempty_string" },
          "address" : {"$ref":  "../frequent.json#/definitions/address"}
        }
      },
      "pay_details" : {
        "$ref" : "../defs.json#/definitions/strict_object",
        "required": ["pay_grade", "salary", "performance_review"],
        "properties": {
          "pay_grade" : { "$ref" : "../defs.json#/definitions/positive_nonzero_integer" },
          "salary" : { "$ref" : "../defs.json#/definitions/positive_nonzero_number" },
          "performance_review" : {
            "$ref" : "../defs.json#/definitions/strict_object",
            "required" : ["previous", "nextDate", "numberOfWriteUps"],
            "properties" : {
              "notes" : { "$ref" : "../defs.json#/definitions/nonempty_string" },
              "numberOfWriteUps" : {"$ref" : "../defs.json#/definitions/positive_integer" },
              "previous" : {
                "$ref" : "../defs.json#/definitions/strict_object",
                "required": ["date", "rating"],
                "properties": {
                  "date" : {
                    "$ref" : "../defs.json#/definitions/nonempty_string",
                    "format" : "date-time"
                  },
                  "rating" : {"$ref" : "../defs.json#/definitions/positive_integer" }
                }
              },
              "nextDate" : {
                "$ref" : "../defs.json#/definitions/nonempty_string",
                "format" : "date-time"
              }
            }
          }
        }
      }
    }
  }
}
</code>```

In intellij, the following is the result: (every single property shown should not be valid, however some are simply ignored and allowed (like negative numbers and nulls etc). I get no warnings/errors about $ref not being able to be resolved. Autocomplete even finishes the relative file name and definition property for me.

edit

After playing around with it some more I found that it is related to the relative URLs. For example, in my pii (personally identifiable information) folder, where jobs schema is located, if I move that schema to the root directory with the other schemas everything is validated properly. To illustrate the new project tree:

```<code>-------------------------------------------
| C:/project                              |
| `----main.json (file to be validated)   |
| `----/schemas                           |
|   `----base.json                        |
|   `----datatypes.json                   |
|   `----defs.json                        |
|   `----frequent.json                    |
|   `----jobs.json                        |
-------------------------------------------
</code>```

For brevity, my schema isn't actually stored at http://project.com. Based on my understanding of $id this doesn't matter, it's just a way for the schemas to communicate with one another. I would like to modularize as much as possible and segregate schemas into their own sub-folders (like pii) but, in my example it does not validate that way.

答:
It looks like you were on the right track, however you cannot use $ref with other keywords in the same object, as they are always ignored when using $ref with draft-7 JSON Schema.

8.3.  Schema References With "$ref"

The "$ref" keyword is used to reference a schema, and provides the
ability to validate recursive structures through self-reference.

An object schema with a "$ref" property MUST be interpreted as a

"$ref" reference.  The value of the "$ref" property MUST be a URI

Reference.  Resolved against the current URI base, it identifies the

URI of a schema to use.  All other properties in a "$ref" object MUST
be ignored.

https://datatracker.ietf.org/doc/html/draft-handrews-json-schema-01#section-8.3

If you want to use $ref with other keywords in the same schema object, you need to in stead create two schema objects and wrap them in an allOf.

ContentLicense: CC BY-SA 4.0

Body:
Trying to learn JSON schemas and I have a complex schema that is all based on relative URL's. When nesting properties call a definitions property defined in another file, the validations sometimes get ignored.

My goal is to basically make reusable definitions and frequently used enums/consts/definitions globally

Assume project tree is:

-------------------------------------------
| C:/project                              |
| `----main.json (file to be validated)   |
| `----/schemas                           |
|   `----base.json                        |
|   `----datatypes.json                   |
|   `----defs.json                        |
|   `----frequent.json                    |
|   `----/pii                             |
|     `----jobs.json                       |
-------------------------------------------

Based on my understanding of how $id works at root level ref, is that it sets the base uri for the schema, where $ref is relative to. However, in some cases, my schema is not validated against false values, while others are. Nested, or otherwise.

datatypes.json

{
  "$id": "http://project.com/schemas/datatypes.json",
  "$schema" : "http://json-schema.org/draft-07/schema",

  "definitions" : {
    "type_number": {
      "type": "number",
      "default": 0.0
    },

    "type_integer": {
      "type": "integer",
      "default": 0
    },

    "type_nonempty_string" : {
      "type": "string",
      "minLength": 1,
      "pattern": "^([^\\s].*[^\\s]*)$"
    }
  }
}

defs.json

{
  "$id": "http://project.com/schemas/defs.json",
  "$schema": "http://json-schema.org/draft-07/schema",
  "definitions": {
    "number": {
      "$ref": "./datatypes.json#/definitions/type_number"
    },
    "null_number": {
      "oneOf": [
        {
          "$ref": "#/definitions/number"
        },
        {
          "type": "null"
        }
      ]
    },
    "positive_number": {
      "$ref": "#/definitions/number",
      "minimum": 0.0
    },
    "positive_nonzero_number": {
      "$ref": "#/definitions/number",
      "exclusiveMinimum": 0.0
    },
    "integer": {"$ref": "./datatypes.json#/definitions/type_integer"},
    "positive_integer" : {
      "$ref": "#/definitions/integer",
      "minimum" : 0
    },
    "positive_nonzero_integer" : {
      "$ref": "#/definitions/integer",
      "exclusiveMinimum" : 0
    },

    "strict_object": {
      "type": "object",
      "additionalProperties": false
    },
    "nonempty_string": {"$ref": "./datatypes.json#/definitions/type_nonempty_string"},
    "nonempty_string_null" : {
      "oneOf": [
        {
          "$ref": "#/definitions/nonempty_string"
        },
        {
          "type": "null"
        }
      ]
    }
  }
}

frequent.json

{
  "$id": "http://project.com/schemas/frequent.json",
  "$schema" : "http://json-schema.org/draft-07/schema",
  "definitions" : {
    "SEX_TYPES" : {
      "enum" : ["Male", "M","Female","F"]
    },
    "STATES" : {
      "$comment" : "assume this is an emum of states in US",
      "enum" : ["AK","AL","CT"]
    },

    "address" : {
      "$ref" : "./defs.json#/definitions/strict_object",
      "required" : ["street1", "city", "state", "zipcode"],
      "properties" : {
        "street1" : { "$ref" : "./defs.json#/definitions/nonempty_string" },
        "street2" : { "$ref" : "./defs.json#/definitions/nonempty_string" },
        "city" : { "$ref" : "./defs.json#/definitions/nonempty_string" },
        "state" : { "$ref" : "#/definitions/STATES" },
        "zipcode" : { "$ref" : "#/definitions/zipcode" }
      }
    },

    "zipcode": {
      "allOf": [
        {
          "$ref": "./defs.json#/definitions/nonempty_string"
        },
        {
          "pattern": "^(\\d{5})$"
        },
        {
          "not": {
            "pattern": "^(00000)$"
          }
        }
      ]
    }
  }
}

base.json

{
  "$id": "http://project.com/schemas/base.json",
  "$schema" : "http://json-schema.org/draft-07/schema",
  "type": "object",
  "$ref": "./defs.json#/definitions/strict_object",
  "properties": {
    "main": {
      "$ref": "./defs.json#/definitions/strict_object",
      "required": ["age", "sex", "empl_num", "description", "address", "jobs"],
      "properties": {
        "age": {"$ref": "./defs.json#/definitions/positive_nonzero_integer"},
        "sex": {"$ref": "./frequent.json#/definitions/SEX_TYPES" },
        "empl_num" : {"$ref": "./defs.json#/definitions/positive_nonzero_integer"},
        "description": {"$ref": "./defs.json#/definitions/nonempty_string"},
        "jobs" : {"$ref": "pii/jobs.json"},
        "address": {"$ref": "./frequent.json#/definitions/address"}
      }
    }
  }
}

pii/jobs.json

{
  "$id" : "http://project.com/schemas/pii/jobs.json",
  "$schema": "http://json-schema.org/draft-07/schema",
  "type" : "array",
  "minItems": 1,
  "items": {
    "$ref" : "../defs.json#/definitions/strict_object",
    "required": ["description","company","pay_details"],
    "properties" : {
      "description" : { "$ref" : "../defs.json#/definitions/nonempty_string" },
      "company" : {
        "$ref": "../defs.json#/definitions/strict_object",
        "required": ["name","address"],
        "properties": {
          "name" : { "$ref" :  "../defs.json#/definitions/nonempty_string" },
          "address" : {"$ref":  "../frequent.json#/definitions/address"}
        }
      },
      "pay_details" : {
        "$ref" : "../defs.json#/definitions/strict_object",
        "required": ["pay_grade", "salary", "performance_review"],
        "properties": {
          "pay_grade" : { "$ref" : "../defs.json#/definitions/positive_nonzero_integer" },
          "salary" : { "$ref" : "../defs.json#/definitions/positive_nonzero_number" },
          "performance_review" : {
            "$ref" : "../defs.json#/definitions/strict_object",
            "required" : ["previous", "nextDate", "numberOfWriteUps"],
            "properties" : {
              "notes" : { "$ref" : "../defs.json#/definitions/nonempty_string" },
              "numberOfWriteUps" : {"$ref" : "../defs.json#/definitions/positive_integer" },
              "previous" : {
                "$ref" : "../defs.json#/definitions/strict_object",
                "required": ["date", "rating"],
                "properties": {
                  "date" : {
                    "$ref" : "../defs.json#/definitions/nonempty_string",
                    "format" : "date-time"
                  },
                  "rating" : {"$ref" : "../defs.json#/definitions/positive_integer" }
                }
              },
              "nextDate" : {
                "$ref" : "../defs.json#/definitions/nonempty_string",
                "format" : "date-time"
              }
            }
          }
        }
      }
    }
  }
}

In intellij, the following is the result: (every single property shown should not be valid, however some are simply ignored and allowed (like negative numbers and nulls etc). I get no warnings/errors about $ref not being able to be resolved. Autocomplete even finishes the relative file name and definition property for me.

edit

After playing around with it some more I found that it is related to the relative URLs. For example, in my pii (personally identifiable information) folder, where jobs schema is located, if I move that schema to the root directory with the other schemas everything is validated properly. To illustrate the new project tree:

-------------------------------------------
| C:/project                              |
| `----main.json (file to be validated)   |
| `----/schemas                           |
|   `----base.json                        |
|   `----datatypes.json                   |
|   `----defs.json                        |
|   `----frequent.json                    |
|   `----jobs.json                        |
-------------------------------------------

For brevity, my schema isn't actually stored at http://project.com. Based on my understanding of $id this doesn't matter, it's just a way for the schemas to communicate with one another. I would like to modularize as much as possible and segregate schemas into their own sub-folders (like pii) but, in my example it does not validate that way.


问:
Angular Cannot reattach ActivatedRouteSnapshot with a different number of children
Here is my routing in a nativescript-angular project:

const routes: Routes = [

    {
        path: "",
        redirectTo: "/tabs/default",
        pathMatch: "full"
    },
    {
        path: "tabs",
        loadChildren: "~/app/modules/tabs/tabs.module#TabsModule"
    },
    {
        path: "login",
        loadChildren: "~/app/modules/login/login.module#LoginModule"
    },
    {
        path: "register",
        loadChildren: "~/app/modules/register/register.module#RegisterModule"
    }

];

@NgModule({
    imports: [NativeScriptRouterModule.forRoot(routes, {
        preloadingStrategy: PreloadAllModules
    })],
    exports: [NativeScriptRouterModule]
})
```

<p>The scenario which leads to the error: First the app starts with tabs route, then I go to the login page, after that I go to register and then again I go to tabs page (and clean the history). After that if I go to login page again and get back to previous one (tabs page), the error occurs.</p>

<p>The error:</p>

```JS: Error: Cannot reattach ActivatedRouteSnapshot with a different number of children
JS:     at setFutureSnapshotsOfActivatedRoutes (file:///data/data/org.nativescript.tns57/files/app/tns_modules/@angular/router/bundles/router.umd.js:1950:19) [angular]
JS:     at setFutureSnapshotsOfActivatedRoutes (file:///data/data/org.nativescript.tns57/files/app/tns_modules/@angular/router/bundles/router.umd.js:1954:13) [angular]
JS:     at createNode (file:///data/data/org.nativescript.tns57/files/app/tns_modules/@angular/router/bundles/router.umd.js:1935:17) [angular]
JS:     at file:///data/data/org.nativescript.tns57/files/app/tns_modules/@angular/router/bundles/router.umd.js:1975:20 [angular]
JS:     at Array.map (<anonymous>) [angular]
JS:     at createOrReuseChildren (file:///data/data/org.nativescript.tns57/files/app/tns_modules/@angular/router/bundles/router.umd.js:1958:30) [angular]
JS:     at createNode (file:///data/data/org...
```

Any idea?

答:
Try updating to nativescript-angular to version 7.2.4 . The repo link that you posted is using version 7.2.3 that contains some issue with routing.

https://github.com/NativeScript/nativescript-angular/pull/1740

Body:
Here is my routing in a nativescript-angular project:

const routes: Routes = [

    {
        path: "",
        redirectTo: "/tabs/default",
        pathMatch: "full"
    },
    {
        path: "tabs",
        loadChildren: "~/app/modules/tabs/tabs.module#TabsModule"
    },
    {
        path: "login",
        loadChildren: "~/app/modules/login/login.module#LoginModule"
    },
    {
        path: "register",
        loadChildren: "~/app/modules/register/register.module#RegisterModule"
    }

];

@NgModule({
    imports: [NativeScriptRouterModule.forRoot(routes, {
        preloadingStrategy: PreloadAllModules
    })],
    exports: [NativeScriptRouterModule]
})

The scenario which leads to the error: First the app starts with tabs route, then I go to the login page, after that I go to register and then again I go to tabs page (and clean the history). After that if I go to login page again and get back to previous one (tabs page), the error occurs.

The error:

JS: Error: Cannot reattach ActivatedRouteSnapshot with a different number of children
JS:     at setFutureSnapshotsOfActivatedRoutes (file:///data/data/org.nativescript.tns57/files/app/tns_modules/@angular/router/bundles/router.umd.js:1950:19) [angular]
JS:     at setFutureSnapshotsOfActivatedRoutes (file:///data/data/org.nativescript.tns57/files/app/tns_modules/@angular/router/bundles/router.umd.js:1954:13) [angular]
JS:     at createNode (file:///data/data/org.nativescript.tns57/files/app/tns_modules/@angular/router/bundles/router.umd.js:1935:17) [angular]
JS:     at file:///data/data/org.nativescript.tns57/files/app/tns_modules/@angular/router/bundles/router.umd.js:1975:20 [angular]
JS:     at Array.map (<anonymous>) [angular]
JS:     at createOrReuseChildren (file:///data/data/org.nativescript.tns57/files/app/tns_modules/@angular/router/bundles/router.umd.js:1958:30) [angular]
JS:     at createNode (file:///data/data/org...

Any idea?


问:
Xamarin forms splash screen with lottie animation
Is it possible to have a lottie animation when the splash screen is launched?

any examples out there on xamarin?

thanks

答:
I don't think it is possible, because there is no code-behind available.

Workaround would be to place a screen after the splash screen and add your Lottie animation there. This way you can also control how long you want to show the (fake) splashscreen.


问:
How do i know which argument has error message when resolving exceptions?
I am trying to resolve exceptions. In python2, i used to write like this:

```<code>        except (Exception,InternalError,SQLAlchemyError) as e:
        message = e.message;
</code>```

But in python3 it gives an error that attribute message is not found. Now i tried this:

```<code>        except (Exception,InternalError,SQLAlchemyError) as e:
        message = e[0]
</code>```

But how do I know which argument e[0], e[1] etc of the exception will hold the message? i need only the message and not all the arguments of the exception.

答:
Instead of e.message, python3 now has e.args which is a tuple of args. This allows developers to return multiple arguments. However if only one argument is passed then essentially e.message is equivalent to e.args[0]

Here is the documentation

Body:
I am trying to resolve exceptions. In python2, i used to write like this:

        except (Exception,InternalError,SQLAlchemyError) as e:
        message = e.message;

But in python3 it gives an error that attribute message is not found. Now i tried this:

        except (Exception,InternalError,SQLAlchemyError) as e:
        message = e[0]

But how do I know which argument e[0], e[1] etc of the exception will hold the message? i need only the message and not all the arguments of the exception.


问:
EINTEGRITY: npm 5.0 integrity check and modernizr.com dependency
I've encountered this error when installing deps of my package:

```<code>$ npm i
npm ERR! code EINTEGRITY
npm ERR! sha1-tU7jWojzuU8MIY2VLAx+BwluNo0= integrity checksum failed when using sha1: wanted sha1-tU7jWojzuU8MIY2VLAx+BwluNo0= but got sha1-oXYP0kzpbhku0KU+phy353lbBhQ=. (26624 bytes)

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/tlenex/.npm/_logs/2017-06-22T10_18_19_773Z-debug.log
</code>```

the problem is with my Modernizr dependency:

```<code>"dependencies": {
  "Modernizr": "https://modernizr.com/download?setclasses-flash"
}
</code>```

is there any way to solve this or ignore this integrity check?

Currently I have to run

```<code>npm i https://modernizr.com/download?setclasses-flash
</code>```

again to get things working, which overrides the "integrity" field for "Modernizr" in my package-lock.json.
This may happen every time there is a change in Modernizr package fetched from this link and my package dependencies need to be reinstalled (for example, each time on CI build)

If there is no other way of solving this? I hope I wont have to place package-lock.json in my .gitignore file :(

More data about my enviroment:

```<code>$ npm -v
5.0.3
$ node -v
v6.11.0
</code>```

答:
$ rm -rf package-lock.json node_modules

$ npm install --cache /tmp/empty-npm-cache

If this fixes it, clear your global npm cache to fix the corruption.

ContentLicense: CC BY-SA 3.0

Body:
I've encountered this error when installing deps of my package:

$ npm i
npm ERR! code EINTEGRITY
npm ERR! sha1-tU7jWojzuU8MIY2VLAx+BwluNo0= integrity checksum failed when using sha1: wanted sha1-tU7jWojzuU8MIY2VLAx+BwluNo0= but got sha1-oXYP0kzpbhku0KU+phy353lbBhQ=. (26624 bytes)

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/tlenex/.npm/_logs/2017-06-22T10_18_19_773Z-debug.log

the problem is with my Modernizr dependency:

"dependencies": {
  "Modernizr": "https://modernizr.com/download?setclasses-flash"
}

is there any way to solve this or ignore this integrity check?

Currently I have to run

npm i https://modernizr.com/download?setclasses-flash

again to get things working, which overrides the "integrity" field for "Modernizr" in my package-lock.json.
This may happen every time there is a change in Modernizr package fetched from this link and my package dependencies need to be reinstalled (for example, each time on CI build)

If there is no other way of solving this? I hope I wont have to place package-lock.json in my .gitignore file :(

More data about my enviroment:

$ npm -v
5.0.3
$ node -v
v6.11.0


问:
Nusoap with https
I am unsure if there is any difference for PHP-Nusoap client in sending web services request to http and https. For the user testing, the client was using http://xxx.xxx.xxx.xxx:3833/ws/ws.svc?wsdl which was working fine. However when the client moved to the production server with https (replace the http in previous link with https) I don't get any reply.

Thanks in advance

答:
I had the same problem, as it was working fine on http, but wasn't on https. Just to share my whole programming path here, to help others.

I originally followed this tutorial: php webservice with nusoap and c#. Only thing he doesn't say in the tutorial is that you should put all the php code in one php file (but ok, it might be just straightforward really, so no real complaints on that one).

I first tried this on http, and I was happy it worked, but later I had to move to ssl, and since I was testing it on my local server I had a selfsigned certificate, and I got the error: "The underlying connection was closed: Could not establish trust relationship for the SSL/TLS secure channel."

I googled and finally found the solution on this link here: damir dobric blog

Basically you should add the line:

```<code>ServicePointManager.ServerCertificateValidationCallback +=
new System.Net.Security.RemoteCertificateValidationCallback(
customXertificateValidation);
</code>```

and add the implementation of the function customXertificateValidation to return true (this is what I did for testing purposes).

Ok, I do hope this helps someone, cause it got me stressed for a week!

ContentLicense: CC BY-SA 2.5

Title: Nusoap with https

Body:
I had the same problem, as it was working fine on http, but wasn't on https. Just to share my whole programming path here, to help others.

I originally followed this tutorial: php webservice with nusoap and c#. Only thing he doesn't say in the tutorial is that you should put all the php code in one php file (but ok, it might be just straightforward really, so no real complaints on that one).

I first tried this on http, and I was happy it worked, but later I had to move to ssl, and since I was testing it on my local server I had a selfsigned certificate, and I got the error: "The underlying connection was closed: Could not establish trust relationship for the SSL/TLS secure channel."

I googled and finally found the solution on this link here: damir dobric blog

Basically you should add the line:

ServicePointManager.ServerCertificateValidationCallback +=
new System.Net.Security.RemoteCertificateValidationCallback(
customXertificateValidation);

and add the implementation of the function customXertificateValidation to return true (this is what I did for testing purposes).

Ok, I do hope this helps someone, cause it got me stressed for a week!


问:
Wiener filter failed for blurry image by same size convolution
I'm testing Wiener filter in MATLAB to restore a blurred image. I was using conv2() to blur the original image. If I use the 'full' option for conv2(), everything works well. But when I change to 'same' or 'valid', suddenly a lot of artifacts appeared in the restored image and Wiener filter failed. Please see below for blurred image, restoration from 'full' convolution, restoration from 'same' convolution.

Here's my implementation of the Wiener filter:

```<code>% load image
img = rgb2gray(imread('cameraman.jpg'));
[W, H] = size(img);
dim = 300;
img_fft = fft2(img,dim,dim);
% create blur kernel
kernel = ones(5) / 25;
kernel_fft = fft2(kernel,dim,dim);
% The option here makes huge difference 'same'/'full'/'valid'
img_blur = conv2(img,kernel,'same');
img_blur_fft = fft2(img_blur,dim,dim);
% Wiener filtering
k = 1e-5;
kernel_fft_conj = conj(kernel_fft);
img_wiener_freq = kernel_fft_conj .* img_blur_fft ./ (kernel_fft .* kernel_fft_conj + k);
img_wiener_ifft = ifft2(img_wiener_freq);
img_wiener_ifft = img_wiener_ifft(1:W,1:H);
</code>```

As in real life the blurred image never has the form from circular or full convolution, how can I properly implement Wiener filter so it doesn't depends on the border of the image?

答:
You have chosen a very small value for the regularization parameter k. This works fine in the 'full' case because there is no noise and the input exactly matches the expected. However, in the 'same' case the input does not exactly match. If you were to use a circular convolution (e.g. by multiplication in the Fourier domain) then you would also get an exact result.

The regularization parameter exists to prevent small deviations from blowing up and corrupting the whole output image.

I got reasonable results using k = 1e-2 (1e-1 leaves the image blurry, 1e-3 still shows a lot of artefacts throughout the image, but it is possible to further fine-tune this value, I have not put more effort in than that).

This is the code I used, there are some important differences:

img = imread('cameraman.tif');
% create blur kernel
kernel = ones(5) / 25;
% The option here makes huge difference 'same'/'full'/'valid'
img_blur = conv2(img,kernel,'same');
img_blur_fft = fft2(img_blur);
% Wiener filtering
kernel_fft = padarray(kernel,size(img)-size(kernel),0,'post');
kernel_fft = circshift(kernel_fft,-floor(size(kernel)/2));
kernel_fft = fft2(kernel_fft);
k = 1e-2;
kernel_fft_conj = conj(kernel_fft);
img_wiener_freq = kernel_fft_conj .* img_blur_fft ./ (kernel_fft .* kernel_fft_conj + k);
img_wiener_ifft = ifft2(img_wiener_freq);
```

Notice that I do not use the size parameters to the fft2 and ifft2 functions. It is always best to not pad images with zeros in this case.

The kernel image was padded in a very specific way. The FFT assumes that the origin is in the top-left pixel of the input. fft2(kernel,dim,dim) leads to padding the kernel to the right and bottom with zeros, but this leaves the kernel shifted with respect the FFT's origin. This shift causes the deconvolve image to be shifted as well (by only 2 pixels, it's hard to notice, but look at img_wiener_ifft-double(img) for OP's code and this code to see this shift).

Body:
I'm testing Wiener filter in MATLAB to restore a blurred image. I was using conv2() to blur the original image. If I use the 'full' option for conv2(), everything works well. But when I change to 'same' or 'valid', suddenly a lot of artifacts appeared in the restored image and Wiener filter failed. Please see below for blurred image, restoration from 'full' convolution, restoration from 'same' convolution.

Here's my implementation of the Wiener filter:

% load image
img = rgb2gray(imread('cameraman.jpg'));
[W, H] = size(img);
dim = 300;
img_fft = fft2(img,dim,dim);
% create blur kernel
kernel = ones(5) / 25;
kernel_fft = fft2(kernel,dim,dim);
% The option here makes huge difference 'same'/'full'/'valid'
img_blur = conv2(img,kernel,'same');
img_blur_fft = fft2(img_blur,dim,dim);
% Wiener filtering
k = 1e-5;
kernel_fft_conj = conj(kernel_fft);
img_wiener_freq = kernel_fft_conj .* img_blur_fft ./ (kernel_fft .* kernel_fft_conj + k);
img_wiener_ifft = ifft2(img_wiener_freq);
img_wiener_ifft = img_wiener_ifft(1:W,1:H);

As in real life the blurred image never has the form from circular or full convolution, how can I properly implement Wiener filter so it doesn't depends on the border of the image?

Body:
You have chosen a very small value for the regularization parameter k. This works fine in the 'full' case because there is no noise and the input exactly matches the expected. However, in the 'same' case the input does not exactly match. If you were to use a circular convolution (e.g. by multiplication in the Fourier domain) then you would also get an exact result.

The regularization parameter exists to prevent small deviations from blowing up and corrupting the whole output image.

I got reasonable results using k = 1e-2 (1e-1 leaves the image blurry, 1e-3 still shows a lot of artefacts throughout the image, but it is possible to further fine-tune this value, I have not put more effort in than that).

This is the code I used, there are some important differences:

img = imread('cameraman.tif');
% create blur kernel
kernel = ones(5) / 25;
% The option here makes huge difference 'same'/'full'/'valid'
img_blur = conv2(img,kernel,'same');
img_blur_fft = fft2(img_blur);
% Wiener filtering
kernel_fft = padarray(kernel,size(img)-size(kernel),0,'post');
kernel_fft = circshift(kernel_fft,-floor(size(kernel)/2));
kernel_fft = fft2(kernel_fft);
k = 1e-2;
kernel_fft_conj = conj(kernel_fft);
img_wiener_freq = kernel_fft_conj .* img_blur_fft ./ (kernel_fft .* kernel_fft_conj + k);
img_wiener_ifft = ifft2(img_wiener_freq);

Notice that I do not use the size parameters to the fft2 and ifft2 functions. It is always best to not pad images with zeros in this case.

The kernel image was padded in a very specific way. The FFT assumes that the origin is in the top-left pixel of the input. fft2(kernel,dim,dim) leads to padding the kernel to the right and bottom with zeros, but this leaves the kernel shifted with respect the FFT's origin. This shift causes the deconvolve image to be shifted as well (by only 2 pixels, it's hard to notice, but look at img_wiener_ifft-double(img) for OP's code and this code to see this shift).


问:
Selenium webdriver doesn't interpret the markup as a browser does, I can't load all HTML elements in the DOM as a browser does
I would like to automate the authentication process in https://appleid.apple.com/ using java webdriver selenium, but html elements of the form doesn't loaded in the DOM

to my knowledge, Selenium webdriver interpret the markup as a browser does.
And It apply the CSS styles, run the JavaScript and the dynamically
rendered content be added to the DOM

Why HTML elements are not loaded in the DOM ?

How can I proceed, to fix it and load all elements in the DOM, exactly like a browser ?

N.B : https://appleid.apple.com/ website use Mustache.JS (logic-less template)

```<code> public static void main(String[] args) {

    System.setProperty("webdriver.chrome.driver", "chromedriver.exe");
    ChromeOptions options = new ChromeOptions();
    options.addArguments("--headless", "--disable-gpu", "--window-size=1920,1200", "--ignore-certificate-errors");
    WebDriver driver = new ChromeDriver(options);
    driver.get("https://appleid.apple.com/");
    waitForPageLoadComplete(driver, 30);
    //can't found input name element
    WebElement inputName = driver.findElement(By.id("account_name_text_field"));
    System.out.println(driver.getPageSource());
}
</code>```

答:
The element you are trying to find is inside an iFrame.  You will need to switch to this iFrame first and then proceed with finding the element as you already have.

```<code>driver.switchTo().frame("aid-auth-widget-iFrame");

WebElement inputName = driver.findElement(By.id("account_name_text_field"));
</code>```

You can find some additional information about switching to iFrames here:  https://www.guru99.com/handling-iframes-selenium.html

Body:
I would like to automate the authentication process in https://appleid.apple.com/ using java webdriver selenium, but html elements of the form doesn't loaded in the DOM

to my knowledge, Selenium webdriver interpret the markup as a browser does.
And It apply the CSS styles, run the JavaScript and the dynamically
rendered content be added to the DOM

Why HTML elements are not loaded in the DOM ?

How can I proceed, to fix it and load all elements in the DOM, exactly like a browser ?

N.B : https://appleid.apple.com/ website use Mustache.JS (logic-less template)

 public static void main(String[] args) {

    System.setProperty("webdriver.chrome.driver", "chromedriver.exe");
    ChromeOptions options = new ChromeOptions();
    options.addArguments("--headless", "--disable-gpu", "--window-size=1920,1200", "--ignore-certificate-errors");
    WebDriver driver = new ChromeDriver(options);
    driver.get("https://appleid.apple.com/");
    waitForPageLoadComplete(driver, 30);
    //can't found input name element
    WebElement inputName = driver.findElement(By.id("account_name_text_field"));
    System.out.println(driver.getPageSource());
}

Body:
The element you are trying to find is inside an iFrame.  You will need to switch to this iFrame first and then proceed with finding the element as you already have.

driver.switchTo().frame("aid-auth-widget-iFrame");

WebElement inputName = driver.findElement(By.id("account_name_text_field"));

You can find some additional information about switching to iFrames here:  https://www.guru99.com/handling-iframes-selenium.html


问:
React Router with Path Params Not working
I have a react BrowserRouter with the following configuration.

```<code><BrowserRouter>
        <div>
            <Switch>
                <Route path={`/`} component={Home} exact/>
                <Route path={`/about`} render={(props) => <About {...props}/>} exact/>
                <Route path={`/products/:id/:slug`} render={(props) => <Products {...props}/>} exact/>
            </Switch>
        </div>
</code>```

In the About Page there are products with the following  tag. If I click a link, the url changes and Product page is getting rendered correctly.

```<code><Link to={'/products/' + product.id + '/' + product.slug>{product.name }</Link>
</code>```

But when I directly Land to Product page using the exact URL. rendering won't work.

```<code> e.g localhost:3000/products/123/books
</code>```

Any idea what's causing the issue?

答:
In your product component use

if component is statefull component
this.props.match.params.id for id = 123
this.props.match.params.slug for slug = books

if component is stateless component
then you need to use "withRouter" to make above line available
import { withRouter } from "react-router";

and wrap your function in this method

const MyComponent = () => {}
export default withRouter(MyComponent)

It should work!!!

Body:
I have a react BrowserRouter with the following configuration.

<BrowserRouter>

            <Switch>
                <Route path={`/`} component={Home} exact/>
                <Route path={`/about`} render={(props) => <About {...props}/>} exact/>
                <Route path={`/products/:id/:slug`} render={(props) => <Products {...props}/>} exact/>
            </Switch>

In the About Page there are products with the following  tag. If I click a link, the url changes and Product page is getting rendered correctly.

<Link to={'/products/' + product.id + '/' + product.slug>{product.name }</Link>

But when I directly Land to Product page using the exact URL. rendering won't work.

 e.g localhost:3000/products/123/books

Any idea what's causing the issue?


问:
RegEx for replacing part of a string in R
I am trying to do an exact pattern match using the gsub/sub and replace function. I am not getting the desired response. I am trying to remove the .x and .y from the names without affecting other names.

```<code>name = c("company", "deriv.x", "isConfirmed.y")
new.name = gsub(".x$|.y$", "", name)
new.name
[1] "compa"       "deriv"       "isConfirmed"
</code>```

company has become compa.

I have also tried

```<code>remove = c(".x", ".y")
replace(name, name %in% remove, "")
[1] "company"    "deriv.x"    "isConfirmed.y"
</code>```

I would like the outcome to be.
"company", "deriv", "isConfirmed"

How do I solve this problem?

答:
The dot matches any character except a newline ao .x$|.y$ would also match the ny in company

There is no need for any grouping structure to match a dot followed by x or y. You could match a dot and match either x or y using a character class:

```<code>\\.[xy]
</code>```

Regex demo | R demo

And replace with an empty string:

```<code>name = c("company", "deriv.x", "isConfirmed.y")
new.name = gsub("\\.[xy]", "", name)
new.name
</code>```

Result

```<code>[1] "company"     "deriv"       "isConfirmed"
</code>```

Body:
I am trying to do an exact pattern match using the gsub/sub and replace function. I am not getting the desired response. I am trying to remove the .x and .y from the names without affecting other names.

name = c("company", "deriv.x", "isConfirmed.y")
new.name = gsub(".x$|.y$", "", name)
new.name
[1] "compa"       "deriv"       "isConfirmed"

company has become compa.

I have also tried

remove = c(".x", ".y")
replace(name, name %in% remove, "")
[1] "company"    "deriv.x"    "isConfirmed.y"

I would like the outcome to be.
"company", "deriv", "isConfirmed"

How do I solve this problem?

Body:
The dot matches any character except a newline ao .x$|.y$ would also match the ny in company

There is no need for any grouping structure to match a dot followed by x or y. You could match a dot and match either x or y using a character class:

\\.[xy]

Regex demo | R demo

And replace with an empty string:

name = c("company", "deriv.x", "isConfirmed.y")
new.name = gsub("\\.[xy]", "", name)
new.name

Result

[1] "company"     "deriv"       "isConfirmed"


问:
Python JSON Google Translator extraction problem
I am trying to extract the JSON object in python using Simplejson. But I am getting the following error.

```<code>Traceback (most recent call last):
  File "Translator.py", line 42, in <module>
    main()
  File "Translator.py", line 38, in main
    parse_json(trans_text)
  File "Translator.py", line 27, in parse_json
    result = json['translations']['translatedText']
TypeError: list indices must be integers, not str
</code>```

This is my JSON object looks like,

```<code>{'translations': [{'translatedText': 'fleur'}, {'translatedText': 'voiture'}]}
</code>```

and this is my python piece of code for it.

```<code>def parse_json(trans_text):
    json = simplejson.loads(str(trans_text).replace("'", '"'))
    result = json['translations']['translatedText']
    print result
</code>```

any idea on it?

答:
json['translations'] is a list by your definition, so its indices must be integers

to get a list of translations:

```<code>translations = [x['translatedText'] for x in json['translations']]
</code>```

another way:

```<code>translations  = map(lambda x: x['translatedText'], json['translations'])
</code>```

Body:
I am trying to extract the JSON object in python using Simplejson. But I am getting the following error.

Traceback (most recent call last):
  File "Translator.py", line 42, in <module>
    main()
  File "Translator.py", line 38, in main
    parse_json(trans_text)
  File "Translator.py", line 27, in parse_json
    result = json['translations']['translatedText']
TypeError: list indices must be integers, not str

This is my JSON object looks like,

{'translations': [{'translatedText': 'fleur'}, {'translatedText': 'voiture'}]}

and this is my python piece of code for it.

def parse_json(trans_text):
    json = simplejson.loads(str(trans_text).replace("'", '"'))
    result = json['translations']['translatedText']
    print result

any idea on it?

Body:
json['translations'] is a list by your definition, so its indices must be integers

to get a list of translations:

translations = [x['translatedText'] for x in json['translations']]

another way:

translations  = map(lambda x: x['translatedText'], json['translations'])


问:
Migration Angular 5 to angular 7
I have migrated from angular 5 to Angular 7. After that I have a problem with my RxJs operation like observable and my @ngrx/store.
Here is my error:</p>

```<code>ERROR in node_modules/@ngrx/store/src/actions_subject.d.ts(2,10): error TS2305: Module C:/Users/AbousyllabaNdiaye/Documents/amundi/ClientAmundiFileIntegration/node_modules/rxjs/BehaviorSubject"' has no exported member 'BehaviorSubject'.
node_modules/@ngrx/store/src/reducer_manager.d.ts(2,10): error TS2305: Module '"C:/Users/AbousyllabaNdiaye/Documents/amundi/ClientAmundiFileIntegration/node_modules/rxjs/BehaviorSubject"' has no exported member 'BehaviorSubject'.
node_modules/@ngrx/store/src/reducer_manager.d.ts(3,10): error TS2305: Module '"C:/Users/AbousyllabaNdiaye/Documents/amundi/ClientAmundiFileIntegration/node_modules/rxjs/Observable"' has no exported member 'Observable'.
node_modules/@ngrx/store/src/scanned_actions_subject.d.ts(2,10): error TS2305: Module '"C:/Users/AbousyllabaNdiaye/Documents/amundi/ClientAmundiFileIntegration/node_modules/rxjs/Subject"' has no exported member 'Subject'.
node_modules/@ngrx/store/src/state.d.ts(2,10): error TS2305: Module '"C:/Users/AbousyllabaNdiaye/Documents/amundi/ClientAmundiFileIntegration/node_modules/rxjs/BehaviorSubject"' has no exported member 'BehaviorSubject'.
node_modules/@ngrx/store/src/state.d.ts(3,10): error TS2305: Module '"C:/Users/AbousyllabaNdiaye/Documents/amundi/ClientAmundiFileIntegration/node_modules/rxjs/Observable"' has no exported member 'Observable'.
node_modules/@ngrx/store/src/store.d.ts(2,10): error TS2305: Module '"C:/Users/AbousyllabaNdiaye/Documents/amundi/ClientAmundiFileIntegration/node_modules/rxjs/Observer"' has no exported member 'Observer'.
node_modules/@ngrx/store/src/store.d.ts(3,10): error TS2305: Module '"C:/Users/AbousyllabaNdiaye/Documents/amundi/ClientAmundiFileIntegration/node_modules/rxjs/Observable"' has no exported member 'Observable'.
node_modules/@ngrx/store/src/store.d.ts(4,10): error TS2305: Module '"C:/Users/AbousyllabaNdiaye/Documents/amundi/ClientAmundiFileIntegration/node_modules/rxjs/Operator"' has no exported member 'Operator'.
node_modules/rxjs/BehaviorSubject.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/BehaviorSubject'.
node_modules/rxjs/Observable.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observable'.
node_modules/rxjs/Observer.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observer'.
node_modules/rxjs/Operator.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Operator'.
node_modules/rxjs/Subject.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Subject'.
src/app/habilitation/habilitation.component.ts(96,36): error TS2339: Property 'subscribe' does not exist on type 'Store<Principal>'.
src/app/sidebare/sidebare.component.ts(17,36): error TS2339: Property 'subscribe' does not exist on type 'Store<Principal>'.
</code>```

答:
Please follow the Below points while upgrading angular 5 to 7

Angular Update Guide | 5.2 -> 7.2 for Advanced Apps

Before Updating

1) If you import any animations services or tools from @angular/core, you should import them from @angular/animations

2) Replace ngOutletContext with ngTemplateOutletContext.

3) Replace CollectionChangeRecord with IterableChangeRecord

4) Anywhere you use Renderer, now use Renderer2

5) If you use preserveQueryParams, instead use queryParamsHandling

6) If you use the legacy HttpModule and the Http service, switch to HttpClientModule and the HttpClient service. HttpClient simplifies the default ergonomics (You don't need to map to json anymore) and now supports typed return values and interceptors. Read more on angular.io

7) If you use DOCUMENT from @angular/platform-browser, you should start to import this from @angular/common

8) Anywhere you use ReflectiveInjector, now use StaticInjector

9) Choose a value of off for preserveWhitespaces in your tsconfig.json under the angularCompilerOptions key to gain the benefits of this setting, which was set to off by default in v6.

During the Update

1) Make sure you are using Node 8 or later

2) Update your Angular CLI globally and locally, and migrate the configuration to the new angular.json format by running the following:

npm install -g @angular/cli
npm install @angular/cli
ng update @angular/cli

3) Update any scripts you may have in your package.json to use the latest Angular CLI commands. All CLI commands now use two dashes for flags (eg ng build --prod --source-map) to be POSIX compliant.

4) Update all of your Angular framework packages to v6, and the correct version of RxJS and TypeScript.

ng update @angular/core

After the update, TypeScript and RxJS will more accurately flow types across your application, which may expose existing errors in your application's typings

5) In Angular Forms, AbstractControl#statusChanges now emits an event of PENDING when you call AbstractControl#markAsPending. Ensure that if you are filtering or checking events from statusChanges that you account for the new event when calling markAsPending.

6) If you use totalTime from an AnimationEvent within a disabled Zone, it will no longer report a time of 0. To detect if an animation event is reporting a disabled animation then the event.disabled property can be used instead.

7) ngModelChange is now emitted after the value/validity is updated on its control instead of before to better match expectations. If you rely on the order of these events, you will need to begin tracking the old value in your component.

8) Update Angular Material to the latest version.

ng update @angular/material

This will also automatically migrate deprecated APIs.

9) Use ng update or your normal package manager tools to identify and update other dependencies.

10) If you have TypeScript configured to be strict (if you have set strict to true in your tsconfig.json file), update your tsconfig.json to disable strictPropertyInitialization or move property initialization from ngOnInit to your constructor. You can learn more about this flag on the TypeScript 2.7 release notes.

11) Remove deprecated RxJS 6 features using rxjs-tslint auto update rules

For most applications this will mean running the following two commands:

npm install -g rxjs-tslint
rxjs-5-to-6-migrate -p src/tsconfig.app.json

12) Angular now uses TypeScript 3.1, read more about any potential breaking changes: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-1.html

13) Angular has now added support for Node 10: https://nodejs.org/en/blog/release/v10.0.0/

14) Update to v7 of the core framework and CLI by running ng update @angular/cli @angular/core in your terminal

15) Update Angular Material to v7 by running ng update @angular/material in your terminal. You should test your application for sizing and layout changes.

16) If you use screenshot tests, you'll need to regenerate your screenshot golden files as many minor visual tweaks have landed

After the Update

1) Once you and all of your dependencies have updated to RxJS 6, remove rxjs-compat.

npm uninstall rxjs-compat

2) If you use the Angular Service worker, migrate any versionedFiles to the files array. The behavior is the same.

3) Stop using matRippleSpeedFactor and baseSpeedFactor for ripples, using Animation config instead.

Title: Migration Angular 5 to angular 7

Body:
I have migrated from angular 5 to Angular 7. After that I have a problem with my RxJs operation like observable and my @ngrx/store.
Here is my error:

ERROR in node_modules/@ngrx/store/src/actions_subject.d.ts(2,10): error TS2305: Module C:/Users/AbousyllabaNdiaye/Documents/amundi/ClientAmundiFileIntegration/node_modules/rxjs/BehaviorSubject"' has no exported member 'BehaviorSubject'.
node_modules/@ngrx/store/src/reducer_manager.d.ts(2,10): error TS2305: Module '"C:/Users/AbousyllabaNdiaye/Documents/amundi/ClientAmundiFileIntegration/node_modules/rxjs/BehaviorSubject"' has no exported member 'BehaviorSubject'.
node_modules/@ngrx/store/src/reducer_manager.d.ts(3,10): error TS2305: Module '"C:/Users/AbousyllabaNdiaye/Documents/amundi/ClientAmundiFileIntegration/node_modules/rxjs/Observable"' has no exported member 'Observable'.
node_modules/@ngrx/store/src/scanned_actions_subject.d.ts(2,10): error TS2305: Module '"C:/Users/AbousyllabaNdiaye/Documents/amundi/ClientAmundiFileIntegration/node_modules/rxjs/Subject"' has no exported member 'Subject'.
node_modules/@ngrx/store/src/state.d.ts(2,10): error TS2305: Module '"C:/Users/AbousyllabaNdiaye/Documents/amundi/ClientAmundiFileIntegration/node_modules/rxjs/BehaviorSubject"' has no exported member 'BehaviorSubject'.
node_modules/@ngrx/store/src/state.d.ts(3,10): error TS2305: Module '"C:/Users/AbousyllabaNdiaye/Documents/amundi/ClientAmundiFileIntegration/node_modules/rxjs/Observable"' has no exported member 'Observable'.
node_modules/@ngrx/store/src/store.d.ts(2,10): error TS2305: Module '"C:/Users/AbousyllabaNdiaye/Documents/amundi/ClientAmundiFileIntegration/node_modules/rxjs/Observer"' has no exported member 'Observer'.
node_modules/@ngrx/store/src/store.d.ts(3,10): error TS2305: Module '"C:/Users/AbousyllabaNdiaye/Documents/amundi/ClientAmundiFileIntegration/node_modules/rxjs/Observable"' has no exported member 'Observable'.
node_modules/@ngrx/store/src/store.d.ts(4,10): error TS2305: Module '"C:/Users/AbousyllabaNdiaye/Documents/amundi/ClientAmundiFileIntegration/node_modules/rxjs/Operator"' has no exported member 'Operator'.
node_modules/rxjs/BehaviorSubject.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/BehaviorSubject'.
node_modules/rxjs/Observable.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observable'.
node_modules/rxjs/Observer.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observer'.
node_modules/rxjs/Operator.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Operator'.
node_modules/rxjs/Subject.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Subject'.
src/app/habilitation/habilitation.component.ts(96,36): error TS2339: Property 'subscribe' does not exist on type 'Store<Principal>'.
src/app/sidebare/sidebare.component.ts(17,36): error TS2339: Property 'subscribe' does not exist on type 'Store<Principal>'.


问:
adding searchBar to navigationBar in swift
i'm trying to add a searchBar to the navigationBar. i've researched a bit and this is what i've done so far:

The problem is nothing appear to the navigationBar using this code.

```<code>    searchBar = UISearchBar(frame: CGRectMake(0, 0, 320, 44))
    searchBar?.delegate = self
    searchBar?.showsCancelButton = true

    searchController = UISearchDisplayController()
    searchController?.delegate = self
    searchController?.searchResultsDelegate = self

    searchController?.displaysSearchBarInNavigationBar = true
</code>```

答:
Try this</p>

```<code>lazy var searchBar = UISearchBar(frame: .zero)
override func viewDidLoad() {
    super.viewDidLoad()
 navigationItem.titleView = searchBar}
</code>```

Body:
i'm trying to add a searchBar to the navigationBar. i've researched a bit and this is what i've done so far:

The problem is nothing appear to the navigationBar using this code.

    searchBar = UISearchBar(frame: CGRectMake(0, 0, 320, 44))
    searchBar?.delegate = self
    searchBar?.showsCancelButton = true

    searchController = UISearchDisplayController()
    searchController?.delegate = self
    searchController?.searchResultsDelegate = self

    searchController?.displaysSearchBarInNavigationBar = true

Body:
Try this

lazy var searchBar = UISearchBar(frame: .zero)
override func viewDidLoad() {
    super.viewDidLoad()
 navigationItem.titleView = searchBar}


问:
Beginner to MySQL workbench, what is the meaning of connection?
I've downloaded the MySQL workbench and the first screen I see is this:

From what I understand, MySQL server is hosted on my own machine (localhost). To access this database, I use the following code

```<code>try {
    Class.forName("com.mysql.cj.jdbc.Driver").newInstance();
} catch (ClassNotFoundException e) {
    e.printStackTrace();
}

Connection con = DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/giraffe", "root", "root");
</code>```

All working great and I have successfully connected to my MySQL server. But, one thing I can't get my head around is what is the meaning of a connection inside of the MySQL workbench? What does it mean to my if I create say 5 connections as opposed to just 1 connection?

I tried running the same code with one deliberately not closing the connection, trying to simulate two connections to the database, still everything works fine with 1 connection on MySQL Workbench,

Thanks!

答:
Your Workbench can access more than one host.

E.g. your computer is one host with one MySQL instance on localhost.

Furthermore e.g. your friend has also a computer with MySQL installed and shares it on the web. Now you can add a new connection with the ip and port of your friends's computer and the credentials he set on the database (username, pw).

Now you have two connections:

localhost (your computers MySQL instance)

John Doe (your firends computer over web)

Body:
I've downloaded the MySQL workbench and the first screen I see is this:

From what I understand, MySQL server is hosted on my own machine (localhost). To access this database, I use the following code

try {
    Class.forName("com.mysql.cj.jdbc.Driver").newInstance();
} catch (ClassNotFoundException e) {
    e.printStackTrace();
}

Connection con = DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/giraffe", "root", "root");

All working great and I have successfully connected to my MySQL server. But, one thing I can't get my head around is what is the meaning of a connection inside of the MySQL workbench? What does it mean to my if I create say 5 connections as opposed to just 1 connection?

I tried running the same code with one deliberately not closing the connection, trying to simulate two connections to the database, still everything works fine with 1 connection on MySQL Workbench,

Thanks!


问:
Heroku PostgreSQL GROUP_BY error in Rails app
I've got a rails app that works fine in development (SQLite) but is throwing lots of errors when I've deployed it via Heroku, which uses PostgreSQL I gather.

the error message getting returned:

```<code>        ActionView::Template::Error (PGError: ERROR:
column "practices.id" must appear in the GROUP BY clause or be used in an aggregate function:
SELECT "practices".*
FROM "practices" WHERE ("practices".activity_id = 1)
AND ("practices"."created_at" BETWEEN '2011-01-01' AND '2011-01-31')
GROUP BY DATE(created_at) ORDER BY created_at DESC):
</code>```

this is being thrown when I call the following:

```<code>def month_days_not_practiced(date = Date.today)
   p = practices.where(:created_at => date.at_beginning_of_month..date.at_end_of_month).group("DATE(created_at)").to_a.count
   days_in_month(date.year, date.month) - p
end
</code>```

I'd really like to keep the code clean so it works on both development and production DBs...can anyone shed some light?

I have tried this:

```<code>def month_days_not_practiced(date = Date.today)
   p = practices.where(:created_at => date.at_beginning_of_month..date.at_end_of_month).group("practices.id, DATE(created_at)").to_a.count
   days_in_month(date.year, date.month) - p
end
</code>```

to no avail...

tia.

答:
```<code>Practice.group(Practice.col_list)

def self.col_list
  Practice.column_names.collect {|c| "practices.#{c}"}.join(",")
end
</code>```

Body:
I've got a rails app that works fine in development (SQLite) but is throwing lots of errors when I've deployed it via Heroku, which uses PostgreSQL I gather.

the error message getting returned:

        ActionView::Template::Error (PGError: ERROR:
column "practices.id" must appear in the GROUP BY clause or be used in an aggregate function:
SELECT "practices".*
FROM "practices" WHERE ("practices".activity_id = 1)
AND ("practices"."created_at" BETWEEN '2011-01-01' AND '2011-01-31')
GROUP BY DATE(created_at) ORDER BY created_at DESC):

this is being thrown when I call the following:

def month_days_not_practiced(date = Date.today)
   p = practices.where(:created_at => date.at_beginning_of_month..date.at_end_of_month).group("DATE(created_at)").to_a.count
   days_in_month(date.year, date.month) - p
end

I'd really like to keep the code clean so it works on both development and production DBs...can anyone shed some light?

I have tried this:

def month_days_not_practiced(date = Date.today)
   p = practices.where(:created_at => date.at_beginning_of_month..date.at_end_of_month).group("practices.id, DATE(created_at)").to_a.count
   days_in_month(date.year, date.month) - p
end

to no avail...

tia.


问:
How to prevent form from submitting multiple times from client side?
Sometimes when the response is slow, one might click the submit button multiple times.

How to prevent this from happening?

答:
An alternative to what was proposed before is:</p>

```<code>jQuery('form').submit(function(){
     $(this).find(':submit').attr( 'disabled','disabled' );
     //the rest of your code
});
</code>```

Body:
An alternative to what was proposed before is:

jQuery('form').submit(function(){
     $(this).find(':submit').attr( 'disabled','disabled' );
     //the rest of your code
});