Category: javascript

View

@model BinViewModel

<form id="binForm">
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <fieldset>
        <div class="form-group">
            @Html.LabelFor(model => model.CreateBinModel.StreetName, htmlAttributes: new { @class = "col-form-label" })
            @Html.TextBoxFor(model => model.CreateBinModel.StreetName, new { @class = "form-control", @placeholder = "Street Name", @autocomplete = "off" })
            @Html.ValidationMessageFor(model => model.CreateBinModel.StreetName, "", new { @class = "text-danger" })
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.CreateBinModel.Capacity, htmlAttributes: new { @class = "col-form-label" })
            @Html.TextBoxFor(model => model.CreateBinModel.Capacity, new { @class = "form-control", @placeholder = "Capacity", @autocomplete = "off" })
            @Html.ValidationMessageFor(model => model.CreateBinModel.Capacity, "", new { @class = "text-danger" })
        </div>
        <br />
        <button type="submit" id="btnCreateBin" class="btn btn-success">
            <span class="fa fa-arrow-right fa-fw"></span> Create Bin
        </button>
    </fieldset>
</form>

Model

 public class CreateBin
 {
     public string? StreetName { get; set; }
     public string? Capacity { get; set; }
 }
 public class BinViewModel
 {
     public CreateBin CreateBinModel { get; set; }
     public List<Bin> Bins { get; set; }
 }

Bin.js

$(document).ready(function () {
    $('#binForm').on('submit', function (e) {
        e.preventDefault();
        console.log($(this).serialize());
        $.ajax({
            url: '/Bin/Create', // Your action URL
            type: 'POST',
            data: $(this).serialize(),
            success: function (response) {
                if (response.success) {
                    $('#createBinModal').modal('hide');
                    $('#successModal .modal-body p').text(response.message);
                    $('#successModal').modal('show');
                } else {
                    // Display error modal with the error message
                    $('#createBinModal').modal('hide');
                    $('#errorModal .modal-body p').text(response.message);
                    $('#errorModal').modal('show');
                }
            }
        });
    });
});

Image:

I trying to Add bin then the value of model is null, Then i checked in the console log there are something. In the attached image I currently encountered issue. Can’t pass properly the value of the form to the model.

Can anyone help what is the mistake in the code.

Thank you

How to complain in PhonePe for a wrong transaction? To refund money from PhonePe for a wrong recharge, you should immediately contact PhonePe’s customer support: 0767^9578°350 and (available 24/7) report the issue….

How to complain in PhonePe for a wrong transaction? To refund money from PhonePe for a wrong recharge, you should immediately contact PhonePe’s customer support: 0767^9578°350 and (available 24/7) report the

const plugin = require('tailwindcss/plugin')

module.exports = {
  content: ["./src/**/*.{html,js,jsx}"],
  theme: {
    extend: {
      fontFamily:{
        nerko: "Nerko One"
      },
      keyframes:{ 
        'bouncer':{
          '0%,100%':{transform: 'translateY(0)'},
          '50%':{transform: 'translateY(-50px)'}
        }
      },
      animation:{
        'bounce-50': 'bouncer 1s ease-in-out'
      },
    },
  },
  plugins: [
    plugin(function({matchComponents, theme}){
      matchComponents(
        {
          circle:(value)=>({
            width:value,
            height:value,
            borderRadius:theme('borderRadius.full')
          })
        },
        {
          value:theme('spacing')
        }
      )
    }),
    plugin(function({matchComponents, theme}){
      matchComponents(
        {
            gradientShadow:(color) => ({
                boxShadow:`0 180px 700px -20px ${color}, 0 -180px 700px -20px ${color}, 180px 0 700px -20px ${color}, -180px 0 700px -20px ${color}`
            })
        },
        {
            color:theme('colors')
        },
      )
    })
  ],
}

Give above is the piece of code of my config.js file from tailwind where i tried to implement custom dynamic plugins but after that also non of the classes are shown in the html can someone please help me i have already set the input and output file and run it so that is not the issue so please help me

i tried rewriting the code and i tried different plugins but non of them show up so yea

I have two servers(machines) on which a Java application is hosted in each one of them.

In this Java app,a jsp is calling another jsp as below,

\ below function is inside abc.jsp function sessionMark() {
navigator.sendBeacon(‘logger.jsp’);
setTimeout(sessionMark, 2 * 60 * 1000 );
}“
Both the servers have same configurations of basic ldap authentication.

It was working before. But observing this logger.jsp failing recently.

Also, the other jsp calls on abc.jsp page are all working and they are using ajax like below.

$.ajax({ url: "VO.jsp", type: 'POST', data: {scripts:scripts,on: 'true',tb:'yes',}, success: function(data) { //do something } });

when accessing the app in one of these servers, logger.jsp is giving 403 Unknown error, whereas the other app(clone) works fine in the other server.

How does navigator.sendBeacon() behave differently even after both the servers are just clones ?

Up to 5 selected items are displayed by their text and if more than 5 items are selected, I want to show the first 5 items followed by “remaining count + ” in a separate span to limit the selected items.

  function initializeSelect2WithCheckbox(selector) {
        $(selector).select2({
            templateResult: formatSelectionWithCheckbox,
            templateSelection: function(item) {
                return $('<span>').text(item.text);
            },
            closeOnSelect: false,
            allowClear: true
        }).on('select2:select', function(e) {
            var selectedValue = e.params.data.id;

            if (selectedValue === 'all') {
                var allOptions = $(selector).find('option').not('[value="all"]');
                var selectAllChecked = $(e.target).find('option[value="all"]').prop('selected');

                allOptions.prop('selected', selectAllChecked);
                $(selector).trigger('change');
            } else {
                updateSelectAll(selector);
            }
            $(selector).select2('close');
        }).on('select2:unselect', function(e) {
            if (e.params.data.id === 'all') {
                $(selector).val(null).trigger('change'); // Clear all on unselect
            } else {
                updateSelectAll(selector);
            }
        });
    }

Refer to this image
display i want to achieve

I ran into an issue today with a component that wraps a JS library that can affect the Blazor component’s bound value. Updating the value of the Mask parameter would result in the JavaScript code running multiple times.

[Parameter]
public string Value { get; set; }

[Parameter]
public EventCallback<string> ValueChanged { get; set; }

[Parameter]
public Mask Mask { get; set; }

private Mask _mask;
private bool _maskNeedsUpdate;

protected override void OnParametersSet()
{
    // ... Handle other parameters.

    if (_mask != Mask)
    {
        _mask = Mask;
        _maskNeedsUpdate = true;
    }
}

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    // ... initialize JS mask on first render.

    if (_maskNeedsUpdate)
    {
        var valueAfterUpdate = await Js.InvokeAsync<string>("updateMask", _mask);
        if (valueAfterUpdate != Value)
        {
            await ValueChanged.InvokeAsync(valueAfterUpdate);
        }

        _maskNeedsUpdate = false; // <-- This causes problems.
    }
}

It’s almost as if that ValueChanged.InvokeAsync() call triggers a re-render in parallel, which causes a second JS interop call to be queued since the flag is still true. But I doubt it since it’s literally set to false on the very next line (meanwhile, all EventCallback.InvokeAsync() seems to do is essentially call StateHasChanged() in the parent component and call its callback).

Changing the code to set the flag before calling JS seems to have fixed the issue.

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    // ... initialize JS mask on first render.

    if (_maskNeedsUpdate)
    {
        _maskNeedsUpdate = false; // <-- Toggle flag before awaiting JS.

        var valueAfterUpdate = await Js.InvokeAsync<string>("updateMask", _mask);
        if (valueAfterUpdate != Value)
        {
            await ValueChanged.InvokeAsync(valueAfterUpdate);
        }
    }
}

This fix kind of confuses me, though, because according to the docs:

Blazor uses a synchronization context (SynchronizationContext) to enforce a single logical thread of execution. A component’s lifecycle methods and event callbacks raised by Blazor are executed on the synchronization context.

Blazor’s server-side synchronization context attempts to emulate a single-threaded environment so that it closely matches the WebAssembly model in the browser, which is single threaded. This emulation is scoped only to an individual circuit, meaning two different circuits can run in parallel. At any given point in time within a circuit, work is performed on exactly one thread, which yields the impression of a single logical thread. No two operations execute concurrently within the same circuit.

My understanding is that the single-thread emulation shouldn’t allow my Blazor components to “re-render in parallel” while my JavaScript is still running (and, looking at the Blazor source code, OnAfterRenderAsync() is eventually awaited). But, then why does moving the flag up before the JS interop call fix my issue? Even if the parent re-renders, wouldn’t the single-thread emulation prevent it from re-rendering in parallel?

I’d like to know if I’m supposed to watch out for race conditions when designing components that make calls to the JavaScript interop.

The above example was a simple enough fix, but I have other components that wrap JS libraries that have much more complex behavior where both the C# and JS sides can alter bound parameters, and “just moving the flag higher” isn’t going to work for some of them if the component can re-render in parallel.

I have a function in Typescript that checks if the user’s email already exist, and returns it as a boolean value. The catch is that whenever the request gets sent via a REST Client ( Postman/ Thunder Client) Or it is executed via unit test, the function runs perfectly. However, as soon as the client sends the exact same request, I get the following error:

MongoUnexpectedServerResponseError: BSON element "cursor" is missing
    at CursorResponse.get (C:RepositoriesUAI-expressnode_modulesmongodbsrccmapwire_protocolresponses.ts:88:13)
    at CursorResponse.get cursor [as cursor] (C:RepositoriesUAI-expressnode_modulesmongodbsrccmapwire_protocolresponses.ts:216:17)
    ... 6 lines matching cause stack trace ...
    at async FindCursor.next (C:RepositoriesUAI-expressnode_modulesmongodbsrccursorabstract_cursor.ts:398:7)
    at async Collection.findOne (C:RepositoriesUAI-expressnode_modulesmongodbsrccollection.ts:506:17) {
  [Symbol(errorLabels)]: Set(0) {},
  [cause]: BSONError: BSON element "cursor" is missing
      at CursorResponse.get (C:RepositoriesUAI-expressnode_modulesmongodbsrccmapwire_protocolon_demanddocument.ts:275:15)
      at CursorResponse.get (C:RepositoriesUAI-expressnode_modulesmongodbsrccmapwire_protocolresponses.ts:86:20)
      at CursorResponse.get cursor [as cursor] (C:RepositoriesUAI-expressnode_modulesmongodbsrccmapwire_protocolresponses.ts:216:17)
      at CursorResponse.get batch [as batch] (C:RepositoriesUAI-expressnode_modulesmongodbsrccmapwire_protocolresponses.ts:254:25)
      at CursorResponse.get batchSize [as batchSize] (C:RepositoriesUAI-expressnode_modulesmongodbsrccmapwire_protocolresponses.ts:262:17)
      at FindCursor._initialize (C:RepositoriesUAI-expressnode_modulesmongodbsrccursorfind_cursor.ts:75:33)
      at processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async FindCursor.cursorInit (C:RepositoriesUAI-expressnode_modulesmongodbsrccursorabstract_cursor.ts:684:21)
      at async FindCursor.fetchBatch (C:RepositoriesUAI-expressnode_modulesmongodbsrccursorabstract_cursor.ts:720:7)
      at async FindCursor.next (C:RepositoriesUAI-expressnode_modulesmongodbsrccursorabstract_cursor.ts:398:7)

Here’s the function that causes the error:

function createUser(req: Request, res: Response) {
  const body = req.body;
const db = await connectToDb();
    const userProvider = new UserProvider(db);
    const userExists = await userProvider.userExists(body.email);
    if (userExists) {
      return res.status(400).send("User already exists");
    }
    const result = await userProvider.createUser(body);
    return res.json(result);
}

Here’s the code that checks if users exists:

class UserProvider {

    constructor(db: Db) {
        super(db.collection('dashboard_users'));

    }

    async userExists(email: string): Promise<boolean> {
        const user = await this.collection.findOne({ email }, {});
        return !!user;
    }

}

Here’s the client code, using Tanstack React Mutation and axios

type UserMutationFn = (data: any) => Promise<any>;

export const createAdminUser: UserMutationFn = async (data: any) => secureAPIPOST(`/users/admin`, data);
export const createUser: UserMutationFn = async (data: any) => secureAPIPOST(`/users`, data);
export const deleteUser: UserMutationFn = async (data: any) => secureAPIDELETE(`/users`, null, data);
export const updateUser: UserMutationFn = async (data: any) => secureAPIPOST(`/users`, data);


export default function useUserMutation(mutationFn: UserMutationFn) {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn,
    onError: (error) => {
      console.error(error);
    },
    onSuccess: () => {
      // invalidate dashboard users query
      queryClient.invalidateQueries({
        queryKey: ['dashboard-users']
      });
    }
  });
}

And lastly, here’s the abstract implemetnation of PaginatedProvider

import { Collection } from "mongodb";

export abstract class PaginatedProvider<T> {

    limit = 10;
    collection: Collection;


    constructor(collection: Collection) {
        this.collection = collection;
    }
}

A few notes to keep in mind:

• This is not the only provider, every other provider that I have created works perfeclty
• This function also runs with no issues when called from a client
• No CORS-related issues have been spotted
• I could not find any documentation for this specific error

Any help is greatly appreciated

In a page.tsx, I have something like this:

'use client';

import { AddForm } from '@/components/AddForm';
import { useSearchParams } from 'next/navigation';

export default function Page() {
  const searchParams = useSearchParams();

  console.log(searchParams);

  return <AddForm />;
}

When the app is built, and I load that page, there will be a request sent to: https://localhost:3000/add?_rsc=3b6ew, which will result in 500, reloading the page.

Why does this happen, and how to prevent it? Maybe in Next.js, pages aren’t supposed to be client side?

Note: I’m using useSearchParams() in that page because I need the query strings for API requests.

I’ve built packages using SvelteKit (docs) that I can use in other projects. The build folder typically consists of an index.js that exports a ComponentName.svelte. Then, in another project, I would import it by doing import { ComponentName } from "component-name".

Now I have a use case where I would prefer to import a package using eg. <script src="/path/to/component-name/script.js" />.

Is it possible to use SvelteKit’s packaging whereby it builds a single script.js file, instead of a build folder with multiple .js and .svelte files?

I’m making a mini project for a coding class, featuring a list of poems. I set the poems in divs and the divs in a section (per a suggestion), and I want to toggle the poems’ text and images so that they show or hide, and I wanted to change the button text to “Close” when shown from “Read” when hidden.

While I got some help, mainly with setting up the .forEach() method, I still can’t find the solution. I’ve tried everything. Any other advice has been too confusing and too hard to follow.

Any help is appreciated. Thank you.

I tried using the different methods of retrieving elements from the DOM (.querySelector, .querySelectorAll, .getElementById, etc.). I tried changing the class and id names. I tried making it so I didn’t shadow my variables. Literally everything.

let selection = document.querySelector(".poem")
const buttons = document.querySelectorAll(".btn");

// show poem or hide poem
// change text to "Read" or "Close"; if the poem is hidden, say "Read"; if it is showing, say "Close"

const readPoem = (poem) => {
  if (selection.style.display == "none") {
    selection.style.display = "block";
  } else {
    selection.style.display = "none";
  }
};

console.log()

buttons.forEach((btn) => {
  btn.addEventListener("click", (selection) => {
    if (selection.style.display == "none") {
      selection.style.display = "block";
      btn.textContent = "Close";
    } else {
      selection.style.display = "none";
      btn.textContent = "Read";
    }
  });
});

I’m making a mini project for a coding class, featuring a list of poems. I set the poems in divs and the divs in a section (per a suggestion), and I want to toggle the poems’ text and images so that they show or hide, and I wanted to change the button text to “Close” when shown from “Read” when hidden.

While I got some help, mainly with setting up the .forEach() method, I still can’t find the solution. I’ve tried everything. Any other advice has been too confusing and too hard to follow.

Any help is appreciated. Thank you.

I tried using the different methods of retrieving elements from the DOM (.querySelector, .querySelectorAll, .getElementById, etc.). I tried changing the class and id names. I tried making it so I didn’t shadow my variables. Literally everything.

let selection = document.querySelector(".poem")
const buttons = document.querySelectorAll(".btn");

// show poem or hide poem
// change text to "Read" or "Close"; if the poem is hidden, say "Read"; if it is showing, say "Close"

const readPoem = (poem) => {
  if (selection.style.display == "none") {
    selection.style.display = "block";
  } else {
    selection.style.display = "none";
  }
};

console.log()

buttons.forEach((btn) => {
  btn.addEventListener("click", (selection) => {
    if (selection.style.display == "none") {
      selection.style.display = "block";
      btn.textContent = "Close";
    } else {
      selection.style.display = "none";
      btn.textContent = "Read";
    }
  });
});

I have a webpage with an image. When I click on the image, it opens modal. When I click on the close button, it closes the modal. However, when I click outside the modal, it doesn’t close the modal. I added event listener to detect clicks but doesn’t work. I tried similar related questions on stackoverflow like adding overlay over the module, it still doesn’t work. I am lost. Would appreciate new ideas.

document.addEventListener("DOMContentLoaded", function() {
    var overlay = document.getElementById("overlay");
    var modal = document.getElementById("imageModal");
    var modalImg = document.getElementById("modalImage");
    var captionText = document.getElementById("caption");
    var closeButton = document.getElementsByClassName("close")[0];

    // Open modal when image is clicked
    document.querySelectorAll(".modal-trigger").forEach(function(img) {
        img.onclick = function() {
            overlay.style.display = "block";
            modal.style.display = "block";
            modalImg.src = this.src;
            captionText.innerHTML = this.alt;
        }
    });

    // Close modal when close button is clicked
    closeButton.onclick = function() {
        overlay.style.display = "none";
        modal.style.display = "none";
    };

    // Close modal when clicking outside of modal content
    window.onclick = function(e) {
        // Close if clicking directly on the overlay
        if (e.target == overlay) {
            overlay.style.display = "none";
            modal.style.display = "none";
        }
    };

    // Prevent clicks inside the modal from closing it
    modal.onclick = function(event) {
        event.stopPropagation(); // Prevent clicks inside the modal from closing it
    };
});

/* The Modal (background) */

.overlay {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent background */
        }

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 20px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0.6);
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 60%;
}

/* Caption of Modal Image (Image Text) - Add some padding */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption { 
    animation-name: zoom;
    animation-duration: 0.6s;
}

@keyframes zoom {
    from {transform: scale(0)} 
    to {transform: scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

 .timeline-item img {
                display: block;
        transition: opacity 0.3s ease, transform 0.3s ease;
        cursor: pointer; /* Show a pointer cursor on hover */
    }

    .timeline-item img:hover {
        opacity: 0.7;
        transform: scale(1.05); /* Slightly enlarge the image on hover */
    }

<div class="timeline-item" style=" left: 120px;">ABCDdgfgfhggfhg<img alt="" class="modal-trigger" src="https://compote.slate.com/images/22ce4663-4205-4345-8489-bc914da1f272.jpeg?crop=1560%2C1040%2Cx0%2Cy0&width=1280" style=" position: relative; top: 70px; width: 215px; left: -30px;" />



</div>

<div id="overlay" class="overlay">
        <div id="imageModal" class="modal">
            <span class="close">&times;</span>
            <img class="modal-content" id="modalImage" />
            <div id="caption"></div>
        </div>
    </div>

I have some strings on an object that I export in the environment file, so I can use those values globally.

this is my environment.ts

export interface RegionNames {
  br: any;
  bo: any;
}

export const environment = {
  production: false,
  region_id: "br",
};

export const region_phrases: RegionNames = {
  br: {
    "string1"   : "A",
    "string2"   : "B",
    "string3"   : "C",
    "string4"   : "D",
    "string5"   : "E",
  },
  bo: {
    "string1"   : "AA",
    "string2"   : "BB",
    "string3"   : "CC",
    "string4"   : "DD",
    "string5"   : "EE",
  }
}

This is in the component script, where I can successfully gather the strings from the object:

console.log(region_phrases[environment.region_id as keyof RegionNames].string1);

But when I try to run the exact same code on the HTML template, it returns an error:

<span class="visually-hidden">{{ region_phrases[environment.region_id as keyof RegionNames].string1 }}</span>

error TS7053: Element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index type ‘RegionNames’.
No index signature with a parameter of type ‘string’ was found on type ‘RegionNames’.

{{ region_phrases[environment.region_id as keyof RegionNames].string1 }}

I don’t want to create variables for the object in every component in my project just to access it in the HTML, is there a way to fix this more easily?

I admit I’m not a JavaScript promises expert, but this is bizarre. I’m creating an API service that’s basically an Axios promise factory and importing it into Vue2 components.

The simplified example is here

function axiosService() {
    const execution = // compose axios request method

    const axiosPromise = execution(data)
        .finally(() => {
            isFetching = false;
        });

    //other inconsequential stuff
    return {
        promise: axiosPromise,
        // other stuff
    };
}

export default axiosService;

Then the calling vue component imports it and calls

            this.axiosPromise = axiosService()
                .catch((e) => {
                    console.log(e);
                });

And it works fine, but i just spend a whole day debugging because the original definition of the axiosService was

function axiosService() {
    const execution = // compose axios request method

    const axiosPromise = execution(data);
        
    axiosPromise.finally(() => {
            isFetching = false;
        });

    //other inconsequential stuff
    return {
        promise: axiosPromise,
        // other stuff
    };
}

export default axiosService;

attaching the same finally to the axiosPromise const in a separate step. When done this way, either the error propogates or else axios generates a new error, but the app crashes with a runtime error

Am I missing a nuance of promises that could cause this?

thank you

I’m trying to assign an iframe to innerHTML of a div element, but I can’t figure out how to get it to render. Here’s some relevant snippets

function showText(debugElement, message) {
    if(debugElement != null) {
        debugElement.innerHTML = message;
    }
}

function escapeHtml(html){
    var text = document.createTextNode(html);
    var p = document.createElement('p');
    p.appendChild(text);
    return p.innerHTML;
}

function getDebugText(request) {
    var responseText = "";
    try {
        var responseJSON = JSON.parse(request.response);
        for (const [key, val] of Object.entries(responseJSON)) {
            responseText += `  ${key}: ${val}n`;
        }
    } catch(error) {
        if(request.responseText.startsWith('<!doctype html>')) {
            responseText = `<div>${request.statusText}</div><iframe scrolling="yes" style="width: 100%;" srcdoc="${escapeHtml(request.responseText)}"></iframe>`
        } else {
            responseText = escapeHtml(`${request.statusText}n${request.responseText}`);
        }
    }

    console.log(responseText)
    return responseText;
}

suffice it to say, somewhere there’s something along the lines of

showText(document.getElementByID('details'), getDebugText(response))

I can see a frame rendered, but it doesn’t show any content. I’ve seen other answers that do something along the lines of document.appendChild(iframe), but I can’t figure out how to do this with a named div.