Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
I’m currently exploring a webpage where clicking a button triggers the addition or removal of classes from an HTML tag. The question is, before clicking the button, is there a way to identify the classes that will be affected?
I attempted to retrieve the content of the onclick attribute of a button element using the getAttribute() method in JavaScript, but it returns null.
I want the user to be able to upload a video and then, by clicking a button, load the video into a tag to view.
Here is an example:
HTML:
function loadvideo() { video = document.getElementById('videoinput').files[0]; videoelement = document.getElementById('videopreview'); videoelement.src = video; ///I don't think this will work as we need to read the file first?? }<html> <body> <input type="file" accept="mp4" id="videoinput"> <video id="videopreview"> <button onclick="loadvideo()">Load The Video</button> <script type="javascript src="myscript.js"> </body> </html>I am working with prototype.js where i need to pass nested inner function as a callback function to another function which is in different js file.
I have a js file named adapter.js which has below methods.
function LaunchAdapter()
{
this.paramMap = {};
this.paramIndex = [];
}
LaunchAdapter.prototype.addPending = function (windowName) {
var paramDescription = this.paramMap[windowName];
var activeEditor = paramDescription.editor;
var remainingDocsToBeOpened = paramDescription.documents.length;
this.openNextDocumentCallback = launcherAdapter.openNextDocument.bind(launcherAdapter);
this.openNextDocument = function() {
if (remainingDocsToBeOpened > 0) {
var params = paramDescription.documents.shift();
_openDocumentInEditor(activeEditor, params, this.openNextDocumentCallback);
remainingDocsToBeOpened--;
} else {
paramDescription.documents = [];
var remainingDocs = 0;
for (var j = 0; j < this.paramIndex.length; j++)
{
remainingDocs += this.paramMap[this.paramIndex[j]].documents.length;
}
if (remainingDocs === 0)
{
// No more queued parameter lists? All done, close adapter window
_closeWindow();
}
}
}
this.openNextDocument();
};
function _openDocumentInEditor(anotherWindow, params, callback) {
alert("callback: " + callback);
editor.editors.add("form1", params, callback); // Pass the callback
}
As shown in the above code, we are passing the inner function this.openNextDocumentCallback = launcherAdapter.openNextDocument.bind(launcherAdapter); as a callback to another function in different js file. But i am getting launcherAdapter.openNextDocument as undefined.
Could you please help me with where i am going wrong?
I have a form in which when input is clicked the label goes through a transition. If a value is entered in the input field, the label stays there. But the transition for when a value is entered is not working for textarea.
Input labels are behaving correctly but not the textrea label
My HTML for form:
if($.trim($("textarea").val()) != '') {
$("textarea").css("border: 2px solid blue");
}.input-field {
position: relative;
margin-bottom: 18px;
}
.input-field input,
.input-field textarea {
width: 100%;
height: 40px;
font-size: 18px;
padding: 0 15px;
border: 1px solid grey;
background: transparent;
color: black;
outline: none;
}
.input-field label {
position: absolute;
top: 50%;
left: 15px;
transform: translateY(-50%);
color: grey;
font-size: 19px;
pointer-events: none;
transition: 0.3s;
}
input:focus,
textarea:focus {
border: 1px solid black;
}
input:focus~label,
input:valid~label,
textarea:focus~label,
{
top: -5px;
left: 15px;
font-size: 16px;
padding: 0 2px;
background: white;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="input-field">
<input type="text" required spellcheck="false">
<label>Name</label>
</div>
<div class="input-field">
<input type="text" required spellcheck="false">
<label>Email</label>
</div>
<div class="input-field">
<textarea style="min-height: 45px "> </textarea>
<label>Your Message</label>
</div>I tried using jQuery css() to target the the textarea border on textarea input just to see if I can do the same for its label, but its not working.
I want the label for textarea to behave as ther labels for input are.
Currently, I’m starting to learn about the Nestjs and perform some crud operation but before start, I’m stuck in a database connection issue.
Also, My scenario is different compared to a normal database connection. I’m fetching the database credential from the Azure key vault then after I will put the credential in app.module.ts.
But, Every time it shows this.mysql.createPool is not a function error message. I don’t know why.
Also, you can refer below screenshot.
Also, I have put some code below for your understanding.
azureKeyVault.service.ts
import { KeyVaultSecret, SecretClient } from '@azure/keyvault-secrets';
import { DefaultAzureCredential } from '@azure/identity';
import { TypeOrmModuleOptions } from '@nestjs/typeorm';
import { Injectable } from '@nestjs/common';
interface credential {
username: string;
password: string;
}
export interface dbConfig {
type: string;
host: string;
port: number;
username: string;
password: string;
database: string;
entities: [string];
synchronize: boolean;
autoLoadEntities: boolean;
retryAttempts: number;
}
@Injectable()
class AzureKeyVaultService {
/**
* Azure key vault service
*/
public async azureKeyVault() {
const keyVaultEndpoint =
`https://${process.env.AZURE_KV_ENDPOINT}.vault.azure.net`;
/* Fetch Default Azure Credential */
const credential: DefaultAzureCredential = new DefaultAzureCredential();
// /* Create server client using endpoint and credential */
const client: SecretClient = new SecretClient(keyVaultEndpoint, credential);
return await client.getSecret(process.env.AZURE_KV_NAME);
}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
public async databaseConfiguration(): TypeOrmModuleOptions {
const { value }: KeyVaultSecret = await this.azureKeyVault();
const dbCredentialData = JSON.parse(value);
console.log('dbCredentialData', dbCredentialData);
const { username, password }: credential =
dbCredentialData[process.env.AZURE_KV_KEY];
return {
type: 'mysql',
driver: 'MysqlDriver',
host: dbCredentialData?.masterhost,
port: 3306,
username: 'development',
password: password,
database: process.env.DB_MAIN,
entities: [__dirname + '/../**/*.entity.js'],
synchronize: false,
autoLoadEntities: true,
retryAttempts: 1,
};
}
}
const AzureKeyVault = new AzureKeyVaultService();
export { AzureKeyVault };
app.module.ts
import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { ConfigModule } from '@nestjs/config';
import { TypeOrmModule } from '@nestjs/typeorm';
import { AzureKeyVault } from './config/azureKeyVault.service';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
@Module({
imports: [
ConfigModule.forRoot({
isGlobal: true,
envFilePath: '.env',
}),
// TypeOrmModule.forRoot(AzureKeyVault.databaseConfiguration()),
TypeOrmModule.forRootAsync({
useFactory: async () => AzureKeyVault.databaseConfiguration(),
}),
],
controllers: [AppController],
providers: [AppService],
})
export class AppModule {}
Folder structure:
If anyone knows what is the issue please reply.
Thank You.
I am using document.execCommand("insertText", false, /* some text */) in a textarea to replace text while allowing Ctrl+Z undo to work; this is supported in every browser I have tested but I know this is deprecated. What is/Is there a better working alternative for this specific case?
Other StackOverflow answers have given alternatives but mostly focus on contenteditable elements and copy/paste, which is irrelevant here.
I also don’t feel very comfortable making my own undo/redo stack as it would increase complexity too much. However, if it’s the only feasible solution I’m fine doing it.
very new to Scrapy in particular and somewhat new to coding in general.
I’m trying to parse some data for my school project from this website: https://www.brickeconomy.com/sets/theme/sets/theme/ninjago
I want to parse data from a page, then move onto the next one and parse similar data from that one. However, since the “Next” page button is not a simple link but a Javascript command, I’ve set up the code to use a LUA script to simulate pressing the button to move to the next page and receive data from there, which looked something like this:
import scrapy
from scrapy_splash import SplashRequest
script = """
function main(splash, args)
assert(splash:go(args.url))
local c = args.counter
for i=1,c do
local button = splash:select_all('a.page-link')[12]
button:click()
assert(splash:wait(5))
end
return splash:html()
end
"""
class LegoTestSpider(scrapy.Spider):
name = 'legotest'
def start_requests(self):
url = 'https://www.brickeconomy.com/sets/theme/ninjago'
yield SplashRequest(
url=url,
callback=self.parse,
endpoint='execute',
args={'wait': 1, 'lua_source': script, 'url': url}
)
def parse(self, response):
products = response.css('div.mb-5')
for product in products:
yield {
'name': product.css('h4 a::text').get(),
'link': product.css('h4 a').attrib['href']
}
However, although this worked, I wanted to be able to create a loop that went through all the pages and then returned data parsed from every single page.
I attempted to create something like this:
import scrapy
from scrapy_splash import SplashRequest
lua_script = """
function main(splash, args)
assert(splash:go(args.url))
while not splash:select('div.mb-5') do
splash:wait(0.1)
print('waiting...')
end
return {html=splash:html()}
end
"""
script = """
function main(splash, args)
assert(splash:go(args.url))
local c = args.counter
for i=1,c do
local button = splash:select_all('a.page-link')[12]
button:click()
assert(splash:wait(5))
end
return splash:html()
end
"""
class LegoTestSpider(scrapy.Spider):
name = 'legotest'
def start_requests(self):
url = 'https://www.brickeconomy.com/sets/theme/ninjago'
yield SplashRequest(
url=url,
callback=self.parse,
endpoint='execute',
args={'wait': 1, 'lua_source': lua_script, 'url': url}
)
def parse(self, response):
# Checks if it's the last page
page_numbers = response.css('table.setstable td::text').getall()
counter = -1
while page_numbers[1] != page_numbers[2]:
counter += 1
yield SplashRequest(
url='https://www.brickeconomy.com/sets/theme/ninjago',
callback=self.parse_nextpage,
endpoint='execute',
args={'wait': 1, 'lua_source': script, 'url': 'https://www.brickeconomy.com/sets/theme/ninjago','counter': counter}
)
def parse_nextpage(self, response):
products = response.css('div.mb-5')
for product in products:
yield {
'name': product.css('h4 a::text').get(),
'link': product.css('h4 a').attrib['href']
}
However, when I run this code, it returns the first page of data, then gives a timeout error:
2024-02-18 17:26:18 [scrapy.downloadermiddlewares.retry] DEBUG: Retrying <GET https://www.brickeconomy.com/sets/theme/ninjago via http://localhost:8050/execute> (failed 1 times): 504 Gateway Time-out
I’m not sure why this happens, and would like to find a solution to fix it.
i am trying to get images from my local system also build a website for it and also a server using express js . but the error goes like Not allowed to local resource
// Server.js
const http = require("http");
const fs = require("fs");
const path = require("path");
const server = http.createServer((req, res) => {
// Handle requests based on the URL
if (req.url === "/" || req.url === "/index.html") {
// Serve the index.html file
const indexPath = path.join(__dirname, "public", "index.html");
fs.readFile(indexPath, "utf8", (err, data) => {
if (err) {
res.writeHead(500, { "Content-Type": "text/plain" });
res.end("Internal Server Error");
} else {
res.writeHead(200, { "Content-Type": "text/html" });
res.end(data);
}
});
} else if (req.url === "/api/data") {
// Sample API endpoint
res.writeHead(200, { "Content-Type": "application/json" });
res.end(JSON.stringify({ message: "Hello from the server!" }));
} else {
// Serve static files (CSS, JS)
const filePath = path.join(__dirname, "public", req.url);
fs.readFile(filePath, "utf8", (err, data) => {
if (err) {
res.writeHead(404, { "Content-Type": "text/plain" });
res.end("Not Found");
} else {
const contentType =
path.extname(req.url) === ".css" ? "text/css" : "text/javascript";
res.writeHead(200, { "Content-Type": contentType });
res.end(data);
}
});
}
});
const port = 3000;
server.listen(port, () => {
console.log(`Server is running at http://localhost:${port}`);
});
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Demo of Tryitfirst</title>
</head>
<body>
<div class="Main">
<div class="child">
<h2>Model Images Folder</h2>
<input
type="text"
id="idnamem"
oninput="fun()"
value=""
placeholder="Enter Model Images Folder Name"
/>
</div>
<div class="child">
<h2>Cloth Images Folder</h2>
<input
type="text"
id="idnamec"
oninput="fun()"
value=""
placeholder="Enter Cloth Images Folder Name"
/>
</div>
<div class="child">
<h2>Result Images Folder</h2>
<input
type="text"
id="idnamer"
oninput="fun()"
value=""
placeholder="Enter Result Images Folder Name"
/>
</div>
</div>
<br /><br />
<div class="second">
<label for="fileInput">Select CSV:</label>
<div id="file-select" class="folder-container">
<input id="fileInput" type="file" accept=".csv" />
</div>
<button onclick="readFile()">Display Images</button>
</div>
<hr />
<div class="button-container">
<button id="Prev">Prev</button>
<button id="page">0</button>
<button id="Next">Next</button>
</div>
<div id="image-container"></div>
<script src="script.js" type="text/javascript"></script>
</body>
</html>
index.js
// Global variables to store folder paths
let modelfolderpathglobal;
let clothfolderpathglobal;
let resultfolderpathglobal;
let current = 0;
let pg = 0;
let maximages = 0;
var reader = new FileReader();
let arrayg = [];
let next = document.getElementById("Next");
let prev = document.getElementById("Prev");
let page = document.getElementById("page");
next.addEventListener("click", () => {
current += 5;
pg++;
page.innerHTML = pg;
imageload();
});
prev.addEventListener("click", () => {
current -= 5;
if (current >= 0) {
pg--;
page.innerHTML = pg;
} else {
current = 0;
pg = 1;
page.inertHTML = pg;
}
imageload();
});
// Function to dynamically generate text fields based on user input
function fun() {
// Get the number of text fields for model images
var model_image = document.getElementById("idnamem").value;
for (var i = 0; i < model_image; i++) {
var textfield = document.createElement("input");
textfield.type = "text";
textfield.value = "";
document.getElementById("form").appendChild(textfield);
}
modelfolderpathglobal = model_image;
// Get the number of text fields for cloth images
var cloth_image = document.getElementById("idnamec").value;
for (var i = 0; i < cloth_image; i++) {
var textfield = document.createElement("input");
textfield.type = "text";
textfield.value = "";
document.getElementById("form").appendChild(textfield);
}
clothfolderpathglobal = cloth_image;
// Get the number of text fields for result images
var result_image = document.getElementById("idnamer").value;
for (var i = 0; i < result_image; i++) {
var textfield = document.createElement("input");
textfield.type = "text";
textfield.value = "";
document.getElementById("form").appendChild(textfield);
}
resultfolderpathglobal = result_image;
console.log(model_image, cloth_image, result_image);
}
// FileReader object for reading files
// Callback function to handle file load event
reader.onload = function (e) {
var csv = e.target.result; // Get the file content as a string
var array = []; // Initialize an empty array to store the data
var lines = csv.split("n"); // Split the CSV by line breaks
// Parse CSV data
for (var i = 0; i < lines.length; i++) {
var values = lines[i].split(",");
array.push(values);
arrayg.push(values);
}
arrayg = array;
maximages = arrayg.length; // Update global array with parsed CSV data
};
// Function to read selected file as a text file
function readFile() {
reader.readAsText(document.getElementById("fileInput").files[0]);
setTimeout(() => {
imageload();
pg++;
page.innerHTML = pg;
}, [300]);
}
// Function to load images dynamically
function imageload() {
var container = document.getElementById("image-container");
while (container.firstChild) {
container.removeChild(container.firstChild);
}
if (container.firstChild) container.removeChild(container.firstChild);
for (var i = current; i < current + 5; i++) {
let imgm = document.createElement("img");
imgm.alt = "nothing";
let imgc = document.createElement("img");
imgc.alt = "nothing";
let imgr = document.createElement("img");
imgr.alt = "nothing";
// Set image sources based on global folder paths and CSV data
imgm.src = modelfolderpathglobal + "/" + arrayg[i][0];
imgm.alt = "nothing";
imgc.src = clothfolderpathglobal + "/" + arrayg[i][1];
imgc.alt = "nothing";
imgr.src = resultfolderpathglobal + "/" + arrayg[i][0];
imgr.alt = "nothing";
// Create elements to display images
// let textSpan = document.createElement("span");
// textSpan.id = "Count";
let CountDiv = document.createElement("div");
CountDiv.id = "CountDiv";
CountDiv.append(imgm);
CountDiv.append(imgc);
CountDiv.append(imgr);
// CountDiv.append(textSpan);
container.appendChild(CountDiv); // Append image container to main container
}
}
this is my code but throwing error like the image below
error image showing error in console
Help me to resolve this error as this is very important to me
when a user click a submit button I prevent the event in Alpine.js opening a prompt dialog where the user have to insert a card number. After click ok, that value have to be catched in a hidden input value and then I fire a submit event. Thid is Blade and Alpine.Js code:
<form x-data="{ card: '' }" x-on:submit.prevent="card = prompt('Insert card'); if(card !== null) $el.submit()" method="POST" action="{{ route('member.store', ['identity' => $identity->id]) }}">
@csrf
<input type="hidden" x-bind:value="card" name="tessera"/>
<button type="submit"><img class="object-scale-down h-6 ml-5" src="{{asset('images/card_add.png')}}" title="Aggiungi tessera" alt="Aggiungi tessera"></button>
</form>
The problem is the card value of hidden input is always null. How can I solve this problem?
Thanks in advance
New to Javascript, I’m trying to adapt a script used to display SVG images, currently the script reads the values form within the script, I want to adapt this to read the values from a CSV, the issue I have is the script doesn’t seem to interpret the value correctly, the column I’m having issues with is “nodeStyle” ,if I change the column variable from nodeStyle to {width:100,height:100} it works but it wont read it from CSV, any help would be great
//Data.CSV format
//id, x, y, href, nodeStyleW,nodeStyle,properties,label_text
//NODE22,650,50,/icon.png,{width:100,height:100},,NODE22
fetch('/data.csv')
.then(response => response.text())
.then(data => {
const rows = data.split('n').slice(1); // Skip header row
rows.forEach(row => {
const [id, x, y, href, nodeStyle, properties, label_text] = row.split(/,(?![^{]*})/);
net.addNode(id,parseInt(x),parseInt(y),href,nodeStyle,properties,label_text);
});
});
// Mode added via script
net.addNode("NODE2",600,50,"/images/icon.png",{width:100,height:100},"","","NODE2");
I have tried adding the value directly and this works
net.addNode(id,parseInt(x),parseInt(y),href,nodeStyle,properties,label_text);
net.addNode(id,parseInt(x),parseInt(y),href,{width:100,height:100},properties,label_text);
I have a WordPress news portal website that has over 30,000 posts. The website is experiencing performance issues, and the client wants to use Next.js for the frontend to improve performance. I am wondering which router would be better in this case, as the routes are not too complex. I have experimented with both of them, and I understand that the app router is preferred over the pages router. However, I also found out that the pages router is simpler to use, and I don’t want to complicate the project by using the app router if the difference is not that big.
I tried both of them
I am trying to Build Rock paper scissor game in this everything is working fine. But the issue is after the end of 5 rounds the endGame function is not executing immediately it is showing result after i click on buttons again. The result should display after the end of 5 round without me clicking the button again.
const choices = ["Rock","Paper","Scissor"];
const buttons = document.querySelectorAll("button");
let playerid = document.getElementById("playerid");
let computerid = document.getElementById("computerid");
const playermarks = document.getElementById("playerscore");
const computermarks = document.getElementById("computerscore");
const res = document.getElementById("res");
let computer;
let computerSelection;
let playerSelection;
//computer choice
function computerChoice(){
computerSelection = choices[Math.floor(Math.random()*choices.length)];
computerid.innerHTML = computerSelection;
console.log("computerSelection",computerSelection);
}
buttons.forEach((btn) => {
btn.addEventListener("click",(playerChoice));
})
//player choice
function playerChoice(e){
playerSelection= e.target.innerHTML;
playerid.innerHTML =playerSelection;
console.log(" playerSelection", playerSelection);
computerChoice();
playGame();
}
//Round
function playRound(computerSel,playerSel){
return (playerSel == computerSel) ? "Its a Tie" :
((computerSel == "Rock" && playerSel == "Paper") ||
(computerSel == "Paper" && playerSel == "Rock") ||
(computerSel == "Scissor" && playerSel == "Rock")) ? "computer won" : "player won";
}
// 5 Round
let playerScore = 0;
let computerScore = 0;
let round=0
function playGame(){
if(round < 5){
let result = playRound(computerSelection,playerSelection);
console.log("result",result);
if(result == "computer won"){
computerScore++;
computermarks.innerHTML = computerScore;
console.log("computer Score",computerScore);
}else if(result == "player won"){
playerScore++;
playermarks.innerHTML = playerScore;
console.log("playerscore",playerScore);
}
round++;
}else{
endGame(computerScore,playerScore);
}
}
function endGame(cs,ps){
if(cs > ps){
res.innerHTML = "The Winner is Computer";
console.log("The Winner is Computer");
}else if (cs < ps){
console.log("The Winner is Computer");
res.innerHTML = "The Winner is Computer";
}else{
console.log("Its a tie")
res.innerHTML = "Its a tie";
}
}
I have also tried with else if(round == 5) and else if( round == 5) or with 4 but still it is showing result after i click on button. With for loop i was facing lot of issues hence tried with if else.
I am trying to add an even listener programmatically, to a photoshop plugin using this code:
actionObject = [];
actionObject[0] = {name: "A1", id: "95ce"};
actionObject[1] = {name: "B2", id: "9dk2"};
.
.
actionObject[10] = {name: "H6", id: "9334"};
for (i = 0; i < actionObject.length; i++ ){
console.log("#btn" + actionObject[i].name);
var action = actionObject[i];
$("#btn" + action.name).click(async function () {
await ExecuteAsModal(() => runAction(action));
});
}
The problem I am facing is that when this even is triggered, regardless of the button I am pressing, it always tries to run “runAction” with the last ‘action’ in the actionObject array.
In this case it always tries to run it with
action={name: "H6", id: "9334"}
How can Make sure each button runs “actionObject” with it’s proper “action”?
The search box that I have added to my HTML table is only working on the current page of the table and not on the other paginated pages of the table. I want it to show the search result from anywhere in the entire table.
And I also want to show the current page row count and total page row count at the bottom of my table in this format, which keeps changing as per the table rows, e.g., “Showing 1 to 2 of 8.” You can see it at the bottom of the page. It will be really helpful if the expert helps me out with this.
<!-- Script Starts -->
<!-- Table Search Script Starts -->
function myFunction() {
var input, filter, table, tr, td, i, txtValue, pagination;
input = document.getElementById("myInput");
filter = input.value.toLowerCase();
table = document.getElementById("paginated-list");
tr = table.getElementsByTagName("tr");
for (i = 1; i < tr.length; i++) {
alltags = tr[i].getElementsByTagName("td");
isFound = false;
for (j = 0; j < alltags.length; j++) {
td = alltags[j];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toLowerCase().indexOf(filter) > -1) {
tr[i].style.display = "";
j = alltags.length;
isFound = true;
}
}
}
if (!isFound && tr[i].className !== "header") {
tr[i].style.display = "none";
}
}
}
<!-- Table Search Script Ends -->
<!-- Table Pagination Script Starts -->
const paginationNumbers = document.getElementById("pagination-numbers");
const pageCount_ele = document.getElementById("pageCount") // Handle the page values
const currentPage_ele = document.getElementById("currentPage")
const paginatedList = document.getElementById("paginated-list");
const listItems = paginatedList.querySelectorAll("tbody tr");
const nextButton = document.getElementById("next-button");
const prevButton = document.getElementById("prev-button");
const paginationLimit = 2;
const pageCount = Math.ceil(listItems.length / paginationLimit);
let currentPage = 1;
const disableButton = (button) => {
button.classList.add("disabled");
button.disable = true;
};
const enableButton = (button) => {
button.classList.remove("disabled");
button.disable = false;
};
const handlePageButtonsStatus = () => {
if (currentPage === 1) {
disableButton(prevButton);
} else {
enableButton(prevButton);
}
if (pageCount === currentPage) {
disableButton(nextButton);
} else {
enableButton(nextButton);
}
};
const handleActivePageNumber = () => {
currentPage_ele.innerText = currentPage
enableButton(prevButton) // Assing them as clickable
enableButton(nextButton)
if (currentPage == pageCount){
disableButton(nextButton) // if last page disable next
}
if (currentPage == 1){
disableButton(prevButton) // if 1st disable prev
}
};
const appendPageNumber = (index) => {
const pageNumber = document.createElement("button");
pageNumber.className = "pagination-number";
pageNumber.innerHTML = index;
pageNumber.setAttribute("page-index", index);
pageNumber.setAttribute("aria-label", "Page " + index);
paginationNumbers.appendChild(pageNumber);
};
const getPaginationNumbers = () => {
};
const setCurrentPage = (pageNum) => {
currentPage = pageNum;
handleActivePageNumber();
handlePageButtonsStatus();
const prevRange = (pageNum - 1) * paginationLimit;
const currRange = pageNum * paginationLimit;
listItems.forEach((item, index) => {
item.classList.add("hidden");
if (index >= prevRange && index < currRange) {
item.classList.remove("hidden");
}
});
};
window.addEventListener("load", () => {
getPaginationNumbers();
setCurrentPage(1);
prevButton.addEventListener("click", () => {
setCurrentPage(currentPage - 1);
});
nextButton.addEventListener("click", () => {
setCurrentPage(currentPage + 1);
});
pageCount_ele.innerText = pageCount
});
<!-- Table Pagination Script Ends -->
<!-- Script End --> .result {
text-align: center;
padding-bottom: 20px;
width: 100%;
}
.canel-trains-grids {
float: left;
width: 100%;
margin-bottom: 20px;
}
.canel-trains-grids .left-cancel {
float: left;
width: 60%;
margin-top: 10px;
}
.canel-trains-grids .left-cancel span {
float: left;
font-size: 16px;
background: #34A853;
color: #fff;
font-weight: 400;
padding: 8px 8px;
border-radius: 3px;
text-align: left;
line-height: 1.5em;
width: auto;
}
.canel-trains-grids .right-cancel {
float: right;
width: 30%;
margin-top: 10px;
}
.canel-trains-grids .right-cancel label {
float: left;
vertical-align: middle;
line-height: 39px;
font-size: 16px;
color: #000;
font-weight: 400;
}
.canel-trains-grids .right-cancel input {
width: 230px;
height: 22px;
border: 1px solid #dae9f3;
border-radius: 5px;
padding: 8px 8px 8px 16px;
float: right;
}
.canel-trains-grids .right-cancel input:focus {
outline: none;
}
/* Responsive Table Start */
.rstable {
width: 100%;
margin: 0 auto;
padding: 16px 0px;
}
.rstable table {
font-family: calibri, sans-serif;
border-collapse: collapse;
font-size: 16px;
width: 100%;
font-weight: 400;
}
.rstable tr {
border-bottom: 1px solid #ccc;
}
.rstable tr td {
text-align: left;
padding: 9px;
color: #333;
}
.rstable th {
text-align: left;
padding: 10px 9px;
background: #004287;
color: #fff;
font-weight: 500;
}
.rstable tr:nth-child(even) {
background: #f9fbfdc4;
}
.rstable tr:nth-child(odd) {
background: #dae9f3;
}
.rstable tr td a {
color: #004287;
font-size: 16px;
}
@media (min-width: 768px) and (max-width: 1023px) {
.rstable table {
font-size: 15px;
}
}
@media screen and (max-width: 767px) {
.rstable table {
font-size: 16px;
font-weight: 400;
}
.rstable thead {
display: none;
}
.rstable td:first-child {
text-align: left;
display: inline-grid;
width: 90%;
}
.rstable td {
text-align: left;
display: inline-grid;
width: 26%;
vertical-align: top;
color: #333;
font-weight: 400;
}
.rstable td:before {
content: attr(data-title);
font-weight: 500;
padding-bottom: 5px;
font-size: 16px;
color: #000;
}
}
@media (min-width: 280px) and (max-width: 319px) {
.rstable td {
width: 23%;
}
}
/* Responsive Table Ends */
.arrow-right,
.arrow-left {
display: block;
margin: 10px auto;
width: 8px;
height: 8px;
border-top: 2px solid #000;
border-left: 2px solid #000;
}
.arrow-right {
transform: rotate(135deg);
}
.arrow-left {
transform: rotate(-45deg);
}
.hidden {
display: none;
}
.pagination-container {
width: calc(100% - 0rem);
display: flex;
align-items: center;
position: relative;
bottom: 0;
padding: 0rem 0;
justify-content: right;
/* text-align: center; */
}
.pagination-number,
.pagination-button {
font-family: calibri, sans-serif;
font-size: 16px;
background-color: #0085b6;;
border: none;
margin: 0.1rem 0.1rem;
cursor: pointer;
height: 2rem;
width: 2rem;
border-radius: 0.2rem;
}
.newpagination-numbers {
font-family: calibri, sans-serif;
font-size: 16px;
background-color: #333;;
border: none;
margin: 0.1rem 0.1rem;
height: 2rem;
width: 2rem;
line-height: 2rem;
border-radius: 0.2rem;
color: #fff;
text-align: center;
}
.newpagination-numbers:hover {
background: #34A853;
}
.pagination-number:hover,
.pagination-button:not(.disabled):hover {
color: #fff !important;
background: #FBBC05;
}
button.disabled {
background-color: #c82333; /*Make it whatever color you want*/
}
.disabled {
color: #333 !important;
pointer-events: none !important;
cursor: not-allowed !important;
}
span.disabled {
border-color: #333 !important;
}
.pagination-number.active {
color: #fff;
background: #0085b6;
} <div class="result">
<div class='canel-trains-grids'>
<div class='left-cancel'><span>22 Rajdhani Express Trains Listed</span>
</div>
<div class='right-cancel'>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder='Enter Train Number'>
</div>
</div>
</div>
<!-- Result Table Starts -->
<div class="rstable">
<table id="paginated-list">
<thead>
<tr>
<th>Train</th>
<th>Type</th>
<th>Zone</th>
<th>From</th>
<th>Dep</th>
<th>To</th>
<th>Arr</th>
<th>Dur</th>
<th>Halts</th>
<th>Runs On</th>
<th>Dist</th>
<th>Speed</th>
<th>Classes</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Train">15011 Kashi Express</td>
<td data-title="Type">SuperFast</td>
<td data-title="Zone">CR</td>
<td data-title="From">LTT</td>
<td data-title="Dep">15:30</td>
<td data-title="To">GKP</td>
<td data-title="Arr">06:15 +1 night</td>
<td data-title="Dur">7h 55m</td>
<td data-title="Halts">11</td>
<td data-title="Runs On">S - T - T F -</td>
<td data-title="Dist">632 km</td>
<td data-title="Speed">97 km/hr</td>
<td data-title="Classes">SL | 3A | 2A</td>
</tr>
<tr>
<td data-title="Train">15012 Pushpak Express</td>
<td data-title="Type">SuperFast</td>
<td data-title="Zone">CR</td>
<td data-title="From">LTT</td>
<td data-title="Dep">15:30</td>
<td data-title="To">GKP</td>
<td data-title="Arr">06:15 +1 night</td>
<td data-title="Dur">7h 55m</td>
<td data-title="Halts">11</td>
<td data-title="Runs On">S - T - T F -</td>
<td data-title="Dist">632 km</td>
<td data-title="Speed">96 km/hr</td>
<td data-title="Classes">SL | 3A | 2A</td>
</tr>
<tr>
<td data-title="Train">15013 Godan Express</td>
<td data-title="Type">SuperFast</td>
<td data-title="Zone">CR</td>
<td data-title="From">LTT</td>
<td data-title="Dep">15:30</td>
<td data-title="To">GKP</td>
<td data-title="Arr">06:15 +1 night</td>
<td data-title="Dur">7h 55m</td>
<td data-title="Halts">11</td>
<td data-title="Runs On">S - T - T F -</td>
<td data-title="Dist">632 km</td>
<td data-title="Speed">95 km/hr</td>
<td data-title="Classes">SL | 3A | 2A</td>
</tr>
<tr>
<td data-title="Train">15014 Golden Express</td>
<td data-title="Type">SuperFast</td>
<td data-title="Zone">CR</td>
<td data-title="From">LTT</td>
<td data-title="Dep">15:30</td>
<td data-title="To">GKP</td>
<td data-title="Arr">06:15 +1 night</td>
<td data-title="Dur">7h 55m</td>
<td data-title="Halts">11</td>
<td data-title="Runs On">S - T - T F -</td>
<td data-title="Dist">632 km</td>
<td data-title="Speed">94 km/hr</td>
<td data-title="Classes">SL | 3A | 2A</td>
</tr>
<tr>
<td data-title="Train">15015 Lucknow Express</td>
<td data-title="Type">SuperFast</td>
<td data-title="Zone">CR</td>
<td data-title="From">LTT</td>
<td data-title="Dep">15:30</td>
<td data-title="To">GKP</td>
<td data-title="Arr">06:15 +1 night</td>
<td data-title="Dur">7h 55m</td>
<td data-title="Halts">11</td>
<td data-title="Runs On">S - T - T F -</td>
<td data-title="Dist">632 km</td>
<td data-title="Speed">93 km/hr</td>
<td data-title="Classes">SL | 3A | 2A</td>
</tr>
<tr>
<td data-title="Train">15016 SLN Express</td>
<td data-title="Type">SuperFast</td>
<td data-title="Zone">CR</td>
<td data-title="From">LTT</td>
<td data-title="Dep">15:30</td>
<td data-title="To">GKP</td>
<td data-title="Arr">06:15 +1 night</td>
<td data-title="Dur">7h 55m</td>
<td data-title="Halts">11</td>
<td data-title="Runs On">S - T - T F -</td>
<td data-title="Dist">632 km</td>
<td data-title="Speed">92 km/hr</td>
<td data-title="Classes">SL | 3A | 2A</td>
</tr>
<tr>
<td data-title="Train">15017 Sitapur Express</td>
<td data-title="Type">SuperFast</td>
<td data-title="Zone">CR</td>
<td data-title="From">LTT</td>
<td data-title="Dep">15:30</td>
<td data-title="To">GKP</td>
<td data-title="Arr">06:15 +1 night</td>
<td data-title="Dur">7h 55m</td>
<td data-title="Halts">11</td>
<td data-title="Runs On">S - T - T F -</td>
<td data-title="Dist">632 km</td>
<td data-title="Speed">91 km/hr</td>
<td data-title="Classes">SL | 3A | 2A</td>
</tr>
<tr>
<td data-title="Train">15018 Darbhanga Express</td>
<td data-title="Type">SuperFast</td>
<td data-title="Zone">CR</td>
<td data-title="From">LTT</td>
<td data-title="Dep">15:30</td>
<td data-title="To">GKP</td>
<td data-title="Arr">06:15 +1 night</td>
<td data-title="Dur">7h 55m</td>
<td data-title="Halts">11</td>
<td data-title="Runs On">S - T - T F -</td>
<td data-title="Dist">632 km</td>
<td data-title="Speed">90 km/hr</td>
<td data-title="Classes">SL | 3A | 2A</td>
</tr>
</tbody>
</table>
</div>
<div style="width: 100%; display: flex;align-items: center;">
<div style="text-align: left; width: 50%;">
<span id="currpagecount">Showing 1 to 2 of </span><span id="totalrowscount">8</span>
</div>
<div class="pagination-container">
<button class="pagination-button" id="prev-button" aria-label="Previous page" title="Previous page">
<span class="arrow-left"></span>
</button>
<div id="pagination-numbers" class="newpagination-numbers">
<span id="currentPage"></span>/<span id="pageCount"></span>
</div>
<button class="pagination-button" id="next-button" aria-label="Next page" title="Next page">
<span class="arrow-right"></span>
</button>
</div>
</div>
<!-- Result Table Ends -->java.lang.VerifyError: Expecting a stackmap frame at branch target 52
Exception Details:
Location:
dw.a(Ljava/lang/String;Ljava/lang/String;)[Ljava/lang/String; @17: ifge
Reason:
Expected stackmap frame at this location.
Bytecode:
0000000: bb00 5d59 125f b700 624e 2a2b b600 663d
0000010: 1c9c 0023 2d2a b600 692d b600 6cbd 0015
0000020: 4b2d b600 6c9e 000d 033d 1c2d b600 6ca1
0000030: 0023 2ab0 2d2a 031c b600 70b6 0069 2a1c
0000040: 2bb6 0073 60b6 0076 4b2a 2bb6 0066 3da7
0000050: ffc1 2a1c 2d1c b600 79c0 0015 5384 0201
0000060: a7ff ca
at ft.<init>(Unknown Source)
at com.silverknight.a.<init>(Unknown Source)
at com.silverknight.TemMidlet.<init>(Unknown Source)
at java.base/jdk.internal.reflect.DirectConstructorHandleAccessor.newInstance(DirectConstructorHandleAccessor.java:62)
at java.base/java.lang.reflect.Constructor.newInstanceWithCaller(Constructor.java:502)
at java.base/java.lang.reflect.ReflectAccess.newInstance(ReflectAccess.java:128)
at java.base/jdk.internal.reflect.ReflectionFactory.newInstance(ReflectionFactory.java:304)
at java.base/java.lang.Class.newInstance(Class.java:725)
at org.microemu.app.Common.a(Unknown Source)
at org.microemu.app.Common.initMIDlet(Unknown Source)
at org.microemu.app.launcher.Launcher.commandAction(Unknown Source)
at n.commandAction(Unknown Source)
at aL.mouseReleased(Unknown Source)
at java.desktop/java.awt.Component.processMouseEvent(Component.java:6621)
at java.desktop/javax.swing.JComponent.processMouseEvent(JComponent.java:3398)
at java.desktop/java.awt.Component.processEvent(Component.java:6386)
at java.desktop/java.awt.Container.processEvent(Container.java:2266)
at java.desktop/java.awt.Component.dispatchEventImpl(Component.java:4996)
at java.desktop/java.awt.Container.dispatchEventImpl(Container.java:2324)
at java.desktop/java.awt.Component.dispatchEvent(Component.java:4828)
at java.desktop/java.awt.LightweightDispatcher.retargetMouseEvent(Container.java:4948)
at java.desktop/java.awt.LightweightDispatcher.processMouseEvent(Container.java:4575)
at java.desktop/java.awt.LightweightDispatcher.dispatchEvent(Container.java:4516)
at java.desktop/java.awt.Container.dispatchEventImpl(Container.java:2310)
at java.desktop/java.awt.Window.dispatchEventImpl(Window.java:2780)
at java.desktop/java.awt.Component.dispatchEvent(Component.java:4828)
at java.desktop/java.awt.EventQueue.dispatchEventImpl(EventQueue.java:775)
at java.desktop/java.awt.EventQueue$4.run(EventQueue.java:720)
at java.desktop/java.awt.EventQueue$4.run(EventQueue.java:714)
at java.base/java.security.AccessController.doPrivileged(AccessController.java:400)
at java.base/java.security.ProtectionDomain$JavaSecurityAccessImpl.doIntersectionPrivilege(ProtectionDomain.java:87)
at java.base/java.security.ProtectionDomain$JavaSecurityAccessImpl.doIntersectionPrivilege(ProtectionDomain.java:98)
at java.desktop/java.awt.EventQueue$5.run(EventQueue.java:747)
at java.desktop/java.awt.EventQueue$5.run(EventQueue.java:745)
at java.base/java.security.AccessController.doPrivileged(AccessController.java:400)
at java.base/java.security.ProtectionDomain$JavaSecurityAccessImpl.doIntersectionPrivilege(ProtectionDomain.java:87)
at java.desktop/java.awt.EventQueue.dispatchEvent(EventQueue.java:744)
at java.desktop/java.awt.EventDispatchThread.pumpOneEventForFilters(EventDispatchThread.java:203)
at java.desktop/java.awt.EventDispatchThread.pumpEventsForFilter(EventDispatchThread.java:124)
at java.desktop/java.awt.EventDispatchThread.pumpEventsForHierarchy(EventDispatchThread.java:113)
at java.desktop/java.awt.EventDispatchThread.pumpEvents(EventDispatchThread.java:109)
at java.desktop/java.awt.EventDispatchThread.pumpEvents(EventDispatchThread.java:101)
at java.desktop/java.awt.EventDispatchThread.run(EventDispatchThread.java:90)
i wish someone could help me via telegram