Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
I have this method and I want to write a bUnit test to check whether the InvokeVoidAysnc() got called.
I have the button click for the Onclick event and I have it so that the if statement is true:
// Assert
var cancelButton = cut.Find("#cancel");
cancelButton.Click();
I am graphic designer new to web design and I purchased this template in hopes of customizing it. https://xandergraphics.com/demo1/ (here are the files https://xandergraphics.com/demo1/css/)I was wondering if it was possible to put a phone number at the top of this pages navbar on the right side over the contact button and change the color of the navbar and that it all works in mobile. I tried but once I look at it in mobile it does not look right.
Thanks
The code passes status 200, but the token is still valid:
const [revorktoken] = await Promise.all([
await axios.post('https://discord.com/api/v8/oauth2/token/revoke', new URLSearchParams({
client_id: "№№№№",
client_secret: "№№№№№№№№",
token: token,
}).toString(), {
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
Accept: 'application/json'
},
httpsAgent: agent
}),
Probyval without new URLSearchParams without a difference it produces:
status: 200
statusText: 'OK',
headers: AxiosHeaders {
date: 'Wed, 19 Jul 2023 17:34:19 GMT',
'content-type': 'application/json',
'content-length': '2',
connection: 'close',
So my problem is that i have a simple form with some entries. I want these entries to go into the e.target.elements.betrag.value when i press the submit button as an event e. When i do this, only the first one is saved here, but the values of the other ones remain undefined. Now i do not know what to do that all the entries are saved there.
Honestly i haven´t tried much, because i simply couldn´t find an answer. I expected all four entries of the form to end up in e.target.elements.betrag.value but it simply didn´t happen
File structure
-apps
-pages
-animals
-[…slug].tsx
-libs
-animals
-components
-new
-page.tsx
What I’m trying to accomplish is to be able to navigate to https://localhost:3000/animals/new and display its page.tsx file
Is this possible? Or is it possible for projects in the /libs directory to have their own /pages directory?
I’m sorry I looked over the documentation and searched other examples and I can not figure it out.. I want to check if the entered value exists in dropdown and if not, to add it to the dropdown and save it in database with ajax. Because the function is triggered onchange (when I hit enter), the tag is added to the dropdown and the ajax is not entered. I have tried to change the even to oninput/onkeyup and i also tried ‘$(“.selectType”).on(“select2:select”, function(event)’.
HTML
<div class="col-md-6 ">
<label class="form-label">Type <span class="required">*</span></label> <br>
<select class="selectType" name="project_types[]" multiple="multiple" style="height: 200px; width: 100%;" onchange="handleCustomType(this)">
<?php
if (!empty($types)) {
foreach ($types as $type) {
echo '<option value="' . $type->ID . '">' . $type->name . '</option>';
}
}
?>
</select>
</div>
JS
$(".selectType").select2({
tags: true,
});
function handleCustomType(selectElement) { console.log('kkt');
const customTypeValue = selectElement.value;
if (customTypeValue.trim() === '') {
console.log('kk');
return;
}
console.log(Array.from(selectElement.options));
const isInDropdown = Array.from(selectElement.options).some(option => option.value === customTypeValue);
if (!isInDropdown) {
console.log('isnot')
$.ajax({
type: 'POST',
url: base_url + 'projects/addCustomType',
data: {
type: customTypeValue
},
success: function(response) {
if (response.status == 'success') {
const newOption = new Option(customTypeValue, response.typeID, true, true);
$(selectElement).append(newOption).trigger('change');
} else {
console.error('Error saving custom type:', response.message);
}
},
error: function(xhr, status, error) {
console.error('AJAX Error:', error);
}
});
}
}
Thank you!
I have a React app which uses Axios for data fetching and I have written a wrapper around Axios like so.
import axios from "axios";
async function GET(
url: string,
headers: { [key: string]: string } = {},
searchParams: URLSearchParams = new URLSearchParams()
) {
const response = await axios.get(url, { headers, params: searchParams });
return response.data;
}
async function POST(url: string, headers: { [key: string]: string }, body: any) {
const response = await axios.post(url, body, { headers });
return response.data;
}
const API = { GET, POST };
export default API;
Axios throws an error when the response status code is something other than 2xx. I am trying to catch this error in a catch block and use it to show a notification to the user.
// a button's onClick handler
try {
API.GET('https://www.test.com/api/users')
} catch (err: any) {
// not able to reach here when error is thrown by axios
console.log(err.response.data);
}
I am able to log the error in catch block when I use Axios directly in the try block without the wrapper code.
Why is the error not being forwarded from the API.GET call?
I need the random number I am generating to populate the textbox instead of directly on the page.
<input type="text" name="numberbox" value="" size="17" maxlength="10" required>
<button type=button onclick="document.getElementById('number').innerHTML = getRndInteger(10000,99999)">Number Generator</button>
<p id="number"></p>
<script>
function getRndInteger(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
const rndInt = randomIntFromInterval(1, 6)
</script>
I’m using this exact same code and it’s running fine on BrowserStack using a .ipa file since BrowserStack has real devices. But when I’m running the same thing on my local simulator using a .app file its giving me the following error.
Error: element (“//XCUIElementTypeTextField[@name=”domain-input”]”) still not displayed after 20000ms
Not sure what the issue is but I have to get this to work on the simulator since our budget wasn’t approved for BrowserStack.
Here’s the Appium inspector for the element
Here’s what the element looks like on the dev side
And here’s the code on my side
Note: this is happening for all the elements I’m using they are all working on BrowserStack but not simulator.
I’ve noticed when I am debugging code (ReactJS in this case) in Brave Browser I see:
VM1064:7575 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'facebook.json')
at getConfig (<anonymous>:7575:42)
at ClickToLoad.init (<anonymous>:10508:37)
at ClickToLoad.callInit (<anonymous>:2568:18)
at <anonymous>:10800:33
at Array.forEach (<anonymous>)
at Object.init (<anonymous>:10798:26)
getConfig @ VM1064:7575
init @ VM1064:10508
callInit @ VM1064:2568
(anonymous) @ VM1064:10800
init @ VM1064:10798
await in init (async)
apply @ VM1064:10866
(anonymous) @ VM1070:3
(anonymous) @ VM1070:5
inject @ inject.js:110
(anonymous) @ inject.js:204
I suspect this is some sort of inject they are doing for ad blocking, but I have no idea what is causing this. It doesn’t show in any other browser. Does anyone know what this is and how to fix it?
How do I design a gomoku board and put it in the website? I watched some courses online and learned the basics of html, css, as well as javascript, but I can not seem to figure out how to even design a Gomoku board and put it on a webpage.
In my code there’s a dedicated remove button for the javascript generated form, when it is clicked, it should not be display on the database. For example, I create 3 extra form (js form), form 1(original), form 2, 3 and 4 (js form). In my code, when I click remove button for form 2, in the database, 3 rows are displayed in which form 1 and 3 values are displayed correctly, but form 2 is blank and form 4 is not registered, what could be the problem and how to fix it? It works fine when for example you remove form 4 (last form), form 1,2,3 are displayed correctly
Here is my code
<main>
<div class="page-header">
<div>
<h1>Create Order</h1>
</div>
<a href="#" class="add-order-button" onclick="createOrderForm()">+ Add Another Order</a>
</div>
<form action="php/order_create.php" method="post">
<div id="order-container">
<div class="order-form">
<h3>Order 1</h3>
<div class="form-row">
<label for="item-name-1">Item Name:</label>
<select id="item-name-1" name="item-name-1">
<?php include 'php/order_read.php'; ?>
</select>
</div>
<div class="form-row">
<label for="qty-1">Qty:</label>
<input type="text" id="qty-1" name="qty-1">
</div>
<div class="form-row">
<label for="supplier-name-1">Supplier Name:</label>
<input type="text" id="supplier-name-1" name="supplier-name-1">
</div>
<div class="form-row">
<label for="supplier-contact-1">Supplier Contact:</label>
<input type="text" id="supplier-contact-1" name="supplier-contact-1" pattern="[0-9]+" title="Only numbers allowed">
</div>
<div class="form-row">
<label for="supplier-address-1">Supplier Address:</label>
<input type="text" id="supplier-address-1" name="supplier-address-1">
</div>
<button class="remove-button" onclick="removeOrderForm(1)">Remove</button>
</div>
<input type="hidden" id="order-count" name="order-count" value="1">
<button type="submit" class="order-add-button">Submit</button>
</div>
</form>
</main>
<script>
var orderCount = 1;
function createOrderForm() {
orderCount++;
var container = document.getElementById('order-container');
var form = document.createElement('div');
form.classList.add('order-form');
form.id = `order-form-${orderCount}`;
form.innerHTML = `
<h3>Order ${orderCount}</h3>
<div class="form-row">
<label for="item-name-${orderCount}">Item Name:</label>
<select id="item-name-${orderCount}" name="item-name-${orderCount}">
<?php include 'php/order_read.php'; ?>
</select>
</div>
<div class="form-row">
<label for="qty-${orderCount}">Qty:</label>
<input type="text" id="qty-${orderCount}" name="qty-${orderCount}">
</div>
<div class="form-row">
<label for="supplier-name-${orderCount}">Supplier Name:</label>
<input type="text" id="supplier-name-${orderCount}" name="supplier-name-${orderCount}">
</div>
<div class="form-row">
<label for="supplier-contact-${orderCount}">Supplier Contact:</label>
<input type="text" id="supplier-contact-${orderCount}" name="supplier-contact-${orderCount}" pattern="[0-9]+" title="Only numbers allowed">
</div>
<div class="form-row">
<label for="supplier-address-${orderCount}">Supplier Address:</label>
<input type="text" id="supplier-address-${orderCount}" name="supplier-address-${orderCount}">
</div>
<button class="remove-button" onclick="removeOrderForm(${orderCount})">Remove</button>
`;
container.insertBefore(form, container.lastElementChild.previousElementSibling);
document.getElementById('order-count').value = orderCount;
}
function removeOrderForm(orderId) {
var form = document.getElementById(`order-form-${orderId}`);
// Disable the input fields of the removed order
var inputs = form.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
inputs[i].disabled = true;
}
var selects = form.getElementsByTagName('select');
for (var i = 0; i < selects.length; i++) {
selects[i].disabled = true;
}
// Remove the remove button
var removeButton = form.getElementsByClassName('remove-button')[0];
removeButton.parentNode.removeChild(removeButton);
orderCount--;
document.getElementById('order-count').value = orderCount;
}
</script>
here is for the CREATE operation script
<?php
// Database connection
$dbHost = "localhost";
$dbUsername = "root";
$dbPassword = "";
$dbName = "main";
$conn = mysqli_connect($dbHost, $dbUsername, $dbPassword, $dbName);
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
// Check if the form is submitted
if ($_SERVER["REQUEST_METHOD"] === "POST") {
// Generate the Batch ID
$batchID = generateBatchID();
// Get the form data for each order
for ($i = 1; $i <= $_POST["order-count"]; $i++) {
// Check if the order form is disabled (removed)
$orderFormId = "order-form-$i";
$disabledFieldName = $orderFormId . "-disabled";
if (!isset($_POST[$disabledFieldName])) {
$itemName = $_POST["item-name-$i"];
$qty = $_POST["qty-$i"];
$supplierName = $_POST["supplier-name-$i"];
$supplierContact = $_POST["supplier-contact-$i"];
$supplierAddress = $_POST["supplier-address-$i"];
// Prepare the SQL statement
$sql = "INSERT INTO purchase (`Item Name`, `Qty`, `Supplier Name`, `Supplier Contact`, `Supplier Address`, `Batch ID`)
VALUES ('$itemName', '$qty', '$supplierName', '$supplierContact', '$supplierAddress', '$batchID')";
// Execute the SQL statement
if (!mysqli_query($conn, $sql)) {
echo "Error: " . mysqli_error($conn);
exit(); // Terminate the script if an error occurs
}
}
}
// Redirect back to createorder.php with success status
header("Location: ../purchase.php");
exit(); // Terminate the script after redirection
}
// Close the database connection
mysqli_close($conn);
/**
* Generate a random Batch ID.
* This function generates a random 6-digit number as the Batch ID.
*/
function generateBatchID()
{
return rand(100000, 999999);
}
?>
In my project I have a large form (about 100 inputs, selects, checkboxes, radios etc). which is normally saved in MYSQL database. PHP is my choice for the backend. The form has to have
a possibility to be saved at any stage (user logs out, closes the page or closes a browser ) to be continued at a later stage. I am planning to use vanilla JS without any frameworks.
I am not planning to include PWA at this stage-may be later. I know about the option to save each of the fields in a DB on a blur or mouseout event.
Not a best option considering submission of 100 of so inputs, so another option is required, therefore I am not entirely sure about the workflow- if somebody would provide a possible direction to follow-
any advice would be appreciated. Thanks.
George
I tried to use FETCH API and procedural SQL queries which became unwieldy very quick.
In my Vue app I’ve defined this mixin for a set of material design icons
import {
mdiUndo,
mdiRedo,
mdiFormatBold
} from '@mdi/js'
export default {
data() {
return {
icons: Object.freeze({
mdiUndo,
mdiRedo,
mdiFormatBold,
})
}
}
}
In reality, there are a lot more than 3 icons involved, and repeating them all twice is pretty tedious. If there was some way I could define an alias for the imports, then presumably I could iterate over them and avoid the duplication. I know you can define an alias when importing everything from a module e.g.
import * as myIcons from '@mdi/js'
But in my case I only want to import some of the icons from ‘@mdi/js’
I’m using MUI x-data-grid (community version) and want to download a record in CSV format by clicking on a custom button..
I know this can be achieved using the GridToolBar export option. But I want to trigger this on button click