Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
When running the cypress tests the screen appears to be shaky Causing the tests to fail Since the elements are not identifiable. This happens frequently and but not all the time.
The page does not have a lot of data and actually no data because its a customer registration page. I have tried to add timeout but still that not working well.
So I have a function called handleDownload in a next js 14 app router component, which handles the downloads of reports. I send a parameter to the API and get a link to a google apis bucket where the pdf lies. How can I consolidate all these links into pdf’s and zip it so I can serve the user with one downloadable item.
const handleDownload = async () => {
setIsLoading(true);
const newIds = selectedSampleIds.filter(id => !downloadableLinks.some(link => link.id === id));
const newLinks = [];
const notAvailable = [];
for (const id of newIds) {
try {
const data = await fetchPdf(id);
newLinks.push({ id, data });
} catch (error) {
notAvailable.push(id);
}
}
setDownloadableLinks(prevLinks => [...prevLinks, ...newLinks]);
// Attempt to download all available PDFs
const allLinks = [...downloadableLinks, ...newLinks];
selectedSampleIds.forEach((sampleId) => {
const downloadableLink = allLinks.find((link) => link.id === sampleId);
if (downloadableLink) {
window.open(downloadableLink.data.url, '_blank');
}
});
setIsLoading(false);
return { newLinks, notAvailable };
};
I am currently just opening these links so the user can directly download it from there. How can I consolidate these into a zip file. I have tried jszip and also using a server component but I have had no luck.
I started a new react native project with expos script: npx create-expo-app@latest
I installed react-native-maps with npm: npm install react-native-maps
I checked that my google maps api has android sdk enabled.
I specified my API in two ways as mentioned in setup and troubleshooting sections of this page
First in android/app/src/main/AndroidManifest.xml:
<meta-data
android:name="com.google.android.geo.API_KEY"
android:value="Your Google maps API Key Here"/>
Second in google_maps_api.xml in android/app/src/main/res/values:
<resources>
<string name="google_maps_key" templateMergeStrategy="preserve" translatable="false">(api key here)</string>
</resources>
I also installed google play sevices in my android emulator.
I still get a beige/gray screen with MapView:
export default function HomeScreen() {
return (
<View style={{ width: 200, height: 200 }}>
<MapView
style={{ width: "100%", height: "100%" }}
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
/>
</View>
);
}
What might be the problem here?
not able to add bot in second teams channel not getting welcome in second, third channel but getting in first channel.
able to get welcome in second or third channel. but for now not getting.
please guide me how to solve this error. basically when I added bot in first channel it is created but when I created in second channel and try to added in second but not getting welcome but able to get welcome messed in case of first channel creation. I try with permutation but nothing works! not able to add bot in second teams channel not getting welcome in second, third channel but getting in first channel.
I am getting an error I theoretically understand, but practically cannot solve.
import React, {CSSProperties, useEffect, useRef, useState} from 'react';
import {SelectOption, useSelect} from '@mui/base';
import {useTranslation} from 'react-i18next';
export interface DropdownInputProps {
loading?: boolean,
label: string,
options: DropdownOption[];
placeholder?: string,
required?: boolean,
setSelection: (selection: DropdownOption[] | null) => void,
width?: number,
readOnly?: boolean,
}
export const DropdownInput = ({
loading,
label,
options,
placeholder,
required,
setSelection,
defaultValue,
width,
readOnly,
}: DropdownInputProps) => {
const menuRef = useRef(null)
const [value, setValue] = useState<number | null>(null)
const [listening, setListening] = useState(false);
const [listBoxVisible, setListBoxVisible] = useState(false);
const listboxRef = React.useRef<HTMLUListElement>(null);
const {
getButtonProps,
getListboxProps,
getOptionProps,
getOptionState,
} = useSelect({
listboxRef,
onOpenChange: () => setListBoxVisible(!listBoxVisible),
onChange: (event, newValue) => _onChange(newValue),
open: listBoxVisible,
options,
value,
defaultValue,
});
const {t} = useTranslation();
useEffect(() => {
if (defaultValue !== undefined) setValue(defaultValue)
}, [defaultValue]);
const _onChange = (value: number | null) => {
setValue(value)
setSelection(options.filter(option => option.value === value) as DropdownOption[] | null)
}
const _renderStringInInput = () => {
return ...
}
const _getSelectedValue = (value: number | null, options: SelectOption<any>[]) => {
const selectedOption = options.find(option => option.value === value);
if (selectedOption !== undefined) return t(`${selectedOption.label?.toString()}`)
return null;
}
const _renderListBox = (theme: ThemeProps) => {...}
const _renderInput = (theme: ThemeProps) => {
const ariaForId = `:dropdown-input-${guidGenerator()}:`
const {colors} = theme
const commonProps: CommonProps = {
readOnly: readOnly,
style: {
color: _getSelectedValue(value, options) ? 'inherit' : colors.lightGreyDarker,
borderColor: formError ? colors.warningMain : 'inherit'
},
placeholder: placeholder ? t(placeholder) : '--',
className: clsx('input-field', readOnly && 'input-disabled', inputClasses),
value: defaultValue ? undefined : _renderStringInInput(),
defaultValue: value ? undefined : _renderStringInInput(),
type: "button",
id: ariaForId
}
if (formError || dataError) {
commonProps["aria-invalid"] = "true"
commonProps["aria-errormessage"] = t(`${ariaErrorMessage}`)
}
return <>
<Text
style={setLabelColor(theme, formError || dataError, readOnly, labelColor)}
required={required}
ariaFor={ariaForId}
variant={'label'}>
{label}
</Text>
<input
{...getButtonProps()}
{...commonProps}
id={ariaForId}/>
</>
}
return <ThemeContext.Consumer>
{(theme) =>
<div
className={clsx('input-container', containerClasses)}
style={{width: width, ...style}}>
{_renderInput(theme)} />
}
</ThemeContext.Consumer>
}
And with this I get the warning
Warning: Context.Consumer contains an input of type button with both value and defaultValue props. Input elements must be either controlled or uncontrolled (specify either the value prop, or the defaultValue prop, but not both). Decide between using a controlled or uncontrolled input element and remove one of these props.
Which I do not understand. value is not coming from the parent, only defautlValue. Thus, the local state is managed by DropdownInput /> itself. Here
value: defaultValue ? undefined : _renderStringInInput(),
defaultValue: value ? undefined : _renderStringInInput(),
I either assign value or defaultValue, depending if there is something in there. So why am I getting this warning?
I want to create this using d3.js but I haven’t found any samples or reference like it. I already tried it with d3-force and Voronoi diagrams. But it was not successful, has anyone done this before in a different way?
I want to create network graph with nodes and those node must group as different layers
I am working on a project where I generate an EC private key using Java and then import it in the browser using JavaScript. The key imports successfully in Chrome, but it fails in Safari.Here’s my Java code to generate the private key:
`
package com.example.demo;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.bouncycastle.jce.provider.BouncyCastleProvider;
import java.io.StringWriter;
import java.security.*;
import java.security.spec.ECGenParameterSpec;
import java.util.Base64;
import org.bouncycastle.openssl.jcajce.JcaPEMKeyConverter;
import org.bouncycastle.openssl.jcajce.JcaPEMWriter;
@SpringBootApplication
public class TestApplication {
private static final String CURVE = “secp256r1”;
public static void main(String[] args) {
try {
// Add BouncyCastle Provider
Security.addProvider(new BouncyCastleProvider());
// Generate EC key pair
ECGenParameterSpec parameterSpec = new ECGenParameterSpec(CURVE);
KeyPairGenerator keyPairGenerator = KeyPairGenerator.getInstance("EC");
keyPairGenerator.initialize(parameterSpec, new SecureRandom());
KeyPair keyPair = keyPairGenerator.generateKeyPair();
// Extract public and private keys
PrivateKey privateKey = keyPair.getPrivate();
PublicKey publicKey = keyPair.getPublic();
// Encode keys to Base64
String base64PrivateKey = Base64.getEncoder().encodeToString(privateKey.getEncoded());
String base64PublicKey = Base64.getEncoder().encodeToString(publicKey.getEncoded());
// Print keys
System.out.println("Private Key (Base64): " + base64PrivateKey);
System.out.println("Public Key (Base64): " + base64PublicKey);
} catch (Exception e) {
e.printStackTrace();
}
}
}`
And here is the JavaScript code that is used to import the key in the browser:
`
async function _loadEccPrivateKey(key) {
try {
const rawKey = base64ToArrayBuffer(key);
console.log(rawKey);
const key = await window.crypto.subtle.importKey(
"pkcs8", // Format for private keys
rawKey,
{
name: "ECDH",
namedCurve: "P-256",
},
true,
["deriveBits", "deriveKey"] // Key usages
);
console.log('Imported Private Key:', key);
return key;
} catch (e) {
console.error('Error importing private key:', e);
throw e;
}
}`
The code works perfectly in Chrome but throws an error in Safari. The error message is
“DATA PROVIDED TO AN OPERATION DOES NOT MEET REQUIREMENTS”
I want to make it work in safari
How can I click on an x,y coordinate in a web page with js and snippet
For example, I want to click on the coordinates (100, 150) and then after 3 seconds click on (200, 100).
i tried but it can’t work. If anyone knows it, please help me
I am working on a Create-React-App project (writing in normal JS (.jsx), not TypeScript for what it’s worth).
I wanted to modify some of the build files (swap out some references to local files with live ones) and found the npm package replace-in-file.
I created a .js file for this package and set up the JS for it. The only issue is that when I try to run functions from that file I get the error:
import {replaceInFile} from 'replace-in-file';
SyntaxError: Cannot use import statement outside a module
Not a problem, I just added:
"type": "module",
to my package.json file.
This worked – I no longer get the error above and my script on this file runs.
However, now Create-React-App and Storybook fail to compile and I get the error:
BREAKING CHANGE: The request ‘./my-app’ failed to resolve only because
it was resolved as fully specified (probably because the origin is
strict EcmaScript Module, e. g. a module with javascript mimetype, a
‘.mjs’ file, or a ‘.js’ file where the package.json contains
‘“type”: “module”‘).
I tried to replace import() with
const replaceInFile = require("replace-in-file");
But that doesn’t work of course.
I tried import("replace-in-file"); but that doesn’t seem to work with node (eg process.argv fails).
I also tried setting "module": "commonjs" but that still stopped Create-React-App from working.
Would anyone know how I could get both this local file/npm package and Create-React-App working within the 1 project?
no-var. the no-var rule is a native rule of ESLint. However, I am only using the plugin:@typescript-eslint/recommended preset rule set and haven’t used the native ESLint rule set. Why am I getting no-var errors?vue3-essential and @typescript-eslint/recommended to scan the code in the <script> section marked with lang='ts' in Vue files. I also want to use vue3-essential and eslint:recommended to scan the code in the <script> section not marked with lang='ts', which is JavaScript code, in Vue files. How should I configure the .eslintrc.js file to achieve this goal?@typescript-eslint/recommended preset ruleset, it doesn’t detect the error? For example, the code var pattern1 = /x00/; should violate the no-control-regex rule, but ESLint does not detect it, even though I have used the @typescript-eslint/recommended preset ruleset.I have written a code with jQuery that generates six squares (divs). Each one of them has random size and positioning. I apply to each one a different css class in order to perform a slightly different animation. The program runs the way I want it to, but there’s a lot of repetitiveness to it. I can’t help to think it can be better optimized. I appreciate all the help and tips you can give me
//Generate a div with random width height
var divsizeOne = ((Math.random()*100) + 50).toFixed();
$newdivOne = $('<div/>').css({
'width':divsizeOne+'px',
'height':divsizeOne+'px',
'background-color': '#cfdfe2',
'border-radius':'5px'
});
var divsizeTwo = ((Math.random()*100) + 50).toFixed();
$newdivTwo = $('<div/>').css({
'width':divsizeTwo+'px',
'height':divsizeTwo+'px',
'background-color': '#cfdfe2',
'border-radius':'5px'
});
var divsizeThree = ((Math.random()*100) + 50).toFixed();
$newdivThree = $('<div/>').css({
'width':divsizeThree+'px',
'height':divsizeThree+'px',
'background-color': '#cfdfe2',
'border-radius':'5px'
});
var divsizeFour = ((Math.random()*100) + 50).toFixed();
$newdivFour = $('<div/>').css({
'width':divsizeFour+'px',
'height':divsizeFour+'px',
'background-color': '#cfdfe2',
'border-radius':'5px'
});
var divsizeFive = ((Math.random()*100) + 50).toFixed();
$newdivFive = $('<div/>').css({
'width':divsizeFive+'px',
'height':divsizeFive+'px',
'background-color': '#cfdfe2',
'border-radius':'5px'
});
var divsizeSix = ((Math.random()*100) + 50).toFixed();
$newdivSix = $('<div/>').css({
'width':divsizeSix+'px',
'height':divsizeSix+'px',
'background-color': '#cfdfe2',
'border-radius':'5px'
});
//Genarate random position for divs
var posxOne = (Math.random() * ($(document).width() - divsizeOne)).toFixed();
var posxTwo = (Math.random() * ($(document).width() - divsizeTwo)).toFixed();
var posxThree = (Math.random() * ($(document).width() - divsizeThree)).toFixed();
var posxFour = (Math.random() * ($(document).width() - divsizeFour)).toFixed();
var posxFive = (Math.random() * ($(document).width() - divsizeFive)).toFixed();
var posxSix = (Math.random() * ($(document).width() - divsizeSix)).toFixed();
$newdivOne.addClass( "one" );
$newdivTwo.addClass( "two" );
$newdivThree.addClass( "three" );
$newdivFour.addClass( "four" );
$newdivFive.addClass( "five" );
$newdivSix.addClass( "six" );
$newdivOne.css({
'position':'absolute',
'left':posxOne+'px'
}).appendTo( 'body' ).fadeIn(100).delay(9600).fadeOut(200, function(){
$(this).remove();
});
$newdivTwo.css({
'position':'absolute',
'left':posxTwo+'px'
}).appendTo( 'body' ).fadeIn(100).delay(9600).fadeOut(200, function(){
$(this).remove();
});
$newdivThree.css({
'position':'absolute',
'left':posxThree+'px'
}).appendTo( 'body' ).fadeIn(100).delay(8000).fadeOut(200, function(){
$(this).remove();
makeDiv();
});
$newdivFour.css({
'position':'absolute',
'left':posxFour+'px'
}).appendTo( 'body' ).fadeIn(100).delay(16000).fadeOut(200, function(){
$(this).remove();
});
$newdivFive.css({
'position':'absolute',
'left':posxFive+'px'
}).appendTo( 'body' ).fadeIn(100).delay(10000).fadeOut(200, function(){
$(this).remove();
});
$newdivSix.css({
'position':'absolute',
'left':posxSix+'px'
}).appendTo( 'body' ).fadeIn(100).delay(12000).fadeOut(200, function(){
$(this).remove();
});
})();
https://codepen.io/Jim-Koum/pen/poXWXVw
I have uploaded my code at CodePen. You can go check it out so you can understand better what I’m trying to achieve.
If i draw the player on my canvas just using player.draw(); everything works fine. But now im trying to push it online so that i may be able to play with friends. This is the instance of my player class , not really sure what im not doing correctly, can yall tell me what im doing wrong exactly, i want a new instance of the player to draw in
My player instance with my socket.on function
const players = {};
socket.on("updatePlayers", (backendPlayers) => {
for (const id in backendPlayers) {
const backendPlayer = backendPlayers[id];
if (!players[id]) {
players[id] = new Player(backendPlayer.x, backendPlayer.y);
}
}
console.log(players);
});
const player = new Player({
color: "red",
imageSrc: "/playerOne/idle/idleAnimation.png",
collisionBlocks: CollisionBlocks,
frameRate: 5,
frameBuffer: 6,
animations: {
idleRight: {
frameRate: 5,
frameBuffer: 6,
loop: true,
imageSrc: "/playerOne/idle/idleAnimation.png",
},
idleLeft: {
frameRate: 5,
frameBuffer: 5,
loop: true,
imageSrc: "/playerOne/idle/idleAnimationLeft.png",
},
runRight: {
frameRate: 6,
frameBuffer: 5,
loop: true,
imageSrc: "/playerOne/runAnimations/runRight.png",
},
runLeft: {
frameRate: 6,
frameBuffer: 4,
loop: true,
imageSrc: "/playerOne/runAnimations/runLeft.png",
},
jumpLeft: {
frameRate: 3,
frameBuffer: 2,
loop: true,
imageSrc: "/playerOne/jump/jumpLeft.png",
},
jumpRight: {
frameRate: 3,
frameBuffer: 2,
loop: true,
imageSrc: "/playerOne/jump/jumpRight.png",
},
jumpFallRight: {
frameRate: 1,
frameBuffer: 1,
loop: true,
imageSrc: "/playerOne/jump/jumpFallRight.png",
},
jumpFallLeft: {
frameRate: 1,
frameBuffer: 1,
loop: true,
imageSrc: "/playerOne/jump/jumpFallLeft.png",
},
attackRight: {
frameRate: 3,
frameBuffer: 5,
loop: true,
imageSrc: "/playerOne/attack/attack1Right.png",
},
attackLeft: {
frameRate: 3,
frameBuffer: 5,
loop: true,
imageSrc: "/playerOne/attack/attack1Left.png", // Ensure this path is correct and the image exists
},
jumpAttackRight: {
frameRate: 3,
frameBuffer: 3,
loop: true,
imageSrc: "/playerOne/jumpAttack/jumpAttackRight.png", // Ensure this path is correct and the image exists
},
jumpAttackLeft: {
frameRate: 3,
frameBuffer: 3,
loop: true,
imageSrc: "/playerOne/jumpAttack/jumpAttackLeft.png", // Ensure this path is correct and the image exists
},
hurtRight: {
frameRate: 3,
frameBuffer: 3,
loop: false,
imageSrc: "/playerOne/hurtAnimation.png", // Ensure this path is correct and the image exists
},
hurtLeft: {
frameRate: 5,
frameBuffer: 1,
loop: false,
imageSrc: "/playerOne/hurtAnimationLeft.png", // Ensure this path is correct and the image exists
},
},
}); and this is my gameloop
function gameloop(timestamp) {
const elapsedTime = timestamp - lastTime;
if (elapsedTime > interval) {
lastTime = timestamp - (elapsedTime % interval);
// Clear the canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw background elements
bg.draw();
cloudBig.update();
cloudBig2.update();
palmTree.draw();
palmTree2.draw();
palmTreeSide.draw();
palmTreeSide2.draw();
backgroundLevel1.draw();
water.draw();
waterBigTwo.draw();
waterSmall.draw();
waterSmallTwo.draw();
// Draw the p1Symbol
playerUpdate();
p1Symbol.draw();
p1Symbolp.draw();
p2Symbol.draw();
p2Symbolp.draw();
enemy.enemyMovement();
player.movement();
// Update hurtboxes
player.updateHurtbox();
enemy.updateHurtbox();
// floatingKeyEffect.draw();
floatingKey.draw();
doorOpen.draw();
// Draw game objects
player.update();
for (const id in players) {
const player = players[id];
player.draw();
}
enemy.update();
enemy.draw();
// CollisionBlocks.forEach(collisionBlock => {
// collisionBlock.draw();
// });
// Check collisions
attackCollision();
enemyAttackCollision();
}
// Request the next frame
window.requestAnimationFrame(gameloop);
}
// Start the resource loading process
resourceLoader.loadResources(() => {
// Start the game loop once all resources are loaded
window.requestAnimationFrame(gameloop);
});I have a task to send a audio stream chunks to node server and i am able to send them using socket and able to receive them also
Every thing work fine for first chunks but after that it throw error
Uncaught (in promise) DOMException: Failed to execute ‘decodeAudioData’ on ‘BaseAudioContext’: Unable to decode audio data
So to test it i tried to send my mediarecorded chunks to my audio context directly and there also first chunks work fine but after that it gave same error
I read somewhere on stackoverflow that decodeAuidoDaa work for only full audio like mp3 or recorded audio but i am not able to find any solution how to use these chunks without throwing the uppper error
Here is some snapshot of code which i tried to test on frontend
from here i send the chunks
mediaRecorder = new MediaRecorder(mediaStream, { mimeType: 'audio/webm' });
mediaRecorder.ondataavailable = (event) => {
if (event.data.size > 0) {
console.log('Sending...', event);
chunking.push(event.data)
if (chunking.length > 10) {
let blob = new Blob(chunking, { type: 'audio/webm' });
chunking = []
playAudio(blob)
}
}
};
mediaRecorder.start(100);
function that receive chunks and play audio
async function playAudio(blob) {
const arrayBuffer = await blobToArrayBuffer(blob);
if (!audioContext) {
console.log('Creating new audio context');
audioContext = new (window.AudioContext || window.webkitAudioContext)();
}
try {
const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
console.log('Decoded audioBuffer:', audioBuffer);
const source = audioContext.createBufferSource();
source.buffer = audioBuffer;
source.connect(audioContext.destination);
source.start(0);
} catch (error) {
console.error('Failed to decode audio data', error);
//console.log('ArrayBuffer content:', new Uint8Array(arrayBuffer));
}
}
function blobToArrayBuffer(blob) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onloadend = () => {
resolve(reader.result);
};
reader.onerror = reject;
reader.readAsArrayBuffer(blob);
});
}
and as it is not brower to brower call so i guess i cann’t use webrtc but if you have knowledge to use webrtc to decode or play these audio chunks which don’t have duration and other metadata like mp3 or recorded audio please help
I created a attendance system in asp.net,
there are A to Z alphabet, when teacher click on A alphabet then student name start with A alphbet will show, then teacher can click or select student name then selected student name appeared in Attendees box. after that i submit the Attendees list but data is not stored in database table. data seen in console but not in db tables.
type here
aspx front end
<span class="alphabates" onclick="filterNames('A')">A</span>
<span class="alphabates" onclick="filterNames('B')">B</span>
<asp:Button ID="btn_saveAttendance" runat="server" class="btn btn-primary btn-rounded" Text="Save Attendance" OnClientClick="saveAttendance(); return false;" />
js
const studentsSet = new Set();
document.addEventListener('DOMContentLoaded', function () {
fetchStudents();
});
function fetchStudents(letter = '') {
var xhr = new XMLHttpRequest();
var url = letter ? 'StudentAttendacePage.aspx/GetStudentsByLetterJson' : 'StudentAttendacePage.aspx/GetAllStudentsJson';
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
xhr.setRequestHeader('Accept', 'application/json; charset=utf-8');
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
var students = JSON.parse(response.d);
displayStudents(students);
} else {
console.error('Error fetching students:', xhr.statusText);
}
}
};
xhr.send(JSON.stringify({ letter: letter }));
}
function displayStudents(students) {
const namesList = document.querySelector('.attendancename .names');
namesList.innerHTML = '';
students.forEach(name => {
const li = document.createElement('li');
li.textContent = name;
li.onclick = () => addToAttendees(name);
namesList.appendChild(li);
});
}
function addToAttendees(name) {
if (!studentsSet.has(name)) {
studentsSet.add(name);
const attendeesList = document.querySelector('.attendeeslist');
const div = document.createElement('div');
div.textContent = name;
const removeButton = document.createElement('button');
removeButton.textContent = 'Remove';
removeButton.onclick = () => removeFromAttendees(div, name);
div.appendChild(removeButton);
attendeesList.appendChild(div);
}
}
function removeFromAttendees(element, name) {
element.remove();
studentsSet.delete(name);
}
function filterNames(letter) {
fetchStudents(letter);
}
function saveAttendance() {
const studentIds = Array.from(studentsSet); // Ensure IDs are integers
const isLate = false; // Adjust based on your actual logic
const xhr = new XMLHttpRequest();
xhr.open('POST', 'http://localhost:55042/attendance/StudentAttendacePage.aspx/SaveAttendance', true);
xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
xhr.setRequestHeader('Accept', 'application/json; charset=utf-8');
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
const response = JSON.parse(xhr.responseText);
alert(response.d); // Assuming response.d contains the success message
} else {
console.error('Error saving attendance:', xhr.statusText);
alert('Error saving attendance. Check the console for details.');
}
}
};
const data = JSON.stringify({ studentIds, isLate });
console.log('Sending data:', data); // Log data for debugging
xhr.send(data);
}
aspx.cs for db entry
[WebMethod]
public static void SaveAttendance(List<string> attendeeIDs, int sessionID, int? specialSessionID, DateTime date)
{
string connectionString = "Server=IN-03;Database=ats;Integrated Security=True;MultipleActiveResultSets=True";
try
{
using (SqlConnection cn = new SqlConnection(connectionString))
{
cn.Open();
foreach (string studentName in attendeeIDs)
{
int? studentID = GetStudentID(studentName, cn);
if (studentID.HasValue)
{
// Insert attendance record
string insertQuery = "INSERT INTO AttendanceRecord (Date, SessionID, SpecialSessionsID, StudentID, Late) VALUES (@Date, @SessionID, @SpecialSessionsID, @StudentID, @Late)";
using (SqlCommand cmdInsert = new SqlCommand(insertQuery, cn))
{
cmdInsert.Parameters.AddWithValue("@Date", date);
cmdInsert.Parameters.AddWithValue("@SessionID", sessionID);
cmdInsert.Parameters.AddWithValue("@SpecialSessionsID", (object)specialSessionID ?? DBNull.Value);
cmdInsert.Parameters.AddWithValue("@StudentID", studentID.Value);
cmdInsert.Parameters.AddWithValue("@Late", false);
cmdInsert.ExecuteNonQuery();
}
}
}
}
}
catch (Exception ex)
{
// Log the exception or handle it as needed
throw new Exception("An error occurred while saving attendees.", ex);
}
}
i tried the javascript json to send, stored data,
i am expecting solution, like which code or things i missed in the code.
front end
console log
I’m building a React + Vite App with usisng sass right now. For some reason I have trouble with fonts, using @font-face. Here is my _fonts.scss:
@font-face {
font-display: swap;
font-family: 'Monoton';
font-style: normal;
font-weight: 400;
src: url('../assets/fonts/monoton-v19-latin-regular.woff2'),
url('../assets/fonts/monoton-v19-latin-regular.ttf');
}
My _variables.scss simply looks like this:
@import 'fonts';
$font-family-heading: 'Monoton', sans-serif;
$font-size-heading: 24px;
And my App.module.scss:
@import '../../sassStyles/variables';
.heading {
font-family: $font-family-heading;
font-size: 120px;
}
The font gets correctly displayed in chrome, but I get the Error Messages:
Failed to decode downloaded font: http://localhost:5173/assets/fonts/monoton-v19-latin-regular.woff2
localhost/:1 OTS parsing error: invalid sfntVersion: 1008821359
localhost/:1 Failed to decode downloaded font: http://localhost:5173/assets/fonts/monoton-v19-latin-regular.ttf
localhost/:1 OTS parsing error: invalid sfntVersion: 1008821359
In firefox the font doesn’t get displayed at all and I get those errors:
downloadable font: rejected by sanitizer (font-family: "Monoton" style:normal weight:400 stretch:100 src index:1) source: http://localhost:5173/assets/fonts/monoton-v19-latin-regular.ttf
The paths are correct, otherwise it wouldn’t show in Firefox.
I couldn’t find any hint, what might cause this. I found similiar cases, but not quite like mine in the end. Does anyone have an idea?