问:
How to align ROI bounding rectangle to main image coordinate
I'am decoding a QR code from an image, since the image is large and have other unwanted graphics I'm drawing an roi around the code and decoding it. Everything works, but when i try to draw a bounding box around the QR code, it is drawn somewhere else. How can I align the rectangle in the same area of the main image?

This is what im getting - The red rectangle is the roi, the green one is the bounding box.

Here is the code :

```<code>     Image<Gray, byte> Gray_Image = My_Image.Convert<Gray, byte>();
    Gray_Image.ROI = Coderect;
         Gray_Image._Not();

        CvInvoke.cvThreshold(Gray_Image,Gray_Image,50,255.0,Emgu.CV.CvEnum.THRESH.CV_THRESH_BINARY);

        Gray_Image.Dilate(5);

        StructuringElementEx element = new StructuringElementEx(3, 3, 1, 1, Emgu.CV.CvEnum.CV_ELEMENT_SHAPE.CV_SHAPE_RECT);
        CvInvoke.cvMorphologyEx(Gray_Image, Gray_Image, IntPtr.Zero, element, Emgu.CV.CvEnum.CV_MORPH_OP.CV_MOP_CLOSE, 18);

        var contour = Gray_Image.FindContours(Emgu.CV.CvEnum.CHAIN_APPROX_METHOD.CV_CHAIN_APPROX_SIMPLE, Emgu.CV.CvEnum.RETR_TYPE.CV_RETR_EXTERNAL);

        CvInvoke.cvRectangle(My_Image, new Point(contour.BoundingRectangle.X, contour.BoundingRectangle.Y), new Point(contour.BoundingRectangle.X + contour.BoundingRectangle.Width, contour.BoundingRectangle.Y + contour.BoundingRectangle.Height), new MCvScalar(0, 255, 0), 4, Emgu.CV.CvEnum.LINE_TYPE.EIGHT_CONNECTED, 0);

        pictureBox1.Image = My_Image.Bitmap;
</code>```

答:
I found the solution.
Since I know the (roiX,roiY) of the roi and i also know the (bbX,bbY,bbW,bbH) of the bounding box.
By adding the X of roi and X of bounding box i got the X of the location, similarly for Y.

I simply had to do the following :

```<code>    cvInvoke.cvRectangle(My_Image, new Point(roiX+bbX, roiY+bbY), new Point((roiX+bbX)+bbW,(roiY+bbY)+bbH), new McvScalar(0,255,0), Line_Type.Eight_Connected,0);
</code>```

Body:
I'am decoding a QR code from an image, since the image is large and have other unwanted graphics I'm drawing an roi around the code and decoding it. Everything works, but when i try to draw a bounding box around the QR code, it is drawn somewhere else. How can I align the rectangle in the same area of the main image?

This is what im getting - The red rectangle is the roi, the green one is the bounding box.

Here is the code :

     Image<Gray, byte> Gray_Image = My_Image.Convert<Gray, byte>();
    Gray_Image.ROI = Coderect;
         Gray_Image._Not();

        CvInvoke.cvThreshold(Gray_Image,Gray_Image,50,255.0,Emgu.CV.CvEnum.THRESH.CV_THRESH_BINARY);

        Gray_Image.Dilate(5);

        StructuringElementEx element = new StructuringElementEx(3, 3, 1, 1, Emgu.CV.CvEnum.CV_ELEMENT_SHAPE.CV_SHAPE_RECT);
        CvInvoke.cvMorphologyEx(Gray_Image, Gray_Image, IntPtr.Zero, element, Emgu.CV.CvEnum.CV_MORPH_OP.CV_MOP_CLOSE, 18);

        var contour = Gray_Image.FindContours(Emgu.CV.CvEnum.CHAIN_APPROX_METHOD.CV_CHAIN_APPROX_SIMPLE, Emgu.CV.CvEnum.RETR_TYPE.CV_RETR_EXTERNAL);

        CvInvoke.cvRectangle(My_Image, new Point(contour.BoundingRectangle.X, contour.BoundingRectangle.Y), new Point(contour.BoundingRectangle.X + contour.BoundingRectangle.Width, contour.BoundingRectangle.Y + contour.BoundingRectangle.Height), new MCvScalar(0, 255, 0), 4, Emgu.CV.CvEnum.LINE_TYPE.EIGHT_CONNECTED, 0);

        pictureBox1.Image = My_Image.Bitmap;

Body:
I found the solution.
Since I know the (roiX,roiY) of the roi and i also know the (bbX,bbY,bbW,bbH) of the bounding box.
By adding the X of roi and X of bounding box i got the X of the location, similarly for Y.

I simply had to do the following :

    cvInvoke.cvRectangle(My_Image, new Point(roiX+bbX, roiY+bbY), new Point((roiX+bbX)+bbW,(roiY+bbY)+bbH), new McvScalar(0,255,0), Line_Type.Eight_Connected,0);


来源: stackexchange

问:
Get all data, but show pending data first then Approved data and rejected data
I am writing a sql query in Laravel to fetch all the data for current year but condition is I want to get status -  Pending data first and Approved and Rejected data. According to 'status' = Pending/Approve and Reject?</p>
```<code>$leaves = Leave::whereRaw('YEAR(start_date) = YEAR(CURDATE()) AND YEAR(end_date)=YEAR(CURDATE())')
                 ->where('created_by', '=', \Auth::user()->creatorId())->get();
</code>```

答:
You can use case in order by query.
Please change your query to

```<code>$leaves = Leave::whereRaw('YEAR(start_date) = YEAR(CURDATE()) AND YEAR(end_date)=YEAR(CURDATE())')
->where('created_by', '=', \Auth::user()->creatorId())
->orderByRaw('case when `status` LIKE "%Pending%" then 1 when `status` LIKE "%Rejected%" then 2 when `status` LIKE "%Approved%" then 3 else 4 end')
->get();
</code>```

ContentLicense: CC BY-SA 4.0

Body:
I am writing a sql query in Laravel to fetch all the data for current year but condition is I want to get status -  Pending data first and Approved and Rejected data. According to 'status' = Pending/Approve and Reject?

$leaves = Leave::whereRaw('YEAR(start_date) = YEAR(CURDATE()) AND YEAR(end_date)=YEAR(CURDATE())')
                 ->where('created_by', '=', \Auth::user()->creatorId())->get();

Body:
You can use case in order by query.
Please change your query to

$leaves = Leave::whereRaw('YEAR(start_date) = YEAR(CURDATE()) AND YEAR(end_date)=YEAR(CURDATE())')
->where('created_by', '=', \Auth::user()->creatorId())
->orderByRaw('case when `status` LIKE "%Pending%" then 1 when `status` LIKE "%Rejected%" then 2 when `status` LIKE "%Approved%" then 3 else 4 end')
->get();


问:
how did they develop frontend, before node.js?
I'm learning frontend development, And in modern days we use frameworks like react, vue, angular etc. and also tools like webpack babel etc.

But all those frameworks and tools are installed by npm and run on nodejs.

Then, before nodejs came out, how did frontend work?

did they just insert script tags of jquery cdn?
and there were no build process neither?

答: Yes, if you have a look at how Angularjs works, that's pretty much what front-end was like.</p>


问:
The argument type 'Widget Function(BuildContext, T, Widget)' can't be assigned to the parameter type 'Widget Function(BuildContext, T, Widget?)
I have a base widget class which no longer works since I upgraded the provider version to 5.0.0.

At builder: widget.builder I am getting this error:

The argument type 'Widget Function(BuildContext, T, Widget)' can't be
assigned to the parameter type 'Widget Function(BuildContext, T,
Widget?)

How can I fix this?

Here is my code

```<code>import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class BaseWidget<T extends ChangeNotifier> extends StatefulWidget {
  final Widget Function(BuildContext context, T model, Widget child) builder;
  final T model;
  final Widget child;
  final Function(T) onModelReady;

  BaseWidget({
    Key? key,
    required this.builder,
    required this.model,
    required this.child,
    required this.onModelReady,
  }) : super(key: key);

  _BaseWidgetState<T> createState() => _BaseWidgetState<T>();
}

class _BaseWidgetState<T extends ChangeNotifier> extends State<BaseWidget<T>> {
  late T model;

  @override
  void initState() {

    model = widget.model;

      widget.onModelReady(model);

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<T>(
      create: (context) => model,
      child: Consumer<T>(
        builder: widget.builder,
        child: widget.child,
      ),
    );
  }
}
</code>```

答:
I pasted the code into Android studio and it looks like to need to change the following:

From

```<code>final Widget Function(BuildContext context, T model, Widget child) builder;
</code>```

To

```<code>final Widget Function(BuildContext context, T model, Widget? child) builder;
</code>```

Body:
I have a base widget class which no longer works since I upgraded the provider version to 5.0.0.

At builder: widget.builder I am getting this error:

The argument type 'Widget Function(BuildContext, T, Widget)' can't be
assigned to the parameter type 'Widget Function(BuildContext, T,
Widget?)

How can I fix this?

Here is my code

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class BaseWidget<T extends ChangeNotifier> extends StatefulWidget {
  final Widget Function(BuildContext context, T model, Widget child) builder;
  final T model;
  final Widget child;
  final Function(T) onModelReady;

  BaseWidget({
    Key? key,
    required this.builder,
    required this.model,
    required this.child,
    required this.onModelReady,
  }) : super(key: key);

  _BaseWidgetState<T> createState() => _BaseWidgetState<T>();
}

class _BaseWidgetState<T extends ChangeNotifier> extends State<BaseWidget<T>> {
  late T model;

  @override
  void initState() {

    model = widget.model;

      widget.onModelReady(model);

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<T>(
      create: (context) => model,
      child: Consumer<T>(
        builder: widget.builder,
        child: widget.child,
      ),
    );
  }
}

Body:
I pasted the code into Android studio and it looks like to need to change the following:

From

final Widget Function(BuildContext context, T model, Widget child) builder;

To

final Widget Function(BuildContext context, T model, Widget? child) builder;


问:
Bad UTF-8 without BOM encoding
I converted all my files to UTF-8 without BOM encoding using Notepad++. I have no problem with BOMs anymore but the UTF without BOM encoding is simply not working, it's as if my site was encoded in ANSI. All special characters display either as: Â, Ãš or Ã¡.

What can be the reason for this and how can I fix it?

http://chusmix.com/?ciudad=Pilar

Thanks

答:
you will need to tell your web server to tell the client that now everything is utf-8...

There are 2 options to do this:

HTTP header
this is a setting of the web server itself Content-Type: text/html; charset=UTF-8

Meta tags
this is something you could put into your html files header <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

see http://www.w3.org/International/O-HTTP-charset.en.php?changelang=en

you can check your site for problems regarding charset and other things here

ContentLicense: CC BY-SA 3.0

Title: Bad UTF-8 without BOM encoding


问:
Difference between a deconstructor and exit() C++
In college, when learning C++ specifically, we're always taught that we need to deallocate dynamically allocated memory or close an open file using a deconstructor. What is the difference between that and just using the operating system call exit(0)? Just wondering.</p>

答:
They are not comparable. Apples and oranges

exit() is a C library function. Cpp Reference tells us:

Causes normal program termination to occur.

Several cleanup steps are performed:

functions passed to atexit are called, in reverse order of registration

all C streams are flushed and closed

files created by tmpfile are removed

A deconstructor is a C++ specific feature. It's a class member function that handles cleanup of an object when it goes out of scope. Cpp Reference tells us:

A destructor is a special member function that is called when the lifetime of an object ends. The purpose of the destructor is to free the resources that the object may have acquired during its lifetime.

You call exit() once and the program ends. Meanwhile destructors are executed all of the time. Because objects get created and go out of scope all the time. Just think of local variables. Or during copying of objects.


问:
ADF Pipeline Stopped Working: Job failed due to reason: The result has 0 output columns. Please ensure at least one column is mapped
I've successfully manually triggered a pipeline in development many times.  We're loading csv files into an Azure Blob Storage container from Sql server and sinking with an Azure SQL database. Now when I run the same pipeline I get the error: 'StatusCode':'DF-Executor-InvalidOutputColumns','Message':'Job failed due to reason: The result has 0 output columns. Please ensure at least one column is mapped. The schema is late binding.  I can preview in Source (sometimes), but not in Sink. I've not changed anything since last successful run.  Anyone else ever experience this?</p>

答: Make sure your 'Allow schema drift' option is enabled in 'Sink' tab.


问:
Which class can I use to pass a "RecordSet" between an WinForm VB.Net EXE program and a classes DLL?
I have developped a VB.Net DLL that can read Postgres, Oracle and OleDb.

To allow this DLL to execute some SQL commands, I pass it a Connection object and I use it to execute some SQL SELECT command.

My problem now is that I want to pass all data contained in a GridView object that contains data obtained using a SQL command in EXE program (not in DLL) and that user can have changed.

Which type of object can I pass considering following constraints ?

argument passed cannot be a WinForm control as DataGridView (no Winform object in DLL)

another database's table cannot be filled with DataGridView content (not performant)

class used must be part of an .Net assembly (not a COM, too old technology)

Until now, the only solution found consist of using ADO or Microsoft ActiveX Data Object Record Set, but this class is not an .Net assembly and solution found on DataBase Journal does'nt work because Items property of Field class is Read Only.

Here is my code

```<code>    Dim rstADO As ADODB.Recordset
    rstADO = New ADODB.Recordset
    With rstADO
        .Fields.Append("EmployeeID", ADODB.DataTypeEnum.adInteger, 0, ADODB.FieldAttributeEnum.adFldKeyColumn)
        .Fields.Append("FirstName", ADODB.DataTypeEnum.adVarChar, 10, ADODB.FieldAttributeEnum.adFldMayBeNull)

        .CursorType = ADODB.CursorTypeEnum.adOpenKeyset
        .CursorLocation = ADODB.CursorLocationEnum.adUseClient
        .LockType = ADODB.LockTypeEnum.adLockPessimistic
        .Open()

        For Each row As DataGridViewRow In grid.Rows
            .AddNew()
            For i = 0 To grid.Columns.Count - 1
                .Fields(i) = row.Cells(i).Value
            Next i
            .Update()
        Next row
    End With
</code>```

Line .Fields(i) dispay following error
BC30526: 'Item' property is 'ReadOnly'.

Which class can I use ?

答:
You can use a .Net DataTable object.

Here is some lines of code

```<code>Dim dt As New DataTable

dt.Columns.Add("EmployeeID", GetType(Integer))
dt.Columns.Add("FirstName", GetType(String))

For Each row As DataGridViewRow In grid.Rows
    dt.Rows.Add(row.Cells(0), row.Cells(1))
Next row
</code>```

and when it is filled, you can pass it to your DLL

```<code>SetDataTable(dt)
</code>```

Body:
I have developped a VB.Net DLL that can read Postgres, Oracle and OleDb.

To allow this DLL to execute some SQL commands, I pass it a Connection object and I use it to execute some SQL SELECT command.

My problem now is that I want to pass all data contained in a GridView object that contains data obtained using a SQL command in EXE program (not in DLL) and that user can have changed.

Which type of object can I pass considering following constraints ?

argument passed cannot be a WinForm control as DataGridView (no Winform object in DLL)

another database's table cannot be filled with DataGridView content (not performant)

class used must be part of an .Net assembly (not a COM, too old technology)

Until now, the only solution found consist of using ADO or Microsoft ActiveX Data Object Record Set, but this class is not an .Net assembly and solution found on DataBase Journal does'nt work because Items property of Field class is Read Only.

Here is my code

    Dim rstADO As ADODB.Recordset
    rstADO = New ADODB.Recordset
    With rstADO
        .Fields.Append("EmployeeID", ADODB.DataTypeEnum.adInteger, 0, ADODB.FieldAttributeEnum.adFldKeyColumn)
        .Fields.Append("FirstName", ADODB.DataTypeEnum.adVarChar, 10, ADODB.FieldAttributeEnum.adFldMayBeNull)

        .CursorType = ADODB.CursorTypeEnum.adOpenKeyset
        .CursorLocation = ADODB.CursorLocationEnum.adUseClient
        .LockType = ADODB.LockTypeEnum.adLockPessimistic
        .Open()

        For Each row As DataGridViewRow In grid.Rows
            .AddNew()
            For i = 0 To grid.Columns.Count - 1
                .Fields(i) = row.Cells(i).Value
            Next i
            .Update()
        Next row
    End With

Line .Fields(i) dispay following error
BC30526: 'Item' property is 'ReadOnly'.

Which class can I use ?

Body:
You can use a .Net DataTable object.

Here is some lines of code

Dim dt As New DataTable

dt.Columns.Add("EmployeeID", GetType(Integer))
dt.Columns.Add("FirstName", GetType(String))

For Each row As DataGridViewRow In grid.Rows
    dt.Rows.Add(row.Cells(0), row.Cells(1))
Next row

and when it is filled, you can pass it to your DLL

SetDataTable(dt)


问:
Is any way to add 2 arrays into one?
Is there any simple univesal way to add 2 arrays into one? In the case below it is not possible simply use C := A + B statement...
I would like to avoid making algorhytm for it everytime .

```<code>TPerson = record
    Birthday: Tdate;
    Name, Surname:string;
end;

Tpeople = array of TPerson;

var A, B, C:Tpeople;

C:=A+B; // it is not possible
</code>```

thanx

答:
Due to the two string fields in each TPerson record, you can't just use binary "move", since you'll mess the reference counting of string - especially in a multi-threaded environment.

You can do it manually - this is fast and nice:

```<code>TPerson = record
  Birthday: TDate;
  Name, Surname: string;
end;

TPeople = array of TPerson;

var A, B, C: TPeople;

// do C:=A+B
procedure Sum(const A,B: TPeople; var C: TPeople);
begin
var i, nA,nB: integer;
begin
  nA := length(A);
  nB := length(B);
  SetLength(C,nA+nB);
  for i := 0 to nA-1 do
    C[i] := A[i];
  for i := 0 to nB-1 do
    C[i+nA] := B[i];
end;
</code>```

Or you can use our TDynArray wrapper, which has a method for handling such cases:

```<code>procedure AddToArray(var A: TPeople; const B: TPeople);
var DA: TDynArray;
begin
  DA.Init(TypeInfo(TPeople),A);
  DA.AddArray(B); // A := A+B
end;
</code>```

The AddArray method can add a sub-port of the original array:

```<code>/// add elements from a given dynamic array
// - the supplied source DynArray MUST be of the same exact type as the
// current used for this TDynArray
// - you can specify the start index and the number of items to take from
// the source dynamic array (leave as -1 to add till the end)
procedure AddArray(const DynArray; aStartIndex: integer=0; aCount: integer=-1);
</code>```

Note that with such records, it will use the System._CopyRecord RTL function, which is not so optimized for speed. I've written a faster version - see this blog article or this forum thread.

If you use dynamic arrays in functions/procedures, don't forget to use explicitly const or var parameters (as I coded above), otherwise it will make a temporary copy at each call, therefore it may be slow.

Title: Is any way to add 2 arrays into one?

Body:
Is there any simple univesal way to add 2 arrays into one? In the case below it is not possible simply use C := A + B statement...
I would like to avoid making algorhytm for it everytime .

TPerson = record
    Birthday: Tdate;
    Name, Surname:string;
end;

Tpeople = array of TPerson;

var A, B, C:Tpeople;

C:=A+B; // it is not possible

thanx

Body:
Due to the two string fields in each TPerson record, you can't just use binary "move", since you'll mess the reference counting of string - especially in a multi-threaded environment.

You can do it manually - this is fast and nice:

TPerson = record
  Birthday: TDate;
  Name, Surname: string;
end;

TPeople = array of TPerson;

var A, B, C: TPeople;

// do C:=A+B
procedure Sum(const A,B: TPeople; var C: TPeople);
begin
var i, nA,nB: integer;
begin
  nA := length(A);
  nB := length(B);
  SetLength(C,nA+nB);
  for i := 0 to nA-1 do
    C[i] := A[i];
  for i := 0 to nB-1 do
    C[i+nA] := B[i];
end;

Or you can use our TDynArray wrapper, which has a method for handling such cases:

procedure AddToArray(var A: TPeople; const B: TPeople);
var DA: TDynArray;
begin
  DA.Init(TypeInfo(TPeople),A);
  DA.AddArray(B); // A := A+B
end;

The AddArray method can add a sub-port of the original array:

/// add elements from a given dynamic array
// - the supplied source DynArray MUST be of the same exact type as the
// current used for this TDynArray
// - you can specify the start index and the number of items to take from
// the source dynamic array (leave as -1 to add till the end)
procedure AddArray(const DynArray; aStartIndex: integer=0; aCount: integer=-1);

Note that with such records, it will use the System._CopyRecord RTL function, which is not so optimized for speed. I've written a faster version - see this blog article or this forum thread.

If you use dynamic arrays in functions/procedures, don't forget to use explicitly const or var parameters (as I coded above), otherwise it will make a temporary copy at each call, therefore it may be slow.


问:
Issue in functioning of radio input in dynamically adding row through jQuery
A new row is dynamically creating on clicking "add Row" button through function in jQuery.
But when I select radio input in new row then selected value of previous radio input is removing.
Please run and see the codes as below:
enter image description here

function add_row(table_row_count)
{
    $("#add-row_"+table_row_count).hide();
    $("#delete-row_"+table_row_count).hide();

    var table_row_count = parseInt(table_row_count);

    table_row_count += 1;

    var markup =
    '
'+
    ''+table_row_count+'	'+
    ''+
          'Value in Range? :'+
          '<input type="radio" name="option" id="option_1_row_'+table_row_count+'" value="1"  > YES'+
          '<input type="radio" name="option" id="option_2_row_'+table_row_count+'" value="2"  > NO'+
    '	'+
    ''+
            'Range From :
'+
            '<input type="text" name="capacity_from[]" id="capacity_from_'+table_row_count+'"  />'+
    '	'+
    ''+
            'Range Upto :
'+
            '<input type="text" name="capacity_upto[]" id="capacity_upto_'+table_row_count+'" />'+
     '	'+
    ' Add Row	'+
    ' Delete Row	'+
    '
';

    var table = $("#tbl_details tbody");
    table.append(markup);

}

function delete_row(table_row_count)
{
    var r = confirm("Are you sure to delete row");
    if(r == false){
        return;
    }

    var table_row_count = parseInt(table_row_count);
    var previous_row = table_row_count - 1;
    $("#add-row_"+previous_row).show();
    if(previous_row != 1){
        $("#delete-row_"+previous_row).show();
    }

    $("#tbl_row_"+table_row_count).remove();

}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="add.js"></script>
</head>
<body>
        <h3>Enter Details</h3>
        <table class="table table-striped" id="tbl_details">
        <tbody>
        <tr id="row_1">
        <td>1.</td>
        <td>
          <label>Value in Range? :</label>
          <input type="radio" name="option" id="option_1_row_1" value="1" checked="checked" > YES
          <input type="radio" name="option" id="option_2_row_1" value="2" > NO
        </td>
        <td id="capacity_from_row_1" >
            <label>Range From :</label><br>
            <input type="text" name="capacity_from[]" id="capacity_from_1" />
        </td>
        <td>
            <label id="lbl_capacity_range_1" >Range Upto :</label><br>
            <input type="text" name="capacity_upto[]" id="capacity_upto_1" />
        </td>
        <td class="align-middle"><i class="fa fa-plus fa-lg text-success" aria-hidden="true"></i> Add Row</td>
        <td class="align-middle"></td>
        </tr>
        </tbody>
        </table>
</body>
</html></code>```

How to solve the issue. kindly help me.
Thanks in advance.

答:
This is happening because you are using the same name for radio button. And it is default behavior of radio that if you are using the same name for radio button then only one can be selected at time.

For Example

1.) If you have two radios with same name

Only one value can be selected at a time.

2.) Now after adding another row your code will look like

```<code><input name="option" type="radio" value="true"/>
<input name="option" type="radio" value="false"/
<input name="option" type="radio" value="true"/>
<input name="option" type="radio" value="false"/>
</code>```

name is same for all radio buttons so only one will be selected at a time.

Fix:

In order to fix this issue while adding new row append row number in front of name. That will fix the issue like you did for id attribute.

```<code>'<td>'+
          '<label>Value in Range? :</label>'+
          '<input type="radio" name="option_'+table_row_count+'" id="option_1_row_'+table_row_count+'" value="1"  > YES'+
          '<input type="radio" name="option_'+table_row_count+'" id="option_2_row_'+table_row_count+'" value="2"  > NO'+
    '</td>'+
</code>```

Fixing this will fix the issue.

Body:
A new row is dynamically creating on clicking "add Row" button through function in jQuery.
But when I select radio input in new row then selected value of previous radio input is removing.
Please run and see the codes as below:
enter image description here

function add_row(table_row_count)
{
    $("#add-row_"+table_row_count).hide();
    $("#delete-row_"+table_row_count).hide();

    var table_row_count = parseInt(table_row_count);

    table_row_count += 1;

    var markup =
    '
'+
    ''+table_row_count+'	'+
    ''+
          'Value in Range? :'+
          '<input type="radio" name="option" id="option_1_row_'+table_row_count+'" value="1"  > YES'+
          '<input type="radio" name="option" id="option_2_row_'+table_row_count+'" value="2"  > NO'+
    '	'+
    ''+
            'Range From :
'+
            '<input type="text" name="capacity_from[]" id="capacity_from_'+table_row_count+'"  />'+
    '	'+
    ''+
            'Range Upto :
'+
            '<input type="text" name="capacity_upto[]" id="capacity_upto_'+table_row_count+'" />'+
     '	'+
    ' Add Row	'+
    ' Delete Row	'+
    '
';

    var table = $("#tbl_details tbody");
    table.append(markup);

}

function delete_row(table_row_count)
{
    var r = confirm("Are you sure to delete row");
    if(r == false){
        return;
    }

    var table_row_count = parseInt(table_row_count);
    var previous_row = table_row_count - 1;
    $("#add-row_"+previous_row).show();
    if(previous_row != 1){
        $("#delete-row_"+previous_row).show();
    }

    $("#tbl_row_"+table_row_count).remove();

}

Enter Details

        1.

          Value in Range? :
          <input type="radio" name="option" id="option_1_row_1" value="1" checked="checked" > YES
          <input type="radio" name="option" id="option_2_row_1" value="2" > NO

            Range From :

            <input type="text" name="capacity_from[]" id="capacity_from_1" />

            Range Upto :

            <input type="text" name="capacity_upto[]" id="capacity_upto_1" />

         Add Row

How to solve the issue. kindly help me.
Thanks in advance.

Body:
This is happening because you are using the same name for radio button. And it is default behavior of radio that if you are using the same name for radio button then only one can be selected at time.

For Example

1.) If you have two radios with same name

Only one value can be selected at a time.

2.) Now after adding another row your code will look like

<input name="option" type="radio" value="true"/>
<input name="option" type="radio" value="false"/
<input name="option" type="radio" value="true"/>
<input name="option" type="radio" value="false"/>

name is same for all radio buttons so only one will be selected at a time.

Fix:

In order to fix this issue while adding new row append row number in front of name. That will fix the issue like you did for id attribute.

'<td>'+
          '<label>Value in Range? :</label>'+
          '<input type="radio" name="option_'+table_row_count+'" id="option_1_row_'+table_row_count+'" value="1"  > YES'+
          '<input type="radio" name="option_'+table_row_count+'" id="option_2_row_'+table_row_count+'" value="2"  > NO'+
    '</td>'+

Fixing this will fix the issue.


问:
Connecting Mongodb databse to node.js server
I have been trying to make a web app using node.js and express and decided to work with mongodb.
I am using mongodb node.js driver version: 4.3.1
I have tried all the possible ways to connect the node.js server with my mongodb atlas database.

My database also got connected using the following code in my db.js file:

```<code>const app = require('./app');

const MongoClient = require('mongodb').MongoClient

const Url = 'mongodb+srv://todoAppUser:<myOriginalPasswordHere>@cluster0.6lvjr.mongodb.net/myDatabase?retryWrites=true&w=majority';

MongoClient.connect(Url, function (err, client) {
  if (err) throw err;

  var db = client.db('myDatabase');

  db.collection('products').findOne({}, function (findErr, result) {
    if (findErr) throw findErr;
    console.log(result.name);
    client.close();
  });
});
</code>```

The above code works fine and gives the output as well.
But I want to use MVC (Model-view-Controller) framework for which I need to export the connection.

I made the following change in the above code:

```<code>MongoClient.connect(Url, function (err, client) {
  if (err) throw err;

  var db = client.db('myDatabase');

  db.collection('products').findOne({}, function (findErr, result) {
    if (findErr) throw findErr;
    console.log(result.name);
  module.exports = db
    client.close();
  });
});
</code>```

After the change when I try to access my connection (const productCollection = require('./db').collection("product");) from any other file of mine, it gives me the following error:

```<code>const productCollection = require('./db').collection("product");
                                          ^

TypeError: require(...).collection is not a function
    at Object.<anonymous> (D:\Kush- Complete Data\exp-projects\nodeApp\productController.js:1:43)
    at Module._compile (internal/modules/cjs/loader.js:1072:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
    at Module.load (internal/modules/cjs/loader.js:937:32)
    at Function.Module._load (internal/modules/cjs/loader.js:778:12)
    at Module.require (internal/modules/cjs/loader.js:961:19)
    at require (internal/modules/cjs/helpers.js:92:18)
    at Object.<anonymous> (D:\Kush- Complete Data\exp-projects\nodeApp\router.js:3:27)
    at Module._compile (internal/modules/cjs/loader.js:1072:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
[nodemon] app crashed - waiting for file changes before starting...
</code>```

May anyone please guide me and show a possible way out.

Thanks,
Kush

答:
[SOLVED]
I figured out, in newer versions of mongodb they have essentially changed the way of connecting node server to the database.
To establish a reusable connection (So that we can access the connected database from any other file), I created an async function in my db.js file where connection is established and then exported it. In the end of the file, I have called the function.
The code is as follows:

```<code> const {MongoClient} = require('mongodb')

    const client = new MongoClient('mongodb+srv://todoAppUser:<password>@cluster0.6lvjr.mongodb.net/myDatabase?retryWrites=true&w=majority')

    async function start(){
      await client.connect()
      console.log("Connected")
      module.exports = client.db()
      const app = require('./app')
      app.listen(3000)
    }

      start()
</code>```

and while calling it from another file:

```<code>const productCollection = require('./db').collection("product");
</code>```

This code gives me no error and works perfectly fine.
With the help of the above code, one can use this conveniently while following the MVC (Model-View-Controller) framework.

Body:
I have been trying to make a web app using node.js and express and decided to work with mongodb.
I am using mongodb node.js driver version: 4.3.1
I have tried all the possible ways to connect the node.js server with my mongodb atlas database.

My database also got connected using the following code in my db.js file:

const app = require('./app');

const MongoClient = require('mongodb').MongoClient

const Url = 'mongodb+srv://todoAppUser:<myOriginalPasswordHere>@cluster0.6lvjr.mongodb.net/myDatabase?retryWrites=true&w=majority';

MongoClient.connect(Url, function (err, client) {
  if (err) throw err;

  var db = client.db('myDatabase');

  db.collection('products').findOne({}, function (findErr, result) {
    if (findErr) throw findErr;
    console.log(result.name);
    client.close();
  });
});

The above code works fine and gives the output as well.
But I want to use MVC (Model-view-Controller) framework for which I need to export the connection.

I made the following change in the above code:

MongoClient.connect(Url, function (err, client) {
  if (err) throw err;

  var db = client.db('myDatabase');

  db.collection('products').findOne({}, function (findErr, result) {
    if (findErr) throw findErr;
    console.log(result.name);
  module.exports = db
    client.close();
  });
});

After the change when I try to access my connection (const productCollection = require('./db').collection("product");) from any other file of mine, it gives me the following error:

const productCollection = require('./db').collection("product");
                                          ^

TypeError: require(...).collection is not a function
    at Object.<anonymous> (D:\Kush- Complete Data\exp-projects\nodeApp\productController.js:1:43)
    at Module._compile (internal/modules/cjs/loader.js:1072:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
    at Module.load (internal/modules/cjs/loader.js:937:32)
    at Function.Module._load (internal/modules/cjs/loader.js:778:12)
    at Module.require (internal/modules/cjs/loader.js:961:19)
    at require (internal/modules/cjs/helpers.js:92:18)
    at Object.<anonymous> (D:\Kush- Complete Data\exp-projects\nodeApp\router.js:3:27)
    at Module._compile (internal/modules/cjs/loader.js:1072:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
[nodemon] app crashed - waiting for file changes before starting...

May anyone please guide me and show a possible way out.

Thanks,
Kush

Body:
[SOLVED]
I figured out, in newer versions of mongodb they have essentially changed the way of connecting node server to the database.
To establish a reusable connection (So that we can access the connected database from any other file), I created an async function in my db.js file where connection is established and then exported it. In the end of the file, I have called the function.
The code is as follows:

 const {MongoClient} = require('mongodb')

    const client = new MongoClient('mongodb+srv://todoAppUser:<password>@cluster0.6lvjr.mongodb.net/myDatabase?retryWrites=true&w=majority')

    async function start(){
      await client.connect()
      console.log("Connected")
      module.exports = client.db()
      const app = require('./app')
      app.listen(3000)
    }

      start()

and while calling it from another file:

const productCollection = require('./db').collection("product");

This code gives me no error and works perfectly fine.
With the help of the above code, one can use this conveniently while following the MVC (Model-View-Controller) framework.


问:
Video element in react does not play the stream
The html video element below does not play the webcam stream.
setState works fine since the browser notifies me that the site is accessing the camera.
It still invokes the webcam but the html video element is not activated after state change.
What i see is the black screen even if the webcam is active.
There are no error messages on browser console
any help appreciated</p>
```<code> import React, {useState,useEffect} from 'react';
    import PropTypes from "prop-types";
    import { withStyles } from "@material-ui/core/styles";
    import  Paper from "@material-ui/core/Paper";

    import { connect } from "react-redux";

    const styles = () => ({
      root: {
        display: "flex",
        flexDirection: "column",
        width: "20%",
        height: "25%",
        overflowY: "auto",
      },
      videoPreview:{
        alignSelf: "center",
        width: "30%",
        backgroundColor: "rgba(0, 0, 0, 0.25)",
        marginTop: 20,
      },
    });

    const Preview = (props) => {
      const {classes} = props;
      const [videoPreviewTrack, setVideoPreviewTrack] = useState(navigator.mediaDevices.getUserMedia({video:true}) );
      useEffect(() => {
     //something here maybe?
      });

        return (
          <div className={classes.videoPreview}>
          <video src={videoPreviewTrack} autoPlay={true} id={"videoPreviewElement"}>
          </video ></div>
      );
    };

    Preview.propTypes = {
      classes: PropTypes.object.isRequired,
    };

    export default connect()(withStyles(styles)(Preview));
</code>```

答:
```<code>import React, {useState,useEffect,useRef} from 'react';
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import  Paper from "@material-ui/core/Paper";

import { connect } from "react-redux";
import Select from '@material-ui/core/Select';

const styles = () => ({
  root: {
    display: "flex",
    flexDirection: "column",
    width: "20%",
    height: "25%",
    overflowY: "auto",
  },
  previewBackground:{
    alignSelf: "center",
    backgroundColor: "rgba(0, 0, 0, 0.25)",
    marginTop: 20,
  },
  videoPreview:{
    alignSelf: "center",
    width: "15%",
    backgroundColor: "rgba(0, 0, 0, 0.25)",
    marginTop: 5,
  },
});

const Preview = (props) => {
  const {classes} = props;
  const videoRef = useRef(null);

  useEffect(() => {
    getVideo();
  }, [videoRef]);

  const getVideo = () => {
    navigator.mediaDevices
    .getUserMedia( {video:  true} )
    .then(stream => {
      let video = videoRef.current;
      video.srcObject = stream;
      video.play();
    })
    .catch(err => {
      console.error("error:", err);
    });
  };

    return (<div align={"center"} className={classes.previewBackground} >
      <div   >
      <video className={classes.videoPreview} ref={videoRef} >
        </video >
      </div>
        </div>
  );
};

Preview.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default (withStyles(styles)(Preview));
</code>```

Body:
The html video element below does not play the webcam stream.
setState works fine since the browser notifies me that the site is accessing the camera.
It still invokes the webcam but the html video element is not activated after state change.
What i see is the black screen even if the webcam is active.
There are no error messages on browser console
any help appreciated

 import React, {useState,useEffect} from 'react';
    import PropTypes from "prop-types";
    import { withStyles } from "@material-ui/core/styles";
    import  Paper from "@material-ui/core/Paper";

    import { connect } from "react-redux";

    const styles = () => ({
      root: {
        display: "flex",
        flexDirection: "column",
        width: "20%",
        height: "25%",
        overflowY: "auto",
      },
      videoPreview:{
        alignSelf: "center",
        width: "30%",
        backgroundColor: "rgba(0, 0, 0, 0.25)",
        marginTop: 20,
      },
    });

    const Preview = (props) => {
      const {classes} = props;
      const [videoPreviewTrack, setVideoPreviewTrack] = useState(navigator.mediaDevices.getUserMedia({video:true}) );
      useEffect(() => {
     //something here maybe?
      });

        return (

          <video src={videoPreviewTrack} autoPlay={true} id={"videoPreviewElement"}>
          </video >

      );
    };

    Preview.propTypes = {
      classes: PropTypes.object.isRequired,
    };

    export default connect()(withStyles(styles)(Preview));


问:
Can boost Pointer Container Library be used as thread safe container collection?
Can we use boost Pointer Container Library to keep an array of strings winth thread safe push and pop and all such operations?</p>

答:
No, as far as thread safety goes the same rules apply to the pointer container library and the standard C++ library containers. They're both safe for simultaneous read access from different threads but must be protected by mutexes to prevent simultaneous write access.

This is because the containers in the pointer container library simply use an underlying container_type<void*> of the corresponding standard container to store the objects. For instance, boost::ptr_vector uses an std::vector<void*>.


问:
New modules not imported
After updating macOs to Monterey, every new modules I install with pip won’t be imported in my Python programs. My sis.path are good and all the packages I need are in the site-packages. Can somebody help me ?</p>

答:
You need to check your python environment.

try which pip3 or which python3 to check locate your active python directory.

You can have different python versions installed in macOS which often leads to this issue.

Or maybe you are using virtual environments which creates isolated site-packages. If this is intended, then you should run your script within this environment to use the packages that you've installed.

Title: New modules not imported


问:
Django runserver error- frozen importlib._bootstrap
I have been working on a project, and whenever I try the code:py manage.py runserver I get the error bellow.
Kindly help to go about the error.

```<code>OSError: [WinError 123] The filename, directory name, or volume label syntax is incorrect: '<frozen importlib._bootstrap>'
</code>```

答: The same problem happened to me. In my case, I wrote 'rest-framework' instead of 'rest_framework' in INSTALLED_APPS. Check that too.</p>

Body:
I have been working on a project, and whenever I try the code:py manage.py runserver I get the error bellow.
Kindly help to go about the error.

OSError: [WinError 123] The filename, directory name, or volume label syntax is incorrect: '<frozen importlib._bootstrap>'


问:
LIKE in any column from the table
I have a table that contains more than 300 columns. Some of the column names are generated dynamically each day. Any of these columns may contain a specific string.

Is there any way to build a LIKE statement (or similar) that can search through all columns?

Table looks something like this:

```<code>id  column_random_name_1 column_random_name_2 column_random_name_3
1   abc                  lkj                  ipx_my_string_ipx
2   bcd                  jhd                  jug
3   hjf_my_string_hjf    pod                  asx
4   pol                  jik_my_string_jik    mlp
5   hgh                  dop                  btx
</code>```

The expected resultset would contain only the rows that contain 'my_string' in any column:

```<code>id  column_random_name_1 column_random_name_2 column_random_name_3
1   abc                  lkj                  ipx_my_string_ipx
3   hjf_my_string_hjf    pod                  asx
4   pol                  jik_my_string_jik    mlp
</code>```

答:
You need to use a dynamic query

Get all lists of columns from the table

build like query on the basis of table and columns

CREATE PROCEDURE dbo.SearchTable
@tablename NVARCHAR(257),
@term      NVARCHAR(4000)
AS
BEGIN
SET NOCOUNT ON;

```<code> DECLARE @sql NVARCHAR(MAX);

 SET @sql = N'SELECT * FROM ' + @tablename + ' WHERE 1 = 0';

 SELECT @sql = @sql + '
   OR ' + c.name + ' LIKE ''%' + REPLACE(@term, '''', '''''') + '%'''
 FROM
   sys.all_columns AS c
 INNER JOIN
   sys.types AS t
   ON c.system_type_id = t.system_type_id
   AND c.user_type_id = t.user_type_id
 WHERE
   c.[object_id] = OBJECT_ID(@tablename)
   AND t.name IN (N'sysname', N'char', N'nchar',
     N'varchar', N'nvarchar', N'text', N'ntext');

 PRINT @sql;

 -- EXEC sp_executesql @sql;
</code>```

END
GO

Title: LIKE in any column from the table

Body:
I have a table that contains more than 300 columns. Some of the column names are generated dynamically each day. Any of these columns may contain a specific string.

Is there any way to build a LIKE statement (or similar) that can search through all columns?

Table looks something like this:

id  column_random_name_1 column_random_name_2 column_random_name_3
1   abc                  lkj                  ipx_my_string_ipx
2   bcd                  jhd                  jug
3   hjf_my_string_hjf    pod                  asx
4   pol                  jik_my_string_jik    mlp
5   hgh                  dop                  btx

The expected resultset would contain only the rows that contain 'my_string' in any column:

id  column_random_name_1 column_random_name_2 column_random_name_3
1   abc                  lkj                  ipx_my_string_ipx
3   hjf_my_string_hjf    pod                  asx
4   pol                  jik_my_string_jik    mlp

Body:
You need to use a dynamic query

Get all lists of columns from the table

build like query on the basis of table and columns

CREATE PROCEDURE dbo.SearchTable
@tablename NVARCHAR(257),
@term      NVARCHAR(4000)
AS
BEGIN
SET NOCOUNT ON;

 DECLARE @sql NVARCHAR(MAX);

 SET @sql = N'SELECT * FROM ' + @tablename + ' WHERE 1 = 0';

 SELECT @sql = @sql + '
   OR ' + c.name + ' LIKE ''%' + REPLACE(@term, '''', '''''') + '%'''
 FROM
   sys.all_columns AS c
 INNER JOIN
   sys.types AS t
   ON c.system_type_id = t.system_type_id
   AND c.user_type_id = t.user_type_id
 WHERE
   c.[object_id] = OBJECT_ID(@tablename)
   AND t.name IN (N'sysname', N'char', N'nchar',
     N'varchar', N'nvarchar', N'text', N'ntext');

 PRINT @sql;

 -- EXEC sp_executesql @sql;

END
GO


问:
Pure CSS clickable dropdown?
This tutorial explains how to use the :hover pseudo-class to style HTML elements on hover and how to how create a dropdown when hovering over a particular element in pure CSS (without using any JavaScript).

Is it possible to create the same dropdown as the one in the example below, in pure CSS, but when clicking an element instead of when hovering over it?

I would prefer to use no JavaScript at all, or - if not possible without JavaScript - as little JavaScript as possible. The items of the drowndown should be clickable themselves.

Example:

.dropdown {
    position: relative;
    display: inline-block;
}

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><div class="dropdown" style="float:left;">
  <button class="dropbtn">Left</button>
  <div class="dropdown-content" style="left:0;">
    Link 1
    Link 2
    Link 3
  </div>
</div></code>```

答:
Can. Example 1. Dropdown menu. Pure CSS. Simple style.

jsfiddle link

body {
  margin: 0;
  font-size: 20px;
  font-family: Times, "Times New Roman", serif;
}

/* dd container */
.dropdown {
  display: inline-block;
  position: relative;
  outline: none;
  margin: 10px;
}

/* button */
.dropbtn {
  padding: 12px 16px;
  color: white;
  background-color: #861cb9;
  cursor: pointer;
  transition: 0.35s ease-out;
}

/* dd content */
.dropdown .dropdown-content {
  position: absolute;
  top: 50%;
  background-color: #f7f7f7;
  min-width: 120%;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 100000;
  visibility: hidden;
  opacity: 0;
  transition: 0.35s ease-out;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  display: block;
  text-decoration: none;
  transition: 0.35s ease-out;
}
.dropdown-content a:hover {
  background-color: #eaeaea;
}

/* show dd content */
.dropdown:focus .dropdown-content {
  outline: none;
  transform: translateY(20px);
  visibility: visible;
  opacity: 1;
}
.dropbtn:hover, .dropdown:focus .dropbtn {
  background-color: #691692;
}

/* mask to close menu by clicking on the button */
.dropdown .db2 {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; opacity: 0;
  cursor: pointer;
  z-index: 10;
  display: none;
}
.dropdown:focus .db2 {
  display: inline-block;
}
.dropdown .db2:focus .dropdown-content {
  outline: none;
  visibility: hidden;
  opacity: 0;
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><div class="dropdown" tabindex="1">
  <i class="db2" tabindex="1"></i>
  Dropdown 1
   <div class="dropdown-content">
      Home
      About
      Contact
   </div>
</div>

<div class="dropdown" tabindex="1">
  <i class="db2" tabindex="1"></i>
  Dropdown 2
   <div class="dropdown-content">
      Blog
      Plans
      Partners
   </div>
</div></code>```

Example 2. With added styles. Pure CSS. Without JS. Dropdown menu/content opens and closes on click. Several ways to close (by the same button, by another button, by clicking outside the menu area, by an icon inside the menu). Additionally added submenu by :hover.

jsfiddle link

body {
  margin: 0;
  font-size: 20px;
  font-family: Times, "Times New Roman", serif;
}

/* dd container */
.dropdown {
  display: inline-block;
  position: relative;
  outline: none;
  background-color: #861cb9;
  margin: 10px 5px;
}

/* button */
.dropbtn {
  display: inline-block;
  padding: 12px 16px;
  color: white;
  cursor: pointer;
  background-color: #861cb9;
  transition: 0.35s ease-out;
}
.dropbtn:hover, .dropbtn.c:hover, .dropbtn.r:hover {
  background-color: #691692;
}

/* dd content */
.dropdown .dropdown-content {
  position: absolute;
  top: 50%;
  visibility: hidden;
  opacity: 0;
  z-index: 100000;
  background-color: #f7f7f7;
  min-width: 120%;
  padding: 10px;
  font-size: 16px;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
  transition: 0.35s ease-out;
}

/* center & right position menu relative to the button */
.dropdown .dropdown-content.c  {
  left: 50%;
  margin-left: calc(-60% - 10px);
}
.dropdown .dropdown-content.r  {
  right: 0;
}

/* style link menu item */
.dropdown-content .mi {
  display: block;
  color: black;
  padding: 8px 0;
  text-decoration: none;
  position: relative;
}
.dropdown-content .mi::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background:
  linear-gradient(
  90deg,
  rgba(240, 242, 244, 0) 0%,
  rgba(223, 223, 223, 1) 30%,
  rgba(240, 242, 244, 0) 100%
  );
  opacity: 0;
  z-index: -1;
  transition: 0.4s ease-out;
}
.dropdown-content .mi:hover::before {
    opacity: 1;
}

/* style text link */
.dropdown-content .tl {
  color: #36f;
  text-decoration: none;
  border-bottom: 1px dotted #36f;
  transition: 0.35s ease-out;
}
.dropdown-content .tl:hover {
  border-bottom: 1px dotted transparent;
}

/* show dd content */
.dropdown:focus .dropdown-content {
  outline: none;
  visibility: visible;
  opacity: 1;
  transform: translateY(20px);
}

/* mask to close menu by clicking on the button */
.dropdown .db2 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 10;
  display: none;
}
.dropdown:focus .db2 {
  display: inline-block;
}
.dropdown .db2:focus .dropdown-content, .dropdown-content .db3:focus .dropdown-content {
  outline: none;
  visibility: hidden;
  opacity: 0;
}

/* button gradient */
.dropbtn::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: radial-gradient(circle at 0 0, #fff 0%, #D59BF0 5%, #8b1dc0 35%, transparent 60%);
  background-repeat: no-repeat;
  background-color: #861cb9;
  transition: 0.35s ease-out;
}

/* class 'c' center gradient backlight */
.dropbtn.c::before {
  background: radial-gradient(circle at 50% -1px, #fff 0%, #D59BF0 5%, #8b1dc0 35%, transparent 60%);
  background-repeat: no-repeat;
  background-color: #861cb9;
}

/* class 'r' right gradient backlight */
.dropbtn.r::before {
  background: radial-gradient(circle at 100% 0, #fff 0%, #D59BF0 5%, #8b1dc0 35%, transparent 60%);
  background-repeat: no-repeat;
  background-color: #861cb9;
}

/* show gradient backlight */
.dropdown:focus .dropbtn::before, .dropdown:focus .dropbtn.c::before, .dropdown:focus .dropbtn.r::before {
background-color: #691692;
}
.dropdown:focus  {
z-index: 1;
}
.dropdown:focus .dropbtn  {
background: none;
}

/* icon hamburger */
.dropbtn::after {
  content: "";
  display: inline-block;
  width: 15px;
  height: 3px;
  margin-left: 10px;
  border-top: 2px solid #fff;
  border-bottom: 7px double #fff;
}
.dropdown:focus .dropbtn::after {
  height: 0;
  border-bottom: 0;
  margin-bottom: 4px;
}

/* icon content */
.dropbtn.i2::after {
  content: "";
  display: inline-block;
  border: 0;
  width: 15px;
  height: 12px;
  margin-left: 10px;
  background:
  linear-gradient(to right, #fff, #fff) 0px 0px/11px 2px, /* left top / width height */
  linear-gradient(to right, #fff, #fff) 0px 5px/15px 2px,
  linear-gradient(to right, #fff, #fff) 0px 10px/8px 2px;
  background-repeat: no-repeat;
}
.dropdown:focus .dropbtn.i2::after {
  width: 15px;
  height: 12px;
  background: linear-gradient(to right, #fff, #fff) 0px 10px/15px 2px;
  background-repeat: no-repeat;
}

/* icon x */
.dropdown-content .db3  {
  display: inline-block;
  position: absolute;
  top: 5px;
  right: 5px;
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 100%;
  z-index: 10;
  transition: 0.15s ease-out;
}
.dropdown-content .db3::before, .dropdown-content .db3::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  height: 60%;           /* height icon */
  width: 2px;            /* width icon  */
  background: #3c4043;   /* color icon  */
}
.dropdown-content .db3::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.dropdown-content .db3::after  {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.dropdown-content .db3:hover   {
  background: #d1d1d6;
}

/* sub menu container */
.sub-dropdown {
  position: relative;
}
.sub-dropdown-content {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  background-color: #f7f7f7;
  left: 100%;
  top: -10px;
  padding: 10px 5px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  transition: 0.35s ease-out;
}
.sub-dropdown-content a {
  color: black;
  padding: 5px 12px;
  text-decoration: none;
  display: block;
  position: relative;
  white-space: nowrap;
}

/* sub menu item */
.si {
  cursor: default;
}
.si::after {
  content: "\25B8";
  margin-left: 5px;
  vertical-align: -1px;
  margin-right: 10px;
  float: right;
}
.sub-dropdown:hover .sub-dropdown-content {
  visibility: visible;
  opacity: 1;
  transform: translateY(10px);
}
.sub-dropdown-content a::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background:
  linear-gradient(
  90deg,
  rgba(240, 242, 244, 0) 0%,
  rgba(223, 223, 223, 1) 50%,
  rgba(240, 242, 244, 0) 100%
  );
  opacity: 0;
  z-index: -1;
  transition: 0.4s ease-out;
}
.sub-dropdown-content a:hover::before {
    opacity: 1;
}

/* media queries */
@media (max-width:560px) {
.dropdown .dropdown-content.r,
.dropdown .dropdown-content.c {
  left: 0;
  margin-left: 0;
  }
.dropbtn.c::before, .dropbtn.r::before {
  background: radial-gradient(circle at 0 0, #fff 0%, #D59BF0 5%, #8b1dc0 35%, transparent 60%);
  }
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><div class="dropdown" tabindex="1">
  <i class="db2" tabindex="1"></i>Dropdown l
    <div class="dropdown-content"><i class="db3" tabindex="1"></i>
      <p>Dropdown content. Left-aligned relative to the button. Text link ....</p>
    </div>
</div>

<div class="dropdown" tabindex="1">
  <i class="db2" tabindex="1"></i>MyMenu c
    <div class="dropdown-content c"><i class="db3" tabindex="1"></i>
      Products

      <div class="sub-dropdown">
      Company
          <div class="sub-dropdown-content">
            Sublink 1
            Sublink 2
          </div>
      </div>

      Stackoverflow
    </div>
</div>

<div class="dropdown" tabindex="1">
  <i class="db2" tabindex="1"></i>Dropdown r
    <div class="dropdown-content r"><i class="db3" tabindex="1"></i>
      <p>Dropdown content. Right-aligned relative to the button. Text link ....</p>
    </div>
</div></code>```

Title: Pure CSS clickable dropdown?

Body:
This tutorial explains how to use the :hover pseudo-class to style HTML elements on hover and how to how create a dropdown when hovering over a particular element in pure CSS (without using any JavaScript).

Is it possible to create the same dropdown as the one in the example below, in pure CSS, but when clicking an element instead of when hovering over it?

I would prefer to use no JavaScript at all, or - if not possible without JavaScript - as little JavaScript as possible. The items of the drowndown should be clickable themselves.

Example:

.dropdown {
    position: relative;
    display: inline-block;
}

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

  <button class="dropbtn">Left</button>

    Link 1
    Link 2
    Link 3

Body:
Can. Example 1. Dropdown menu. Pure CSS. Simple style.

jsfiddle link

body {
  margin: 0;
  font-size: 20px;
  font-family: Times, "Times New Roman", serif;
}

/* dd container */
.dropdown {
  display: inline-block;
  position: relative;
  outline: none;
  margin: 10px;
}

/* button */
.dropbtn {
  padding: 12px 16px;
  color: white;
  background-color: #861cb9;
  cursor: pointer;
  transition: 0.35s ease-out;
}

/* dd content */
.dropdown .dropdown-content {
  position: absolute;
  top: 50%;
  background-color: #f7f7f7;
  min-width: 120%;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 100000;
  visibility: hidden;
  opacity: 0;
  transition: 0.35s ease-out;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  display: block;
  text-decoration: none;
  transition: 0.35s ease-out;
}
.dropdown-content a:hover {
  background-color: #eaeaea;
}

/* show dd content */
.dropdown:focus .dropdown-content {
  outline: none;
  transform: translateY(20px);
  visibility: visible;
  opacity: 1;
}
.dropbtn:hover, .dropdown:focus .dropbtn {
  background-color: #691692;
}

/* mask to close menu by clicking on the button */
.dropdown .db2 {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; opacity: 0;
  cursor: pointer;
  z-index: 10;
  display: none;
}
.dropdown:focus .db2 {
  display: inline-block;
}
.dropdown .db2:focus .dropdown-content {
  outline: none;
  visibility: hidden;
  opacity: 0;
}

<div class="dropdown" tabindex="1">
  <i class="db2" tabindex="1"></i>
  <a class="dropbtn">Dropdown 1</a>
   <div class="dropdown-content">
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
   </div>
</div>

<div class="dropdown" tabindex="1">
  <i class="db2" tabindex="1"></i>
  <a class="dropbtn">Dropdown 2</a>
   <div class="dropdown-content">
      <a href="#">Blog</a>
      <a href="#">Plans</a>
      <a href="#">Partners</a>
   </div>
</div>

Example 2. With added styles. Pure CSS. Without JS. Dropdown menu/content opens and closes on click. Several ways to close (by the same button, by another button, by clicking outside the menu area, by an icon inside the menu). Additionally added submenu by :hover.

jsfiddle link

body {
  margin: 0;
  font-size: 20px;
  font-family: Times, "Times New Roman", serif;
}

/* dd container */
.dropdown {
  display: inline-block;
  position: relative;
  outline: none;
  background-color: #861cb9;
  margin: 10px 5px;
}

/* button */
.dropbtn {
  display: inline-block;
  padding: 12px 16px;
  color: white;
  cursor: pointer;
  background-color: #861cb9;
  transition: 0.35s ease-out;
}
.dropbtn:hover, .dropbtn.c:hover, .dropbtn.r:hover {
  background-color: #691692;
}

/* dd content */
.dropdown .dropdown-content {
  position: absolute;
  top: 50%;
  visibility: hidden;
  opacity: 0;
  z-index: 100000;
  background-color: #f7f7f7;
  min-width: 120%;
  padding: 10px;
  font-size: 16px;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
  transition: 0.35s ease-out;
}

/* center & right position menu relative to the button */
.dropdown .dropdown-content.c  {
  left: 50%;
  margin-left: calc(-60% - 10px);
}
.dropdown .dropdown-content.r  {
  right: 0;
}

/* style link menu item */
.dropdown-content .mi {
  display: block;
  color: black;
  padding: 8px 0;
  text-decoration: none;
  position: relative;
}
.dropdown-content .mi::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background:
  linear-gradient(
  90deg,
  rgba(240, 242, 244, 0) 0%,
  rgba(223, 223, 223, 1) 30%,
  rgba(240, 242, 244, 0) 100%
  );
  opacity: 0;
  z-index: -1;
  transition: 0.4s ease-out;
}
.dropdown-content .mi:hover::before {
    opacity: 1;
}

/* style text link */
.dropdown-content .tl {
  color: #36f;
  text-decoration: none;
  border-bottom: 1px dotted #36f;
  transition: 0.35s ease-out;
}
.dropdown-content .tl:hover {
  border-bottom: 1px dotted transparent;
}

/* show dd content */
.dropdown:focus .dropdown-content {
  outline: none;
  visibility: visible;
  opacity: 1;
  transform: translateY(20px);
}

/* mask to close menu by clicking on the button */
.dropdown .db2 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 10;
  display: none;
}
.dropdown:focus .db2 {
  display: inline-block;
}
.dropdown .db2:focus .dropdown-content, .dropdown-content .db3:focus .dropdown-content {
  outline: none;
  visibility: hidden;
  opacity: 0;
}

/* button gradient */
.dropbtn::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: radial-gradient(circle at 0 0, #fff 0%, #D59BF0 5%, #8b1dc0 35%, transparent 60%);
  background-repeat: no-repeat;
  background-color: #861cb9;
  transition: 0.35s ease-out;
}

/* class 'c' center gradient backlight */
.dropbtn.c::before {
  background: radial-gradient(circle at 50% -1px, #fff 0%, #D59BF0 5%, #8b1dc0 35%, transparent 60%);
  background-repeat: no-repeat;
  background-color: #861cb9;
}

/* class 'r' right gradient backlight */
.dropbtn.r::before {
  background: radial-gradient(circle at 100% 0, #fff 0%, #D59BF0 5%, #8b1dc0 35%, transparent 60%);
  background-repeat: no-repeat;
  background-color: #861cb9;
}

/* show gradient backlight */
.dropdown:focus .dropbtn::before, .dropdown:focus .dropbtn.c::before, .dropdown:focus .dropbtn.r::before {
background-color: #691692;
}
.dropdown:focus  {
z-index: 1;
}
.dropdown:focus .dropbtn  {
background: none;
}

/* icon hamburger */
.dropbtn::after {
  content: "";
  display: inline-block;
  width: 15px;
  height: 3px;
  margin-left: 10px;
  border-top: 2px solid #fff;
  border-bottom: 7px double #fff;
}
.dropdown:focus .dropbtn::after {
  height: 0;
  border-bottom: 0;
  margin-bottom: 4px;
}

/* icon content */
.dropbtn.i2::after {
  content: "";
  display: inline-block;
  border: 0;
  width: 15px;
  height: 12px;
  margin-left: 10px;
  background:
  linear-gradient(to right, #fff, #fff) 0px 0px/11px 2px, /* left top / width height */
  linear-gradient(to right, #fff, #fff) 0px 5px/15px 2px,
  linear-gradient(to right, #fff, #fff) 0px 10px/8px 2px;
  background-repeat: no-repeat;
}
.dropdown:focus .dropbtn.i2::after {
  width: 15px;
  height: 12px;
  background: linear-gradient(to right, #fff, #fff) 0px 10px/15px 2px;
  background-repeat: no-repeat;
}

/* icon x */
.dropdown-content .db3  {
  display: inline-block;
  position: absolute;
  top: 5px;
  right: 5px;
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 100%;
  z-index: 10;
  transition: 0.15s ease-out;
}
.dropdown-content .db3::before, .dropdown-content .db3::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  height: 60%;           /* height icon */
  width: 2px;            /* width icon  */
  background: #3c4043;   /* color icon  */
}
.dropdown-content .db3::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.dropdown-content .db3::after  {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.dropdown-content .db3:hover   {
  background: #d1d1d6;
}

/* sub menu container */
.sub-dropdown {
  position: relative;
}
.sub-dropdown-content {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  background-color: #f7f7f7;
  left: 100%;
  top: -10px;
  padding: 10px 5px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  transition: 0.35s ease-out;
}
.sub-dropdown-content a {
  color: black;
  padding: 5px 12px;
  text-decoration: none;
  display: block;
  position: relative;
  white-space: nowrap;
}

/* sub menu item */
.si {
  cursor: default;
}
.si::after {
  content: "\25B8";
  margin-left: 5px;
  vertical-align: -1px;
  margin-right: 10px;
  float: right;
}
.sub-dropdown:hover .sub-dropdown-content {
  visibility: visible;
  opacity: 1;
  transform: translateY(10px);
}
.sub-dropdown-content a::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background:
  linear-gradient(
  90deg,
  rgba(240, 242, 244, 0) 0%,
  rgba(223, 223, 223, 1) 50%,
  rgba(240, 242, 244, 0) 100%
  );
  opacity: 0;
  z-index: -1;
  transition: 0.4s ease-out;
}
.sub-dropdown-content a:hover::before {
    opacity: 1;
}

/* media queries */
@media (max-width:560px) {
.dropdown .dropdown-content.r,
.dropdown .dropdown-content.c {
  left: 0;
  margin-left: 0;
  }
.dropbtn.c::before, .dropbtn.r::before {
  background: radial-gradient(circle at 0 0, #fff 0%, #D59BF0 5%, #8b1dc0 35%, transparent 60%);
  }
}

<div class="dropdown" tabindex="1">
  <i class="db2" tabindex="1"></i><a class="dropbtn i2">Dropdown l</a>
    <div class="dropdown-content"><i class="db3" tabindex="1"></i>
      <p>Dropdown content. Left-aligned relative to the button. Text <a href="#" class="tl">link</a> ....</p>
    </div>
</div>

<div class="dropdown" tabindex="1">
  <i class="db2" tabindex="1"></i><a class="dropbtn c">MyMenu c</a>
    <div class="dropdown-content c"><i class="db3" tabindex="1"></i>
      <a href="#" class="mi">Products</a>

      <div class="sub-dropdown">
      <a class="mi si">Company</a>
          <div class="sub-dropdown-content">
            <a href="#">Sublink 1</a>
            <a href="#">Sublink 2</a>
          </div>
      </div>

      <a href="#" class="mi">Stackoverflow</a>
    </div>
</div>

<div class="dropdown" tabindex="1">
  <i class="db2" tabindex="1"></i><a class="dropbtn r i2">Dropdown r</a>
    <div class="dropdown-content r"><i class="db3" tabindex="1"></i>
      <p>Dropdown content. Right-aligned relative to the button. Text <a href="#" class="tl">link</a> ....</p>
    </div>
</div>


问:
Unity Hololens 2 Development
I want to make an indoor navigation app with HoloLens 2 device in Unity. But I don't have any experience with HoloLens. I have searched that azure spatial cloud will help but I want to use QR to localise in the Scene not azure. I have build the same app on Android and iOS with AR-Foundation Unity (ARCORE AND ARKIT) and its working fine. I want to make the same app for HoloLens.</p>

答: Microsoft does provide QR code recognition. Samples for QR code on HoloLens2 are at QR code tracking. AF Foundation does not support HoloLens2. Please refer to the Platform Support for AF Foundation.</p>

Title: Unity Hololens 2 Development


问:
Fire event at Infinite horizontal scroll end in ionic 5
I am trying to build infinite scrolling content horizontally. Following code does the job on the first load.

HTML:

```<code>  <div class="thumnails">
    <div class="list-thumbnail">
      <div class="img-thumb" *ngFor="let user of userList">
        <ion-grid>
          <ion-row>
            {{user.name}}
          </ion-row>
        </ion-grid>
      </div>
    </div>
  </div>
</code>```

SCSS:

```<code>.thumnails{
    overflow-x: scroll;
    overflow-y: hidden;
    .list-thumbnail{
      height: 100%;
      white-space: nowrap;
      .img-thumb{
        display: inline-block;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 3px;
      }
    }
  }
  ::-webkit-scrollbar {
    display: none;
  }
</code>```

After this, I need to fire a method when a user reaches the end on scroll. Ionic has the component ion-infinite-scroll which works in vertical scroll but it's not firing when I use it with the above code.

Is there a way to fire an event at the end of the horizontal scroll?

答:
I suggest trying the ionScroll event from ion-content component.

Enable ionScroll like:

<ion-content [scrollEvents]="true" (ionScroll)="logScrolling($event)">

On logScrolling check to see if the scroll reached a certain point. If it did, add more data to your infinite scrolling content:

```<code>async logScrolling($event) {
   if($event.target.localName != "ion-content") {
      return;
    }
   const scrollElement = await $event.target.getScrollElement();
   const scrollWidth = scrollElement.scrollWidth - scrollElement.clientWidth;
   const threshold = 50;
   if(scrollWidth < threshold) {
      //...load data here
   }}
</code>```

I did not test it but it should work like that. Please let me know if you ran into any problems.

Body:
I am trying to build infinite scrolling content horizontally. Following code does the job on the first load.

HTML:

        <ion-grid>
          <ion-row>
            {{user.name}}
          </ion-row>
        </ion-grid>

SCSS:

.thumnails{
    overflow-x: scroll;
    overflow-y: hidden;
    .list-thumbnail{
      height: 100%;
      white-space: nowrap;
      .img-thumb{
        display: inline-block;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 3px;
      }
    }
  }
  ::-webkit-scrollbar {
    display: none;
  }

After this, I need to fire a method when a user reaches the end on scroll. Ionic has the component ion-infinite-scroll which works in vertical scroll but it's not firing when I use it with the above code.

Is there a way to fire an event at the end of the horizontal scroll?

Body:
I suggest trying the ionScroll event from ion-content component.

Enable ionScroll like:

<ion-content [scrollEvents]="true" (ionScroll)="logScrolling($event)">

On logScrolling check to see if the scroll reached a certain point. If it did, add more data to your infinite scrolling content:

async logScrolling($event) {
   if($event.target.localName != "ion-content") {
      return;
    }
   const scrollElement = await $event.target.getScrollElement();
   const scrollWidth = scrollElement.scrollWidth - scrollElement.clientWidth;
   const threshold = 50;
   if(scrollWidth < threshold) {
      //...load data here
   }}

I did not test it but it should work like that. Please let me know if you ran into any problems.


问:
Dynamic Dropdown with different Sql Table as the View MVC C#
I have a SQL Server table as a source with the CRUD commands.
The table2_ID column comes from table2 (foreign key).
Now when editing and creating Table1 entries I want a dropdown for table_ID column in Table1  with option: Name of Table2 and the ID must then be saved as the value.

What does the code in the controller look like to get the data from Table2 (name and ID)?
and what does the code look like in the view to show the data as a dropdown with name as an option and id as a value?

Table1:

number
table2_ID
date

11
2
12.12.2021

32
3
13.12.2021

Table2

ID
name

2
axis

3
bot

```<code>    / GET: Table1/Edit/5
        public async Task<IActionResult> Edit(int? id)
        {
            if (id == null)
            {
                return NotFound();
            }

            var table1 = await _context.Table1.FindAsync(id);
            if (table1 == null)
            {
                return NotFound();
            }
            return View(table1);
        }

    [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> Create([Bind("number, table2_ID, date")]       Table1 table1)
        {
            if (ModelState.IsValid)
            {
                _context.Add(table1);
                await _context.SaveChangesAsync();
                return RedirectToAction(nameof(Index));
            }
            return View(table1);
        }
    //Create view
<div class="row">
    <div class="col-md-4">
        <form asp-action="Create">
            <div class="form-group">
                <label asp-for="number" class="control-label"></label>
                <input asp-for="number" class="form-control" />
                <span asp-validation-for="number" class="text-danger"></span>
            </div>

            <div class="form-group">
                <label asp-for="table2_ID" class="control-label"></label>
                <input asp-for="table2_ID" class="form-control" />
                <span asp-validation-for="table2_ID" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="date" class="control-label"></label>
                <input asp-for="date" class="form-control" />
                <span asp-validation-for="date" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>
</code>```

答:
What does the code in the controller look like to get the data from
Table2 (name and ID)?

You can get the Table2 data like below:

```<code>var data = _context.Table2.ToList();
</code>```

and what does the code look like in the view to show the data as a
dropdown with name as an option and id as a value

You need firstly store the dropdownlist value in ViewBag:

```<code> ViewBag.table2= new SelectList(data,"ID","name");
</code>```

And use the ViewBag like below:

```<code><select asp-for="Table2_ID" asp-items="@ViewBag.table2" class="form-control">
     <option selected disabled value="">--- Choose ---</option>
</select>
</code>```

Whole working demo:

Model:

```<code>public class Table1 {
    public int ID { get; set; }
    public DateTime date { get; set; }
    public string Table2_ID { get; set; }
}
public class Table2 {
    public int ID { get; set; }
    public string name { get; set; }
}
</code>```

View:

```<code>@model Table1

<div class="row">
    <div class="col-md-4">
        <form asp-action="Create">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="date" class="control-label"></label>
                <input asp-for="date" class="form-control" />
                <span asp-validation-for="date" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Table2_ID" class="control-label"></label>
                <select asp-for="Table2_ID" asp-items="@ViewBag.table2"   class="form-control">
                        <option selected disabled value="">--- Choose ---</option>
                </select>
                <span asp-validation-for="Table2_ID" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>
</code>```

Controller:

```<code>// GET: Table1/Create
public IActionResult Create()
{
    ViewBag.table2 = new SelectList(_context.Table2.ToList(), "ID", "name");

    return View();
}

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create([Bind("ID,date,Table2_ID")] Table1 table1)
{
    if (ModelState.IsValid)
    {
        _context.Add(table1);
        await _context.SaveChangesAsync();
        return RedirectToAction(nameof(Index));
    }
    ViewBag.table2 = new SelectList(_context.Table2.ToList(), "ID", "name",table1.Table2_ID);
    return View(table1);
}
</code>```

DbContext:

```<code>public class MyContext : DbContext
{
    public MyContext(DbContextOptions<MyContext> options)
        : base(options)
    {
    }

    public DbSet<Table1> Table1 { get; set; }
    public DbSet<Table2> Table2 { get; set; }
}
</code>```

Result:

Body:
I have a SQL Server table as a source with the CRUD commands.
The table2_ID column comes from table2 (foreign key).
Now when editing and creating Table1 entries I want a dropdown for table_ID column in Table1  with option: Name of Table2 and the ID must then be saved as the value.

What does the code in the controller look like to get the data from Table2 (name and ID)?
and what does the code look like in the view to show the data as a dropdown with name as an option and id as a value?

Table1:

number
table2_ID
date

11
2
12.12.2021

32
3
13.12.2021

Table2

ID
name

2
axis

3
bot

    / GET: Table1/Edit/5
        public async Task<IActionResult> Edit(int? id)
        {
            if (id == null)
            {
                return NotFound();
            }

            var table1 = await _context.Table1.FindAsync(id);
            if (table1 == null)
            {
                return NotFound();
            }
            return View(table1);
        }

    [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> Create([Bind("number, table2_ID, date")]       Table1 table1)
        {
            if (ModelState.IsValid)
            {
                _context.Add(table1);
                await _context.SaveChangesAsync();
                return RedirectToAction(nameof(Index));
            }
            return View(table1);
        }
    //Create view

        <form asp-action="Create">

                <input asp-for="number" class="form-control" />

                <input asp-for="table2_ID" class="form-control" />

                <input asp-for="date" class="form-control" />

                <input type="submit" value="Create" class="btn btn-primary" />

        </form>

Body:
What does the code in the controller look like to get the data from
Table2 (name and ID)?

You can get the Table2 data like below:

var data = _context.Table2.ToList();

and what does the code look like in the view to show the data as a
dropdown with name as an option and id as a value

You need firstly store the dropdownlist value in ViewBag:

 ViewBag.table2= new SelectList(data,"ID","name");

And use the ViewBag like below:

<select asp-for="Table2_ID" asp-items="@ViewBag.table2" class="form-control">
     <option selected disabled value="">--- Choose ---</option>
</select>

Whole working demo:

Model:

public class Table1 {
    public int ID { get; set; }
    public DateTime date { get; set; }
    public string Table2_ID { get; set; }
}
public class Table2 {
    public int ID { get; set; }
    public string name { get; set; }
}

View:

@model Table1

<div class="row">
    <div class="col-md-4">
        <form asp-action="Create">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="date" class="control-label"></label>
                <input asp-for="date" class="form-control" />
                <span asp-validation-for="date" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Table2_ID" class="control-label"></label>
                <select asp-for="Table2_ID" asp-items="@ViewBag.table2"   class="form-control">
                        <option selected disabled value="">--- Choose ---</option>
                </select>
                <span asp-validation-for="Table2_ID" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

Controller:

// GET: Table1/Create
public IActionResult Create()
{
    ViewBag.table2 = new SelectList(_context.Table2.ToList(), "ID", "name");

    return View();
}

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create([Bind("ID,date,Table2_ID")] Table1 table1)
{
    if (ModelState.IsValid)
    {
        _context.Add(table1);
        await _context.SaveChangesAsync();
        return RedirectToAction(nameof(Index));
    }
    ViewBag.table2 = new SelectList(_context.Table2.ToList(), "ID", "name",table1.Table2_ID);
    return View(table1);
}

DbContext:

public class MyContext : DbContext
{
    public MyContext(DbContextOptions<MyContext> options)
        : base(options)
    {
    }

    public DbSet<Table1> Table1 { get; set; }
    public DbSet<Table2> Table2 { get; set; }
}

Result:


问:
Django: no such table: django_session
I have found several topics with this title, but none of their solutions worked for me.  I have two Django sites running on my server, both through Apache using different virtualhosts on two ports fed by my Nginx frontend (using for static files).  One site uses MySql and runs just fine.  The other uses Sqlite3 and gets the error in the title.

I downloaded a copy of sqlite.exe and looked at the mysite.sqlite3 (SQLite database in this directory) file and there is indeed a django_session table with valid data in it.  I have the sqlite.exe in my system32 as well as the site-packages folder in my Python path.

Here is a section of my settings.py file:

```<code>MANAGERS = ADMINS

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3', # Add 'postgresql_psycopg2', 'postgresql', 'mysql', 'sqlite3' or 'oracle'.
        'NAME': 'mysite.sqlite3',         # Or path to database file if using sqlite3.
        'USER': '',                      # Not used with sqlite3.
        'PASSWORD': '',                  # Not used with sqlite3.
        'HOST': '',                      # Set to empty string for localhost. Not used with sqlite3.
        'PORT': '',                      # Set to empty string for default. Not used with sqlite3.
    }
}
</code>```

I did use the python manage.py syncdb with no errors and just a "No Fixtures" comment.

Does anyone have any ideas what else might be going on here?  I'm considering just transferring everything over to my old pal MySql and just ignoring Sqlite, as really it's always given me some kind of trouble.  I was only using it for the benefit of knowing it anyway.  I have no overwhelming reason why I should use it.  But again, just for my edification does anyone know what this problem is?  I don't like to give up.

答:
Django documentation says "Once you have configured your installation, run manage.py migrate to install the single database table that stores session data."

One possibility that i have come across is if the migration is ran for app first time before running migrations for the new project so just run migrations for the project

```<code>python manage.py makemigrations
python manage.py migrate
</code>```

later you can run if needed

```<code>python manage.py makemigrations APPNAME
python manage.py migrate APPNAME
</code>```

ContentLicense: CC BY-SA 2.5

Title: Django: no such table: django_session

Body:
I have found several topics with this title, but none of their solutions worked for me.  I have two Django sites running on my server, both through Apache using different virtualhosts on two ports fed by my Nginx frontend (using for static files).  One site uses MySql and runs just fine.  The other uses Sqlite3 and gets the error in the title.

I downloaded a copy of sqlite.exe and looked at the mysite.sqlite3 (SQLite database in this directory) file and there is indeed a django_session table with valid data in it.  I have the sqlite.exe in my system32 as well as the site-packages folder in my Python path.

Here is a section of my settings.py file:

MANAGERS = ADMINS

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3', # Add 'postgresql_psycopg2', 'postgresql', 'mysql', 'sqlite3' or 'oracle'.
        'NAME': 'mysite.sqlite3',         # Or path to database file if using sqlite3.
        'USER': '',                      # Not used with sqlite3.
        'PASSWORD': '',                  # Not used with sqlite3.
        'HOST': '',                      # Set to empty string for localhost. Not used with sqlite3.
        'PORT': '',                      # Set to empty string for default. Not used with sqlite3.
    }
}

I did use the python manage.py syncdb with no errors and just a "No Fixtures" comment.

Does anyone have any ideas what else might be going on here?  I'm considering just transferring everything over to my old pal MySql and just ignoring Sqlite, as really it's always given me some kind of trouble.  I was only using it for the benefit of knowing it anyway.  I have no overwhelming reason why I should use it.  But again, just for my edification does anyone know what this problem is?  I don't like to give up.

Body:
Django documentation says "Once you have configured your installation, run manage.py migrate to install the single database table that stores session data."

One possibility that i have come across is if the migration is ran for app first time before running migrations for the new project so just run migrations for the project

python manage.py makemigrations
python manage.py migrate

later you can run if needed

python manage.py makemigrations APPNAME
python manage.py migrate APPNAME


问:
How to implement MapTiler server in React Native app
I am building a mobile app that includes a map and some markers, I found that using react-native-maps with Google API will cost a lot.

I started hosting my own map tile server using MapTiler.

My problem is I can't find a library that can display my map in React native component.

This is my MapTiler server:
I don't know how to implement these raster tiles in my react native app.

I am using Expo.

Which library should I use that doesn't have any pricing or commercial license.
If you have a good solution please give me an example.

I tried to use react-native-maps but it didn't show any tiles.

```<code>        <MapView
          region={location}
          rotateEnabled={false}
          style={{ flex: 1 }}
          style={styles.map}
          showsUserLocation
          mapType="none"
        >
          <UrlTile
            tileSize={512}
            urlTemplate="http://localhost:3650/api/maps/satellite-hybrid/{z}/{x}/{y}.png"
            maximumZ={19}
          />
          <Marker
            title="Home"
            coordinate={{
              latitude: location.latitude,
              longitude: location.longitude,
            }}
          />
        </MapView>
</code>```

答:
can you please check the following article and let me know, it you find some useful info there? It targets MapTiler Cloud, but I believe some principles will be very similar to Server.

https://documentation.maptiler.com/hc/en-us/articles/4405444890897-How-to-display-MapLibre-GL-JS-map-using-React-JS

Body:
I am building a mobile app that includes a map and some markers, I found that using react-native-maps with Google API will cost a lot.

I started hosting my own map tile server using MapTiler.

My problem is I can't find a library that can display my map in React native component.

This is my MapTiler server:
I don't know how to implement these raster tiles in my react native app.

I am using Expo.

Which library should I use that doesn't have any pricing or commercial license.
If you have a good solution please give me an example.

I tried to use react-native-maps but it didn't show any tiles.

        <MapView
          region={location}
          rotateEnabled={false}
          style={{ flex: 1 }}
          style={styles.map}
          showsUserLocation
          mapType="none"
        >
          <UrlTile
            tileSize={512}
            urlTemplate="http://localhost:3650/api/maps/satellite-hybrid/{z}/{x}/{y}.png"
            maximumZ={19}
          />
          <Marker
            title="Home"
            coordinate={{
              latitude: location.latitude,
              longitude: location.longitude,
            }}
          />
        </MapView>


问:
Kotlin Gradle plugin
Hello for every one I have some problems in android sudio

[!] Your project requires a newer version of the Kotlin Gradle plugin.
Find the latest version on https://kotlinlang.org/docs/gradle.html#plugin-and-versions, then update D:\flutter-programing\kidsgame\android\build.gradle:
ext.kotlin_version = ''
Exception: Gradle task assembleDebug failed with exit code 1

How can I make it?

enter image description here

答:
So this was requirement with the new flutter update. Heres what you need to change.
From:

```<code>buildscript {
    ext.kotlin_version = '1.3.50'
    repositories {
        google()
        jcenter()
    }
</code>```

To:

```<code>buildscript {
    ext.kotlin_version = '1.6.10'
    repositories {
        google()
        jcenter()
    }
</code>```

You are simply needing to change the version number to the latest version available on Kotlin's website. Which as of t0day should be what i've put above. Just run flutter clean and flutter pub get after this and youre done.

Title: Kotlin Gradle plugin

Body:
So this was requirement with the new flutter update. Heres what you need to change.
From:

buildscript {
    ext.kotlin_version = '1.3.50'
    repositories {
        google()
        jcenter()
    }

To:

buildscript {
    ext.kotlin_version = '1.6.10'
    repositories {
        google()
        jcenter()
    }

You are simply needing to change the version number to the latest version available on Kotlin's website. Which as of t0day should be what i've put above. Just run flutter clean and flutter pub get after this and youre done.


问:
rxjs map cannot hint type to project function with overload, causing type errors if not explicitly defiend
I am have a hard time figuring how to make typescript happy with this case:

```<code>const t1 = new BehaviorSubject("test");
const t2 = new BehaviorSubject(["test2"]);

function transformString(subject:string):string
function transformString(subject:string[]):string[]
function transformString(subject:string|string[]):string|string[]{
  if(Array.isArray(subject)){
    return subject.map(t=>t.toUpperCase());
  }
  return subject.toUpperCase();
}

t1.pipe(map(transformString)); // Type error
t2.pipe(map(transformString));

t1.next(transformString(t1.value));
t2.next(transformString(t2.value));
</code>```

The type error I am receiving is this:

Argument of type 'OperatorFunction<string[], string[]>' is not
assignable to parameter of type 'OperatorFunction<string, string[]>'.
Type 'string[]' is not assignable to type 'string'.ts(2345)

I have added the last two lines just to test if the override was working correctly and it does. For now, the only solution I find is to hunt the types at the map level:

```<code>t1.pipe(map<string,string>(transformString));
</code>```

But this is getting redundant since we do know t1's type already. Also, the plan was at first to include the map into a variable, but I left it outside for now.

Edit:

As @Zerotwelve pointed out, the code above can work without using the overloads. I did not catch the real issue from my code in the minimal code above.

The problem comes when this is used in another function:

```<code>function t1F(): Observable<string> {
  const t1 = new BehaviorSubject("test");
  return t1.pipe(map(transformString));
}
</code>```

Here typescript complains that

```<code>Type 'Observable<string | string[]>' is not assignable to type 'Observable<string>'.   Type 'string | string[]' is not assignable to type 'string'.
    Type 'string[]' is not assignable to type 'string'.
</code>```

答:
You can try something like the following:

function transformString<T extends string | string[]>(subject: T): T {
  if (Array.isArray(subject)) {
    return subject.map((t) => t.toUpperCase()) as T;
  }
  return subject.toUpperCase() as T;
}

function t1F(): Observable<string> {
  const t1 = new BehaviorSubject('test1');
  return t1.pipe(map(transformString));
}

function t2F(): Observable<string[]> {
  const t1 = new BehaviorSubject(['test2']);
  return t1.pipe(map(transformString));
}

```

Body:
I am have a hard time figuring how to make typescript happy with this case:

const t1 = new BehaviorSubject("test");
const t2 = new BehaviorSubject(["test2"]);

function transformString(subject:string):string
function transformString(subject:string[]):string[]
function transformString(subject:string|string[]):string|string[]{
  if(Array.isArray(subject)){
    return subject.map(t=>t.toUpperCase());
  }
  return subject.toUpperCase();
}

t1.pipe(map(transformString)); // Type error
t2.pipe(map(transformString));

t1.next(transformString(t1.value));
t2.next(transformString(t2.value));

The type error I am receiving is this:

Argument of type 'OperatorFunction<string[], string[]>' is not
assignable to parameter of type 'OperatorFunction<string, string[]>'.
Type 'string[]' is not assignable to type 'string'.ts(2345)

I have added the last two lines just to test if the override was working correctly and it does. For now, the only solution I find is to hunt the types at the map level:

t1.pipe(map<string,string>(transformString));

But this is getting redundant since we do know t1's type already. Also, the plan was at first to include the map into a variable, but I left it outside for now.

Edit:

As @Zerotwelve pointed out, the code above can work without using the overloads. I did not catch the real issue from my code in the minimal code above.

The problem comes when this is used in another function:

function t1F(): Observable<string> {
  const t1 = new BehaviorSubject("test");
  return t1.pipe(map(transformString));
}

Here typescript complains that

Type 'Observable<string | string[]>' is not assignable to type 'Observable<string>'.   Type 'string | string[]' is not assignable to type 'string'.
    Type 'string[]' is not assignable to type 'string'.


问:
Pass a component as props
I have my card component, in which I need to pass another component into to display unique content for each different card. At the moment, I am passing the example component "Foot" in a ternary operator, but I also need to pass "Patio", "Fence" and "Deck", which relate to specific title props. I hope this all makes sense, here's my code -</p>
```<code>import { useState } from "react";
import Foot from "../Footing";

const Card = (props) => {
  const [showContent, setShowContent] = useState(false);
  const contentClick = () => {
    setShowContent(true);
  };

  return (
    <div>
      <h1>{props.job}</h1>
      <button onClick={contentClick}>Calculate</button>
      {showContent && <Foot />}
      <hr></hr>
    </div>
  );
};

export default Card;
</code>```

答:
You can pass the component as prop to Card. React will render the component only if its name is in Pascal case, so renaming the content prop to Content

Card

```<code>const Card = ({content:Content,job}) => {
  const [showContent, setShowContent] = useState(false);
  const contentClick = () => {
    setShowContent(true);
  };

  return (
    <div>
      <h1>{job}</h1>
      <button onClick={contentClick}>Calculate</button>
      {showContent && <Content />}
      <hr></hr>
    </div>
  );
};
</code>```

Usage

```<code>import Foot from "../Footing";
<Card content={Foot}/>
</code>```

If you want to pass title prop to the Foot component,

Card

```<code>const Card = ({content,job}) => {
  return
  <>
  {showContent && content}
  </>
}
</code>```

Usage

```<code>import Foot from "../Footing";
<Card content={<Foot title='foot-title'/>}/>
</code>```

Title: Pass a component as props

Body:
I have my card component, in which I need to pass another component into to display unique content for each different card. At the moment, I am passing the example component "Foot" in a ternary operator, but I also need to pass "Patio", "Fence" and "Deck", which relate to specific title props. I hope this all makes sense, here's my code -

import { useState } from "react";
import Foot from "../Footing";

const Card = (props) => {
  const [showContent, setShowContent] = useState(false);
  const contentClick = () => {
    setShowContent(true);
  };

  return (

{props.job}

      <button onClick={contentClick}>Calculate</button>
      {showContent && <Foot />}

  );
};

export default Card;

Body:
You can pass the component as prop to Card. React will render the component only if its name is in Pascal case, so renaming the content prop to Content

Card

const Card = ({content:Content,job}) => {
  const [showContent, setShowContent] = useState(false);
  const contentClick = () => {
    setShowContent(true);
  };

  return (
    <div>
      <h1>{job}</h1>
      <button onClick={contentClick}>Calculate</button>
      {showContent && <Content />}
      <hr></hr>
    </div>
  );
};

Usage

import Foot from "../Footing";
<Card content={Foot}/>

If you want to pass title prop to the Foot component,

Card

const Card = ({content,job}) => {
  return
  <>
  {showContent && content}
  </>
}

Usage

import Foot from "../Footing";
<Card content={<Foot title='foot-title'/>}/>


问:
TEAMS Connector to Facebook Workplace
I am looking to connect TEAMS channel posting with Facebook Workplace posting. The requirement is to copy over the Facebook posting to a specific TEAMS channel. The copy will include the text write up, links and pictures/videos in the Facebook post.

Is this possible to be done through TEAMS connectors? If copy from Facebook Workplace to TEAMS is not possible, what about the other way round? That is copy from TEAMS posting to Facebook Workplace.

答:
Using Incoming Webhook you can copy the Facebook posting to a specific TEAMS channel.

Using Incoming webhook connector you can send the adaptive card. This card is highly customizable and can contain any combination of text, speech, images, buttons, and input fields.

Reference Doc: https://learn.microsoft.com/en-us/microsoftteams/platform/webhooks-and-connectors/how-to/add-incoming-webhook

Title: TEAMS Connector to Facebook Workplace