问:
Copy data from one WS to another & add 3 new columns based on first worksheet
I have two worksheets: one named (raw_data) and the other one named (stock_check). The file has around 200k~ lines in the sheet named raw_data.

The raw_data looks like the following (only added the columns that matter for this case).

On my first sheet raw_data I have roughly 50+ columns, out of which I am trying to copy two columns based on the header ID to the sheet stock_check and remove the duplicates. For this I am using the following piece of code:

```<code>Sub CopyMultipleColumns()

Dim wb As Workbook
Dim newSht As Worksheet, Hdrs As Variant, i As Long, EdrisRange As Range

Hdrs = Array("Sales_ID", "Category", "ShopTo_ID")

Set wb = ThisWorkbook

Set newSht = ThisWorkbook.Worksheets("stock_check")

For i = LBound(Hdrs) To UBound(Hdrs)
    Set EdrisRange = FindHeaderInWorkbook(wb, CStr(Hdrs(i)), newSht)
    If Not EdrisRange Is Nothing Then
        Application.Intersect(EdrisRange.EntireColumn, EdrisRange.Parent.UsedRange).Copy _
                                                     newSht.Cells(1, i + 1).PasteSpecial xlPasteValues
    End If
Next i

Application.CutCopyMode = False

End Sub
</code>```

Calling the following function to find the specific headers in the sheet raw_data

```<code>Function FindHeaderInWorkbook(wb As Workbook, HeaderText As String, excludeSheet As
Worksheet)
Dim sht As Worksheet, rng As Range
For Each sht In wb.Worksheets
    If sht.Name <> excludeSheet.Name Then
        Set rng = sht.Rows(1).Find(what:=HeaderText, lookat:=xlWhole)
        If Not rng Is Nothing Then Exit For
    End If
Next sht
Set FindHeaderInWorkbook = rng
End Function
</code>```

Out of which I am then removing the duplicates using the following the RemoveDuplicates function in VBA.

```<code>Sub RemoveDuplicates()

With ThisWorkbook.Worksheets("stock_check")
   .UsedRange.RemoveDuplicates Columns:=Array(1, 2, 3), Header:=xlYes
End With

End Sub
</code>```

Up to here it all works fine, and it generates the following output in Excel (one unique line in Excel):

This is the part where I am stuck/don't know how to continue. What I want to do next is create an available_size column (next to ShopTo_ID) that adds all the available sizes from the raw_data for that particular sales_ID together and separates them by a ",". See below of my expected outcome:

As a next step, I then want to check if the core_size is available, for which I have the following ruleset:

if available_size includes sizes 8 and 9, then "YES", otherwise "NO"

Which should generate the following output:

As a last step I then want to add a column named stock_depth, based on the number of "," that will check for category X/Y if there is enough stock depth based on the ruleset:

if available_size is equal or more than 4 and category is X then "YES", otherwise "NO"

if available_size is equal or more than 2 and category is Y then "YES", otherwise "NO"

Which should generate the following:

Could anyone be so kind to provide me a few pointers of how to continue? Thanks a lot!

答:
Dictionary for unique IDs, Collections for the sizes.

Option Explicit

Sub StockCheck()

    Const SEP = "~"

    Dim wb As Workbook, ws As Worksheet, wsData As Worksheet
    Dim a, Hdrs, HCol, data
    Dim hasChkSht As Boolean, hasData As Boolean
    Dim lastrow As Long, i As Long, x As Long
    Dim t0 As Single: t0 = Timer

    Hdrs = Array("Sales_ID", "Category", "ShopTo_ID", "SizeDescription")
    ReDim data(UBound(Hdrs)) As Variant

    ' find data sheets
    Set wb = ThisWorkbook
    For Each ws In wb.Sheets
        If ws.Name = "stock_check" Then
            hasChkSht = True
         Else
            a = Application.Match(Hdrs(0), ws.Rows(1), 0)
            If Not IsError(a) Then
                hasData = True
                Set wsData = ws
                Exit For
            End If
        End If
    Next

    If hasData = False Then
        MsgBox "Could not locate Header " & Hdrs(0), vbCritical
        Exit Sub
    End If

    ' copy data into arrays
    Dim ar
    With wsData
        lastrow = .Cells(.Rows.Count, a).End(xlUp).Row

        ' find columns
        For i = 0 To UBound(Hdrs)
            a = Application.Match(Hdrs(i), wsData.Rows(1), 0)
            If IsError(a) Then
                MsgBox "Could not locate Header " & Hdrs(i), vbCritical
                Exit Sub
            Else
                ar = data(i)
                ReDim ar(1 To lastrow - 1, 1 To 1)
                data(i) = wsData.Cells(2, a).Resize(lastrow - 1).Value2
            End If
        Next
    End With

    ' collate data
    Dim dict As Object, k, hasSize As Boolean
    Dim s As String, sz As String, n As Long
    Set dict = CreateObject("Scripting.Dictionary")
    For i = 1 To UBound(data(0))
        k = data(0)(i, 1) & SEP & data(1)(i, 1) & SEP & data(2)(i, 1)
        sz = data(3)(i, 1)
        'Debug.Print "Row", i, k, sz

        If Not dict.exists(k) Then
            dict.Add k, New Collection
            dict(k).Add sz
            'Debug.Print k, dict(k)(1)
        Else
            ' check size collection
            hasSize = False
            For n = 1 To dict(k).Count
                'Debug.Print n, dict(k)(n), sz
                If dict(k)(n) = sz Then
                    hasSize = True
                    Exit For
                End If
            Next
            ' add if required
            If hasSize = False Then
                dict(k).Add sz
                'Debug.Print k, sz
            End If
        End If
    Next

    ' output
    i = 2
    Application.ScreenUpdating = False
    With wb.Sheets("stock_check")
        .Cells.Clear
        .Range("A1:F1") = Array("Sales_ID", "Category", "ShopTo_ID", "sizes_available", _
                          "core size?", "stock_depth")
        For Each k In dict

            ar = Split(k, SEP)
            .Cells(i, 1) = ar(0)
            .Cells(i, 2) = ar(1)
            .Cells(i, 3) = ar(2)
            .Cells(i, 5) = "NO"

            ' sizes
            s = ""
            For n = 1 To dict(k).Count
                sz = dict(k).Item(n)
                If n > 1 Then s = s & ","
                s = s & sz
                ' core ?
                If sz = 8 Or sz = 9 Then
                    .Cells(i, 5) = "YES"
                End If
            Next
            .Cells(i, 4) = s

            ' stock
            If ar(1) = "X" And dict(k).Count >= 4 Then
                s = "YES"
            ElseIf ar(1) = "Y" And dict(k).Count >= 2 Then
                s = "YES"
            Else
                s = "NO"
            End If
            .Cells(i, 6) = s

            i = i + 1
        Next
        .Activate
        .Range("A1").Select
    End With
    Application.ScreenUpdating = True
    MsgBox lastrow - 1 & " rows processed", vbInformation, Format(Timer - t0, "0.0 secs")

End Sub
```

Body:
I have two worksheets: one named (raw_data) and the other one named (stock_check). The file has around 200k~ lines in the sheet named raw_data.

The raw_data looks like the following (only added the columns that matter for this case).

On my first sheet raw_data I have roughly 50+ columns, out of which I am trying to copy two columns based on the header ID to the sheet stock_check and remove the duplicates. For this I am using the following piece of code:

Sub CopyMultipleColumns()

Dim wb As Workbook
Dim newSht As Worksheet, Hdrs As Variant, i As Long, EdrisRange As Range

Hdrs = Array("Sales_ID", "Category", "ShopTo_ID")

Set wb = ThisWorkbook

Set newSht = ThisWorkbook.Worksheets("stock_check")

For i = LBound(Hdrs) To UBound(Hdrs)
    Set EdrisRange = FindHeaderInWorkbook(wb, CStr(Hdrs(i)), newSht)
    If Not EdrisRange Is Nothing Then
        Application.Intersect(EdrisRange.EntireColumn, EdrisRange.Parent.UsedRange).Copy _
                                                     newSht.Cells(1, i + 1).PasteSpecial xlPasteValues
    End If
Next i

Application.CutCopyMode = False

End Sub

Calling the following function to find the specific headers in the sheet raw_data

Function FindHeaderInWorkbook(wb As Workbook, HeaderText As String, excludeSheet As
Worksheet)
Dim sht As Worksheet, rng As Range
For Each sht In wb.Worksheets
    If sht.Name <> excludeSheet.Name Then
        Set rng = sht.Rows(1).Find(what:=HeaderText, lookat:=xlWhole)
        If Not rng Is Nothing Then Exit For
    End If
Next sht
Set FindHeaderInWorkbook = rng
End Function

Out of which I am then removing the duplicates using the following the RemoveDuplicates function in VBA.

Sub RemoveDuplicates()

With ThisWorkbook.Worksheets("stock_check")
   .UsedRange.RemoveDuplicates Columns:=Array(1, 2, 3), Header:=xlYes
End With

End Sub

Up to here it all works fine, and it generates the following output in Excel (one unique line in Excel):

This is the part where I am stuck/don't know how to continue. What I want to do next is create an available_size column (next to ShopTo_ID) that adds all the available sizes from the raw_data for that particular sales_ID together and separates them by a ",". See below of my expected outcome:

As a next step, I then want to check if the core_size is available, for which I have the following ruleset:

if available_size includes sizes 8 and 9, then "YES", otherwise "NO"

Which should generate the following output:

As a last step I then want to add a column named stock_depth, based on the number of "," that will check for category X/Y if there is enough stock depth based on the ruleset:

if available_size is equal or more than 4 and category is X then "YES", otherwise "NO"

if available_size is equal or more than 2 and category is Y then "YES", otherwise "NO"

Which should generate the following:

Could anyone be so kind to provide me a few pointers of how to continue? Thanks a lot!


来源: stackexchange

问:
Using a list to get data(list in a list) (Python 3.7)
Is there a way to get list data within a list? a person name containing data(e.g. Grades) while the person is in a list.

list_name['Dan']['Physics']

returns 98

答:
Look there are much ways to do that.

1- By for loop:

# using for loop
a = [1, 2, 3, 4, 5]

# printing the list using loop
for x in range(len(a)):
    print a[x],

```

-> output 1 2 3 4 5

If you want to print 2D array ,I recommend you this answer

ContentLicense: CC BY-SA 4.0

Body:
Look there are much ways to do that.

1- By for loop:

# using for loop
a = [1, 2, 3, 4, 5]

# printing the list using loop
for x in range(len(a)):
    print a[x],

-> output 1 2 3 4 5

If you want to print 2D array ,I recommend you this answer


问:
CouchDB, EventSource and OPTIONS method (405 Method Not Allowed)
I would like to implement Event Source feed of _changes for some documents in publicly readable database in CouchDB. Unfortunately, I get 405 error and:

```<code>Access to fetch at 'https://COUCHDOMAIN:6984/DBNAME/_changes?feed=eventsource&filter=_doc_ids&doc_ids=[%22DOCID%22]&since=now&include_docs=true&heartbeat=44000' from origin 'https://CLIENTDOMAIN' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
</code>```

I do not understand why I get Allow: GET,POST,HEAD in response while in CORS config, there is also OPTIONS... EventSource constructed with withCredentials: true/false, no difference...

I will appreciate any suggestion.

My CORS configuration:

```<code>[cors]
origins = https://CLIENTDOMAIN
headers = accept, authorization, content-type, origin, referer
methods = GET, PUT, POST, HEAD, DELETE, OPTIONS
credentials = true
</code>```

Request Headers:

```<code>OPTIONS /DBNAME/_changes?feed=eventsource&filter=_doc_ids&doc_ids=[%22DOCID%22]&since=now&include_docs=true&heartbeat=44000 HTTP/1.1
Host: COUCHDOMAIN:6984
Connection: keep-alive
Accept: */*
Access-Control-Request-Method: GET
Access-Control-Request-Headers: cache-control
Origin: https://CLIENTDOMAIN
User-Agent: Mozilla/5.0 (Linux; Android 10; LM-V405) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.87 Mobile Safari/537.36
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
Sec-Fetch-Dest: empty
Referer: https://CLIENTDOMAIN/
Accept-Encoding: gzip, deflate, br
Accept-Language: en-GB,en;q=0.9,pl-PL;q=0.8,pl;q=0.7,en-US;q=0.6
</code>```

Response Headers:

```<code>HTTP/1.1 405 Method Not Allowed
Access-Control-Allow-Origin: https://CLIENTDOMAIN
Access-Control-Expose-Headers: content-type, cache-control, accept-ranges, etag, server, x-couch-request-id, x-couch-update-newrev, x-couchdb-body-time
Allow: GET,POST,HEAD
Cache-Control: must-revalidate
Content-Length: 69
Content-Type: application/json
Date: Fri, 11 Feb 2022 20:04:06 GMT
Server: CouchDB/3.2.1 (Erlang OTP/20)
X-Couch-Request-ID: ab68310597
X-CouchDB-Body-Time: 0
</code>```

General (from chrome dev tools):

```<code>Request URL: https://COUCHDOMAIN:6984/DBNAME/_changes?feed=eventsource&filter=_doc_ids&doc_ids=[%22DOCID%22]&since=now&include_docs=true&heartbeat=44000
Request Method: OPTIONS
Status Code: 405 Method Not Allowed
Remote Address: COUCHIP:6984
Referrer Policy: strict-origin-when-cross-origin
</code>```

答:
Solution (inspired by: https://stackoverflow.com/a/50914749/2626200):</p>
```<code>[cors]
origins = https://CLIENTDOMAIN
headers = accept, authorization, content-type, origin, referer, cache-control
...
</code>```

Body:
I would like to implement Event Source feed of _changes for some documents in publicly readable database in CouchDB. Unfortunately, I get 405 error and:

Access to fetch at 'https://COUCHDOMAIN:6984/DBNAME/_changes?feed=eventsource&filter=_doc_ids&doc_ids=[%22DOCID%22]&since=now&include_docs=true&heartbeat=44000' from origin 'https://CLIENTDOMAIN' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

I do not understand why I get Allow: GET,POST,HEAD in response while in CORS config, there is also OPTIONS... EventSource constructed with withCredentials: true/false, no difference...

I will appreciate any suggestion.

My CORS configuration:

[cors]
origins = https://CLIENTDOMAIN
headers = accept, authorization, content-type, origin, referer
methods = GET, PUT, POST, HEAD, DELETE, OPTIONS
credentials = true

Request Headers:

OPTIONS /DBNAME/_changes?feed=eventsource&filter=_doc_ids&doc_ids=[%22DOCID%22]&since=now&include_docs=true&heartbeat=44000 HTTP/1.1
Host: COUCHDOMAIN:6984
Connection: keep-alive
Accept: */*
Access-Control-Request-Method: GET
Access-Control-Request-Headers: cache-control
Origin: https://CLIENTDOMAIN
User-Agent: Mozilla/5.0 (Linux; Android 10; LM-V405) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.87 Mobile Safari/537.36
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
Sec-Fetch-Dest: empty
Referer: https://CLIENTDOMAIN/
Accept-Encoding: gzip, deflate, br
Accept-Language: en-GB,en;q=0.9,pl-PL;q=0.8,pl;q=0.7,en-US;q=0.6

Response Headers:

HTTP/1.1 405 Method Not Allowed
Access-Control-Allow-Origin: https://CLIENTDOMAIN
Access-Control-Expose-Headers: content-type, cache-control, accept-ranges, etag, server, x-couch-request-id, x-couch-update-newrev, x-couchdb-body-time
Allow: GET,POST,HEAD
Cache-Control: must-revalidate
Content-Length: 69
Content-Type: application/json
Date: Fri, 11 Feb 2022 20:04:06 GMT
Server: CouchDB/3.2.1 (Erlang OTP/20)
X-Couch-Request-ID: ab68310597
X-CouchDB-Body-Time: 0

General (from chrome dev tools):

Request URL: https://COUCHDOMAIN:6984/DBNAME/_changes?feed=eventsource&filter=_doc_ids&doc_ids=[%22DOCID%22]&since=now&include_docs=true&heartbeat=44000
Request Method: OPTIONS
Status Code: 405 Method Not Allowed
Remote Address: COUCHIP:6984
Referrer Policy: strict-origin-when-cross-origin

Body:
Solution (inspired by: https://stackoverflow.com/a/50914749/2626200):

[cors]
origins = https://CLIENTDOMAIN
headers = accept, authorization, content-type, origin, referer, cache-control
...


问:
css background static?
if i wanted a background that deosnt move(stays static) so only the page moves when scrolling, if you get what i mean!!

this is my background code:

```<code> background: #fff url(back1.png) ;
</code>```

答:
Just add:

```<code>background-attachment: fixed;
</code>```

ContentLicense: CC BY-SA 2.5

Title: css background static?

Body:
if i wanted a background that deosnt move(stays static) so only the page moves when scrolling, if you get what i mean!!

this is my background code:

 background: #fff url(back1.png) ;

Body:
Just add:

background-attachment: fixed;

ContentLicense: CC BY-SA 3.0


问:
How can I save the information when toggling for the element.empty() function

$("#prop-info-nav-link").click(function() {
  $("#toggle-content-add-modal").empty();
  let output = '

Property Type

<select name="property-types" id="property-types"><option value="volvo">Tenament</option><option value="saab">Car</option><option value="opel" selected>Helicopter</option><option value="audi">Space Shuttle</option></select>
OR<input type="text" class="form-control" id="new-prop-type" placeholder="Enter a new type" aria-label="Property-Type" aria-describedby="basic-addon1" autocomplete="off">

<input type="text" id="prop-name" class="add-inpt" placeholder="Property Name">

<input type="text" id="prop-address" class="add-inpt" placeholder="Property Address">

';
  $("#toggle-content-add-modal").html(output);
});

$("#img-nav-link").click(function() {
  $("#toggle-content-add-modal").empty();
  let output = '

Upload your file

File should be an imageLike

Drop your file here or Click to browse
Please Wait<input type="file" id="fileInput" class="drop-zoon__file-input" accept="image/*">

Project 10%

';
  $("#toggle-content-add-modal").html(output);
});

$(function () {
    $(".side-nav li").click(function (e) {
        e.preventDefault();
        $(".side-nav li").removeClass("active");
        $(this).addClass("active");
    });
});```
<pre class="snippet-code-css lang-css prettyprint-override"><code>/* Add property modal */

.add-property {
  position: relative;
  width: 60rem;
  height: 35rem;
  left: 50%;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  border-radius: 15px;
}

.modal-title {
  position: relative;
  left: 50%;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.close {
  background-color: transparent;
  border: none;
}

#footer-btn {
  position: relative;
  left: 50%;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  border: 0.1em solid black;
  border-radius: 10px;
  width: 5em;
  height: 2.5em;
  font-weight: 600;
  margin-bottom: 1.2em;
}

.add-prop {
  background-color: #3498db;
  color: white;
}

.add-prop:hover {
  background-color: rgb(12, 65, 180);
}

.add-inpt {
  outline: none;
  border-width: 0 0 0.17em;
  border-color: black;
  border-radius: 5px;
  width: 15em;
  height: 2em;
  text-align: center;
}

.prop-info-row {
  height: 15em;
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.prop-info-col {
  height: 2em;
}

.add-inpt::placeholder {
  text-align: center;
}

.main-add-row {
  width: 50rem;
  height: 26rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.26);
}

#property-types {
  background-color: white;
  height: 2.5em;
  width: 13em;
  border-radius: 5px;
}

/* SIDE NAV INSIDE ADD PROPERTY MODAL */
.side-nav,
.nav-menu {
    height: 100%;
}

.side-nav .nav-menu {
    list-style: none;
    padding: 40px 0;
    width: 13em;
    background-color: #3498db;

}

.side-nav .nav-item {
    position: relative;
    padding: 0.7em 1.5em;
    position: relative;
    top: 42%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.nav-item.active {
    background-color: #fff;
    box-shadow: 0px -3px rgba(0, 0, 0, 0.2), 0px 3px rgba(0, 0, 0, 0.2);
}

.nav-item.active a {
    color: #2980b9;
}

.nav-item a {
    text-decoration: none;
    color: #fff;
}

.menu-text {
    padding: 0 20px;
}

.side-nav .nav-item.active::before {
    content: "";
    position: absolute;
    background-color: transparent;
    bottom: 100%;
    right: 0;
    height: 150%;
    width: 20px;
    border-bottom-right-radius: 25px;
    box-shadow: 0 20px 0 0 #fff;
}

.side-nav .nav-item.active::after {
    content: "";
    position: absolute;
    background-color: transparent;
    top: 100%;
    right: 0;
    height: 150%;
    width: 20px;
    border-top-right-radius: 25px;
    box-shadow: 0 -20px 0 0 #fff;
}

/* UPLOAD IMAGE STYLE */
:root {
    --clr-white: rgb(255, 255, 255);
    --clr-black: rgb(0, 0, 0);
    --clr-light: rgb(245, 248, 255);
    --clr-light-gray: rgb(196, 195, 196);
    --clr-blue: rgb(63, 134, 255);
    --clr-light-blue: rgb(171, 202, 255);
}

/* End General Styles */

/* Upload Area */
.upload-area {
    width: 100%;
    max-width: 25rem;
    background-color: var(--clr-white);
    box-shadow: 0 5px 10px rgb(218, 229, 255);
    border: 2px solid var(--clr-light-blue);
    border-radius: 24px;
    padding: 1rem 1.875rem 0rem 1.875rem;
    margin: 0.625rem;
    text-align: center;
}

/* Header */
.upload-area__title {
    font-size: 1.8rem;
    font-weight: 500;
    margin-bottom: 0.3125rem;
}

.upload-area__paragraph {
    font-size: 0.9375rem;
    color: var(--clr-light-gray);
    margin-top: 0;
}

.upload-area__tooltip {
    position: relative;
    color: var(--clr-light-blue);
    cursor: pointer;
    transition: color 300ms ease-in-out;
}

.upload-area__tooltip:hover {
    color: var(--clr-blue);
}

.upload-area__tooltip-data {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -125%);
    min-width: max-content;
    background-color: var(--clr-white);
    color: var(--clr-blue);
    border: 1px solid var(--clr-light-blue);
    padding: 0.625rem 1.25rem;
    font-weight: 500;
    opacity: 0;
    visibility: hidden;
    transition: none 300ms ease-in-out;
    transition-property: opacity, visibility;
}

.upload-area__tooltip:hover .upload-area__tooltip-data {
    opacity: 1;
    visibility: visible;
}

/* Drop Zoon */
.upload-area__drop-zoon {
    position: relative;
    height: 13.8rem;
    /* 180px */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border: 2px dashed var(--clr-light-blue);
    border-radius: 15px;
    margin-top: 1.1rem;
    cursor: pointer;
    transition: border-color 300ms ease-in-out;
}

.upload-area__drop-zoon:hover {
    border-color: var(--clr-blue);
}

.drop-zoon__icon {
    display: flex;
    font-size: 3.75rem;
    color: var(--clr-blue);
    transition: opacity 300ms ease-in-out;
}

.drop-zoon__paragraph {
    font-size: 0.9375rem;
    color: var(--clr-light-gray);
    margin: 0;
    margin-top: 0.625rem;
    transition: opacity 300ms ease-in-out;
}

.drop-zoon:hover .drop-zoon__icon,
.drop-zoon:hover .drop-zoon__paragraph {
    opacity: 0.7;
}

.drop-zoon__loading-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    color: var(--clr-light-blue);
    z-index: 10;
}

.drop-zoon__preview-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.3125rem;
    border-radius: 10px;
    display: none;
    z-index: 1000;
    transition: opacity 300ms ease-in-out;
}

.drop-zoon:hover .drop-zoon__preview-image {
    opacity: 0.8;
}

.drop-zoon__file-input {
    display: none;
}

/* (drop-zoon--over) Modifier Class */
.drop-zoon--over {
    border-color: var(--clr-blue);
}

.drop-zoon--over .drop-zoon__icon,
.drop-zoon--over .drop-zoon__paragraph {
    opacity: 0.7;
}

/* (drop-zoon--over) Modifier Class */

.drop-zoon--Uploaded .drop-zoon__icon,
.drop-zoon--Uploaded .drop-zoon__paragraph {
    display: none;
}

/* File Details Area */
.upload-area__file-details {
    height: 0;
    visibility: hidden;
    opacity: 0;
    text-align: left;
    transition: none 500ms ease-in-out;
    transition-property: opacity, visibility;
    transition-delay: 500ms;
}

/* (duploaded-file--open) Modifier Class */
.file-details--open {
    height: auto;
    visibility: visible;
    opacity: 1;
}

/* Uploaded File */
.uploaded-file {
    display: flex;
    align-items: center;
    padding: 0.925rem 0;
    visibility: hidden;
    opacity: 0;
    transition: none 500ms ease-in-out;
    transition-property: visibility, opacity;
}

/* (duploaded-file--open) Modifier Class */
.uploaded-file--open {
    visibility: visible;
    opacity: 1;
}

.uploaded-file__icon-container {
    position: relative;
    margin-right: 0.3125rem;
}

.uploaded-file__icon {
    font-size: 3.4375rem;
    color: var(--clr-blue);
}

.uploaded-file__icon-text {
    position: absolute;
    top: 1.5625rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--clr-white);
}

.uploaded-file__info {
    position: relative;
    top: -0.3125rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.uploaded-file__info::before,
.uploaded-file__info::after {
    content: '';
    position: absolute;
    bottom: -0.9375rem;
    width: 0;
    height: 0.5rem;
    background-color: #ebf2ff;
    border-radius: 0.625rem;
}

.uploaded-file__info::before {
    width: 100%;
}

.uploaded-file__info::after {
    width: 100%;
    background-color: var(--clr-blue);
}

/* Progress Animation */
.uploaded-file__info--active::after {
    animation: progressMove 800ms ease-in-out;
    animation-delay: 300ms;
}

@keyframes progressMove {
    from {
        width: 0%;
        background-color: transparent;
    }

    to {
        width: 100%;
        background-color: var(--clr-blue);
    }
}

.uploaded-file__name {
    width: 100%;
    max-width: 6.25rem;
    /* 100px */
    display: inline-block;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uploaded-file__counter {
    font-size: 1rem;
    color: var(--clr-light-gray);
}</code>```

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<button data-bs-toggle="modal" data-bs-target="#ModalAddProperty" class="add-more" id="add-property">Add
            Property</button>

<form action="">

Add Property

          <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">

                        </button>

                      Upload Image

                      Propery Info

Upload your file

                    File should be an image

                                                Like

Drop your file here or Click to browse

                  Please Wait

                  <input type="file" id="fileInput" class="drop-zoon__file-input" accept="image/*">

                      Project 1
                      0%

          <button type="submit" class="add-prop" id="footer-btn" data-bs-dismiss="modal">Add</button>

</form>```

The modal looks like this:

When I click on the Property Info, all the child elements in the a column: #toggle-content-add-modal related to Upload Image is deleted with the help of $("#toggle-content-add-modal").empty() and replaced by the elements related to Property Info.

This .empty() and and .html() is, in a way toggled when clicking respective nav-links (Upload Image and Property Info). But the data I entered like uploading the image or any information in the Property Info gets deleted also. I know .empty() specifically does that. But I cant find any other option in which the data is stored when toggling between nav-links.

答:
If all you need is to just "toggle" some sections, then there is no need to manually add and remove anything from the DOM. You can do this instead

First, add all the sections to the page.

Hide the ones you don't want to make visible when the page loads.

Add data-target="id-of-targeted-side-nav-li" to each section.

Try this

$(function () {
    $(".side-nav li").click(function (e) {
        e.preventDefault();
        let id = $(this).attr('id');

        // toggle sidebar nav
        $(".side-nav li").removeClass("active");
        $(this).addClass("active");

        // toggle sidebar nav target
        $('#toggle-content-add-modal')
            .children().hide()
            .filter((i, elem) => $(elem).data('target') === id)
            .show();
    });
});```
<pre class="snippet-code-css lang-css prettyprint-override"><code>/* Add property modal */

.add-property {
    position: relative;
    width: 60rem;
    height: 35rem;
    left: 50%;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    border-radius: 15px;
}

.modal-title {
    position: relative;
    left: 50%;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.close {
    background-color: transparent;
    border: none;
}

#footer-btn {
    position: relative;
    left: 50%;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    border: 0.1em solid black;
    border-radius: 10px;
    width: 5em;
    height: 2.5em;
    font-weight: 600;
    margin-bottom: 1.2em;
}

.add-prop {
    background-color: #3498db;
    color: white;
}

.add-prop:hover {
    background-color: rgb(12, 65, 180);
}

.add-inpt {
    outline: none;
    border-width: 0 0 0.17em;
    border-color: black;
    border-radius: 5px;
    width: 15em;
    height: 2em;
    text-align: center;
}

.prop-info-row {
    height: 15em;
    position: relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.prop-info-col {
    height: 2em;
}

.add-inpt::placeholder {
    text-align: center;
}

.main-add-row {
    width: 50rem;
    height: 26rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.26);
}

#property-types {
    background-color: white;
    height: 2.5em;
    width: 13em;
    border-radius: 5px;
}

/* SIDE NAV INSIDE ADD PROPERTY MODAL */
.side-nav,
.nav-menu {
    height: 100%;
}

.side-nav .nav-menu {
    list-style: none;
    padding: 40px 0;
    width: 13em;
    background-color: #3498db;

}

.side-nav .nav-item {
    position: relative;
    padding: 0.7em 1.5em;
    position: relative;
    top: 42%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.nav-item.active {
    background-color: #fff;
    box-shadow: 0px -3px rgba(0, 0, 0, 0.2), 0px 3px rgba(0, 0, 0, 0.2);
}

.nav-item.active a {
    color: #2980b9;
}

.nav-item a {
    text-decoration: none;
    color: #fff;
}

.menu-text {
    padding: 0 20px;
}

.side-nav .nav-item.active::before {
    content: "";
    position: absolute;
    background-color: transparent;
    bottom: 100%;
    right: 0;
    height: 150%;
    width: 20px;
    border-bottom-right-radius: 25px;
    box-shadow: 0 20px 0 0 #fff;
}

.side-nav .nav-item.active::after {
    content: "";
    position: absolute;
    background-color: transparent;
    top: 100%;
    right: 0;
    height: 150%;
    width: 20px;
    border-top-right-radius: 25px;
    box-shadow: 0 -20px 0 0 #fff;
}

/* UPLOAD IMAGE STYLE */
:root {
    --clr-white: rgb(255, 255, 255);
    --clr-black: rgb(0, 0, 0);
    --clr-light: rgb(245, 248, 255);
    --clr-light-gray: rgb(196, 195, 196);
    --clr-blue: rgb(63, 134, 255);
    --clr-light-blue: rgb(171, 202, 255);
}

/* End General Styles */

/* Upload Area */
.upload-area {
    width: 100%;
    max-width: 25rem;
    background-color: var(--clr-white);
    box-shadow: 0 5px 10px rgb(218, 229, 255);
    border: 2px solid var(--clr-light-blue);
    border-radius: 24px;
    padding: 1rem 1.875rem 0rem 1.875rem;
    margin: 0.625rem;
    text-align: center;
}

/* Header */
.upload-area__title {
    font-size: 1.8rem;
    font-weight: 500;
    margin-bottom: 0.3125rem;
}

.upload-area__paragraph {
    font-size: 0.9375rem;
    color: var(--clr-light-gray);
    margin-top: 0;
}

.upload-area__tooltip {
    position: relative;
    color: var(--clr-light-blue);
    cursor: pointer;
    transition: color 300ms ease-in-out;
}

.upload-area__tooltip:hover {
    color: var(--clr-blue);
}

.upload-area__tooltip-data {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -125%);
    min-width: max-content;
    background-color: var(--clr-white);
    color: var(--clr-blue);
    border: 1px solid var(--clr-light-blue);
    padding: 0.625rem 1.25rem;
    font-weight: 500;
    opacity: 0;
    visibility: hidden;
    transition: none 300ms ease-in-out;
    transition-property: opacity, visibility;
}

.upload-area__tooltip:hover .upload-area__tooltip-data {
    opacity: 1;
    visibility: visible;
}

/* Drop Zoon */
.upload-area__drop-zoon {
    position: relative;
    height: 13.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border: 2px dashed var(--clr-light-blue);
    border-radius: 15px;
    margin-top: 1.1rem;
    cursor: pointer;
    transition: border-color 300ms ease-in-out;
}

.upload-area__drop-zoon:hover {
    border-color: var(--clr-blue);
}

.drop-zoon__icon {
    display: flex;
    font-size: 3.75rem;
    color: var(--clr-blue);
    transition: opacity 300ms ease-in-out;
}

.drop-zoon__paragraph {
    font-size: 0.9375rem;
    color: var(--clr-light-gray);
    margin: 0;
    margin-top: 0.625rem;
    transition: opacity 300ms ease-in-out;
}

.drop-zoon:hover .drop-zoon__icon,
.drop-zoon:hover .drop-zoon__paragraph {
    opacity: 0.7;
}

.drop-zoon__loading-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    color: var(--clr-light-blue);
    z-index: 10;
}

.drop-zoon__preview-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.3125rem;
    border-radius: 10px;
    display: none;
    z-index: 1000;
    transition: opacity 300ms ease-in-out;
}

.drop-zoon:hover .drop-zoon__preview-image {
    opacity: 0.8;
}

.drop-zoon__file-input {
    display: none;
}

/* (drop-zoon--over) Modifier Class */
.drop-zoon--over {
    border-color: var(--clr-blue);
}

.drop-zoon--over .drop-zoon__icon,
.drop-zoon--over .drop-zoon__paragraph {
    opacity: 0.7;
}

/* (drop-zoon--over) Modifier Class */

.drop-zoon--Uploaded .drop-zoon__icon,
.drop-zoon--Uploaded .drop-zoon__paragraph {
    display: none;
}

/* File Details Area */
.upload-area__file-details {
    height: 0;
    visibility: hidden;
    opacity: 0;
    text-align: left;
    transition: none 500ms ease-in-out;
    transition-property: opacity, visibility;
    transition-delay: 500ms;
}

/* (duploaded-file--open) Modifier Class */
.file-details--open {
    height: auto;
    visibility: visible;
    opacity: 1;
}

/* Uploaded File */
.uploaded-file {
    display: flex;
    align-items: center;
    padding: 0.925rem 0;
    visibility: hidden;
    opacity: 0;
    transition: none 500ms ease-in-out;
    transition-property: visibility, opacity;
}

/* (duploaded-file--open) Modifier Class */
.uploaded-file--open {
    visibility: visible;
    opacity: 1;
}

.uploaded-file__icon-container {
    position: relative;
    margin-right: 0.3125rem;
}

.uploaded-file__icon {
    font-size: 3.4375rem;
    color: var(--clr-blue);
}

.uploaded-file__icon-text {
    position: absolute;
    top: 1.5625rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--clr-white);
}

.uploaded-file__info {
    position: relative;
    top: -0.3125rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.uploaded-file__info::before,
.uploaded-file__info::after {
    content: '';
    position: absolute;
    bottom: -0.9375rem;
    width: 0;
    height: 0.5rem;
    background-color: #ebf2ff;
    border-radius: 0.625rem;
}

.uploaded-file__info::before {
    width: 100%;
}

.uploaded-file__info::after {
    width: 100%;
    background-color: var(--clr-blue);
}

/* Progress Animation */
.uploaded-file__info--active::after {
    animation: progressMove 800ms ease-in-out;
    animation-delay: 300ms;
}

@keyframes progressMove {
    from {
        width: 0%;
        background-color: transparent;
    }

    to {
        width: 100%;
        background-color: var(--clr-blue);
    }
}

.uploaded-file__name {
    width: 100%;
    max-width: 6.25rem;
/* 100px */
display: inline-block;
font-size: 1rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.uploaded-file__counter {
    font-size: 1rem;
    color: var(--clr-light-gray);
}</code>```

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<button data-bs-toggle="modal" data-bs-target="#ModalAddProperty" class="add-more" id="add-property">Add
            Property</button>

<form action="">

Add Property

                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">

                    </button>

                                            Upload Image

                                            Propery Info

Upload your file

                                        File should be an image

                                            Like

Drop your file here or Click to browse

                                    Please Wait

                                    <input type="file" id="fileInput" class="drop-zoon__file-input" accept="image/*">

                                            Project 1
                                            0%

Property Type

                                    <select name="property-types" id="property-types">
                                        <option value="volvo">Tenament</option>
                                        <option value="saab">Car</option>
                                        <option value="opel" selected>Helicopter</option>
                                        <option value="audi">Space Shuttle</option>
                                    </select>

                                        OR
                                        <input type="text" class="form-control" id="new-prop-type" placeholder="Enter a new type" aria-label="Property-Type" aria-describedby="basic-addon1" autocomplete="off">

                                    <input type="text" id="prop-name" class="add-inpt" placeholder="Property Name">

                                    <input type="text" id="prop-address" class="add-inpt" placeholder="Property Address">

                    <button type="submit" class="add-prop" id="footer-btn" data-bs-dismiss="modal">Add</button>

</form>```

Body:
$("#prop-info-nav-link").click(function() {
  $("#toggle-content-add-modal").empty();
  let output = '

Property Type

<select name="property-types" id="property-types"><option value="volvo">Tenament</option><option value="saab">Car</option><option value="opel" selected>Helicopter</option><option value="audi">Space Shuttle</option></select>
OR<input type="text" class="form-control" id="new-prop-type" placeholder="Enter a new type" aria-label="Property-Type" aria-describedby="basic-addon1" autocomplete="off">

<input type="text" id="prop-name" class="add-inpt" placeholder="Property Name">

<input type="text" id="prop-address" class="add-inpt" placeholder="Property Address">

';
  $("#toggle-content-add-modal").html(output);
});

$("#img-nav-link").click(function() {
  $("#toggle-content-add-modal").empty();
  let output = '

Upload your file

File should be an imageLike

Drop your file here or Click to browse
Please Wait<input type="file" id="fileInput" class="drop-zoon__file-input" accept="image/*">

Project 10%

';
  $("#toggle-content-add-modal").html(output);
});

$(function () {
    $(".side-nav li").click(function (e) {
        e.preventDefault();
        $(".side-nav li").removeClass("active");
        $(this).addClass("active");
    });
});

/* Add property modal */

.add-property {
  position: relative;
  width: 60rem;
  height: 35rem;
  left: 50%;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  border-radius: 15px;
}

.modal-title {
  position: relative;
  left: 50%;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.close {
  background-color: transparent;
  border: none;
}

#footer-btn {
  position: relative;
  left: 50%;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  border: 0.1em solid black;
  border-radius: 10px;
  width: 5em;
  height: 2.5em;
  font-weight: 600;
  margin-bottom: 1.2em;
}

.add-prop {
  background-color: #3498db;
  color: white;
}

.add-prop:hover {
  background-color: rgb(12, 65, 180);
}

.add-inpt {
  outline: none;
  border-width: 0 0 0.17em;
  border-color: black;
  border-radius: 5px;
  width: 15em;
  height: 2em;
  text-align: center;
}

.prop-info-row {
  height: 15em;
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.prop-info-col {
  height: 2em;
}

.add-inpt::placeholder {
  text-align: center;
}

.main-add-row {
  width: 50rem;
  height: 26rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.26);
}

#property-types {
  background-color: white;
  height: 2.5em;
  width: 13em;
  border-radius: 5px;
}

/* SIDE NAV INSIDE ADD PROPERTY MODAL */
.side-nav,
.nav-menu {
    height: 100%;
}

.side-nav .nav-menu {
    list-style: none;
    padding: 40px 0;
    width: 13em;
    background-color: #3498db;

}

.side-nav .nav-item {
    position: relative;
    padding: 0.7em 1.5em;
    position: relative;
    top: 42%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.nav-item.active {
    background-color: #fff;
    box-shadow: 0px -3px rgba(0, 0, 0, 0.2), 0px 3px rgba(0, 0, 0, 0.2);
}

.nav-item.active a {
    color: #2980b9;
}

.nav-item a {
    text-decoration: none;
    color: #fff;
}

.menu-text {
    padding: 0 20px;
}

.side-nav .nav-item.active::before {
    content: "";
    position: absolute;
    background-color: transparent;
    bottom: 100%;
    right: 0;
    height: 150%;
    width: 20px;
    border-bottom-right-radius: 25px;
    box-shadow: 0 20px 0 0 #fff;
}

.side-nav .nav-item.active::after {
    content: "";
    position: absolute;
    background-color: transparent;
    top: 100%;
    right: 0;
    height: 150%;
    width: 20px;
    border-top-right-radius: 25px;
    box-shadow: 0 -20px 0 0 #fff;
}

/* UPLOAD IMAGE STYLE */
:root {
    --clr-white: rgb(255, 255, 255);
    --clr-black: rgb(0, 0, 0);
    --clr-light: rgb(245, 248, 255);
    --clr-light-gray: rgb(196, 195, 196);
    --clr-blue: rgb(63, 134, 255);
    --clr-light-blue: rgb(171, 202, 255);
}

/* End General Styles */

/* Upload Area */
.upload-area {
    width: 100%;
    max-width: 25rem;
    background-color: var(--clr-white);
    box-shadow: 0 5px 10px rgb(218, 229, 255);
    border: 2px solid var(--clr-light-blue);
    border-radius: 24px;
    padding: 1rem 1.875rem 0rem 1.875rem;
    margin: 0.625rem;
    text-align: center;
}

/* Header */
.upload-area__title {
    font-size: 1.8rem;
    font-weight: 500;
    margin-bottom: 0.3125rem;
}

.upload-area__paragraph {
    font-size: 0.9375rem;
    color: var(--clr-light-gray);
    margin-top: 0;
}

.upload-area__tooltip {
    position: relative;
    color: var(--clr-light-blue);
    cursor: pointer;
    transition: color 300ms ease-in-out;
}

.upload-area__tooltip:hover {
    color: var(--clr-blue);
}

.upload-area__tooltip-data {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -125%);
    min-width: max-content;
    background-color: var(--clr-white);
    color: var(--clr-blue);
    border: 1px solid var(--clr-light-blue);
    padding: 0.625rem 1.25rem;
    font-weight: 500;
    opacity: 0;
    visibility: hidden;
    transition: none 300ms ease-in-out;
    transition-property: opacity, visibility;
}

.upload-area__tooltip:hover .upload-area__tooltip-data {
    opacity: 1;
    visibility: visible;
}

/* Drop Zoon */
.upload-area__drop-zoon {
    position: relative;
    height: 13.8rem;
    /* 180px */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border: 2px dashed var(--clr-light-blue);
    border-radius: 15px;
    margin-top: 1.1rem;
    cursor: pointer;
    transition: border-color 300ms ease-in-out;
}

.upload-area__drop-zoon:hover {
    border-color: var(--clr-blue);
}

.drop-zoon__icon {
    display: flex;
    font-size: 3.75rem;
    color: var(--clr-blue);
    transition: opacity 300ms ease-in-out;
}

.drop-zoon__paragraph {
    font-size: 0.9375rem;
    color: var(--clr-light-gray);
    margin: 0;
    margin-top: 0.625rem;
    transition: opacity 300ms ease-in-out;
}

.drop-zoon:hover .drop-zoon__icon,
.drop-zoon:hover .drop-zoon__paragraph {
    opacity: 0.7;
}

.drop-zoon__loading-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    color: var(--clr-light-blue);
    z-index: 10;
}

.drop-zoon__preview-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.3125rem;
    border-radius: 10px;
    display: none;
    z-index: 1000;
    transition: opacity 300ms ease-in-out;
}

.drop-zoon:hover .drop-zoon__preview-image {
    opacity: 0.8;
}

.drop-zoon__file-input {
    display: none;
}

/* (drop-zoon--over) Modifier Class */
.drop-zoon--over {
    border-color: var(--clr-blue);
}

.drop-zoon--over .drop-zoon__icon,
.drop-zoon--over .drop-zoon__paragraph {
    opacity: 0.7;
}

/* (drop-zoon--over) Modifier Class */

.drop-zoon--Uploaded .drop-zoon__icon,
.drop-zoon--Uploaded .drop-zoon__paragraph {
    display: none;
}

/* File Details Area */
.upload-area__file-details {
    height: 0;
    visibility: hidden;
    opacity: 0;
    text-align: left;
    transition: none 500ms ease-in-out;
    transition-property: opacity, visibility;
    transition-delay: 500ms;
}

/* (duploaded-file--open) Modifier Class */
.file-details--open {
    height: auto;
    visibility: visible;
    opacity: 1;
}

/* Uploaded File */
.uploaded-file {
    display: flex;
    align-items: center;
    padding: 0.925rem 0;
    visibility: hidden;
    opacity: 0;
    transition: none 500ms ease-in-out;
    transition-property: visibility, opacity;
}

/* (duploaded-file--open) Modifier Class */
.uploaded-file--open {
    visibility: visible;
    opacity: 1;
}

.uploaded-file__icon-container {
    position: relative;
    margin-right: 0.3125rem;
}

.uploaded-file__icon {
    font-size: 3.4375rem;
    color: var(--clr-blue);
}

.uploaded-file__icon-text {
    position: absolute;
    top: 1.5625rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--clr-white);
}

.uploaded-file__info {
    position: relative;
    top: -0.3125rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.uploaded-file__info::before,
.uploaded-file__info::after {
    content: '';
    position: absolute;
    bottom: -0.9375rem;
    width: 0;
    height: 0.5rem;
    background-color: #ebf2ff;
    border-radius: 0.625rem;
}

.uploaded-file__info::before {
    width: 100%;
}

.uploaded-file__info::after {
    width: 100%;
    background-color: var(--clr-blue);
}

/* Progress Animation */
.uploaded-file__info--active::after {
    animation: progressMove 800ms ease-in-out;
    animation-delay: 300ms;
}

@keyframes progressMove {
    from {
        width: 0%;
        background-color: transparent;
    }

    to {
        width: 100%;
        background-color: var(--clr-blue);
    }
}

.uploaded-file__name {
    width: 100%;
    max-width: 6.25rem;
    /* 100px */
    display: inline-block;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uploaded-file__counter {
    font-size: 1rem;
    color: var(--clr-light-gray);
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<button data-bs-toggle="modal" data-bs-target="#ModalAddProperty" class="add-more" id="add-property">Add
            Property</button>

<form action="">

Add Property

          <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">

                        </button>

                      Upload Image

                      Propery Info

Upload your file

                    File should be an image

                                                Like

Drop your file here or Click to browse

                  Please Wait

                  <input type="file" id="fileInput" class="drop-zoon__file-input" accept="image/*">

                      Project 1
                      0%

          <button type="submit" class="add-prop" id="footer-btn" data-bs-dismiss="modal">Add</button>

</form>

The modal looks like this:

When I click on the Property Info, all the child elements in the a column: #toggle-content-add-modal related to Upload Image is deleted with the help of $("#toggle-content-add-modal").empty() and replaced by the elements related to Property Info.

This .empty() and and .html() is, in a way toggled when clicking respective nav-links (Upload Image and Property Info). But the data I entered like uploading the image or any information in the Property Info gets deleted also. I know .empty() specifically does that. But I cant find any other option in which the data is stored when toggling between nav-links.

Body:
If all you need is to just "toggle" some sections, then there is no need to manually add and remove anything from the DOM. You can do this instead

First, add all the sections to the page.

Hide the ones you don't want to make visible when the page loads.

Add data-target="id-of-targeted-side-nav-li" to each section.

Try this

$(function () {
    $(".side-nav li").click(function (e) {
        e.preventDefault();
        let id = $(this).attr('id');

        // toggle sidebar nav
        $(".side-nav li").removeClass("active");
        $(this).addClass("active");

        // toggle sidebar nav target
        $('#toggle-content-add-modal')
            .children().hide()
            .filter((i, elem) => $(elem).data('target') === id)
            .show();
    });
});

/* Add property modal */

.add-property {
    position: relative;
    width: 60rem;
    height: 35rem;
    left: 50%;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    border-radius: 15px;
}

.modal-title {
    position: relative;
    left: 50%;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.close {
    background-color: transparent;
    border: none;
}

#footer-btn {
    position: relative;
    left: 50%;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    border: 0.1em solid black;
    border-radius: 10px;
    width: 5em;
    height: 2.5em;
    font-weight: 600;
    margin-bottom: 1.2em;
}

.add-prop {
    background-color: #3498db;
    color: white;
}

.add-prop:hover {
    background-color: rgb(12, 65, 180);
}

.add-inpt {
    outline: none;
    border-width: 0 0 0.17em;
    border-color: black;
    border-radius: 5px;
    width: 15em;
    height: 2em;
    text-align: center;
}

.prop-info-row {
    height: 15em;
    position: relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.prop-info-col {
    height: 2em;
}

.add-inpt::placeholder {
    text-align: center;
}

.main-add-row {
    width: 50rem;
    height: 26rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.26);
}

#property-types {
    background-color: white;
    height: 2.5em;
    width: 13em;
    border-radius: 5px;
}

/* SIDE NAV INSIDE ADD PROPERTY MODAL */
.side-nav,
.nav-menu {
    height: 100%;
}

.side-nav .nav-menu {
    list-style: none;
    padding: 40px 0;
    width: 13em;
    background-color: #3498db;

}

.side-nav .nav-item {
    position: relative;
    padding: 0.7em 1.5em;
    position: relative;
    top: 42%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.nav-item.active {
    background-color: #fff;
    box-shadow: 0px -3px rgba(0, 0, 0, 0.2), 0px 3px rgba(0, 0, 0, 0.2);
}

.nav-item.active a {
    color: #2980b9;
}

.nav-item a {
    text-decoration: none;
    color: #fff;
}

.menu-text {
    padding: 0 20px;
}

.side-nav .nav-item.active::before {
    content: "";
    position: absolute;
    background-color: transparent;
    bottom: 100%;
    right: 0;
    height: 150%;
    width: 20px;
    border-bottom-right-radius: 25px;
    box-shadow: 0 20px 0 0 #fff;
}

.side-nav .nav-item.active::after {
    content: "";
    position: absolute;
    background-color: transparent;
    top: 100%;
    right: 0;
    height: 150%;
    width: 20px;
    border-top-right-radius: 25px;
    box-shadow: 0 -20px 0 0 #fff;
}

/* UPLOAD IMAGE STYLE */
:root {
    --clr-white: rgb(255, 255, 255);
    --clr-black: rgb(0, 0, 0);
    --clr-light: rgb(245, 248, 255);
    --clr-light-gray: rgb(196, 195, 196);
    --clr-blue: rgb(63, 134, 255);
    --clr-light-blue: rgb(171, 202, 255);
}

/* End General Styles */

/* Upload Area */
.upload-area {
    width: 100%;
    max-width: 25rem;
    background-color: var(--clr-white);
    box-shadow: 0 5px 10px rgb(218, 229, 255);
    border: 2px solid var(--clr-light-blue);
    border-radius: 24px;
    padding: 1rem 1.875rem 0rem 1.875rem;
    margin: 0.625rem;
    text-align: center;
}

/* Header */
.upload-area__title {
    font-size: 1.8rem;
    font-weight: 500;
    margin-bottom: 0.3125rem;
}

.upload-area__paragraph {
    font-size: 0.9375rem;
    color: var(--clr-light-gray);
    margin-top: 0;
}

.upload-area__tooltip {
    position: relative;
    color: var(--clr-light-blue);
    cursor: pointer;
    transition: color 300ms ease-in-out;
}

.upload-area__tooltip:hover {
    color: var(--clr-blue);
}

.upload-area__tooltip-data {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -125%);
    min-width: max-content;
    background-color: var(--clr-white);
    color: var(--clr-blue);
    border: 1px solid var(--clr-light-blue);
    padding: 0.625rem 1.25rem;
    font-weight: 500;
    opacity: 0;
    visibility: hidden;
    transition: none 300ms ease-in-out;
    transition-property: opacity, visibility;
}

.upload-area__tooltip:hover .upload-area__tooltip-data {
    opacity: 1;
    visibility: visible;
}

/* Drop Zoon */
.upload-area__drop-zoon {
    position: relative;
    height: 13.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border: 2px dashed var(--clr-light-blue);
    border-radius: 15px;
    margin-top: 1.1rem;
    cursor: pointer;
    transition: border-color 300ms ease-in-out;
}

.upload-area__drop-zoon:hover {
    border-color: var(--clr-blue);
}

.drop-zoon__icon {
    display: flex;
    font-size: 3.75rem;
    color: var(--clr-blue);
    transition: opacity 300ms ease-in-out;
}

.drop-zoon__paragraph {
    font-size: 0.9375rem;
    color: var(--clr-light-gray);
    margin: 0;
    margin-top: 0.625rem;
    transition: opacity 300ms ease-in-out;
}

.drop-zoon:hover .drop-zoon__icon,
.drop-zoon:hover .drop-zoon__paragraph {
    opacity: 0.7;
}

.drop-zoon__loading-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    color: var(--clr-light-blue);
    z-index: 10;
}

.drop-zoon__preview-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.3125rem;
    border-radius: 10px;
    display: none;
    z-index: 1000;
    transition: opacity 300ms ease-in-out;
}

.drop-zoon:hover .drop-zoon__preview-image {
    opacity: 0.8;
}

.drop-zoon__file-input {
    display: none;
}

/* (drop-zoon--over) Modifier Class */
.drop-zoon--over {
    border-color: var(--clr-blue);
}

.drop-zoon--over .drop-zoon__icon,
.drop-zoon--over .drop-zoon__paragraph {
    opacity: 0.7;
}

/* (drop-zoon--over) Modifier Class */

.drop-zoon--Uploaded .drop-zoon__icon,
.drop-zoon--Uploaded .drop-zoon__paragraph {
    display: none;
}

/* File Details Area */
.upload-area__file-details {
    height: 0;
    visibility: hidden;
    opacity: 0;
    text-align: left;
    transition: none 500ms ease-in-out;
    transition-property: opacity, visibility;
    transition-delay: 500ms;
}

/* (duploaded-file--open) Modifier Class */
.file-details--open {
    height: auto;
    visibility: visible;
    opacity: 1;
}

/* Uploaded File */
.uploaded-file {
    display: flex;
    align-items: center;
    padding: 0.925rem 0;
    visibility: hidden;
    opacity: 0;
    transition: none 500ms ease-in-out;
    transition-property: visibility, opacity;
}

/* (duploaded-file--open) Modifier Class */
.uploaded-file--open {
    visibility: visible;
    opacity: 1;
}

.uploaded-file__icon-container {
    position: relative;
    margin-right: 0.3125rem;
}

.uploaded-file__icon {
    font-size: 3.4375rem;
    color: var(--clr-blue);
}

.uploaded-file__icon-text {
    position: absolute;
    top: 1.5625rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--clr-white);
}

.uploaded-file__info {
    position: relative;
    top: -0.3125rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.uploaded-file__info::before,
.uploaded-file__info::after {
    content: '';
    position: absolute;
    bottom: -0.9375rem;
    width: 0;
    height: 0.5rem;
    background-color: #ebf2ff;
    border-radius: 0.625rem;
}

.uploaded-file__info::before {
    width: 100%;
}

.uploaded-file__info::after {
    width: 100%;
    background-color: var(--clr-blue);
}

/* Progress Animation */
.uploaded-file__info--active::after {
    animation: progressMove 800ms ease-in-out;
    animation-delay: 300ms;
}

@keyframes progressMove {
    from {
        width: 0%;
        background-color: transparent;
    }

    to {
        width: 100%;
        background-color: var(--clr-blue);
    }
}

.uploaded-file__name {
    width: 100%;
    max-width: 6.25rem;
/* 100px */
display: inline-block;
font-size: 1rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.uploaded-file__counter {
    font-size: 1rem;
    color: var(--clr-light-gray);
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<button data-bs-toggle="modal" data-bs-target="#ModalAddProperty" class="add-more" id="add-property">Add
            Property</button>

<!-- Modal window for Add Property button -->
<form action="">
    <div class="modal fade" id="ModalAddProperty" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content add-property">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Add Property</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="modal-body" style="padding: 0;">
                    <div class="row g-0 main-add-row">
                        <div class="col-sm-3" style="padding: 0;">
                            <nav class="side-nav">
                                <ul class="nav-menu">
                                    <li class="nav-item active" id="img-nav-link">
                                        <a href="#">
                                            <i class="fa-solid fa-file-arrow-up"></i>
                                            <span class="menu-text">Upload Image</span>
                                        </a>
                                    </li>
                                    <li class="nav-item" id="prop-info-nav-link">
                                        <a href="#">
                                            <i class="fa-solid fa-house-chimney-crack"></i>
                                            <span class="menu-text">Propery Info</span>
                                        </a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                        <div class="col-md-9 d-flex justify-content-center" id="toggle-content-add-modal">
                            <!-- UPLOAD IMAGE SECTION -->
                            <div id="uploadArea" class="upload-area" data-target="img-nav-link">
                                <!-- Header -->
                                <div class="upload-area__header">
                                    <h1 class="upload-area__title">Upload your file</h1>
                                    <p class="upload-area__paragraph">
                                        File should be an image
                                        <strong class="upload-area__tooltip">
                                            Like
                                            <span class="upload-area__tooltip-data"></span>
                                            <!-- Data Will Come From Js -->
                                        </strong>
                                    </p>
                                </div>
                                <!-- End Header -->

                                <!-- Drop Zoon -->
                                <div id="dropZoon" class="upload-area__drop-zoon drop-zoon">
                                    <span class="drop-zoon__icon">
                                        <i class='bx bxs-file-image'></i>
                                    </span>
                                    <p class="drop-zoon__paragraph">Drop your file here or Click to browse</p>
                                    <span id="loadingText" class="drop-zoon__loading-text">Please Wait</span>
                                    <img src="" alt="Preview Image" id="previewImage" class="drop-zoon__preview-image" draggable="false">
                                    <input type="file" id="fileInput" class="drop-zoon__file-input" accept="image/*">
                                </div>
                                <!-- End Drop Zoon -->

                                <!-- File Details -->
                                <div id="fileDetails" class="upload-area__file-details file-details">
                                    <div id="uploadedFile" class="uploaded-file">
                                        <div class="uploaded-file__icon-container">
                                            <i class='bx bxs-file-blank uploaded-file__icon'></i>
                                            <span class="uploaded-file__icon-text"></span>
                                            <!-- Data Will be Comes From Js -->
                                        </div>
                                        <div id="uploadedFileInfo" class="uploaded-file__info">
                                            <span class="uploaded-file__name">Project 1</span>
                                            <span class="uploaded-file__counter">0%</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- End File Details -->
                            </div>
                            <!-- End Upload Area -->

                            <!-- Prop Info Section -->
                            <div class="row g-0 justify-content-center prop-info-row" data-target="prop-info-nav-link" style="display: none;">
                                <div class="col-md-8 prop-info-col">
                                    <p style="font-weight: 600;">Property Type</p>
                                </div>
                                <div class="col-md-8 d-flex justify-content-center prop-info-col">
                                    <select name="property-types" id="property-types">
                                        <option value="volvo">Tenament</option>
                                        <option value="saab">Car</option>
                                        <option value="opel" selected>Helicopter</option>
                                        <option value="audi">Space Shuttle</option>
                                    </select>
                                    <div class="input-group mb-3 ms-3">
                                        <span class="input-group-text" id="basic-addon1">OR</span>
                                        <input type="text" class="form-control" id="new-prop-type" placeholder="Enter a new type" aria-label="Property-Type" aria-describedby="basic-addon1" autocomplete="off">
                                    </div>
                                </div>
                                <div class="col-md-8 d-flex justify-content-center prop-info-col mt-5">
                                    <input type="text" id="prop-name" class="add-inpt" placeholder="Property Name">
                                </div>
                                <div class="col-md-8 d-flex justify-content-center prop-info-col mt-3">
                                    <input type="text" id="prop-address" class="add-inpt" placeholder="Property Address">
                                </div>
                            </div>
                            <!-- End Prop Info Section -->
                        </div>
                    </div>
                </div>
                <div class="modal-ftr">
                    <button type="submit" class="add-prop" id="footer-btn" data-bs-dismiss="modal">Add</button>
                </div>
            </div>
        </div>
    </div>
</form>


问:
How to unit test deliberate compilation errors of template code
Please note that this is NOT a duplicate of How write a unit test for verifying compiling error? as I'm not concerned about testing the correctness of external libraries or the compiler itself.

It is typical in C++, particularly when dealing with templates, to employ techniques that prevent some particular piece of code from being compiled. As these can get convoluted, what is the best way to ensure that particular pieces of code do indeed generate compiler errors?

As the test shouldn't even get compiled, you can't rely on things such as boost-test, so I guess it should be integrated in the build system? How are these issues usually approached?

答:
[This is a variant of @mutableVoid's answer above, but a little more explicit on two things that I had to think about a little. It concerns only concepts, which is what I wanted to get under test, so it only applies to C++20 onwards].

First, assume we have a concept that we wish to test. This can be simple and just defer to existing type traits:

```<code>template <class T>
concept integral = std::is_integral_v<T>;
</code>```

Or it could be more complex, in this case, a concept that checks that type T has a size function that returns the type's size_type (and you can add more requirements to this "compound requirement", say, that it has a [] operator):

```<code>template<typename T>
concept sizeable = requires(T x) {
    {x.size()} -> std::same_as<typename T::size_type>;
};
</code>```

So, now we have some concepts. We want to test that these concepts work like we expect.

What we will need to do is to get a bool to test. Well, that's easy, because that's what concepts gives us naturally:

```<code>  std::cout << std::string(typeid(integral<int>).name()) << std::endl;
  std::cout << std::string(typeid(sizeable<int>).name()) << std::endl;
</code>```

produces (with GCC):

```<code>b
b
</code>```

So, we can check these, either with static_assert (i.e. mutableVoid's answer), which will fail your compilation if your concept isn't working:

```<code>  static_assert(integral<int>);
  static_assert(!integral<float>);

  static_assert(sizeable<std::vector<int>>);
  static_assert(!sizeable<int>);
</code>```

You can prove to yourself that this works by removing a ! and observing that the compilation fails.

However, you may not want compilation to fail with a compiler error. If you'd rather feed this to your unit test framework, it doesn't have to be static_asserted:

```<code>void say(bool b, const std::string& s) {
  std::cout << s << " = " << b << std::endl;
}

int main() {
  say(integral<int>, "integral, int");
  say(integral<float>, "integral, float");

  say(sizeable<std::vector<int>>, "sizeable, vector of int");
  say(sizeable<int>, "sizeable, int");

  return 0;
}
</code>```

This produces something like this:

```<code>integral, int = 1
integral, float = 0
sizeable, vector of int = 1
sizeable, int = 0
</code>```

Now, you can plug this into whatever unit testing library you want, and you can check that your concepts aren't accidentally permitting types that you expect to fail.

However, do note there are some limitations:

You can't check that there are no unexpected type acceptances, because your tests would be infinite in size (the same as any negative test, really).

Although these tests will compile and run even if the concepts are broken, it's possible that other code will choke if the concepts are "allowing" types though that they shouldn't, and your overall build may well still fail. For example, if functions or classes are static_asserting their types for their own purposes.

Indeed, you may still want static_asserts in the main program compilation to prevent non-compliant code even being written in the first place: after all, compile-time correctness is a good thing. However, this gives you a chance to make sure that your concepts and static assertions are working together as expected. If the static_asserts are for some reason not compiled or are changed to be too permissive, you may not notice the concept is now defective.

Body:
[This is a variant of @mutableVoid's answer above, but a little more explicit on two things that I had to think about a little. It concerns only concepts, which is what I wanted to get under test, so it only applies to C++20 onwards].

First, assume we have a concept that we wish to test. This can be simple and just defer to existing type traits:

template <class T>
concept integral = std::is_integral_v<T>;

Or it could be more complex, in this case, a concept that checks that type T has a size function that returns the type's size_type (and you can add more requirements to this "compound requirement", say, that it has a [] operator):

template<typename T>
concept sizeable = requires(T x) {
    {x.size()} -> std::same_as<typename T::size_type>;
};

So, now we have some concepts. We want to test that these concepts work like we expect.

What we will need to do is to get a bool to test. Well, that's easy, because that's what concepts gives us naturally:

  std::cout << std::string(typeid(integral<int>).name()) << std::endl;
  std::cout << std::string(typeid(sizeable<int>).name()) << std::endl;

produces (with GCC):

b
b

So, we can check these, either with static_assert (i.e. mutableVoid's answer), which will fail your compilation if your concept isn't working:

  static_assert(integral<int>);
  static_assert(!integral<float>);

  static_assert(sizeable<std::vector<int>>);
  static_assert(!sizeable<int>);

You can prove to yourself that this works by removing a ! and observing that the compilation fails.

However, you may not want compilation to fail with a compiler error. If you'd rather feed this to your unit test framework, it doesn't have to be static_asserted:

void say(bool b, const std::string& s) {
  std::cout << s << " = " << b << std::endl;
}

int main() {
  say(integral<int>, "integral, int");
  say(integral<float>, "integral, float");

  say(sizeable<std::vector<int>>, "sizeable, vector of int");
  say(sizeable<int>, "sizeable, int");

  return 0;
}

This produces something like this:

integral, int = 1
integral, float = 0
sizeable, vector of int = 1
sizeable, int = 0

Now, you can plug this into whatever unit testing library you want, and you can check that your concepts aren't accidentally permitting types that you expect to fail.

However, do note there are some limitations:

You can't check that there are no unexpected type acceptances, because your tests would be infinite in size (the same as any negative test, really).

Although these tests will compile and run even if the concepts are broken, it's possible that other code will choke if the concepts are "allowing" types though that they shouldn't, and your overall build may well still fail. For example, if functions or classes are static_asserting their types for their own purposes.

Indeed, you may still want static_asserts in the main program compilation to prevent non-compliant code even being written in the first place: after all, compile-time correctness is a good thing. However, this gives you a chance to make sure that your concepts and static assertions are working together as expected. If the static_asserts are for some reason not compiled or are changed to be too permissive, you may not notice the concept is now defective.


问:
Is this the correct way to eliminate warning C4945 (symbol already imported from another assembly)?
I've got a .net solution (written in C++/CLI) which references some .dll projects as follows:

```<code>MainProject->ProjectA->ProbjectB
MainProject->ProjectB
</code>```

Originally I'd referenced both ProjectA and ProjectB from MainProject which gave me the warnings as mentioned above.

I can remove the warnings by removing the reference to ProjectB from ProjectMain but it makes it less obvious that MainProject relies on ProjectB. Is this the right thing to do to get rid of the warnings?

答:
I just want to describe, but not explain, following relevant behaviour.

project CSCommon in C#

project CS1 in C#, using CSCommon

project CPP1 in C++, using CSCommon

project CPPMain, using CPP1

If each project has its own output path, I recieve C4945.

If all projects have common outputh path, warning disappears.

Body:
I've got a .net solution (written in C++/CLI) which references some .dll projects as follows:

MainProject->ProjectA->ProbjectB
MainProject->ProjectB

Originally I'd referenced both ProjectA and ProjectB from MainProject which gave me the warnings as mentioned above.

I can remove the warnings by removing the reference to ProjectB from ProjectMain but it makes it less obvious that MainProject relies on ProjectB. Is this the right thing to do to get rid of the warnings?


问:
getline() error in c++ despite defined library?
i have Array, i want to ask user enter Full name. Getline shows error but i don't know why, i have defined  library:

```<code>#include <iostream>
#include <string>
int main()
{
    using namespace std;
    const int ArSize = 20;
    char name[ArSize];
    char dessert[ArSize];
    cout << "Enter your name:\n";

    getline(cin, name) ;

    cout << "Enter your favorite dessert:\n";
    cin >> dessert;
    cout << "I have some delicious " << dessert;
    cout << " for you, " << name << ".\n";
    return 0;
}
</code>```

答:
paste this at the top of your code !</p>
```<code>#include <cstring>
</code>```

Body:
i have Array, i want to ask user enter Full name. Getline shows error but i don't know why, i have defined  library:

#include <iostream>
#include <string>
int main()
{
    using namespace std;
    const int ArSize = 20;
    char name[ArSize];
    char dessert[ArSize];
    cout << "Enter your name:\n";

    getline(cin, name) ;

    cout << "Enter your favorite dessert:\n";
    cin >> dessert;
    cout << "I have some delicious " << dessert;
    cout << " for you, " << name << ".\n";
    return 0;
}

Body:
paste this at the top of your code !

#include <cstring>


问:
How to apply Lemmatization to a column in a pandas dataframe
If i had the following dataframe:

```<code>import pandas as pd

d = {'col1': ['challenging', 'swimming'], 'col2': [3, 4]}
df = pd.DataFrame(data=d)

Output
          col1  col2
0  challenging     3
1     swimming     4
</code>```

I am using the WordNetLemmatizer:

```<code>print(wordnet_lemmatizer.lemmatize('challenging',pos='v'))
print(wordnet_lemmatizer.lemmatize('swimming',pos='v'))

Output
challenge
swim
</code>```

How can I apply this lemmatization function to all elements of col1 from the original dataframe?

I have tried the following but no luck since it requires an input of pos so no change to dataframe

```<code>df['col1'] =df['col1'].apply(wordnet_lemmatizer.lemmatize)
</code>```

If i try:

```<code>df['col1'] =df['col1'].apply(wordnet_lemmatizer.lemmatize(pos='v'))
</code>```

I get

TypeError: lemmatize() missing 1 required positional argument: 'word'

The desired output is:

```<code>        col1  col2
0       challenge     3
1       swim     4
</code>```

答:
Use the lambda function inside the apply to pass the word argument.

df['col1'] = df['col1'].apply(lambda word: wordnet_lemmatizer.lemmatize(word, pos='v'))
print(df)
```
<pre class="lang-py prettyprint-override"><code>        col1  col2
0  challenge     3
1       swim     4
</code>```

Body:
If i had the following dataframe:

import pandas as pd

d = {'col1': ['challenging', 'swimming'], 'col2': [3, 4]}
df = pd.DataFrame(data=d)

Output
          col1  col2
0  challenging     3
1     swimming     4

I am using the WordNetLemmatizer:

print(wordnet_lemmatizer.lemmatize('challenging',pos='v'))
print(wordnet_lemmatizer.lemmatize('swimming',pos='v'))

Output
challenge
swim

How can I apply this lemmatization function to all elements of col1 from the original dataframe?

I have tried the following but no luck since it requires an input of pos so no change to dataframe

df['col1'] =df['col1'].apply(wordnet_lemmatizer.lemmatize)

If i try:

df['col1'] =df['col1'].apply(wordnet_lemmatizer.lemmatize(pos='v'))

I get

TypeError: lemmatize() missing 1 required positional argument: 'word'

The desired output is:

        col1  col2
0       challenge     3
1       swim     4

Body:
Use the lambda function inside the apply to pass the word argument.

df['col1'] = df['col1'].apply(lambda word: wordnet_lemmatizer.lemmatize(word, pos='v'))
print(df)

        col1  col2
0  challenge     3
1       swim     4


问:
How to use onTap or onPressed in PopupMenuItem
How can we implement use of onTap or onPressed in PopupMenuItem

Here is my code:

```<code>actions: <Widget>[
  PopupMenuButton(
    icon: Icon(Icons.settings),
    itemBuilder: (context) => [
      PopupMenuItem(
        child: Text("Settings"),
      ),
      PopupMenuItem(
        child: Text("Flutter.io"),
      ),
      PopupMenuItem(
        child: Text("Google.com"),
      ),
    ],
  ),
]
</code>```

I want to navigate to SettingPage() on tapping or clicking Settings PopupMenuItem.

I am getting this error even after following a solution mentioned below and even after importing dart:js

```<code>Error: Not found: 'dart:js'
import 'dart:js';
</code>```

Here are my dependencies:

```<code>import 'package:bfdi_app/Profile/editProfile.dart';
import 'package:bfdi_app/models/user.dart';
import 'package:bfdi_app/services/collection.dart';
import 'package:bfdi_app/settings.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'dart:js';

</code>```

答:
I faced similar issues while navigating the screen using pop up menu button and I solve the issues by putting this method inside the onTap callback of PopupMenuItem:</p>
```<code>    onTap: (){
WidgetsBinding.instance!.addPostFrameCallback((_) {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) {
                            return ScreenName();
                          },
                        ),
                      );
                    });
}
</code>```

Body:
How can we implement use of onTap or onPressed in PopupMenuItem

Here is my code:

actions: <Widget>[
  PopupMenuButton(
    icon: Icon(Icons.settings),
    itemBuilder: (context) => [
      PopupMenuItem(
        child: Text("Settings"),
      ),
      PopupMenuItem(
        child: Text("Flutter.io"),
      ),
      PopupMenuItem(
        child: Text("Google.com"),
      ),
    ],
  ),
]

I want to navigate to SettingPage() on tapping or clicking Settings PopupMenuItem.

I am getting this error even after following a solution mentioned below and even after importing dart:js

Error: Not found: 'dart:js'
import 'dart:js';

Here are my dependencies:

import 'package:bfdi_app/Profile/editProfile.dart';
import 'package:bfdi_app/models/user.dart';
import 'package:bfdi_app/services/collection.dart';
import 'package:bfdi_app/settings.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'dart:js';

Body:
I faced similar issues while navigating the screen using pop up menu button and I solve the issues by putting this method inside the onTap callback of PopupMenuItem:

    onTap: (){
WidgetsBinding.instance!.addPostFrameCallback((_) {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) {
                            return ScreenName();
                          },
                        ),
                      );
                    });
}


问:
bootstrap 4 create modal footer with multiple rows
I'm attempting to get a modal footer in bootstrap 4 to have multiple 100% width rows.  So for the most basic bootstrap modal example below, is it possible to get the Close and Save changes buttons to be on different rows and both be 100% width?  </p>

```<code><div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div><div class="modal-body">
            ...
          </div><div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
</code>```

答:
Having two times a modal-footer will result in two borders too.

Remove can be easily done with border-0:

    ...

    ...

```

Body:
I'm attempting to get a modal footer in bootstrap 4 to have multiple 100% width rows.  So for the most basic bootstrap modal example below, is it possible to get the Close and Save changes buttons to be on different rows and both be 100% width?

Modal title

            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              ×
            </button>

            ...

            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>

Body:
Having two times a modal-footer will result in two borders too.

Remove can be easily done with border-0:

<div class="modal-footer">
    ...
</div>
<div class="modal-footer border-0">
    ...
</div>


问:
sessions not being set in all pages on php5
I am using session_start(); at the top of my login page. After a user logs in, a message is displayed on screen which shows that the session is being set. But, I cannot carry sessions from page to page or can I echo out SID. It is a blank value. I would be grateful if someone could show me where I am going wrong. Thanks</p>

```<code><?php

  $userpost = mysql_real_escape_string($_POST['user']);

  if (!isset($_SESSION['user'])) {
   session_start();
   $_SESSION['user'] = $userpost;
}

   echo $_SESSION['user'] .' '. 'Just logged in' .  SID;
   // Or maybe pass along the session id, if needed

?>
</code>```

答:
You said that you called session_start() at the top of your login page, but you did not mention your other pages.  session_start() needs to be called at the top of every page in your application.  I generally put my session_start() logic, along with a snippet of code for logging the user out after a period of inactivity, in an include file and then include it at the top of every page.

```<code><?  session_start();

    if (isset($_SESSION["last_activity"]) && (isset($_SESSION["username"])) && ((time() - $_SESSION["last_activity"]) > 900))
    {
        unset($_SESSION["username"]);
    }
    else
    {
        $_SESSION["last_activity"] = time();
    }
?>
</code>```

Body:
I am using session_start(); at the top of my login page. After a user logs in, a message is displayed on screen which shows that the session is being set. But, I cannot carry sessions from page to page or can I echo out SID. It is a blank value. I would be grateful if someone could show me where I am going wrong. Thanks

<?php

  $userpost = mysql_real_escape_string($_POST['user']);

  if (!isset($_SESSION['user'])) {
   session_start();
   $_SESSION['user'] = $userpost;
}

   echo $_SESSION['user'] .' '. 'Just logged in' .  SID;
   // Or maybe pass along the session id, if needed

?>

Body:
You said that you called session_start() at the top of your login page, but you did not mention your other pages.  session_start() needs to be called at the top of every page in your application.  I generally put my session_start() logic, along with a snippet of code for logging the user out after a period of inactivity, in an include file and then include it at the top of every page.

<?  session_start();

    if (isset($_SESSION["last_activity"]) && (isset($_SESSION["username"])) && ((time() - $_SESSION["last_activity"]) > 900))
    {
        unset($_SESSION["username"]);
    }
    else
    {
        $_SESSION["last_activity"] = time();
    }
?>


问:
A variable holds an unexpected value
I'm building a module for checking an answer in my Android java app and it doesn't work. While debugging it shows that the variable holds a value that is completely unexpected for it to hold. Could please someone explain what the problem might be? Here is the module:

private void QuizOperations() {

        Toast.makeText(QuizActivity.this,"quizOperation", Toast.LENGTH_SHORT).show();
        answered = true; // when the question is already answered Set bool to true
        RadioButton rbSelected = findViewById(rbGroup.getCheckedRadioButtonId());
        int indexofchild =rbGroup.indexOfChild(rbSelected) +1;
        int answerNr = indexofchild  +1;
        checkSolution(answerNr,rbSelected);// method checks if the answer that is selected by the user corresponds to the answer in the database
    }
```

The intended way was rbselected getting the index of the RadioButton pressed by the user, and than answerNr gets the index of this button as int. Than it passes in to the checksolution() function which checks if the AnswerNr corresponds to the right answer in the database. However, while debugging answerNr holds the value of 5 whichever button I press.

Debug screenshot

Let me know if any additional code needed. Thanks a lot

答:
Here is a very minimalistic example on how to detect the view is being pressed, set/get id from tag.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    android:background="#333333">
    <RadioButton
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:id="@+id/radioButton1"/>
    <RadioButton
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:id="@+id/radioButton2"/>
    <RadioButton
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:id="@+id/radioButton3"/>
</LinearLayout>
```
<pre class="lang-java prettyprint-override"><code>public class MainActivity extends AppCompatActivity implements View.OnClickListener
{
    private String[] answers = {
        "January",
        "February",
        "March",
    };

    private RadioButton rb1, rb2, rb3;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        rb1 = findViewById(R.id.radioButton1);
        rb2 = findViewById(R.id.radioButton2);
        rb3 = findViewById(R.id.radioButton3);

        rb1.setTag("0");
        rb2.setTag("1");
        rb3.setTag("2");

        rb1.setOnClickListener(this);
        rb2.setOnClickListener(this);
        rb3.setOnClickListener(this);
    }

    @Override
    public void onClick(View view)
    {
        final int index = Integer.parseInt((String)view.getTag());
        switch(view.getId()) {
            case R.id.radioButton1:
                rb2.setChecked(false);
                rb3.setChecked(false);
                Toast.makeText(MainActivity.this, answers[index], Toast.LENGTH_SHORT).show();
            break;
            case R.id.radioButton2:
                rb1.setChecked(false);
                rb3.setChecked(false);
                Toast.makeText(MainActivity.this, answers[index], Toast.LENGTH_SHORT).show();
            break;
            case R.id.radioButton3:
                rb1.setChecked(false);
                rb2.setChecked(false);
                Toast.makeText(MainActivity.this, answers[index], Toast.LENGTH_SHORT).show();
            break;
        }
    }
}
</code>```

Title: A variable holds an unexpected value

Body:
I'm building a module for checking an answer in my Android java app and it doesn't work. While debugging it shows that the variable holds a value that is completely unexpected for it to hold. Could please someone explain what the problem might be? Here is the module:

private void QuizOperations() {

        Toast.makeText(QuizActivity.this,"quizOperation", Toast.LENGTH_SHORT).show();
        answered = true; // when the question is already answered Set bool to true
        RadioButton rbSelected = findViewById(rbGroup.getCheckedRadioButtonId());
        int indexofchild =rbGroup.indexOfChild(rbSelected) +1;
        int answerNr = indexofchild  +1;
        checkSolution(answerNr,rbSelected);// method checks if the answer that is selected by the user corresponds to the answer in the database
    }

The intended way was rbselected getting the index of the RadioButton pressed by the user, and than answerNr gets the index of this button as int. Than it passes in to the checksolution() function which checks if the AnswerNr corresponds to the right answer in the database. However, while debugging answerNr holds the value of 5 whichever button I press.

Debug screenshot

Let me know if any additional code needed. Thanks a lot

Body:
Here is a very minimalistic example on how to detect the view is being pressed, set/get id from tag.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    android:background="#333333">
    <RadioButton
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:id="@+id/radioButton1"/>
    <RadioButton
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:id="@+id/radioButton2"/>
    <RadioButton
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:id="@+id/radioButton3"/>
</LinearLayout>

public class MainActivity extends AppCompatActivity implements View.OnClickListener
{
    private String[] answers = {
        "January",
        "February",
        "March",
    };

    private RadioButton rb1, rb2, rb3;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        rb1 = findViewById(R.id.radioButton1);
        rb2 = findViewById(R.id.radioButton2);
        rb3 = findViewById(R.id.radioButton3);

        rb1.setTag("0");
        rb2.setTag("1");
        rb3.setTag("2");

        rb1.setOnClickListener(this);
        rb2.setOnClickListener(this);
        rb3.setOnClickListener(this);
    }

    @Override
    public void onClick(View view)
    {
        final int index = Integer.parseInt((String)view.getTag());
        switch(view.getId()) {
            case R.id.radioButton1:
                rb2.setChecked(false);
                rb3.setChecked(false);
                Toast.makeText(MainActivity.this, answers[index], Toast.LENGTH_SHORT).show();
            break;
            case R.id.radioButton2:
                rb1.setChecked(false);
                rb3.setChecked(false);
                Toast.makeText(MainActivity.this, answers[index], Toast.LENGTH_SHORT).show();
            break;
            case R.id.radioButton3:
                rb1.setChecked(false);
                rb2.setChecked(false);
                Toast.makeText(MainActivity.this, answers[index], Toast.LENGTH_SHORT).show();
            break;
        }
    }
}


问:
How to prevent window.open(url, '_blank') to actually open during jasmine unit test
When I'm trying to test a window.open(url, '_blank'), it'll automatically open a new tab in my browser during the testing. Is there any way I can prevent this from happening?

Like, try to open a new tab, but don't do it. I know you could do jasmine.createSpyObj('obj', ['methods']).and.returnValue({...}), but I'm not sure how to do this for window.open.

NavigationService

```<code>export class NavigationService {
    navigate(url: string, openInNewTab: boolean = false): boolean {
        if (url.startsWith('http')) {
          openInNewTab ? window.open(url, '_blank') : ((window as any).location.href = url);
          return false;
        }
        ...
    }
}
</code>```

NavigationService spec

```<code>describe('NavigationService', () => {
    let navigationService: NavigationService;
    let routerSpy, configServiceSpy, windowSpy;

    let httpUrlMock = 'http://mock.com';

    beforeEach(() => {
        routerSpy = jasmine.createSpyObj('Router', ['createUrlTree', 'navigateByUrl']);
        configServiceSpy = jasmine.createSpyObj('ConfigService', ['current']);
        windowSpy = spyOn(window, 'open').and.callThrough();

        navigationService = new NavigationService(routerSpy, configServiceSpy);
    });

    it('should open the url in a new tab when the url starts with http ', () => {
        let _result = navigationService.navigate(httpUrlMock, true);

        expect(windowSpy).toHaveBeenCalledWith(httpUrlMock, '_blank');
    });
}
</code>```

答:
The problem with your code is the using of callThrough method, which is responsible for opening the URL. Just remove it and it will resolve your issue.

Just use the below line:

```<code> windowSpy = spyOn(window, 'open');
</code>```

Use of callthrough

Body:
When I'm trying to test a window.open(url, '_blank'), it'll automatically open a new tab in my browser during the testing. Is there any way I can prevent this from happening?

Like, try to open a new tab, but don't do it. I know you could do jasmine.createSpyObj('obj', ['methods']).and.returnValue({...}), but I'm not sure how to do this for window.open.

NavigationService

export class NavigationService {
    navigate(url: string, openInNewTab: boolean = false): boolean {
        if (url.startsWith('http')) {
          openInNewTab ? window.open(url, '_blank') : ((window as any).location.href = url);
          return false;
        }
        ...
    }
}

NavigationService spec

describe('NavigationService', () => {
    let navigationService: NavigationService;
    let routerSpy, configServiceSpy, windowSpy;

    let httpUrlMock = 'http://mock.com';

    beforeEach(() => {
        routerSpy = jasmine.createSpyObj('Router', ['createUrlTree', 'navigateByUrl']);
        configServiceSpy = jasmine.createSpyObj('ConfigService', ['current']);
        windowSpy = spyOn(window, 'open').and.callThrough();

        navigationService = new NavigationService(routerSpy, configServiceSpy);
    });

    it('should open the url in a new tab when the url starts with http ', () => {
        let _result = navigationService.navigate(httpUrlMock, true);

        expect(windowSpy).toHaveBeenCalledWith(httpUrlMock, '_blank');
    });
}

Body:
The problem with your code is the using of callThrough method, which is responsible for opening the URL. Just remove it and it will resolve your issue.

Just use the below line:

 windowSpy = spyOn(window, 'open');

Use of callthrough