Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
please is there anyone kind enough to share REACTJS resources with me, i’m kinda stranded right now, i can’t find any complete free react course online
if you can share a pdf file, a website, a youtube channel or just list out the thing that I’m suppose to learn to be a react developer. thanks
i tried youtube, w3school, and now I’m here
How to use js to create new document pages like in Word, that is, when filling a page and pressing enter, a new sheet will be created, or if the user presses enter conditionally in the middle of a filled page, then the text is transferred to the next one, etc., etc. Also how is this done in Word? How does the user edit text?
Tried textarea and contenteditable tag
Created a simple AWS API Gateway with a single route pointing to a lambda integrated with a custom lambda authorizer.
- /
- ANY (any method)
The authorizer integration config:
Lambda code for Route:
exports.handler = async (event) => {
return {
'statusCode': 200
}
}
Lambda code for Authorizer:
export const handler = function(event, context, callback) {
callback(null, generatePolicy('user', 'Allow', event.methodArn));
};
// Help function to generate an IAM policy
var generatePolicy = function(principalId, effect, resource) {
var authResponse = {};
authResponse.principalId = principalId;
if (effect && resource) {
var policyDocument = {};
policyDocument.Version = '2012-10-17';
policyDocument.Statement = [];
var statementOne = {};
statementOne.Action = 'execute-api:Invoke';
statementOne.Effect = effect;
statementOne.Resource = resource;
policyDocument.Statement[0] = statementOne;
authResponse.policyDocument = policyDocument;
}
// Optional output with custom properties of the String, Number or Boolean type.
authResponse.context = {
"stringKey": "stringval",
"numberKey": 123,
"booleanKey": true
};
return authResponse;
}
I called the route with the following:
curl --location 'https://*********.execute-api.us-east-1.amazonaws.com/dev/'
--header 'Authorization: Allow'
NOTE: I redacted the API Gateway ID.
Logs:
Route lambda shows no logs as if it wasn’t executed at all.
Authorizer lambda shows only logs for the beginning and ending but no errors of the request as follows:
INIT_START Runtime Version: nodejs:18.v15 Runtime Version ARN: .....
START RequestId: 69017bc6-b660-416a-93dc-2c2d9d2b655a Version: $LATEST
END RequestId: 69017bc6-b660-416a-93dc-2c2d9d2b655a
REPORT RequestId: 69017bc6-b660-416a-93dc-2c2d9d2b655a Duration: 14.85 ms Bille
I made a registration form which there are 4 steps, but it has a bug that is when the user clicks the payment button (the last step) it will go to a new tab which is the payment gateway, and when the user clicks on the registration form tab, the form only shows the previous button and the payment button only, and the button is not working, help me fix the bug
registration form after click payment button
function calculateOrEnterAge(person) {
var noKadPengenalan = document.getElementById("no_kad_pengenalan_" + person).value;
var umurInput = document.getElementById("umur_" + person);
// Check if the input is a number and not empty
if (!isNaN(noKadPengenalan) && noKadPengenalan !== "") {
var firstTwoDigits = noKadPengenalan.substring(0, 2);
var birthYear;
if (firstTwoDigits >= "00" && firstTwoDigits <= "05") {
birthYear = "20" + firstTwoDigits;
} else if (firstTwoDigits >= "06" && firstTwoDigits <= "99") {
birthYear = "19" + firstTwoDigits;
}
var currentYear = new Date().getFullYear();
var umur = currentYear - parseInt(birthYear);
umurInput.value = umur;
} else {
// If input is not a number or empty, clear the age value
umurInput.value = "";
}
}
var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab
function showTab(n) {
// This function will display the specified tab of the form...
var x = document.getElementsByClassName("tab");
x[n].style.display = "block";
//... and fix the Previous/Next buttons:
if (n == 0) {
document.getElementById("prevBtn").style.display = "none";
} else {
document.getElementById("prevBtn").style.display = "inline";
}
if (n == (x.length - 1)) {
document.getElementById("nextBtn").innerHTML = "Click To Pay";
} else {
document.getElementById("nextBtn").innerHTML = "Next";
}
//... and run a function that will display the correct step indicator:
fixStepIndicator(n);
}
function nextPrev(n) {
// This function will figure out which tab to display
var x = document.getElementsByClassName("tab");
// Exit the function if any field in the current tab is invalid:
if (n == 1 && !validateForm()) return false;
// Hide the current tab:
x[currentTab].style.display = "none";
// Increase or decrease the current tab by 1:
currentTab = currentTab + n;
// if you have reached the end of the form...
if (currentTab >= x.length) {
// ... the form gets submitted:
document.getElementById("regForm").submit();
return false;
}
// Otherwise, display the correct tab:
showTab(currentTab);
}
function validateForm() {
// This function deals with validation of the form fields
var x, y, i, valid = true;
x = document.getElementsByClassName("tab");
y = x[currentTab].getElementsByTagName("input");
// A loop that checks every input field in the current tab:
for (i = 0; i < y.length; i++) {
// If a field is empty...
if (y[i].value == "") {
// add an "invalid" class to the field:
y[i].className += " invalid";
// and set the current valid status to false
valid = false;
}
}
// If the valid status is true, mark the step as finished and valid:
if (valid) {
document.getElementsByClassName("step")[currentTab].className += " finish";
}
return valid; // return the valid status
}
function fixStepIndicator(n) {
// This function removes the "active" class of all steps...
var i, x = document.getElementsByClassName("step");
for (i = 0; i < x.length; i++) {
x[i].className = x[i].className.replace(" active", "");
}
//... and adds the "active" class on the current step:
x[n].className += " active";
}<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<!-- Add Bootstrap CSS Link -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- font awesome cdn link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<!-- lightgallery css cdn link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery-js/1.4.0/css/lightgallery.min.css">
<!-- custom css file link -->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="student-style.css">
<a href="index.php" class="back-button">
<i class="fas fa-home"></i>
</a>
<form id="regForm" action="process-registration.php" method="post" target="_blank">
<h2 class="mt-0">Register:</h2>
<div class="tab">
<h4>Step 1: Maklumat Pelajar</h4>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="servis">Servis:</label>
<select class="form-control" id="servis" name="servis">
<option value="tadika">Tadika</option>
<option value="transit">Transit</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="tarikh">Tarikh Daftar:</label>
<input type="date" class="form-control" id="tarikh" name="tarikh" required>
</div>
</div>
</div>
<div class="form-group">
<label for="name">Nama:</label>
<input type="text" class="form-control" id="name" name="name" required>
</div><br>
<div class="form-group">
<label for="gender" class="mr-3">Jantina:</label>
<div class="form-check form-check-inline">
<input type="radio" id="perempuan" name="gender" value="Perempuan" oninput="this.className = ''" required>
<label class="form-check-label" for="perempuan">Perempuan</label>
<input type="radio" id="lelaki" name="gender" value="Lelaki" oninput="this.className = ''" required>
<label class="form-check-label" for="lelaki">Lelaki</label>
</div>
</div><br>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="no_surat_beranak">No. Surat Beranak:</label>
<input type="number" class="form-control" id="no_surat_beranak" name="no_surat_beranak" required>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="tarikh_lahir">Tarikh Lahir:</label>
<input type="date" class="form-control" id="tarikh_lahir" name="tarikh_lahir" required>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="anak_ke">Anak ke Berapa:</label>
<input type="number" class="form-control" id="anak_ke" name="anak_ke" required>
</div>
</div>
</div>
<div class="form-group">
<label for="alamat_rumah">Alamat:</label>
<textarea class="form-control" id="alamat_rumah" name="alamat_rumah" rows="4" placeholder="Alamat"></textarea>
</div>
</div>
<div class="tab">
<h4>Step 2: Maklumat Ibubapa/Penjaga</h4>
<div class="form-group">
<label for="nama_bapa_penjaga">Nama Bapa/Penjaga:</label>
<input type="text" class="form-control" id="nama_bapa_penjaga" name="nama_bapa_penjaga" required>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="no_kad_pengenalan_bapa">No. Kad Pengenalan:</label>
<input type="number" class="form-control" id="no_kad_pengenalan_bapa" name="no_kad_pengenalan_bapa" required oninput="calculateOrEnterAge('bapa')">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="warna_bapa">Warna:</label>
<select class="form-control" id="warna_bapa" name="warna_bapa">
<option value="Biru Muda">Biru Muda</option>
<option value="Merah Muda">Merah Muda</option>
<option value="Hijau Muda">Hijau Muda</option>
</select>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="umur_bapa">Umur:</label>
<input type="text" class="form-control" id="umur_bapa" name="umur_bapa" readonly>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="no_tel_rumah_bimbit_bapa">No. Tel Rumah/Bimbit:</label>
<input type="text" class="form-control" id="no_tel_rumah_bimbit_bapa" name="no_tel_rumah_bimbit_bapa">
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="bangsa_bapa">Bangsa:</label>
<input type="text" class="form-control" id="bangsa_bapa" name="bangsa_bapa">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="warganegara_bapa">Warganegara:</label>
<input type="text" class="form-control" id="warganegara_bapa" name="warganegara_bapa">
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="pekerjaan_bapa">Pekerjaan:</label>
<input type="text" class="form-control" id="pekerjaan_bapa" name="pekerjaan_bapa">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="majikan_bapa">Majikan:</label>
<input type="text" class="form-control" id="majikan_bapa" name="majikan_bapa">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="no_tel_pejabat_bapa">No. Tel Pejabat:</label>
<input type="text" class="form-control" id="no_tel_pejabat_bapa" name="no_tel_pejabat_bapa">
</div>
</div>
</div>
<br><br>
<div class="form-group">
<label for="nama_ibu_penjaga">Nama Ibu/Penjaga:</label>
<input type="text" class="form-control" id="nama_ibu_penjaga" name="nama_ibu_penjaga" required>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="no_kad_pengenalan_ibu">No. Kad Pengenalan:</label>
<input type="number" class="form-control" id="no_kad_pengenalan_ibu" name="no_kad_pengenalan_ibu" required oninput="calculateOrEnterAge('ibu')">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="warna_ibu">Warna:</label>
<select class="form-control" id="warna_ibu" name="warna_ibu">
<option value="Biru Muda">Biru Muda</option>
<option value="Merah Muda">Merah Muda</option>
<option value="Hijau Muda">Hijau Muda</option>
</select>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="umur_ibu">Umur:</label>
<input type="text" class="form-control" id="umur_ibu" name="umur_ibu" readonly>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="no_tel_rumah_bimbit_ibu">No. Tel Rumah/Bimbit:</label>
<input type="text" class="form-control" id="no_tel_rumah_bimbit_ibu" name="no_tel_rumah_bimbit_ibu">
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="bangsa_ibu">Bangsa:</label>
<input type="text" class="form-control" id="bangsa_ibu" name="bangsa_ibu">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="warganegara_ibu">Warganegara:</label>
<input type="text" class="form-control" id="warganegara_ibu" name="warganegara_ibu">
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="pekerjaan_ibu">Pekerjaan:</label>
<input type="text" class="form-control" id="pekerjaan_ibu" name="pekerjaan_ibu">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="majikan_ibu">Majikan:</label>
<input type="text" class="form-control" id="majikan_ibu" name="majikan_ibu">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="no_tel_pejabat_ibu">No. Tel Pejabat:</label>
<input type="text" class="form-control" id="no_tel_pejabat_ibu" name="no_tel_pejabat_ibu">
</div>
</div>
</div>
</div>
<div class="tab">
<h4>Step 3: Maklumat Kesihatan Anak-anak</h4>
<div class="form-group">
<label for="penyakit">Adakah anak anda mempunyai penyakit? Sila nyatakan jika ada:</label>
<input type="text" class="form-control" id="penyakit" name="penyakit">
</div>
<div class="form-group">
<label for="alahan_makanan">Adakah anak anda mempunyai alahan terhadap makanan? Sila nyatakan jika ada:</label>
<input type="text" class="form-control" id="alahan_makanan" name="alahan_makanan">
</div>
<div class="form-group">
<label for="kecemasan_nama">Sekiranya berlaku kecemasan, siapakah yang harus dihubungi selain
ibubapa/pejaga:</label>
<input type="text" class="form-control" id="kecemasan_nama" name="kecemasan_nama" placeholder="Nama">
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="kecemasan_tel">No. Tel Rumah/Bimbit:</label>
<input type="text" class="form-control" id="kecemasan_tel" name="kecemasan_tel" placeholder="No. Tel Rumah/Bimbit">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="kecemasan_petalian">Petalian dengan murid:</label>
<input type="text" class="form-control" id="kecemasan_petalian" name="kecemasan_petalian" placeholder="Petalian dengan murid">
</div>
</div>
</div>
<div class="form-group">
<label for="kecemasan_alamat">Alamat:</label>
<textarea class="form-control" id="kecemasan_alamat" name="kecemasan_alamat" rows="4" placeholder="Alamat"></textarea>
</div>
</div>
<div class="tab">
<h2>Step 4: Transaction Details</h2>
<div class="form-group">
<label for="transaction_method">Payment Method:</label>
<select class="form-control" id="transaction_method" name="transaction_method">
<option value="bank_transfer">Bank Transfer</option>
<option value="paypal">ToyyidPay</option>
</select>
</div>
<div class="form-group">
<label for="payer_name">Name:</label>
<input type="text" class="form-control" id="payer_name" name="payer_name">
</div>
<div class="form-group">
<label for="payer_no_phone">No. Phone:</label>
<input type="text" class="form-control" id="payer_no_phone" name="payer_no_phone">
</div>
<div class="form-group">
<label for="payer_email">Email:</label>
<input type="text" class="form-control" id="payer_email" name="payer_email">
</div>
<div class="form-group">
<label for="price">Harga:</label>
<input type="text" id="price" name="price" value="RM101">
</div>
</div>
<div style="overflow:auto;">
<div style="float:right;">
<button type="button" id="prevBtn" onclick="nextPrev(-1)" class="btn btn-secondary">Previous</button>
<button type="button" id="nextBtn" onclick="nextPrev(1)" class="btn btn-primary">Next</button>
</div>
</div>
<div style="text-align:center;margin-top:40px;">
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
</div>
</form>
<!-- Add Bootstrap JS and Popper.js Scripts -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>I’m trying to convert my personal notes to HTML and keep them modularized. I’m trying to get this test code to work.
I have a file called called main-file.html.
I have another file called sub-file.html. The only code within this file is “Hello World”.
I want to double click on the main-file.html such that when it opens up in my web browser, I see a page with the words “Hello World” on it, because the main-file.html is reading the code from sub-file.html and rendering it, as though that code were within main-file.html itself. Eventually, I want to reference numerous subfiles.
What is the simplest code that will achieve this result? Using JavaScript is acceptable. I do not want to use 3rd party software, PHP, SSI, web servers, etc. because I want this to work on any computer out of the box with just a web browser. I also don’t want to use iFrames or objects, because I’ve tried for days to get this to work for my application and I can’t get it to render properly without lots of awkward scrollbars, etc. (unless you know of a way to render each sub-file one after the other without scrollbars, which I couldn’t figure out). I just want the main-file.html to read the code within sub-file.html and treat it as though sub-file.html’s code was within main-file.html.
I’ve been working for days with Google Bard and ChatGPT trying to get this to work, with no success. Any help is very much appreciated.
I tried this code, with no success.
<!DOCTYPE html>
<html>
<head>
<title>Main File</title>
</head>
<body>
<div id="content"></div>
<script>
// Use JavaScript to load and display content from sub-file.html
fetch('sub-file.html')
.then(response => response.text())
.then(data => {
document.getElementById('content').innerHTML = data;
})
.catch(error => {
console.error('Error loading sub-file.html:', error);
});
</script>
</body>
</html>
If I don’t add style(visibility) in style-menu tag, it won’t work. Otherwise when style(visibility) is added it works.
(file.html)
<div class="share-menu" id="share-menu" style = "visibility: hidden;">
<div class="facebook">Facebook</div>
<div class="whatsapp">WhatsApp</div>
<div class="twitter">Twitter</div>
<div class="telegram">Telegram</div>
<div class="linkedin">Linkedin</div>
</div>
(file.js)
let shareBtn = document.getElementById("share-btn");
let shareMenu = document.getElementById("share-menu");
shareBtn.addEventListener("click", function(){
if(shareMenu.style.visibility == "hidden"){
shareMenu.style.visibility = "visible";
}else if(shareMenu.style.visibility == "visible"){
shareMenu.style.visibility = "hidden";
}
});
(file.css)
.share-menu{
position: absolute;
z-index: 10;
top: 80px;
width: 140px;
height: max-content;
display: flex;
visibility: hidden;
flex-direction: column;
align-items: center;
background-color: white;
box-shadow: 7px 7px 15px 4px rgba(0, 0, 0, 0.25);
border-radius: 18px;
font-weight: bold;
}
I have been creating a TypeScript class and methods based on following Mergers and Spin Offs in US history. The TypeScript method calls should return the consequences of the following mergers:
In 2017, the merger of Dow and DuPont made DowDuPont. But later they decided to spin off into three separate companies called Dow, DuPont and Corteva. In 2015, the merger of Kraft and Heinz made Kraft Heinz and later they changed their name to Kraft Foods. For a better understanding you can refer this flowchart I created:
I have created the relevant class and the object but struggling when adding conditions into the methods of the class.
The below code is what I have done so far. As mentioned in the comments, such methods should return the relevant outputs in the console.
class corporatePool{
private companyArr: string[];
constructor(){
this.companyArr = [];
}
addCompany(company: string): void{
this.companyArr.push(company);
}
mergeCompanies(): void{
const companyArrLength = this.companyArr.length;
}
resetPool(): string[]{
const result = [...this.companyArr];
this.companyArr = [];
return result;
}
}
const pool = new corporatePool();
pool.addCompany("Dow");
pool.addCompany("DuPont");
pool.mergeCompanies();
console.log(corporatePool.resetPool().join(",")); //Should return 'DowDuPont'
pool.addCompany("Corteva");
pool.addCompany("Heinz");
pool.mergeCompanies();
console.log(corporatePool.resetPool().join(",")); //Should return 'Unknown'
I made changes to the src/app.js when I use npm start inside the react_app, in port 3000 changes and gets rendered but when I do that using python manage.py runserver I only see the default react-app welcome how can I fix that?
views
from django.contrib import admin
from django.urls import path
from . import views
urlpatterns = [
path('admin/', admin.site.urls),
path('', views.index, name='index')
]
Heres is my react_app inside my django project here is the app.js
import "./App.css";
function App() {
return (
<div className="App">
<p>Calendar App</p>
</div>
);
}
export default App;
using python manage.py runserver:
enter image description here
using npm run inside react app:
enter image description here
I am trying to get data from a site that produces Json outputs, and I am totally new to JavaScript.
What should I use instead of the following which does not lead to anything being displayed?
<!DOCTYPE html>
<html>
<body>
<h2>Accidents in Paris.</h2>
<p id="demo"></p>
<script type="text/javascript">
fetch('https://opendata.paris.fr/api/explore/v2.1/catalog/datasets/accidentologie0/records?limit=20', {
headers: {
'Accept': 'application/json'
}
})
.then(response => response.text())
.then(text => console.log(text))
</script>
</body></html>
I want to learn java script which online platform should I use.
I searched many sites and now I’m confused
I have this computed property.
import { mapState } from 'vuex'
export default {
computed: {
...mapState('user/requestAcc', ['AccountValidation', 'selectedWorkload','AccountOnboarding','Regions','customers']),
validatedForSubmission() {
if(this.type !== 'Internal'){
if (this.AccountValidation.wbsType === 'WBSCode1') {
if(this.type !== 'New'){
return !this.AccountValidation.agreed || !this.AccountValidation.wbsCodeValidated || !this.AccountValidation.iwoCodeValidated
} else {
return !this.AccountValidation.agreed || !this.AccountValidation.wbsCodeValidated
|| !this.awsAccountValidation.iwoCodeValidated || !this.AccountOnboarding.fields.Tmp_Cust_Name ||!this.AccountOnboarding.fields.Cust_Region || !this.AccountOnboarding.fields.Customer_Alias || this.errors.items.length
}
} else {
if(this.type !== 'New'){
return !this.AccountValidation.agreed || !this.AccountValidation.wbsCodeValidated
} else {
return !this.AccountValidation.agreed || !this.AccountValidation.wbsCodeValidated
|| this.AccountOnboarding.fields.Tmp_Cust_Name === '' ||!this. AccountOnboarding.fields.Cust_Region || !this.AccountOnboarding.fields.Customer_Alias || this.errors.items.length
}
}
} else {
if (this.AccountValidation.wbsType === 'WBSCode1') {
return !this.AccountValidation.wbsCodeValidated || !this.AccountValidation.iwoCodeValidated
} else {
return !this.AccountValidation.wbsCodeValidated
}
}
}
}
The computed property is linked to :disabled in a v-btn. So if the computed property returns a false value, it would enable(remove disabled) the v-btn.
<v-btn :disabled='validatedForSubmission' color="warning" @click='onAcctValidationSubmit'>Next</v-btn>
I connected one of the object properties from AccountOnboarding in a v-text-field. This is a reactive dependency in the validatedForSubmission computed property.
<v-text-field
placeholder="Customer_Alias"
:counter="15"
v-model="AccountOnboarding.fields.Customer_Alias"
v-validate="'required'"
data-vv-name="Customer Alias"
:error-messages="errors.collect('Customer Alias')"
outlined
dense
>
</v-text-field>
I have method linked to a v-autocomplete. This method checks if there is an existing Customer Registration.
methods: {
getCustomerRegion() {
let custAlias = this.AccountOnboarding.fields.Customer_Alias
let custName = this.AccountOnboarding.fields.Tmp_Cust_Name
let custReg = this.AccountOnboarding.fields.Cust_Region
let isCustRegExist = this.customers.filter(res => res.Cust_Region.includes(custName+' - '+custReg))
if(isCustRegExist.length > 0) {
this.AccountOnboarding.isCustRegion = true
let alias = isCustRegExist[0].Customer_Alias
this.AccountOnboarding.fields.MP_ID = isCustRegExist[0].Master_Id
console.log('1. -------- selected customer --------')
console.log('2. alias: ' + alias)
console.log('3. -----------------------------------')
if (alias !== 'None'){
this.AccountOnboarding.custRegion =''
this.AccountOnboarding.custRegionId= isCustRegExist[0].Customer_Id
this.AccountOnboarding.fields.Customer_Alias = isCustRegExist[0].Customer_Alias
this.$store.commit('user/requestAcc/setCustomerAlias', alias)
} else {
console.log('customer update...')
this.AccountOnboarding.custRegionAction = 'update'
this.AccountOnboarding.custRegionId = isCustRegExist[0].Customer_Id
this.AccountOnboarding.fields.Customer_Alias =''
this.$store.commit('user/requestAcc/setCustomerAlias', this.AccountOnboarding.fields.Customer_Alias)
}
} else {
console.log('customer create...')
this.AccountOnboarding.fields.Customer_Alias =''
this.AccountOnboarding.custRegionAction = 'post'
this.AccountOnboarding.isCustRegion = false
this.AccountOnboarding.custRegionId = ''
let alias = this.AccountOnboarding.fields.Customer_Alias
this.$store.commit('user/requestAcc/setCustomerAlias', alias)
}
}
<v-autocomplete
v-model="AccountOnboarding.fields.Cust_Region"
:items="Regions"
placeholder="Select Customer Region"
v-validate="'required'"
data-vv-name="Customer Region"
data-vv-validate-on="blur"
:error-messages="errors.collect('Customer Region')"
@change = "getCustomerRegion"
attach
outlined
dense
>
</v-autocomplete>
The computed property works fine and enables the button when there is an existing customer registration and it has a customer alias (which fills up the v-text-field). However, for new registrations or existing customers with no alias, you can see that the method would set *this.AccountOnboarding.fields.Customer_Alias =” * and once you type in an alias in the v-text-field where you linked the AccountOnboarding.fields.Customer_Alias as a v-model, it does show that the AccountOnboarding.fields.Customer_Alias contains the inputted value but the computed property does not recalculate it even though it is a reactive dependency. Leading to the computed property to return false even if the conditions are met.
I have tried removing the code this.AccountOnboarding.fields.Customer_Alias =” for both customer update and customer create conditions in the getCustomerRegion method, it worked but I do not want to remove the code.
I’m trying to introduce a 404 not-found route with React Router 6 to catch anything that doesn’t exist. This works so far, but I have the problem that the JavaScript files from the home route are still loaded in the not-found route. I implement the JavaScript files via an import at the beginning of the Home.jsx element file.
App.js
import './App.css';
import Home from './pages/home/Home';
import NotFound from './pages/fallback/NotFound.jsx';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />}/>
<Route path="*" element={<NotFound />}/>
</Routes>
</BrowserRouter>
);
}
export default App;
Home.jsx:
import './Home.css';
import '../../assets/scripts/landing.js'; <-- These ones get loaded when opening NotFound Route
import '../../assets/scripts/animate.js'; <-- These ones get loaded when opening NotFound Route
import Footer from '../../components/footer/Footer';
import NavigationDock from '../../components/banner/navigation/NavigationDock';
import MobileNavigation from '../../components/banner/navigation/mobile/MobileNavigation';
const Home = () => {
return (
<div className='hide-x-overflow'>
<NavigationDock />
<MobileNavigation />
[website content ...]
<Footer />
</div>
)
}
export default Home
NotFound.jsx:
import React from 'react'
import NavigationBar from '../../components/banner/navigation/NavigationBar'
import './NotFound.css'
const NotFound = () => {
return (
<div>
<NavigationBar />
<div className='not-found-banner'>
<h1>404</h1>
<h2>Page Not Found</h2>
</div>
</div>
)
}
export default NotFound
After a short search, I tried to set an exact attribute for the routes in the router, but to no avail.
<Route path="/" element={<Home />} exact/>
I’ve also made sure, that the NavigationBar Component doesn’t import the affected javascript files itself.
I’m trying to see how WebAssembly works in JavaScript, and I’m stuck on how to convert f32.reinterpret_i32 and i32.wrap_i64 into JavaScript. Can anyone show me how?
I’ve tried searching for a page with WebAssembly methods converted to JavaScript but I still haven’t been able to find one. I’m asking here in hopes that someone may know this.
The HTML file contains a single div and rest of the content is inserted using javascript (DOM). The JavaScript content is getting loaded slowly. But on adding a div with some text (in HTML file), the JavaScript content is getting loaded very fast.
If you are getting any hint, please respond.
can someone help me how to make nested table with tabulator in node red
really I don’t find the solution how to make it its complicated.
I need it in my app and also to move row between table in node red using tabulator
I tried to make table inside each row in another table using ui table in node red and tabulator