Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
I have a sidebar made with MUI. One of the sidebar options is feedback. I want to use the Jira Issue Collector on this feedback option, but I have not been able to get the script to work with the ListItem.
The Script and ListItem:
<script type="text/javascript" src="link" ></script>
<ListItem
button
// component="a"
// href="#"
// target="_blank"
>
<Typography className={classes.closedTxt} hidden={open}>
Feedback
</Typography>
</ListItem>
I would like to provide a custom component when editing/displaying data the storybook example is here. However this prop muiTableBodyCellEditTextFieldProps does not allow me to render a custom component nor is it flexible enough to take “any component” I feed into it.
<MaterialReactTable
columns={[
{
header: 'First Name',
accessorKey: 'firstName',
},
{
header: 'State',
accessorKey: 'state',
muiTableBodyCellEditTextFieldProps: () => ({
children: usStates.map((state) => (
<MenuItem key={state} value={state}>
{state}
</MenuItem>
)),
select: true,
}),
},
]}
data={tableData}
enableRowActions
enableEditing
muiTableBodyCellEditTextFieldProps={{ variant: 'outlined' }}
onEditingRowSave={handleSaveRow}
/>
I am trying to add some user authentication to a web application I have. When the user clicks the loadorder button a prompt should show up and request a password. I am getting the employeeNumber from the load order button and comparing it with Sql database.
Public Shared Function SfGetUserPassword(ByVal UserID As String) As System.Data.DataTable
Dim Database As New ACGCommon.Database(System.Configuration.ConfigurationManager.ConnectionStrings("connectionString").ConnectionString)
Database.AddParameter("@UserID", UserID)
Return Database.GetDataSet("data", "gcshopfloor_SfGetEmployeePassword").Tables(0)
End Function
This calls my stored procedure in SQL
Private Function CheckPassword(employeeNumber As String, password As String) As Boolean
Dim dt As DataTable = Users.SfGetUserPassword(tbEmployeeNumber.Text.Trim)
For Each row As DataRow In dt.Rows
If row("UserId").ToString() = employeeNumber AndAlso row("SfUserPassword").ToString() = password Then
' EmployeeNumber and password match, return true
Return True
End If
Next
' EmployeeNumber and/or password do not match, return false
Return False
End Function
'*********************************************************************************
'
'*********************************************************************************
Private Sub btnSubmitPassword_Click(sender As Object, e As EventArgs) Handles btnSubmitPassword.Click
Dim employeeNumber As String = Request.QueryString("tbemployeeNumber")
Dim password As String = Request.QueryString("SfUserPassword")
Dim isPasswordCorrect As Boolean = CheckPassword(employeeNumber, password) ' implement your password check logic here
Response.Write(isPasswordCorrect.ToString().ToLower()) ' send the password check result back to the client-side code
End Sub
This is my password check and submit password button. This will take the SfUserpassword and employee number checking it in the database and return true or false.
My Javascript is what I need help on. When the btnLoadOrder button is clicked I want the password prompt to appear. Correct password can move on and incorrect, keep trying. If the user leaves the page and comes back, I also want to prompt for the password as well. Currently I can’t get the javascript to get the password value and pass it back to the server side. Any thoughts?
<script type="text/javascript">
const loadOrderButton = document.getElementById("<%= btnLoadOrder.ClientID %>");
loadOrderButton.addEventListener("click", (event) => {
const employeeNumber = document.getElementById("<%= tbEmployeeNumber.ClientID %>").value;
console.log(employeeNumber); // you can do something with the employeeNumber value here
event.preventDefault(); // prevent the default behavior of the button
document.getElementById("passwordPanel").style.display = "block";
const submitPasswordButton = document.getElementById("<%= btnSubmitPassword.ClientID %>");
submitPasswordButton.addEventListener("click", (event) => {
const password = document.getElementById("<%= SfUserPassword.ClientID %>").value;
console.log(SfUserPassword)
const xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
const response = this.responseText;
if (response === "true") {
// password is correct, do something here
console.log("Password is correct!");
} else {
// password is incorrect, show error message
document.getElementById("<%= lblPasswordError.ClientID %>").innerHTML = "Incorrect password";
document.getElementById("<%= lblPasswordError.ClientID %>").style.display = "block";
}
}
};
xmlhttp.open("GET", "ShopFloorEntryNew.aspx.vb?UserID=" + employeeNumber + "&password=" + password, true);
xmlhttp.send();
});
});
</script>
I have this code to generate a /draggable/ css box:
<div id="container">
<div id="box">
<style>
#box {
position: absolute;
width: 100px;
height: 100px;
background-color: #ccc;
}
</style>
<script>
window.onload = function() {
// find the element that you want to drag.
var box = document.getElementById('box');
/* listen to the touchMove event,
every time it fires, grab the location
of touch and assign it to box */
box.addEventListener('touchmove', function(e) {
// grab the location of touch
var touchLocation = e.targetTouches[0];
// assign box new coordinates based on the touch.
box.style.left = touchLocation.pageX + 'px';
box.style.top = touchLocation.pageY + 'px';
})
/* record the position of the touch
when released using touchend event.
This will be the drop position. */
box.addEventListener('touchend', function(e) {
// current box position.
var x = parseInt(box.style.left);
var y = parseInt(box.style.top);
})
}
</script>
I would like to add an html code
<iframe src="https://alceawisteria.codeberg.page/Diarykeepers_Homepage/stash/webamp.html" frameBorder="no" width=500px height=250></iframe>
into the draggable box.
(but putting it inside the ‘box div’ will just not render it.)
Is there anything I need to heed specifically to make this work ?
I have some js code, which is doing what I want, but I can’t figure out why. Can someone please point me to some resource that explains the JS rules for when variable values are determined? Also, can anyone tell me a simple way to peek under the hood and see the process for myself?
Here is the code:
<!DOCTYPE html>
<html>
<body>
<div id="demo">OUTPUT GOES HERE</div>
<div id="demsTest1">Test 1</div>
<div id="demsTest2">Test 2</div>
<div id="demsTest3">Test 3</div>
<div id="demsTest4">Test 4</div>
<script>
var testVar = 2;
function addLstn(i) {
document.getElementById("demsTest" + i).addEventListener("click", function(){
document.getElementById("demo").innerHTML += "<br>i = " + i;
/*i has the value it held when the event listener was added,
apparently because this value is substituted, and
the variable no longer exists*/
/*the direct substitution in the previous line,
is the bit I want to peek at -
where would I find the newly substituted line
" ... += "<br>i = " + 1/2/3/4 etc??*/
testVar = testVar*i; //testVar updates, apparently because it is declared outside the function
document.getElementById("demo").innerHTML += "; testVar = " + testVar;
});
}
for (i=1; i<5;i++) {addLstn(i);}
</script>
</body>
</html>
I tried this, and got what I expected, but I can’t explain it
I am trying to create an if statement where the script checks if an element exists, hides it, and if it has hidden it, a dataLayer event is sent. If not, another event is sent.
However, I cannot seem to get a basic if statement functioning. What could be wrong with my code?
Only vanilla JS is possible.
function hideElement() {
if (element.classList.contains(some-element-class)) {
while (elements.length > 0) elements[0].remove();
// so this is where I would add some dataLayer push event "element shown"
}
else {
console.log(computer says no)
// so this is where I would add some dataLayer push event "element not shown"
}}
This however does work on its own, but I would like to add the event as well:
const elements = document.getElementsByClassName("some-element-class");
while (elements.length > 0) elements[0].remove();
so I have this array of objects, I want to style only a specific word like the date 2014 in short story object.
Im rendering this array in jsx
id:1,
img: coderIMG ,
BlogTitle:"My first encounter with web development in 2014",
shortStory:`back in late 2014 when i was 15 years old , i was passionate about ....`,
I want to create a React app where the user can create a dynamic array of omponents called Object, and each of those objects has it’s own array that can contain more objects. The arrays are stored in the state of the components. But when I try to send the finished array to another component, only the upper-most layer of objects is in that array. Is there an issue with my method of storing the objects? I have noticed that no state of the objects is contained in the sent array.
class CreateMappingPage extends React.Component {
constructor(props) {
super(props);
this.handleList = this.handleList.bind(this)
this.handleValue = this.handleValue.bind(this)
this.state = {
mappingArray: [],
currentKey: 0,
};
}
handleList() {
let key = this.state.currentKey.toString()
this.setState({mappingArray: [
...this.state.mappingArray,
<Object key={key} Id={this.state.currentKey} type="Liste"/>
]})
this.setState({currentKey: this.state.currentKey + 1})
console.log(this.state.mappingArray)
};
handleValue() {
let key = this.state.currentKey.toString()
this.setState({mappingArray: [
...this.state.mappingArray,
<Object key={key} Id={this.state.currentKey} type="Wert"/>
]})
this.setState({currentKey: this.state.currentKey + 1})
};
render() {
return (
<Popup className='CreatePage' trigger={<button className='AddButtons'>Add Mapping</button>} position="right center" modal nested>
<div>
<h1>Mapping erstellen</h1>
<div>
<AddingPopup handleList={this.handleList.bind(this)}
handleValue={this.handleValue.bind(this)} />
{this.state.mappingArray}
<button className='SmallButton' onClick={() =>
this.props.updateMapping(this.state.mappingArray)}>Speichern</button>
</div>
</div>
</Popup>
)
}
}
This is the top-level component that stores the entire array in the mappingArray state. Objects can be added into it with the which receives the handleList() and handleValue() methods in it’s props. It will send it’s array on with the updateMapping prop.
class Object extends React.Component {
constructor(props) {
super(props);
this.state = {
listArray: [],
name: "",
type: this.props.type,
currentKey: this.props.Id
};
}
handleList() {
let key = this.state.currentKey.toString()
this.setState({listArray: [
...this.state.listArray,
<Object key={key} Id={this.state.currentKey} type="Liste"/>
]})
this.setState({currentKey: this.state.currentKey + 1})
console.log(this.state.listArray)
};
handleValue() {
let key = this.state.currentKey.toString()
this.setState({listArray: [
...this.state.listArray,
<Object key={key} Id={this.state.currentKey} type="Wert"/>
]})
this.setState({currentKey: this.state.currentKey + 1})
};
updateName = (evt) => {
this.setState({name: evt.target.value.substr(0, 100)})
}
render() {
return(
<div>
<div>Typ: {this.state.type}</div>
<TextField id ="outlined-basic" label="Name" variant="outlined" value={this.state.name} onChange={this.updateName} />
<AddingPopup handleList={this.handleList.bind(this)}
handleValue={this.handleValue.bind(this)} />
{this.state.listArray.length === 0 ? <MappingButton /> : null}
<div className='InputLevelSub'>
{this.state.listArray}
</div>
</div>
)
}
This is the object that can be added to the mappingArray state of the above component and it works on much the same way, it has an array into which objects can be inserted in the same way.
updateHeaderMapping(array) {
console.log(array)
this.setState({headerMapping: array})
}
<CreateMappingPage updateMapping = {this.updateHeaderMapping}/>
I then want to sent the mappingArray stored in the CreateMappingPage to another component that then stores it in the state headerMapping.
But the console output of the finished array shows that each of the objects only saved it’s props but not it’s state, only the top level of objects remain.
<template>
<div class="carousel">
<slot></slot>
<button @click="index++">Next</button>
</div>
</template>
<script setup>
import { useSlots, onMounted, onUpdated, ref} from 'vue';
const slots = useSlots()
const index = ref(0)
onMounted(() => {
const defaultSlotElements = slots.default()
console.log(`My default slot has ${defaultSlotElements.length} elements.`)
}),
onUpdated(() =>{
console.log(defaultSlotElements[index])
}
)
</script>
I’m trying to create carousel based on slots. Thanks to the previous person on stack overflow, he helped me to figured out how to extract array of slots. Now, I’m dealing with another issue. In order to create carousel, I have to somehow change index of element in the array, so I can move to the next slide of my carousel. Later I have to inject it to my slide component to let V-show render current slot that is 0 by default. But index’s value is changed by v-on directive that changes index, so it selects the next or previous slot in the array. I know that I’ve chosen a complex subject in vue but I don’t want to use simpler version of carousel based on images’ array because I can’t add another component inside this one.
It turned out that I cannot simply by changing index arr[index] select the next object in the array.
First of all, I don’t know javascript or any other scripting or programming language. Sorry about that.
However, a few weeks ago I discovered somewhere a line that would let you change the way YouTube handles different playback speeds when you typed it on the console. By default YouTube uses some kind of time-stretch algorithm that keeps the pitch same but you obviously get lots of artifacts especially when slowing down the audio.
The command changed it to function like variable speed tape machine – you slow down the audio, the pitch goes down but there are no nasty artifacts. Speed up and the pitch goes higher. That is more musical way to slow or speed up audio and it was quite fun to listen songs at slower or faster speed and hear what they sound like without the need to record them with Audacity and then doing it there or in a DAW.
The problem is that I have forgotten what the line was.
document.getElementsBy????? something something
I thought I wrote it down somewhere but apparently not. Can’t even remember where I discovered it. I have tried to Google it but so far I have had no luck.
Thank you in advance!
I am trying to create a Javascript Stored Procedure in Snowflake where the javascript executes a sql query. I am new to javascript and I stole all of it from an existing one that already exists (and works). The problem is that the stored procedure never initializes when I call it, and when I cancel the query, it returns an error:
SQL compilation error: error line 4 at position 28
invalid identifier 'TABLE_NAME'
At Statement.execute, line 20 position 23 (line 37)
My Stored Procedure is this:
CREATE OR REPLACE procedure TRIAL
(
DATABASE_NAME VARCHAR,
SCHEMA_NAME VARCHAR,
TABLE_NME VARCHAR,
COLUMN_NME VARCHAR
)
RETURNS varchar(100)
language javascript
as '
var return_value = "";
var sql_command= `INSERT INTO XXX.YYY.END_TABLE (table_name, column_name, issue_code,parameters,value,row_hash, exception_ts)
WITH CTE AS (
SELECT
${TABLE_NME},
${COLUMN_NME},
''DQ_IS_NULL'',
''NULLs not permitted'',
HASH(*) AS ROW_HASH,
CURRENT_TIMESTAMP()
FROM ${DATABASE_NAME}.${SCHEMA_NAME}.${TABLE_NME}
)
SELECT CTE.* FROM CTE
LEFT JOIN XXX.YYY.END_TABLE dql
ON CTE.ROW_HASH = dql.ROW_HASH WHERE dql.ROW_HASH IS NULL;`
var stmt1 = snowflake.createStatement({sqlText: sql_command});
var result_scan=stmt1.execute();
return "Records Inserted";
';
CALL TRIAL('DATABASE_NAME','SCHEMA_NAME','TABLE_NME','COLUMN_NME');
When calling the stored procedure, I have purposefully left in the variable names as an example.
Is anybody able to help?
i have simple website with pdf viewer by pdf.js and what i want to do is draw rectangle via mouse and get text from iframe pdf file to text field. None of my code work properly
I did almost every options from web but still no result, only drawing rectangle in js work
currently I am stuck trying to disconnect my consumer properly.
My frontend lets me send a request to backend, which then starts a Consumer, to consume all messages of that topic , and then return them.
The first request works just fine, but when I send the 2nd, another consumer joins the group (cause i start a node for every request), and Kafka rebalances the >100 000 messages topic and this takes a few seconds.
So this led me to the issue, that my consumer does not get disconnected properly.
I checked in my code, that consumer.disconnect() get executed and it does. However if I check with this command:
kafka-consumer-groups –bootstrap-server localhost:9092 –describe –group test-group
I can see it is still connected, so how do I manage to discard this connection. If I wait for ~20 sec and I check again with this command. He is being disconnected (must be kafka connection timeout).
If I sent a request now, I get the result almost instantly which means he started a new connection, instead of joining a group and having to rebalance. How do I solve this ? XD
I am receiving a TypeError: n.indexOf is not a function error when trying to access the customers collection in my database. However, I can access the products collection fine.
This is the code I’m trying:
const taskQuery = doc(collection(db, "customers"), where("uid", "==", user.uid))
const loadCheckout = async (priceId) => {
try {
const taskDocs = await getDocs(taskQuery)
} catch (error) {
console.log(error.message)
}
}
user.uid is defined and because I can access the ‘products’ collections, the app initialisation is hooked up correctly. If I remove the ‘where(“uid”…)’ I get a ‘Missing or insufficient permissions’ error which lead me to believe there is something wrong in the rules.
Rules:
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /customers/{uid} {
allow read: if request.auth.uid == uid;
match /checkout_sessions/{id} {
allow read, write: if request.auth.uid == uid;
}
match /subscriptions/{id} {
allow read: if request.auth.uid == uid;
}
match /products/{id} {
allow read: if true;
match /prices/{id} {
allow read: if true;
}
match /tax_rates/{id} {
allow read: if true;
}
}
}
}
I want HTML page been updated after POST request in NODE app with new content,
without using:
additional modules like express etc
forms
new routes
new content is:
<!DOCTYPE html>
<html>
<head>
<title>Updated Page</title>
</head>
<body>
<h1>Clicked</h1>
<p>Clicked</p>
</body>
</html>
full code is here:
const http = require('http');
// create a server to handle requests
const server = http.createServer((req, res) => {
// handle POST requests
if (req.method === 'POST') {
let body = '';
req.on('data', (chunk) => {
console.log('Received data:', chunk);
body += chunk;
});
req.on('end', () => {
console.log('Received complete data:', body);
// send an updated HTML response to the client
const responseHtml = `<!DOCTYPE html>
<html>
<head>
<title>Updated Page</title>
</head>
<body>
<h1>Clicked</h1>
<p>Clicked</p>
</body>
</html>`;
// send a success response to the client
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(responseHtml);
});
} else {
// send an HTML page to the client that allows them to paste images and videos
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(`<!DOCTYPE html>
<html>
<head>
<title>Blue Div</title>
<style>
#blue-div {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div id="blue-div" onclick="sendPostRequest()"></div>
<script>
function sendPostRequest() {
const data = {};
fetch('/', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then(response => {
if (response.ok) {
console.log('POST request successful');
} else {
console.error('POST request failed');
}
})
.catch(error => {
console.error('Error sending POST request:', error);
});
}
</script>
</body>
</html>
`);
}
});
// start the server
server.listen(8080);
console.log('Server running at http://localhost:8080/');
In DevTools on network tab I’m getting Correct responseresponse
But HTML page stays the same.
I’ve tried to use
location.reload(); if response is ok, but it just Reloaded page to initial state while vanishing ‘request’ itself, i could see appearence for milliseconds
