Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
I am calling a Js file frontend-script from one of the active plugins in my plugin, However code is running smoothly but when I run sniffer on my plugin, sniffer throws an error “All output should be run through an escaping function” found ‘file_get_contents’. Can anybody help me out?
I have tried:
echo ” . file_get_contents(WC_UBP_URL . ‘/assets/js/frontend-script.js’) . ”;
Its working fine, any better solution except this?
I’m building a job listing page and job application form in my website using WordPress, Elementor, Contact Form 7 and ACF, I have created custom post type named career and add cutom fields for this custom pot type.
Also I have created template for the job pages using elementor theme builder, this template is meant to be used for any job that will be posted to the site.
The template has apply button at the end of the job page, where I need this button to pass the job title (custom field) to the application form page so I have set the link to be as following: “https://mywebsite.com/application_page/?page_title_value=page_title”
Then I have written JS code to get the parameter value from the link and to place it in the field which is as following:
<script>
document.addEventListener('DOMContentLoaded', function() {
var urlParams = new URLSearchParams(window.location.search);
var pageTitleValue = urlParams.get('page_title_value');
if (pageTitleValue) {
document.querySelector('#form-field-field_06ac371').value = pageTitleValue;
}
});
</script>
What happens is that the field is auto populated with the following “page_title” not the value it self, I’m having issue with passing the page title or post title from the job page to the application form page, hopefully someone could help on solving this.
I have been learning how to use ECharts recently.
I want to change the radians of the four corners of the echarts background, like this:
Operating environment:
echarts: 5.4.2
vue3
I tried using three methods.
1. Added option attribute: borderRadius: [20, 20, 20, 20], (this is the answer from chatgpt)
option = {
backgroundColor :'#999',
**borderRadius: [20, 20, 20, 20],**
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}
]
};
2. Set the radian of the echarts container itself.
<div ref="EnergyCalendar" style="border-radius: 20px;height: 320px; width: 100%;">
</div>
3. Wrap the div outside the echarts container and set the radian of the div.
<div style="border-radius: 20px;">
<div ref="EnergyCalendar" style="height: 320px; width: 100%;">
</div>
</div>
But none of these three methods are effective.
Can someone familiar with ECharts help explain how to implement this feature?
Thank you in advance for your answer!
In code, I am calling graphql API with request having parameters fields as array of 21 objects along with image.
If fields has 15 objects, the graphql API is went through fine. But, it is more than that, network request is failing.
Below is Cypress code wrote to fire graphql call..What can I do make graphql api successful, if fields parameter has more number of objects?
cy.intercept('/graphql', (req) => {
aliasImageUpload(req, 'sendImage')});
export const aliasImageUpload = (req, operationName) => {
const { body } = req;
if (body.byteLength) {
req.alias = `gql${operationName}ImageUpload`
}
}
How can I mock the UUID generation for the CreateFolderAdapter function, where the generated UUID is dynamically appended to a path, while encountering an “Interaction Not Found” error for the mocked CreateFolder operation?
func (FolderAdapter) CreateFolderAdapter(
svc *quicksight.QuickSight, createFolderParams models.CreateFolderRequest) (*quicksight.CreateFolderOutput, error) {
createFolderInput := &quicksight.CreateFolderInput{
AwsAccountId: aws.String(appConfig.AwsAccountId),
FolderId: aws.String(uuid.New().String()),
FolderType: aws.String(“SHARED”),
Name: aws.String(createFolderParams.FolderName),
}
result, err := svc.CreateFolder(createFolderInput)
return result, err
}
path: /accounts/{accountId}/folders/{dynamic-folder-Id}
He,
Im working on multi image upload, what im doing is on choosing images i display preview of all images then i submit all data.
My HTML:
<input type="file" id="newimage" name="newimage" multiple="" accept=".jpg,.jpeg,.png" class="inputfile" onchange="readURLNEW(this,'5');">
My JS:
function readURLNEW(input,cnt) {
if (input.files) {
var dispimgcnt = $('.singleImageCanvasContainer').length;
var filesAmount = input.files.length;
var total = filesAmount + dispimgcnt;
var imagesLoaded = 0;
if(total <= cnt)
{
$('.preloader').show();
for (i = 0; i < filesAmount; i++) {
var j = 1;
var reader = new FileReader();
reader.onload = function (e) {
var image = new Image();
image.onload = function (imageEvent) {
var canvas = document.createElement('canvas'),
max_size = 500,// TODO : max size for a pic
width = image.width,
height = image.height;
if (width > height) {
if (width > max_size) {
height *= max_size / width;
width = max_size;
}
} else {
if (height > max_size) {
width *= max_size / height;
height = max_size;
}
}
canvas.width = width;
canvas.height = height;
canvas.getContext('2d').drawImage(image, 0, 0, width, height);
var dataUrl = canvas.toDataURL('image/jpeg');
var blob = dataURLToBlob(dataUrl);
var icnt = dispimgcnt > 0 ? (dispimgcnt + j) : j;
var data = new FormData();
data.append('file', blob);
$.ajax({
url : "tempsave.php",
type: 'POST',
data: data,
async:false,
contentType: false,
processData: false,
success: function(data) {
if($('.singleImageCanvasContainer').length <= 0)
display = 'block';
var div = $("<div class='singleImageCanvasContainer pimage' id='singleImageCanvasContainer"+(icnt)+"' style='display: inline-block;position: relative;margin-right:5px;margin-top: 10px;' > <button type='button' class='singleImageCanvasCloseBtn' style='position:absolute;background:#61f573;border:none;font-size:1.2em;border-radius:50%;-webkit-appearance: none;padding: 2px 8px 2px 8px;left: 78%;'>"
+"<i class='fa fa-bars'></i>"
+"<div class='dropdown-content' style='display:none'><a href='#' class='main_pic' style='display:'>Set as main picture</a><a href='#' class='crop_pic'>Crop</a><a href='#' class='delete_pic'>Delete</a></div>"
+"</button><button type='button' class='singleImageCanvasMainBtn' style='display:"+display+";position:absolute;background:#61f573;border:none;font-size:1.2em;border-radius:50%;-webkit-appearance: none;padding: 2px 8px 2px 8px;display: '><i class='fa fa-check'></i></button>"
+"<img style='border-radius:20px; height: 150px;width: 150px;border:1px solid lightgray' src='"+data+"' class='file-img img-loading'></div>"
);
$('div.imgcontainer').append(div);
imagesLoaded++;
if(imagesLoaded == filesAmount){
allLoaded();
}
},
error: function() {
$('.preloader').hide();
alert("Failed!");
}
});
j++;
}
image.src = e.target.result;
};
reader.readAsDataURL(input.files[i]);
}
}
}
} My Problem is on submitting form using slow network(mobile network) it is very slow.
The weird timing scenario on choosing images:
1. if i choose five 5mb images at same time (server uploading time is 94seconds)
2. if i choose four 5mb image first, then i choose one 5mb image separatly(server uploading time is 37 seconds)
3. if i choose one 5mb image, then another 5mb image like this i choose five 5mb separatly then (server uploading time is 16 seconds)
did anyone faced this scenario? did i do anything wrong in js, because in php i just save images in folder and data in DB, so there is no issues in php side(its basic code only).
in js, i used render.onload and image.onload and ajax call, is there any issues lying there? please help!!
My code is running but it doesn’t open the links from column B. The script is being executed but I don’t know why it doesn’t open the link.
It should work this way: when I click in a cell from A column it should open the cell in B column and same row.
function onSelectionChange(e) {
var sheet = e.source.getActiveSheet();
var range = e.range;
var column = range.getColumn();
var numRows = range.getNumRows();
var numCols = range.getNumColumns();
var urls = [];
if (column === 1 && numCols === 1) {
for (var i = 1; i <= numRows; i++) {
var row = range.getRow() + i - 1;
var url = sheet.getRange(row, column + 1).getValue();
urls.push(url);
}
var html = "<script>";
for (var i = 0; i < urls.length; i++) {
html += "window.open('" + urls[i] + "', '_blank');";
}
html += "</script>";
}
}
I tried to use a onEdit trigger, but my goal is to open the link in B column when I select the A column cell equivalent row. I don’t want to edit A cell to trigger this script.
describe.only("DataTable Test", () => {
beforeEach(() => {
cy.getDataTableActBtn("@dataTable").as("action-menu");
});
it.only("should open view locations modal", () => {
cy.getDataTableActBtn("@dataTable").as("action-menu");
cy.get("@action-menu").click();
cy.getByDataCy("view-locations")
.should("exist")
.should("be.visible")
.click();
cy.contains("Location List", { matchCase: false }).should("be.visible");
});
});
I tried by applying click ({force: true}). Still it’s not working.
When an input field is selected on iOS Safari, about ≈150px is injected, outside of the DOM, below the HTML tag
I’ve spent some time messing around with different height values (SVH is preferred in my instance) and overflow style settings, using JS and CSS, but none of that has an impact because the space added to the webpage appears to be independent of the DOM and inaccessible via the console
I’ve linked a video to Imgur that shows the issue on mobile. You can see the HTML tag turn blue when I hover over the element in the console
Has anyone found a solution for this?
https://codesandbox.io/s/purple-dew-fibs5k?file=/src/index.tsx
I need to extract numbers from the string for that I have preferred the following regix
var str = "1 1/2 percentage";
var n = str.match(/[0-9]+([/.]d+)?/g);
console.log(n);
But I am not able to restrict negative numbers in the string .
Valid Scenario:
"1.5 % dividend applied"
"1 1/2 percentage"
"2.5 percentages"
"10% dividend"
"10 percentages applied"
Invalid Scenario:
"-1 1/2 percentage"
"-1.5 % dividend applied"
"-10% dividend
Code suggestion will be appriciated.Thank you
I’m Developing a Component library for my company internal projects and will use that as a npm package.
I’m using Mantine as a starter and will add customization using tailwind.
I wrote this as a test button just to check things
import React from "react";
import { Button as MantineButton } from "@mantine/core";
import PropTypes from "prop-types";
const ButtonTest = ({ label, backgroundColor = "red", handleClick }) => {
const style = {
backgroundColor,
border: "none",
padding: "10px",
};
return (
<div>
<MantineButton onClick={handleClick} style={style}>
{label}
</MantineButton>
</div>
);
};
ButtonTest.prototypes = {
label: PropTypes.string,
backgroundColor: PropTypes.string,
handleClick: PropTypes.func,
};
export default ButtonTest;
and in index file on root in react app I’m exporting this component and then publish this component on npm.
on another app when i tried to use this, it returns this error
TypeError: Cannot read properties of null (reading 'useContext')
I know this error is related to MantineProvider but where can i use mantine provider in my code to fix this error
i tried to wrap my app in mantine provider in another project where i’m using this package but still same error.
i am trying to understand the difference between onUpdated and nextTick. i created the below posted example.actually, i expected the text displayed inside onUpdated for both of the 1st click and the 2nd click is to be the same, because as stated in the docs here
Registers a callback to be called after the component has updated its DOM tree due to a reactive state change
according to my understanding, the DOM-tree is the virtual DOM in which all the DOM nodes are to be updated first before these updates are applied on the actual DOM. the onupdated will be called when the virtual DOM is updated and while the updates are not
yet reflected or applied on the the actual DOM. if we want to see the updates reflected on the actual DOM,nextTick must be used
for the aforementioned reasons, i expected that the text in handleClick, onBeforeUpdate and onupdated are to be the same.
please correct me if i misunderstood the difference between onUpdated and nextTick
code:
<template>
<div>
<button @click="handleClick">Insert/Remove</button>
<div v-if="show" ref="content">I am an element</div>
</div>
</template>
<script setup>
import { reactive, ref} from 'vue'
import { onBeforeMount,onMounted,onUpdated,onBeforeUpdate } from 'vue'
const show = ref(true)
const content = ref()
const state = reactive({count: 0})
const handleClick = () => {
show.value = !show.value
console.log("handleClick:",show.value, content.value)
// nextTick(() => {
// // console.log(show.value, content.value)
// })
}
onMounted(()=>{
console.log("onMounted");
})
onBeforeUpdate(()=>{
console.log("onBeforeUpdate.show.value, content.value:",show.value, content.value)
})
onUpdated(()=>{
console.log("onUpdated.show.value, content.value:",show.value, content.value)
})
output
//after first click on Insert/Remove->handleClick
handleClick: false <div>I am an element</div>
App.vue:80 onBeforeUpdate.show.value, content.value: false <div>I am an element</div>
App.vue:83 onUpdated.show.value, content.value: false null
//after 2nd click on Insert/Remove->handleClick
handleClick: true null
App.vue:80 onBeforeUpdate.show.value, content.value: true null
App.vue:83 onUpdated.show.value, content.value: true <div>I am an element</div>
I have a java line of code that I want to convert to typescript.
NdefRecord record = new NdefRecord(NdefRecord.TNF_MIME_MEDIA, "text/vcard".getBytes(), new byte[] {}, messagebytes);
NdefRecord is a function that takes the following parameters: (tnf:number,type:string|number[],id:string|number[],payload:string|number[])
I tried several approaches to writing getBytes alternatives in typescript:
var vcard= `BEGIN:VCARDnVERSION:2.1nN:;${firstName}nORG: ${org}nEMAIL:${email}nEND:VCARD`;
var payload = this.nfc.stringToBytes(vcard)
var encoder = new TextEncoder();
var array = Array.from(encoder.encode("text/vcard"))
1:
record = this.ndef.record(tnf, array, [], payload);
2:
record = this.ndef.record(tnf, encoder.encode("text/vcard").toString(), [], payload);
3:
record = this.ndef.record(tnf, this.nfc.stringToBytes("text/vcard"), [], payload);
The first and third approaches yield a JSON error, whereas the second returns the contents of the vcard as a string.
Is there any way to get the bytes of the record type “text/vcard”?
[enter image description here](https://i.stack.imgur.com/EDay8.jpg)
My function is not responding on my input element on the interest to date
I was expecting for the function to calculate the interest to date and show on the page input element when I add calculations
I have a marks array containing objects with id and marks properties. I also have a user array containing objects with id, name, grade & result properties.
var marks = [
{ id: '1', marks: 70 },
{ id: '2', marks: 40 },
{ id: '3', marks: 95 },
{ id: '4', marks: 50 },
];
var user = [
{ id: '1', name: 'sam', grade: 1, result: 'Pass' },
{ id: '2', name: 'peter', grade: 2, result: 'Pass' },
{ id: '5', name: 'John', grade: 1, result: 'Fail' },
{ id: '6', name: 'anna', grade: 3, result: 'Fail' },
];
I want to combine the 2 array objects and generate the following result. If a match for id is found,we need to combine the objects else place null for non-existent properties in both the arrays
var result = [
{ id: '1', marks: 70, name: 'sam', grade: 1, result: 'Pass' },
{ id: '2', marks: 40, name: 'peter', grade: 2, result: 'Pass' },
{ id: '3', marks: 95, name: null, grade: null, result: null },
{ id: '4', marks: 50, name: null, grade: null, result: null },
{ id: '5', marks: null, name: 'John', grade: 1, result: 'Fail' },
{ id: '6', marks: null, name: 'anna', grade: 3, result: 'Fail' },
];
I have tried the following piece of code but it doesn’t generate the desired result. It generates values based only on the first array
marks.forEach((item) => map.set(item.id, item));
user.forEach((item) => map.set(item.id, { ...map.get(item.id), ...item }));
const mergedArr = Array.from(map.values());
Can a workaround for this be suugested?