Category: javascript

I am developing a mobile application based on React Native framework. Earlier, the Phone Authentication is working properly. But now it’s showing me error ([Error: [auth/internal-error] An internal error has occurred, please try again.]). I have tried many changes in firebase configurations and updated my code as well but still showing same issue. I’ll be very thankful who ever sorts this out.

Authentication Script:

  async function signInWithPhoneNumber() {
    const phoneNumber = `${countryCode}${contact}`;
    if (!contact.trim() || !password.trim() || !confirmPassword.trim() || !name.trim()) {
      Alert.alert('Register Failed', 'Please Enter all required fields.');
      return;
    }

    if (contact.trim().length < 10) {
      Alert.alert('Invalid phone number', 'Please enter a valid phone number');
      return;
    }

    if (password !== confirmPassword) {
      Alert.alert('Password Mismatch', 'Passwords do not match. Please try again.');
      return;
    }

    const userExists = await checkUserExists(phoneNumber);
    if (userExists) {
      Alert.alert('Registration Error', 'This phone number is already registered.');
      return;
    } 

    try {
      const confirmation = await auth().signInWithPhoneNumber(phoneNumber);
      setConfirm(confirmation);
    } catch (error) {
      Alert.alert('Failed to send OTP', 'There was a problem sending the verification code.');
      console.log(error);
    }
  }

Output: LOG  [Error: [auth/internal-error] An internal error has occurred, please try again.]

I am working on my website project in Laravel, and I want to use the new version of jsPDF which is 2.5.2. Here is the js file I have:

document.getElementById('exportPDF').addEventListener('click', function() {
    var { jsPDF } = window.jspdf.jsPDF;
    var doc = new jsPDF();
    doc.autoTable({ html: '#Table1' });
    doc.save('AccountList.pdf');
});

//in the blade file
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.2/jspdf.umd.min.js"></script>

The console error message

 Uncaught TypeError: Cannot read properties of undefined (reading 'jsPDF')

The older version of jsPDF like 2.3.1 can work using window.jspdf;

var { jsPDF } = window.jspdf;

I am creating a website using HTML, CSS, JS and Python flask but for some reason, when I fetch data from the flask, everything in python works perfect but then the JS does not get the result of the fetch, to be efficient I will just show the JS file and Python code, if you need more ask me for it but I think that should be fine.

const menu = document.querySelector('#mobile-menu');
const menuLinks = document.querySelector('.navbar__menu');

menu.addEventListener('click', function() {
  menu.classList.toggle('is-active');
  menuLinks.classList.toggle('active');
});

var imgElement = document.getElementById("signUpButton");

imgElement.addEventListener('click', function(){
  console.log("Sign Up Image clicked!");
  var username = document.getElementById("username").value;
  var email = document.getElementById("email").value;
  var password = document.getElementById("password").value;

  console.log({username, email, password});

  fetch('http://127.0.0.1:5000/signup', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      username: username,
      email: email,
      password: password
    })
  })
  console.log("hey")
  .then(response => response.json())
  .then(data => {
    if (data.success == false){
      document.getElementById("resultMessage").innerHTML = "User already exists, please sign in with your account or create a new one";
    }
  })
  .catch((error) => {
    console.error('Error', error);
  })
});

from flask import Flask, request, jsonify
import json
import os
from flask_cors import CORS

app = Flask(__name__)
CORS(app, resources={r"/*": {"origins": "http://localhost:63342"}})

USERS_FILE = os.path.join(os.path.dirname(__file__), 'users.json')


def load_users():
    if os.path.exists(USERS_FILE):
        with open(USERS_FILE, 'r') as f:
            return json.load(f)
    return []


def save_users(users):
    with open(USERS_FILE, 'w') as f:
        json.dump(users, f, indent=4)


@app.route('/signup', methods=['POST'])
def signup():
    data = request.get_json()
    print("Received data:", data)
    username = data['username']
    email = data['email']
    password = data['password']

    users = load_users()

    if not username or not email or not password:
        print("hi")
        return jsonify({"success": False, "message": "Please enter valid username, email, and password."})
    elif any(user['username'] == username or user['email'] == email for user in users):
        return jsonify({"success": False, "message": "Username or email already exists, please try again!"})
    else:
        users.append({"username": username, "email": email, "password": password})
        print("Updated users list:", users)
        save_users(users)

        return jsonify({"success": True, "message": "User registered successfully!"})


if __name__ == '__main__':
    app.run(debug=True)

I want to make a chat room. I follow the step with MS tutorial.
My folder is like figure1.

But the function doesn’t be create. When I go to azure portal, I saw the Function app is created successfully, but their is no any function can be trig (fig2).

I use function start locally and it works fine, but I put it in azure and it doesn’t work.

So i am deep into building an electron-react app and i want to customize the title bar (with react) without loosing the snap controls on the minimize button.
The one below is from the default chrome webapp shortcut and i want to do something similar.

i tried using custom-electron-titlebar and it seems to be able to implement this. so how do i implement this in react and electron ipc if possible at all.

while trying to call a github raw url using axios get request in typescript i am getting error 400.
the same link when being tried with python script and curl command gives response 200.
I tried adding headers in axios request but it did not helped.

Attaching the code below,

import axios, { AxiosRequestConfig } from 'axios';

async function fetchGitHubRawFile(owner: string, repo: string, branch: string, path: string): Promise<string> {
    const encodedPath = encodeURIComponent(path); // Encode the path
    const url = `https://raw.githubusercontent.com/${owner}/${repo}/${branch}/${encodedPath}`;
    console.log('Fetching URL:', url); // Debugging log
    const config: AxiosRequestConfig = {
        headers: {
            'Content-Type': 'text/plain; charset=utf-8', 
            'Accept': 'application/text',
        }
    }
    try {
        const response = await axios.get(url, config);
        return response.data;
    } catch (error) {
        if (axios.isAxiosError(error)) {
            console.error('response headers:', error.response?.headers);
            console.error('Axios error:', error.message);
            console.error('Response data:', error.response?.data); // More detailed error info
        } else {
            console.error('Unexpected error:', error);
        }
        throw error;
    }
}
//https://raw.githubusercontent.com/tensorflow/tensorflow/master/README.md
const owner = 'tensorflow'; 
const repo = 'tensorflow'; 
const branch = 'master'; 
const filePath = 'README.md'; 
fetchGitHubRawFile(owner, repo, branch, filePath)
    .then(data => {
        console.log('File content:', data);
    })
    .catch(error => {
        console.error('Failed to fetch file:', error);
    });

what could be this issue and how to resolve this?

I am trying to have a simple map window in my WPF application. The app runs without any error but the map does not show up. I am not sure how I can debug the issue.

my WPF xaml:

<Window
    x:Class="StructuralCalculations.WindTool.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:StructuralCalculations.WindTool"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:vm="clr_namespace:StructuralCalculations.MainVM"
    xmlns:wv2="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
    Title="MainWindow"
    Width="800"
    Height="450"
    mc:Ignorable="d">
    <Window.DataContext>
        <local:MainVM />
    </Window.DataContext>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="10" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="10" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="10" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="150" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="10" />
        </Grid.ColumnDefinitions>
        <wv2:WebView2
            x:Name="MapBrowser"
            Grid.Row="1"
            Grid.Column="1"
            Width="500"
            Height="300"
            />
        <StackPanel
            Grid.Row="1"
            Grid.Column="2"
            Margin="0,0,0,0"
            Orientation="Vertical">
            <TextBlock
                VerticalAlignment="Center"
                FontWeight="Bold"
                Text="Project:" />
            <TextBox Text="{Binding ProjectName}" />
            <TextBlock
                VerticalAlignment="Center"
                FontWeight="Bold"
                Text="Job Number:" />
            <TextBox Text="{Binding JobNumber}" />
            <TextBlock
                VerticalAlignment="Center"
                FontWeight="Bold"
                Text="Address:" />
            <TextBox x:Name="AddressTextBox" Text="{Binding Address}" />
            <!--<Button
                Margin="30,5,30,5"
                Click="CenterMapButton_Click"
                Content="Center Map" />-->
            <TextBlock
                VerticalAlignment="Center"
                FontWeight="Bold"
                Text="Nearest City:" />
            <TextBlock
                x:Name="CityNameTextBlock"
                Margin="0,0,0,0"
                VerticalAlignment="Center"
                Text="{Binding Location, Mode=TwoWay}" />
            <TextBlock
                VerticalAlignment="Center"
                FontWeight="Bold"
                Text="Wind Region:" />
            <TextBlock
                Margin="0,0,0,0"
                VerticalAlignment="Center"
                Text="{Binding WindRegion}" />
            <TextBlock
                VerticalAlignment="Center"
                FontWeight="Bold"
                Text="Elevation:" />
            <TextBlock
                x:Name="ElevationTextBlock"
                Margin="0,0,0,0"
                VerticalAlignment="Center"
                Text="{Binding Elevation, Mode=TwoWay}" />
        </StackPanel>
        <Button
            Grid.Row="2"
            Grid.Column="4"
            Width="100"
            Height="50"
            Command="{Binding GenerateReportCommand}"
            Content="Report" />
    </Grid>
</Window>

my xaml.cs:

using Microsoft.Web.WebView2.Core;
using System.IO;
using System.Windows;

namespace StructuralCalculations.WindTool
{
    //[ComVisible(true)] // Make the class visible to COM for scripting
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            InitializeWebView();


        }

        private async void InitializeWebView()
        {
            // Ensure WebView2 environment is initialized
            await MapBrowser.EnsureCoreWebView2Async();

            // Enable JavaScript explicitly
            MapBrowser.CoreWebView2.Settings.IsScriptEnabled = true;



            // Attach event handlers after WebView2 is initialized
            MapBrowser.CoreWebView2.WebMessageReceived += CoreWebView2_WebMessageReceived;
            MapBrowser.CoreWebView2.OpenDevToolsWindow(); // Open DevTools

            // Add a global error handler for JavaScript errors
            await MapBrowser.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync(@"
                    window.onerror = (message, source, lineno, colno, error) => {
                        console.error(`${message} at ${source}:${lineno}:${colno}`);
                    };
                ");





            // Get the path of the HTML file
            string htmlFilePath = Path.Combine(Environment.CurrentDirectory, "Shared", "map.html");

            // Check if the file exists
            if (File.Exists(htmlFilePath))
            {
                // Load the HTML file into WebView2
                MapBrowser.CoreWebView2.Navigate(htmlFilePath);
            }
            else
            {
                MessageBox.Show("HTML file not found: " + htmlFilePath);
            }
        }

        void CoreWebView2_WebMessageReceived(object sender, CoreWebView2WebMessageReceivedEventArgs e)
        {
            MessageBox.Show(e.WebMessageAsJson);
        }
    }
}

and my html with my API key hidden:

<!doctype html>
<!--
 @license
 Copyright 2019 Google LLC. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
-->
<html>
<head>
    <title>Add Map</title>

</head>
<body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>

    <!-- prettier-ignore -->
    <script>
    (g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })
            ({ key: "myHiddenApiKey", v: "weekly" });</script>
</body>
</html>

This is what I get when I run the application:

The devtool does not give any error.

I am trying to understand the logic to rollback the date to previous month.

const now = new Date();
console.log(`Initial Date: ${now}`); // Initial Date: Wed Oct 23 2024 00:01:56 GMT-0500 (CST)

now.setDate(-1);
console.log(`Updated Date: ${now}`); // Updated Date: Sun Sep 29 2024 00:01:56 GMT-0500 (CST)

Here, why the Updated Date in not showing as Sep 30?

I am unable to understand the output Updated Date: Sun Sep 29 2024 00:01:56 GMT-0500 (CST)

<script> jQuery(document).ready(function($) {
var serviceAreas = [
{ city: “Mumbai”, state: “Maharashtra”, pin: “400001” },
{ city: “Delhi”, state: “Delhi”, pin: “110001” },
{ city: “Bengaluru”, state: “Karnataka”, pin: “560001” },
{ city: “Hyderabad”, state: “Telangana”, pin: “500001” },
{ city: “Chennai”, state: “Tamil Nadu”, pin: “600001” },
{ city: “Nainital”, state: “Uttarakhand”, pin: “263001” },
{ city: “Haldwani”, state: “Uttarakhand”, pin: “263139” },
{ city: “Kaladhungi”, state: “Uttarakhand”, pin: “263140” },
{ city: “Gurugram”, state: “Haryana”, pin: “122001” },
{ city: “Jaipur”, state: “Rajasthan”, pin: “302001” },
];
`

        function isServiceAvailable(zip) {
            return serviceAreas.some(function(area) {
                return area.pin === zip;
            });
        }

        function getUserLocation() {
            $.get("https://ipapi.co/json/", function(response) {
                var userZip = response.postal;
                var userCity = response.city;
                var userState = response.region;

                if (isServiceAvailable(userZip)) {
                    $('#service-message').html('Great news! We are serving in ' + userCity + ',                       ' + userState + ' (ZIP: ' + userZip + ').');
                } else {
                    $('#service-message').html('Unfortunately, we are not serving in ' + userCity + ', ' + userState + ' (ZIP: ' + userZip + ') at this time.');
                }
            }, "json");
        }

        // Display the service area message on page load
        getUserLocation();
    });
</script>`

this is the sample to code it will map the zip code on the basis of stored addresses.
without askeing browser user location access
can anyone solve this understand the code try to figure out the bugs and solve it .

because it does not accurately mapping the zip code to provide the exact information.

i tried as shown in my code but unable to manage the api fallbacks .

key points->>
displaying user permission without asking it may be by using ip address
stores city zip codes when user open the website these location it should reflect the stored city name other wise a message coming soon
but unfortunality its not working as expected i also used google api key which i will not be sharing but still its not working

anyone to figure out the bugs in my code i will be really thankful .
you can reply to code i will replace my google map api key.

Body: I’m working on a web project and would like to display the user’s location (city, country) on the page based on their IP address or geolocation. I’m using JavaScript and possibly an API, but I’m not sure of the best approach.

Can someone guide me on how to implement this feature? I would appreciate a step-by-step explanation or example code.

looking forward to get the solution form the genius`

Flutter Monaco Editor Integration

I am implementing the Monaco Editor inside a Flutter web app and using an iFrameElement to load the editor. The setup works fine, but I’m facing an issue when trying to send data from the Flutter side to JavaScript (running inside the iframe). However, sending data from the Javascript to iFrame works fine.

Code reference: gist

Summary of the Issue:

• I’m using an iFrameElement in Flutter to integrate the Monaco Editor.
• I want to send data from Flutter to JavaScript, which should then be processed by the editor inside the iframe.
• However, when I attempt to send the data, the JavaScript inside the iframe seems to be receiving incorrect or unknown data.
• I’m using iFrameElement.contentWindow.postMessage to communicate between the iframe and the main page.

Required Functionality:

• Communication from the iFrameElement to JavaScript. (❌ Receiving some irrelevant data)

Actual data sent: ✅

{
    "name": "gokul"
}

Received data: ❌

{
    "vscodeScheduleAsyncWork": 1
}

• Communication from JavaScript to the iFrameElement works as expected. (✅ Working fine)

I have a Streamlit web app which uses an AG Grid table to display data. As part of the app the user has to update a forecast. The forecast is then compared to the budget. If there is a variance, then the user has to input a comment. To indicate this, I would like to highlight the Comment cell for the given row in red given various criteria:

• The comment is empty but there is a variance
• The comment hasn’t changed, but the variance has changed (the forecast is updated)

Also I would like to indicate that the comment has not been saved, but that the user updated the comment

In my JS code the formatting works, BUT only after I try and edit the comment. The variance calculation renders immediately after updating the forecast, but the comment cell’s formatting does not update.

Below you can see that the variance is there. But only after editing the comment, entering nothing and selecting another cell the formatting updates.

I have thought about using a ValueFormatter, but can’t seem to make it work.

// Logic for requiring a forecast comment
if (params.colDef.field === 'forecast_comment' && params.data.hierarchy_level ===4) {{
    if (!(params.data.forecast_comment === params.data.unchanged_comment)) {{
    styles.backgroundColor = '{comment_required_unsaved_background}';
    }} 
    else if (params.data['annual_budget'] !== params.data['annual_forecast']
            && !params.data.forecast_comment) {{
    styles.backgroundColor = '{comment_required_empty_background}';
    }}
    else if (params.data['annual_budget'] !== params.data['annual_forecast']
            && params.data.annual_budget - params.data.annual_forecast !== params.data.forecast_variance) {{
    styles.backgroundColor = '{comment_required_unsaved_background}';
    }}

}}

Here is how I configure my column:

    gb.configure_column("forecast_comment", 
                        header_name="Forecast Comment", 
                        cellStyle=jscode_comments, 
                        cellClass='custom-cell-text', 
                        wrapText=True, editable=make_forecast_editable, 
                        cellEditorPopup=True, 
                        cellEditor='agLargeTextCellEditor', 
                        cellEditorParams={'maxLength': 200}, minWidth=300, 
                        maxWidth=800)

In Mui’s documentation here they recommend using

import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';

style imports instead of

import { Button, TextField } from '@mui/material';

The reason for this, as I understand it, is that that @mui/material style import will ultimately go through a barrel file – and bundlers like Webpack:

1. May not be able to treeshake accurately for production bundles
2. Will not treeshake for development bundles, giving slower development build times.

Webpack respects a exports property in the package.json (documentation here) to declare submodules accessed via @mui/material/Button style imports.

However, Mui doesn’t actually appear to use these in their package.json

So how are these imports working?

Formik not submit the form when click at submit button. The handleSubmit() isn’t being called, nether putting a console.log() or alert() directly at onSubmit.
I am using PrimeReact 10.8.3, React 18.3.1 and Formik 2.4.6.

Code:

import React, { useContext } from "react";
import { useMutation } from "@apollo/client";
import signInMutation from "../apollo/schemas/mutations/signInUser";
import { Dialog } from "primereact/dialog";
import { useFormik } from "formik";
import { InputText } from "primereact/inputtext";
import { FloatLabel } from "primereact/floatlabel";
import { Button } from "primereact/button";
import { Password } from 'primereact/password';
import { ErrorContext } from "../../contexts/ErrorContext";

// eslint-disable-next-line react/prop-types
function SignIn({ show, handleClose }) {
    const cssInvalid = "[&>_*_.p-inputtext]:border-red-500 [&>_*_.p-inputtext]:border-[1px]";
    const [newUser, { loading }] = useMutation(signInMutation);
    const { setErrorMessage } = useContext(ErrorContext);

    async function handleSubmit(values) {
        try {
            const { data } = await newUser({
                variables: {
                    username: values.username,
                    email: values.email,
                    password: values.password,
                },
            });
            console.log(data.createUser);
            setErrorMessage(data.createUser);
            handleClose();
        } catch (error) {
            const errorMsg = error.graphQLErrors?.[0]?.message || "An error occurred";
            console.log(errorMsg);
            setErrorMessage(errorMsg);
        }
    }

    function handleValidation(values) {
        const errors = {};

        errors.email = false;
        errors.emailMessage = "";
        if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,}$/i.test(values.email) && values.email !== "") {
            errors.email = true;
            errors.emailMessage = "Invalid email.";
        }

        errors.confirmPassword = false;
        errors.confirmPasswordMessage = "";
        if (values.password !== values.confirmPassword) {
            errors.confirmPassword = true;
            errors.confirmPasswordMessage = "Password not match.";
        }

        errors.username = false;
        errors.usernameMessage = "";
        if (values.username.length < 3 && values.username !== "") {
            errors.username = true;
            errors.usernameMessage = "Username must've more than 2 characters.";
        }
        if (values.username.length > 21 && values.username !== "") {
            errors.usernameMessage = "Username must've less than 21 characters.";
        }

        errors.password = false;
        errors.passwordMessage = "";
        if (values.password.length < 8 && values.password !== "") {
            errors.password = true;
            errors.passwordMessage = "Password must've more than 8 characters.";
        }
        if (values.password.length > 70 && values.password !== "") {
            errors.password = true;
            errors.passwordMessage = "Password must've less than 8 characters.";
        }

        return errors;
    }

    const formik = useFormik({
        initialValues: {
            email: "",
            username: "",
            password: "",
            confirmPassword: "",
        },
        onSubmit: (values) => handleSubmit(values),
        validate: (values) => handleValidation(values),
    });

    return (
        <>
            <Dialog
                visible={show}
                modal
                closable={!loading}
                onHide={handleClose}
                content={() => (
                    <div className="flex flex-col text-center items-center justify-center p-4 gap-4 bg-gradient-to-tr from-slate-700 rounded-xl">
                        <h1 className="select-none p-3 font-bold">EG</h1>
                        <form className="flex gap-7 flex-col p-4" onSubmit={formik.handleSubmit}>
                            <div className={"flex flex-col " + (formik.errors.email ? cssInvalid : "")}>
                                <FloatLabel>
                                    <InputText
                                        type="email"
                                        name="email"
                                        invalid={formik.errors.email}
                                        required={true}
                                        onChange={formik.handleChange}
                                        onBlur={formik.handleBlur}
                                        aria-describedby="email-help"
                                        className="p-3"
                                        value={formik.values.email} />
                                    <label htmlFor="email">Email</label>
                                </FloatLabel>
                                <small
                                    id="email-help"
                                    className="text-red-300 select-none">
                                    {formik.errors.emailMessage}
                                </small>
                            </div>
                            <div className={"flex flex-col " + (formik.errors.username ? cssInvalid : "")}>
                                <FloatLabel>
                                    <InputText
                                        type="text"
                                        name="username"
                                        required={true}
                                        onChange={formik.handleChange}
                                        onBlur={formik.handleBlur}
                                        aria-describedby="username-help"
                                        className="p-3"
                                        value={formik.values.username} />
                                    <label htmlFor="username">
                                        Username
                                    </label>
                                </FloatLabel>
                                <small
                                    id="username-help"
                                    className="text-red-300 select-none">
                                    {formik.errors.usernameMessage}
                                </small>
                            </div>
                            <div className={"flex flex-col " + (formik.errors.password ? cssInvalid : "")}>
                                <FloatLabel>
                                    <Password
                                        name="password"
                                        required={true}
                                        onChange={formik.handleChange}
                                        onBlur={formik.handleBlur}
                                        invalid={formik.errors.password}
                                        className="[&>_*_.p-password-input]:p-3"
                                        value={formik.values.password}
                                        toggleMask />
                                    <label htmlFor="password">
                                        Password
                                    </label>
                                </FloatLabel>
                                <small
                                    id="confirmPassword-help"
                                    className="text-red-300 select-none">
                                    {formik.errors.passwordMessage}
                                </small>
                            </div>
                            <div className={"flex flex-col " + (formik.errors.confirmPassword ? cssInvalid : "")}>
                                <FloatLabel>
                                    <Password
                                        name="confirmPassword"
                                        required={true}
                                        onChange={formik.handleChange}
                                        onBlur={formik.handleBlur}
                                        aria-describedby="confirmPassword-help"
                                        className="[&>_*_.p-password-input]:p-3"
                                        value={formik.values.confirmPassword}
                                        toggleMask />
                                    <label htmlFor="confirmPassword">
                                        Confirm Password
                                    </label>
                                </FloatLabel>
                                <small
                                    id="confirmPassword-help"
                                    className="text-red-300 select-none">
                                    {formik.errors.confirmPasswordMessage}
                                </small>
                            </div>
                            <div className="flex align-items-center gap-2">
                                <Button
                                    label="Cancel"
                                    disabled={loading || formik.isSubmitting}
                                    type="button"
                                    onClick={handleClose}
                                    text
                                    className="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10" />
                                <Button
                                    label="Sing In"
                                    type="submit"
                                    loading={loading || formik.isSubmitting}
                                    text
                                    className="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10" />
                            </div>
                        </form>
                    </div>
                )}
            />
        </>
    );
}

export default SignIn;

I have tried put the form in Dialog body instead content, without Dialog, tag with , with . Nothing is trowed in console.

I am building a monthly budget app using ASP.NET MVC, and I want to allow users to create multiple income entries at the same time (maximum of 5 forms on larger screens and 3 on smaller screens).

Currently, I’m working with a ViewModel that holds the list of income forms, but I’m struggling to dynamically add or remove forms in the view. Ideally, users should be able to click a “+” button to add a new income form or an “x” button to remove one.

 // GET: Incomes/Create
 public IActionResult Create()
 {
     var model = new MultipleIncomeVM();
     ViewData["BudgetId"] = new SelectList(_context.Budgets, "BudgetId", "Name");
     ViewData["CategoryId"] = new SelectList(_context.Categories, "CategoryId", "Name");
     return View(model);
 }

 // POST: Incomes/Create
 [HttpPost]
 [ValidateAntiForgeryToken]
 public async Task<IActionResult> Create(MultipleIncomeVM incomevm)
 {
     try
     {
         // Validate only the incomes with Amount greater than 0
         var validIncomes = incomevm.Incomes.Where(i => i.Amount > 0);

         if (ModelState.IsValid)
         {
             foreach (var i in validIncomes)
             {
                 // Add each income
                 _context.Add(i);
                 await _context.SaveChangesAsync();

                 // A new transaction
                 var transaction = new Transaction
                 {
                     Date = i.DateReceived,
                     Type = ControllersName.GetControllerName(this.GetType().Name),
                     Detail = i.Source,
                     Amount = i.Amount,
                     BudgetId = i.BudgetId,
                     CategoryId = i.CategoryId
                 };

                 _context.Add(transaction);
                 await _context.SaveChangesAsync();
             }
             return RedirectToAction(nameof(Index));
         }
     }
     catch (DbUpdateException)
     {
         ModelState.AddModelError("", "Unable to save changes. Try again, and if the problem persists, see your system administrator.");
     }

     ViewData["BudgetId"] = new SelectList(_context.Budgets, "BudgetId", "Name");
     ViewData["CategoryId"] = new SelectList(_context.Categories, "CategoryId", "Name");
     return View(incomevm);
 }

namespace My_Budget.ViewModels
{
    public class MultipleIncomeVM
    {
        public List<Income> Incomes { get; set; } = new List<Income>
        {
            new Income { DateReceived = DateTime.Today }
        };
    }
}

@model My_Budget.ViewModels.MultipleIncomeVM

@{
    ViewData["Title"] = "Create Incomes";
}

<h1>Create Multiple Incomes</h1>

<hr />
<div class="row">
    <div class="col-md-12">
        <form asp-action="Create">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>

            <table class="table table-bordered">
                <thead>
                    <tr>

                        <th>Source</th>
                        <th>Amount</th>
                        <th>Date Received</th>
                        <th>Category</th>
                        <th></th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @for (int i = 0; i < Model.Incomes.Count; i++)
                    {
                        <tr>

                            <td>
                                <input asp-for="@Model.Incomes[i].Source" class="form-control" />
                                <span asp-validation-for="@Model.Incomes[i].Source" class="text-danger"></span>
                            </td>
                            <td>
                                <input asp-for="@Model.Incomes[i].Amount" class="form-control" />
                                <span asp-validation-for="@Model.Incomes[i].Amount" class="text-danger"></span>
                            </td>
                            <td>
                                <input asp-for="@Model.Incomes[i].DateReceived" class="form-control" type="date" />
                                <span asp-validation-for="@Model.Incomes[i].DateReceived" class="text-danger"></span>
                            </td>
                            <td>
                                <select asp-for="@Model.Incomes[i].CategoryId" class="form-control" asp-items="ViewBag.CategoryId"></select>
                                <span asp-validation-for="@Model.Incomes[i].CategoryId" class="text-danger"></span>
                            </td>
                            <td>
                                <i class="bi bi-plus-circle" id="add-form"></i>
                                <i class="bi bi-x-circle" disabled></i>
                            </td>
                            <td>
                                @* Hidden value *@
                                <select asp-for="@Model.Incomes[i].BudgetId" hidden class="form-control" asp-items="ViewBag.BudgetId" ></select>
                            </td>
                        </tr>
                    }
                </tbody>
            </table>

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

<div>
    <a asp-action="Index">Back to List</a>
</div>

@section Scripts {
    @{
        await Html.RenderPartialAsync("_ValidationScriptsPartial");
    }
}     

What I’ve tried so far:

I've created a list in the ViewModel to hold multiple income entries.
I can display multiple forms initially, but I'm unsure how to handle dynamic addition/removal of forms in the view.

My goal is to manage the creation and deletion of income forms in the view(maybe using JS?), so users can interactively add or remove forms as they want.

Thank you!

I simply can’t wrap my head around why these statically served images are being delayed(see first image depicting network waterfall below). AFAIK, most of the served files are served parallel with http2, depending on what file initiates the fetch. Now, the images that are stalling are enqueued by the index, which is the same file that fetches the images that are loading just fine. I find that strange.

Important note: when everything is previously cached, all the images load as quickly as expected. But I still don’t understand what the issue is because:

Image of network waterfall
image of network waterfall

Image of total enqueue delay
image of total enqueue / delay

If it was a JS or CSS render block, wouldn’t the first two images also stall?
I can’t imagine it can be a cache issue, since the delayed images are very small file size SVG’s.
Considering the loose request constraints of http2, I can’t imagine that being an issue.

I’m simply trying to understand the mechanisms at hand here. They stall for a solid 200ms. That’s pretty substantial considering the page generally loads within less than a second. Ideally if possible I’d like to get rid of that stall to reduce the load time.