Category: javascript

Apologies for the novice query, I’ve inherited some infrastructure and still wrapping my head around the unusual structure they’ve got setup here.

I have the below in JS and need to replicate the compression in Java but struggling to get the same result or even same structure of output but cant understand why.

I’ve even tested using echo/unix commands and that seems to match java output structure.
(ie piping echo into “| xz -z -9 -c | base64” )
It’s almost definitely due to a gap in my understanding of what the javascript is doing here but can someone point me in the right direction/explain why the JS compression is differing so much from java/unix commands

Backing classes:

export default class LZMA {
constructor() {
this.LZMAinternal = new LZMA_WORKER();
}

async compress(input, mode = 9) {
return new Promise((res, rej) => {
// eslint-disable-next-line consistent-return
this.LZMAinternal.compress(input, mode, (result, error) => {
if (result) return res(result);
rej(error);
});
});
}

Main function calls (I want to replicate what is returned here in java)

const compressedBuffer = lzmaInstance.LZMAinternal.compress(string);
return Buffer.from(compressedBuffer).toString('base64');

I was attempting to recreate using org.tukaani.xz java library. However output structures look extremely different. Examples below of outputs (base64 encoded after the compression, I’ve confirmed it’s not that base64 encoding that’s the issue):

The input stringified json Object:

{"current":1,"resultsPerPage":30,"filters":[],"sortDirection":"desc","sortField":"releasedate","searchTerm":""}

Java/unix output:

/Td6WFoAAATm1rRGAgAhARwAAAAQz1jM4AB5AGZdAD2IiGeUEJx+YNDVSn+g13PJsqImqAnM48D6eQaUMbHDe9+RgNqpzYzom2xwbUPQBqoYmPFSkDFxpTBKCC7IdKwpZ71HTS8zvje4WaeXgtnzpZvdSH5L/KLoKGZAhv/wcTqptSaMKAAAABuSpdXZjxZ9AAGCAXoAAABGCM+pscRn+wIAAAAABFla

JS output:

XQAAgABvAAAAAAAAAAA9iIhnlBCcfmDQ1UrSxfZBo6le37FCAa6Ceb1FGA4qtkbpQAzUfCetkuCC1O3BFgLm8JItARFdH8B8EIEBdZ0dOELKreRlTUht/AvTBOcU0sdtiYF3dEspUYEHFcbYS79m27z//+aLwAA=

I am making an electron app and I need to listen to a tcp port on my local machine. When I start the application, I get : A JavaScript error occurred in the main process
Uncaught Exception:

Error: connect EISCONN ::1:5555 – Local (:ffff.127.0.0.1:5555)
at internalConnect (node:net 1067:16)
at defaultTriggerAsyncldScope (node:internal/async_hooks:463:18)
at GetAddrlnfoReqWrap.emitLookup [as callback] (node:netl 324:9)
at GetAddrlnfoReqWrap.onlookup [as oncompletel (node:dns:110:8)

here is my code :

//Imports
const fs = require('fs');
const net = require('net');
const path = require('node:path');
const { app, ipcMain, BrowserWindow } = require('electron');

//general variables
let settings
let mainWindow
const isMac = process.platform === 'darwin';

//create the server
let server

//window cunstructor
const createWindow = () => {
    mainWindow = new BrowserWindow({
        title: 'Bitburner Dashboard',
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: true,
            preload: path.join(__dirname, 'preload.js')
        }
    });

    mainWindow.loadFile('front/index.html');
}

//wait for window to start server
ipcMain.on('mainWindow-ready', () => {
    if (!fs.existsSync(path.join(__dirname, 'settings.json'))) {
        fs.writeFileSync(path.join(__dirname, 'settings.json'), JSON.stringify({
            port: 5555
        }), (error) => {
            if (error) {
                console.log(error)
            }
            throw error;
        })
    }

    try {
        // reading a JSON file synchronously
        settings = JSON.parse(fs.readFileSync("settings.json"));
        console.log(settings)
    } catch (error) {
        // logging the error
        console.error(error);
        throw error;
    }

    server = net.createServer(socket => {

        //connect on port
        socket.connect(settings.port);
        socket.setKeepAlive(true);
    
        //format data and send on recieve
        socket.on("data", data => {
            data = data.toString().split("n")[17].split(",");
    
            data = {
                id: data[0],
                state: data[1],
                updated_at: data[2],
                hostname: data[3],
                admin: data[4],
                level: data[5],
                purchased: data[6],
                connected: data[7],
                backdoored: data[8],
                cores: data[9],
                ram: {
                    used: data[10],
                    max: data[11],
                    free: data[12],
                    trueMax: data[13]
                },
                power: data[14],
                organisation: data[15],
                isHome: data[16],
                ports: {
                    required: data[17],
                    open: data[18],
                    ftp: data[19],
                    http: data[20],
                    smtp: data[21],
                    sql: data[22],
                    ssh: data[23]
                },
                security: {
                    level: data[24],
                    min: data[25]
                },
                money: {
                    available: data[26],
                    max: data[27],
                    growth: data[28]
                }
            };
    
            mainWindow.webContents.send("data-recieved", data);
    
            socket.destroy();
        });
    });

    mainWindow.webContents.send("settings-init", settings);
    server.listen(settings.port)
});

ipcMain.on('setting-update', (e, settings) => {
    server.close()
    server = net.createServer(socket => {

        //connect on port
        socket.connect(settings.port);
        socket.setKeepAlive(true);
    
        //format data and send on recieve
        socket.on("data", data => {
            data = data.toString().split("n")[17].split(",");
    
            data = {
                id: data[0],
                state: data[1],
                updated_at: data[2],
                hostname: data[3],
                admin: data[4],
                level: data[5],
                purchased: data[6],
                connected: data[7],
                backdoored: data[8],
                cores: data[9],
                ram: {
                    used: data[10],
                    max: data[11],
                    free: data[12],
                    trueMax: data[13]
                },
                power: data[14],
                organisation: data[15],
                isHome: data[16],
                ports: {
                    required: data[17],
                    open: data[18],
                    ftp: data[19],
                    http: data[20],
                    smtp: data[21],
                    sql: data[22],
                    ssh: data[23]
                },
                security: {
                    level: data[24],
                    min: data[25]
                },
                money: {
                    available: data[26],
                    max: data[27],
                    growth: data[28]
                }
            };
    
            mainWindow.webContents.send("data-recieved", data);
    
            socket.destroy();
        });
    });
    server.listen(settings.port)
    console.log(JSON.stringify(settings))
    fs.writeFileSync(path.join(__dirname, 'settings.json'), JSON.stringify(settings), (error) => {
        if (error) {
            console.log(error)
        }
        throw error;
    })
})

//start app
app.on('ready', () => {
    createWindow();

    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) createWindow();
    });
});

//close app
app.on('window-all-closed', () => {
    if (!isMac) app.quit();
})

app.on('close', () => {
    server.close()
});

I’ve tried to close the server on close but it wasn’t the problem

How do i change the color of the inactive tabs for Material UI tabs?

See in screenshot that they are black.

Thanks

I’m a little bit silly but I cannot create a good and short solution for my problem.
I want to create joke login page, part of it is about year of birth.
Firstly have to be created random date between 1 year and current year.
And lower there are two buttons: earlier and after.
I think you understand how they have to work 😉
Thank you!

I tried, but I couldn’t implement the logic. I don’t understand what exactly needs to be remembered and reused so as not to describe all the options…

I have a table like in this mockup: https://jsfiddle.net/sungi/3L4nw2hj/12/
It’s programatically created based on external data, so I can’t tell how many elements there will be in each row.

I have problem with

<div class="inv_fields"> and <div class="doc_line">

When i set max-height value to 0rem and 100rem (as value which theoretically shouldn’t be reached) it doesn’t take doc_line space, but transitions are a bit off – almost instant slide in and slight delay when hiding as it goes up to 100rem and down.

<!DOCTYPE html>
<HTML>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
        <style type="text/css">
            #grid {
                display: grid;

                & #header {
                    flex-direction: row;
                    font-weight: bold;
                    font-size: 1.5rem;
                    border-bottom: 1px solid;

                    & div {
                        width:25%;
                    }
                }           
            }

            .row {
                display: flex;
                flex-direction: column;
                grid-column-start:  span 4;
                justify-content: center;
                max-height: 100%;

                .l1 {
                    display: flex;
                    flex-direction: row;
                    padding-left: 0.25rem 0rem 0.25rem 1rem;
                    cursor: pointer;

                    &:hover{
                        background-color: rgba(128, 128, 128, 0.267);
                    }

                    & div {
                        width: 25%;
                    }
                }

                & .l2 {
                    width: 98%;
                    display: flex;
                    overflow: hidden;
                    align-self: center;
                    max-height: 100rem;
                    transition: all 1s ease-out;

                    &.folded {
                        max-height: 0rem;
                    }

                    & .doc_header {
                        font-weight: bold;
                    }

                    & .doc_header, .doc_line {
                        display: inherit;

                        &:hover:not(.doc_header, :has(inv_fields:hover)) {
                            background-color: rgba(172, 26, 26, 0.267);
                        }
                    }
                }

                & .inv_fields {
                    width: 98%;
                    flex-basis: 100%;
                    overflow: hidden;
                    align-self: flex-end;
                    flex-direction: column;
                    border: 1px solid;
                    max-height: 100rem;
                    transition: all 1s;

                    &.folded {
                        max-height: 0rem;                        
                    }

                    & .header {
                        display: flex;
                        flex-direction: row;
                        font-weight: bold;
                        width: 100%;

                        & div {
                            flex: 1 0 25%;
                        }
                    }

                    & .inv_line {
                        width: 100%;
                        border-bottom: 1px solid;
                        cursor: pointer;

                        & .inv_main {
                            display: flex;
                            flex-direction: row;
                            width: 100%;

                            &:hover {
                                background-color: rgba(0, 0, 255, 0.199);
                            }

                            & div {
                                flex: 1 0 25%;
                            }
                        }
                    }
                }
            }

            .doc_fields {
                display: flex;
                flex-direction: column;
                width: 100%;

                & div > div {
                    width: 25%;
                }

                & .doc_line {
                    width: 100%;
                    flex-wrap: wrap;
                    cursor: pointer;
                }
            }
        </style>
    </head>
    <body>
        <div id="grid">
            <div id="header" class="row">
                <div class="id">ID</div>
                <div class="name">NAME</div>
                <div class="status">STATUS</div>
                <div class="doc_count">COUNT</div>
            </div>
            <div class="row">
                <div class="l1">
                    <div class="id">001</div>
                    <div class="name">xyz</div>
                    <div class="status">active</div>
                    <div class="doc_count">3</div>    
                </div>
                <div class="l2 folded">
                    <div class="doc_fields">
                        <div class="doc_header">
                            <div class="doc_number">DOC NUMBER</div>
                            <div class="supplier_id">SUPPLIER ID</div>
                            <div class="supplier_name">SUPPLIER NAME</div>
                            <div class="inv_count">INVOICE COUNT</div>
                        </div>
                        <div class="doc_line">
                            <div class="doc_number">00000000</div>
                            <div class="supplier_id">0123456789</div>
                            <div class="supplier_name">XYZ XYZ</div>
                            <div class="inv_count">3</div>
                            <div class="inv_fields folded">
                                <div class="inv_main header">
                                    <div class="inv_id">INV_ID</div>
                                    <div class="inv_amount">INV AMOUNT</div>
                                    <div class="inv_curr">CURR</div>
                                    <div class="inv_amount_usd"></div>
                                    <div class="inv_owner"></div>
                                </div>
                                <div class="inv_line">
                                    <div class="inv_main">
                                        <div>000000001</div>
                                        <div>1000</div>
                                        <div>USD</div>
                                        <div>1000</div>
                                        <div>xyz</div>
                                    </div>
                                    <div class="inv_details folded">sth</div>
                                </div>
                                <div class="inv_line">
                                    <div class="inv_main">
                                        <div>000000001</div>
                                        <div>1000</div>
                                        <div>USD</div>
                                        <div>1000</div>
                                        <div>xyz</div>
                                    </div>
                                    <div class="inv_details folded">sth</div>
                                </div>
                                <div class="inv_line">
                                    <div class="inv_main">
                                        <div>000000002</div>
                                        <div>1000</div>
                                        <div>USD</div>
                                        <div>1000</div>
                                        <div>xyz</div>
                                    </div>
                                    <div class="inv_details folded">sth</div>
                                </div>
                                <div class="inv_line">
                                    <div class="inv_main">
                                        <div>000000003</div>
                                        <div>1000</div>
                                        <div>USD</div>
                                        <div>1000</div>
                                        <div>xyz</div>
                                    </div>
                                    <div class="inv_details folded">sth</div>
                                </div>
                                <div class="inv_line">
                                    <div class="inv_main">
                                        <div>000000004</div>
                                        <div>1000</div>
                                        <div>USD</div>
                                        <div>1000</div>
                                        <div>xyz</div>
                                    </div>
                                    <div class="inv_details folded">sth</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="l1">
                    <div class="id">002</div>
                    <div class="name">jkl</div>
                    <div class="status">active</div>
                    <div class="doc_count">3</div>    
                </div>
                <div class="l2 folded">
                    <div class="doc_fields">
                        <div class="doc_header">
                            <div class="doc_number">DOC NUMBER</div>
                            <div class="supplier_id">SUPPLIER ID</div>
                            <div class="supplier_name">SUPPLIER NAME</div>
                            <div class="inv_count">INVOICE COUNT</div>
                        </div>
                        <div class="doc_line">
                            <div class="doc_number">00000000</div>
                            <div class="supplier_id">0123456789</div>
                            <div class="supplier_name">JKL JKL</div>
                            <div class="inv_count">3</div>
                            <div class="inv_fields folded">
                                <div class="inv_main header">
                                    <div class="inv_id">INV_ID</div>
                                    <div class="inv_amount">INV AMOUNT</div>
                                    <div class="inv_curr">CURR</div>
                                    <div class="inv_amount_usd"></div>
                                    <div class="inv_owner"></div>
                                </div>
                                <div class="inv_line">
                                    <div class="inv_main">
                                        <div>000000002</div>
                                        <div>2000</div>
                                        <div>USD</div>
                                        <div>2000</div>
                                        <div>jkl</div>
                                    </div>
                                    <div class="inv_details folded"></div>
                                </div>
                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script>
            $('.l1').on("click", (event) => {
                console.log($(event.target).parent().parent().find('.l2').toggleClass('folded'));
            })

            $('.doc_line').click(() => {
                console.log($(event.target).parent().find('.inv_fields').toggleClass('folded'));
                
            })
        </script>           
    </body>
</HTML>

I tried to swap max-height values to % and it helped with transitions timing, but then inv_fields takes space of doc_line even if it’s folded.

<!DOCTYPE html>
<HTML>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
        <style type="text/css">
            #grid {
                display: grid;

                & #header {
                    flex-direction: row;
                    font-weight: bold;
                    font-size: 1.5rem;
                    border-bottom: 1px solid;

                    & div {
                        width:25%;
                    }
                }           
            }

            .row {
                display: flex;
                flex-direction: column;
                grid-column-start:  span 4;
                justify-content: center;
                max-height: 100%;

                .l1 {
                    display: flex;
                    flex-direction: row;
                    padding-left: 0.25rem 0rem 0.25rem 1rem;
                    cursor: pointer;

                    &:hover{
                        background-color: rgba(128, 128, 128, 0.267);
                    }

                    & div {
                        width: 25%;
                    }
                }

                & .l2 {
                    width: 98%;
                    display: flex;
                    overflow: hidden;
                    align-self: center;
                    max-height: 100%;
                    transition: all 1s ease-out;

                    &.folded {
                        max-height: 0%;
                    }

                    & .doc_header {
                        font-weight: bold;
                    }

                    & .doc_header, .doc_line {
                        display: inherit;

                        &:hover:not(.doc_header, :has(inv_fields:hover)) {
                            background-color: rgba(172, 26, 26, 0.267);
                        }
                    }
                }

                & .inv_fields {
                    width: 98%;
                    flex-basis: 100%;
                    overflow: hidden;
                    align-self: flex-end;
                    flex-direction: column;
                    border: 1px solid;
                    max-height: 100%;
                    transition: all 1s;

                    &.folded {
                        max-height: 0%;                        
                    }

                    & .header {
                        display: flex;
                        flex-direction: row;
                        font-weight: bold;
                        width: 100%;

                        & div {
                            flex: 1 0 25%;
                        }
                    }

                    & .inv_line {
                        width: 100%;
                        border-bottom: 1px solid;
                        cursor: pointer;

                        & .inv_main {
                            display: flex;
                            flex-direction: row;
                            width: 100%;

                            &:hover {
                                background-color: rgba(0, 0, 255, 0.199);
                            }

                            & div {
                                flex: 1 0 25%;
                            }
                        }
                    }
                }
            }

            .doc_fields {
                display: flex;
                flex-direction: column;
                width: 100%;

                & div > div {
                    width: 25%;
                }

                & .doc_line {
                    width: 100%;
                    flex-wrap: wrap;
                    cursor: pointer;
                }
            }
        </style>
    </head>
    <body>
        <div id="grid">
            <div id="header" class="row">
                <div class="id">ID</div>
                <div class="name">NAME</div>
                <div class="status">STATUS</div>
                <div class="doc_count">COUNT</div>
            </div>
            <div class="row">
                <div class="l1">
                    <div class="id">001</div>
                    <div class="name">xyz</div>
                    <div class="status">active</div>
                    <div class="doc_count">3</div>    
                </div>
                <div class="l2 folded">
                    <div class="doc_fields">
                        <div class="doc_header">
                            <div class="doc_number">DOC NUMBER</div>
                            <div class="supplier_id">SUPPLIER ID</div>
                            <div class="supplier_name">SUPPLIER NAME</div>
                            <div class="inv_count">INVOICE COUNT</div>
                        </div>
                        <div class="doc_line">
                            <div class="doc_number">00000000</div>
                            <div class="supplier_id">0123456789</div>
                            <div class="supplier_name">XYZ XYZ</div>
                            <div class="inv_count">3</div>
                            <div class="inv_fields folded">
                                <div class="inv_main header">
                                    <div class="inv_id">INV_ID</div>
                                    <div class="inv_amount">INV AMOUNT</div>
                                    <div class="inv_curr">CURR</div>
                                    <div class="inv_amount_usd"></div>
                                    <div class="inv_owner"></div>
                                </div>
                                <div class="inv_line">
                                    <div class="inv_main">
                                        <div>000000001</div>
                                        <div>1000</div>
                                        <div>USD</div>
                                        <div>1000</div>
                                        <div>xyz</div>
                                    </div>
                                    <div class="inv_details folded">sth</div>
                                </div>
                                <div class="inv_line">
                                    <div class="inv_main">
                                        <div>000000001</div>
                                        <div>1000</div>
                                        <div>USD</div>
                                        <div>1000</div>
                                        <div>xyz</div>
                                    </div>
                                    <div class="inv_details folded">sth</div>
                                </div>
                                <div class="inv_line">
                                    <div class="inv_main">
                                        <div>000000002</div>
                                        <div>1000</div>
                                        <div>USD</div>
                                        <div>1000</div>
                                        <div>xyz</div>
                                    </div>
                                    <div class="inv_details folded">sth</div>
                                </div>
                                <div class="inv_line">
                                    <div class="inv_main">
                                        <div>000000003</div>
                                        <div>1000</div>
                                        <div>USD</div>
                                        <div>1000</div>
                                        <div>xyz</div>
                                    </div>
                                    <div class="inv_details folded">sth</div>
                                </div>
                                <div class="inv_line">
                                    <div class="inv_main">
                                        <div>000000004</div>
                                        <div>1000</div>
                                        <div>USD</div>
                                        <div>1000</div>
                                        <div>xyz</div>
                                    </div>
                                    <div class="inv_details folded">sth</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="l1">
                    <div class="id">002</div>
                    <div class="name">jkl</div>
                    <div class="status">active</div>
                    <div class="doc_count">3</div>    
                </div>
                <div class="l2 folded">
                    <div class="doc_fields">
                        <div class="doc_header">
                            <div class="doc_number">DOC NUMBER</div>
                            <div class="supplier_id">SUPPLIER ID</div>
                            <div class="supplier_name">SUPPLIER NAME</div>
                            <div class="inv_count">INVOICE COUNT</div>
                        </div>
                        <div class="doc_line">
                            <div class="doc_number">00000000</div>
                            <div class="supplier_id">0123456789</div>
                            <div class="supplier_name">JKL JKL</div>
                            <div class="inv_count">3</div>
                            <div class="inv_fields folded">
                                <div class="inv_main header">
                                    <div class="inv_id">INV_ID</div>
                                    <div class="inv_amount">INV AMOUNT</div>
                                    <div class="inv_curr">CURR</div>
                                    <div class="inv_amount_usd"></div>
                                    <div class="inv_owner"></div>
                                </div>
                                <div class="inv_line">
                                    <div class="inv_main">
                                        <div>000000002</div>
                                        <div>2000</div>
                                        <div>USD</div>
                                        <div>2000</div>
                                        <div>jkl</div>
                                    </div>
                                    <div class="inv_details folded"></div>
                                </div>
                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script>
            $('.l1').on("click", (event) => {
                console.log($(event.target).parent().parent().find('.l2').toggleClass('folded'));
            })

            $('.doc_line').click(() => {
                console.log($(event.target).parent().find('.inv_fields').toggleClass('folded'));
                
            })
        </script>           
    </body>
</HTML>

I don’t want to use display:none to avoid ‘jumping’ in table.

Is there any possibility to make transitions not delayed and also don’t show unnecessary whitespace?

I’m trying to make a standalone dialog for my Angular app that can be used throughout the application. The dialog appears like it should, but no styling is being applied. The dialog code is:

@Component({
  standalone: true,
  selector: 'app-confirmation-dialog',
  templateUrl: './confirmation-dialog.component.html',
  styleUrls: ['./confirmation-dialog.component.scss'],
  imports: [
    CommonModule,
    MatDialogModule,
    MatButtonModule
  ]
})

And the template code is:

<h4 mat-dialog-title>Confirm</h4>
<div mat-dialog-content>
    {{message}}
</div>
<div mat-dialog-actions>
    <button (click)="yes()" color="primary">Yes</button>
    <button (click)="no()" color="alert">No</button>
    <button (click)="cancel()" color="warn" *ngIf="showCancel">Cancel</button>
</div>

The resulting dialog looks like this:

What am I doing wrong here?

I have the issue that some files, for example many videos seemingly cannot be properly uploaded with base64 encoding, but with React Native the update function of supabase only works with base64 encoding, i can’t upload them. Is there any workaround i haven’t seen yet? Any help is appreciated!

This is my code:

      const base64 = await FileSystem.readAsStringAsync(uri, {
        encoding: FileSystem.EncodingType.Base64,
      });

      const { error } = await supabase.storage
        .from("files")
        .upload(filePath, decode(base64), {
          contentType: mimeType,
        });

The error i get: “TypeError: Network request failed”

Documentation of supabase: https://supabase.com/docs/reference/javascript/storage-from-upload?example=upload-file-using-arraybuffer-from-base64-file-data

Supabase documentation. Upload only possible with base64 encoding?

I tried using a different encoding function, upload with blob and just directly giving the function the file returned by the DocumentPicker. Looked up if any other variables are incorrect, but everything else works as it should. Images and even one specific video are being uploaded correctly.
The DocumentPicker (from expo):

      result = await DocumentPicker.getDocumentAsync({
        type: "*/*", // Allow all file types
        copyToCacheDirectory: true,
      });

I really don’t know how i could fix this. Please help!

app.post('/edit/:id', function (req, res) {
  console.log('updating student1 item')
  const id = req.params.id
  const content = db.get('SELECT comment FROM student1 WHERE id = (' + id + ')', function (err, row) {
    if (err) {
      throw err
    }
    console.log(row.comment)
    return row.comment
  })
  console.log(content + 'Hello')
  const stmt = db.prepare('UPDATE student1 SET comment = "' + content + ' = modded" WHERE id = (' + id + ')')
  stmt.run(req.body.id)
  stmt.finalize()
  res.redirect('http://localhost:3000/student1/comment')
}
)

Basically I’m trying to assign a variable to be equal to row.comment but content gets executed into a null value and it messes everything up. I suspect it is because of JavaScript being asynchronous.

What I tried is right in the code, basically just assigning the variable but its clearly not working.

I want to make a thing so when I type the word “plz” into a input, a div box will appear. But I can’t quite figure it out. I think it has something to do with javascript.

My code is

<html>
  
  <style>
    
    .boxR{
      
        width: 350px;
        height: 350px;
        background-color:black;
        color:red;
        font-size:100px;
        font-weight:700;
        visibility:hidden;
      
    }
    
  </style>
  <body>
    
    <center>
      
          <br>
      
          <div class = "boxR"><br>hello</div>
          
          <input id = "test">
      
    </center>
    
    <script>
    
    while(true){
      
      sleep(10)
      
      if(document.getElementById("test").value == "plz"){
        document.getElementById("boxR").visibility = visible
      }}
      
    </script>
    

    
  </body>
</html>

I don’t know what I did wrong?

Writing a site with AJAX, having some issues with a returned script. This is for a login page. When the page initial loads, a function is called to immediately populate the body tag with HTML from another file. This other file contains its own script block. Unfortunately, the addeventlistener within this block doesn’t seem to be working.

Here’s the code for main.html:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MyApp</title>
</head>

<!-- Tag body with ID App -->
<body id="App" onload="loadLogin()">
    <script>
        function loadLogin() { 
            var xhttp = new XMLHttpRequest(); 
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200){
                    document.getElementById("App").innerHTML = this.responseText; //Target the body
                }
            };
            xhttp.open("GET", "/pages/login.html", true); //Replace body with contents of login.html
            xhttp.send();
    }
    </script>
</body>
</html>

and here are the contents of login.html (so far, just trying to get the eventlistener working right now):

<!-- Logo -->
<button id="myBtn">Try it</button>
<img src="images/logo.png" alt="my logo">

<!-- The form itself -->
<form id="LoginForm" onsubmit="return login()">
        <div class="FormRow">
            <input type="text" size="15" id="Username" name="Username" placeholder="Username">
        </div>
        <div class="FormRow">
            <input type="password" size="15" id="Password" name="Password" placeholder="Password">
        </div>
        <div class="FormRow" id="LoginButtonDiv">
            <input type="submit" size="15" value="Sign In">
        </div>
</form>

<!-- Script to pass authentication -->
<script>
    document.getElementById("myBtn").addEventListener("click", testchange);
    function testchange() { 
        var xhttp = new XMLHttpRequest(); 
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200){
                document.getElementById("App").innerHTML = this.responseText; //Target the body
            }
        };
        xhttp.open("GET", "test.txt", true); //Replace body with contents of login.html
        xhttp.send();
}
</script>  

When I click the “Try It!” button, nothing is happening. No errors in the console either. Any help would be appreciated.

Also, I’m aware this is not very good code. I’m still learning, please forgive my incompetence.

Recently I have finished course project. I ve been working with others and now I decided to upload repository to my github. While opening site with npm run dev everything runs great, but while going with npm run build and going to github pages one of the sliders does not work and the error code I get on the website is

Uncaught ReferenceError: Swiper2 is not defined
at HTMLDocument. (review-slider.js:3:17)

Link to the website: https://m3riadoc.github.io/simply_chocolate_project/

Link to github files: https://github.com/m3riadoc/simply_chocolate_project

I can’t really find a reason while build side does not load this specific script.

What I tried was to link script differently, but it did not work as well.

Please be understanding as this one was my first “serious” project. Right now I am still more into HTML/CSS than JS, while still studying.

I’m not sure how to go about this. I see several posts and solutions that don’t seem to encompass what I want to do. Or maybe I don’t know what proper terms to search with.
I want to add a hidden field to a web-2-lead form that will include the referring website that the visitor of the site used to arrive at the site with as well as the visitor’s IP address. I’ve tried what solutions come up for my basic searches, but I think my terms might not match those used by professionals. I’m just asking if someone can point me in the right direction. I tried contact form including referral of previous page but it doesn’t dolve teh problem I need a solution for

I want to be able to have my hidden form fields populate and send data via web-2-lead of each contact’s origin website and what is teh most efficient way to do that on basic html forms on a Drupal site
Do I need to make a cookie to track all visitors and then set up specific ID’s to query them in the <input hidden field?

I just want to keep all tags in separate collection but dont add multiple same tag name so what is the syntax for checking if tags already exist

let tags = new Schema({
tags: Array
});



tags.create({ tags: req.body.tags})

req.body.tags = its sometimes single item array or multiple items array

I have created an API with ASP.NET Core, in Program.cs I specified the allowed origins policy as shown:

var origins = "allowedOrigins";
builder.Services.AddCors(options =>
{
    options.AddPolicy(origins,
                          policy =>
                          {
                              policy.WithOrigins("http://10.9.8.50:80",
                                  "http://10.9.8.50:81", "http://10.9.8.50:7087", "http://10.9.8.50:5000", )
                                                  .AllowAnyHeader()
                                                  .AllowAnyMethod();
                          });
});

app.UseCors(origins);

and I am using basic JavaScript fetch method to call POST

async function postData(url = "", data = {}) {
    let value;
  const p = await fetch(url, {
    method: "POST", 
    mode: "cors", 
    cache: "no-cache", 
    credentials: "same-origin", 
    headers: {
      "Content-Type": "application/json",
      
    },
    redirect: "follow", 
    referrerPolicy: "no-referrer", 
    body: JSON.stringify(data), 
  }).then((response) => value = response.text());
  return value;

}

recently, the server starting to act weird after I tried to publish some modifications to the logic of one of the controllers. I started getting ‘no Access-Control-Allow-Origin in the request header’.

I am working with IIS 10 server, I tried to inject the CORS policy in the web.config but I started getting an error saying only one value was allowed in Access-Control-Allow-Origin.

I am wondering what might be the issue that started all of this, and what could the solution be.

Thanks

Trying to dig the ibovespa “volume” from this page whith the help from the article below, ut failing to make it work.

[https://stackoverflow.com/questions/64252076/using-google-sheets-as-a-web-scraper-for-a-site-with-java#new-answer
]

In the same way the article did, using the Network Monitor, I determined that the URL of interest is:

https://api.cotacoes.uol.com/asset/intraday/list/?format=JSON&fields=price,high,low,open,volume,close,bid,ask,change,pctChange,date&item=1&

But the code used to get the info isnt working.

Thanks in advance.