Category: javascript

I’m using the wix-location module to redirect a Wix website page to an external page:

import wixLocation from 'wix-location'; 

$w.onReady(function () {
     wixLocation.to("http://www.my-new-url.com");
}) 

This waits for the page to load fully and then does a redirection. Is there a way to redirect without waiting for the whole page to load? Or alternatives to wixLocation.to()?

It isn’t a huge deal in my case because ended up clearing the entire Wix page of text/images so that it isn’t very obvious that the page loaded and then redirected; however, it would be nice if the redirection was faster and I was wondering if there’s any other way to do so.

Does anyone know how to display a £ sign in a confirm box in Javascript?

An example would be:

confirm("Please confirm price of £2.99")

When I try this the “£” sign is rendered as a ? in a black triangle?

const container= document.getElementById("container")
const path = document.getElementById("myPath")

path.onclick = (event) => {
    event.stopPropagation() // not working
    console.log("Path clicked !")
    }
    
container.onmousedown = (event) => {
    console.log("container clicked !")
    }

<div id="container">
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<path id="myPath" d="M10 80 Q 95 10 180 80" fill="none" stroke="black" stroke-width="5" />
</svg>
</div>

When I click to path not working event.stopPropagation(). I just want to run alert("Path clicked !"). But running both listeners. Where is problem in this codes ?

i used ajax for that , my item is being added in wishlist and remved also but color is not being changed . page is refreshing and color is set to default again.

i have passed data and fetching it from database.

   success: function (data) {
                        var heartIcon = $('a[data-data="' + linkData + '"] > i.fa.fa-heart');
                        if (data === '1') {
                            heartIcon.addClass("red-heart");
                        } else {
                            heartIcon.removeClass("red-heart");
                        }
                        console.log(data);

How to use jquery-connections library in angular application and use it in every files ?

Hi I have a requirement to connect the different div elements in my angular application using lines. I have identified that the jquery-connections npm package can do it.

Link : https://www.npmjs.com/package/jquery-connections

But I am unable to use it in my angular application. I have followed the below steps to use that library in my angular application:

step 1 : Installed the library using the command ‘ npm i jquery-connections ‘

step 2 : Added the jquery.connections.js file path in angular.json files scipts section as below :

angular.jaon file :

.
.
.
 "scripts": [ 
              "node_modules/@popperjs/core/dist/umd/popper.min.js",
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/jquery-connections/jquery.connections.js"
            ],
...

step 3 : reran the application using ng server command.

step 4 : In my component html may look loke below:

component.html file :

<div id="div1" class="border">I am one div</div>
<br /><br />

<button class="btn btn-primary">I am button</button><br /><br />

<div id="div2" class="border">I am second DIV</div>

step 5 : In my typescript file I tried to connect those two div elements according to the api document of ‘jquery-connections’ as below:

Link of Api documents of jquery-connections : https://github.com/musclesoft/jquery-connections/wiki/API

component.ts file :

import * as JQConnections from 'jquery-connections';

@Component({
  selector: 'componentSelector',
  templateUrl: '..component.html',
  styleUrls: ['...scss'],
})
export class component implements OnInit {

  ngOnInit(): void {
    JQConnections('#div1', '#div2').connections();
  }

This is what I have tried so far.

Problem :

When I the component get initialized the below erroe is displayed in the console :

re.js:6210 ERROR TypeError: jquery_connections__WEBPACK_IMPORTED_MODULE_5__ is not a function
 

So , someone please help to fix this issue and kindly let me konw, If I have done anything wrong.

If the approach is wrong then kindly tell me the correct procedure otherwise any alternative ways to acheive this behaviour in angular with ease.

Thanks in advance…

I have a problem. I need to download file with javascript. The problem is that I need to send POST request with http headers, so I can’t use tag or approach with form. Also, I don’t want to use ajax request, because I need to download very large file and I want to be shown default browser download progress. Is there a way to solve it?

A potential solution might involve modifying the backend to receive headers as query parameters, though this approach isn’t ideal. Given that I have the ability to configure NGINX to my liking, I wonder if there’s a method to convert query parameters into HTTP headers on the NGINX side. Also, I know about FileSystemWritableFileStream, and it seems as the best way, but it does not shows download progress too

I’m encountering a flashing problem randomly when switching between tabs in dark mode on my Tauri web app. The flash might be caused by the browser rendering or the operating system’s handling of tab switching. I suspect that the JavaScript code responsible for toggling between dark and light modes might be contributing to this issue. Secondly, the sidebar unexpectedly closes and opens again, during this weird bug.

Here’s an overview of the relevant Javascript:

const body = document.querySelector('body');
const sidebar = body.querySelector('nav');
const toggle = body.querySelector('.toggle');
const modeSwitch = body.querySelector('.toggle-switch');
const modeText = body.querySelector('.mode-text');

// Check if dark mode preference is stored in localStorage
const isDarkMode = localStorage.getItem('darkMode') === 'true';
// Check if sidebar preference is stored in localStorage
const isSidebarClosed = localStorage.getItem('sidebarClosed') === 'true';

// Set initial state based on stored preferences
if (isDarkMode) {
  body.classList.add('dark');
  modeText.innerText = 'Light mode';
} else {
  body.classList.remove('dark');
  modeText.innerText = 'Dark mode';
}

if (isSidebarClosed) {
  sidebar.classList.add('close');
} else {
  sidebar.classList.remove('close');
}

toggle.addEventListener('click', () => {
  sidebar.classList.toggle('close');
  // Store sidebar state in localStorage
  const isClosed = sidebar.classList.contains('close');
  localStorage.setItem('sidebarClosed', isClosed);
});

modeSwitch.addEventListener('click', () => {
  body.classList.toggle('dark');
  // Store dark mode state in localStorage
  const isDark = body.classList.contains('dark');
  localStorage.setItem('darkMode', isDark);

  if (isDark) {
    modeText.innerText = 'Light mode';
  } else {
    modeText.innerText = 'Dark mode';
  }
});

// Add the 'dark' class to the body element if dark mode preference is stored
if (isDarkMode) {
  body.classList.add('dark');
}

I would like to know if there’s a way to modify the JavaScript code or make any necessary adjustments to the CSS to mitigate the flashing issue and to ensure that the sidebar remains in its current state without closing and reopening. I want to ensure a smooth transition between tabs when in dark mode. Any insights or suggestions would be greatly appreciated and if you need any additional information or further clarification, please don’t hesitate to ask. Thank you!

As what I understand based on docs of next js with app router, I create a error.tsx page inside my app folder (app/[lang]/error.tsx) — the file consist the code that are shown in docs. also I have some api calls (fetch) inside a file in this route: src/api/categories/index.ts (because I want these apis call in server (SSG)) but if my api doesn’t resolve it shows me default error of next js like below:

but I don’t want this I need to show an error page for that. here is also my error page code:

"use client";

export default function Error({
 error,
 reset,
}: {
 error: Error;
 reset: () => void;
}) {
 console.log(error);
 return (
   <div>
     <h2>Something went wrong!</h2>
     <button onClick={() => reset()}>Try again</button>
   </div>
 );
}

I also tried to copy this file next to the index.ts (apis file) because as the docs says :

Next.js will forward the resulting Error object to the nearest
error.js file as the error prop

but dosn’t work. how can I do that?

I want to combine a table of locations with additional information (from a database, as JSON data) with a Google Map on a Webpage. The table shall be interactive, e.g. the user can filter the locations based on additional information or country or something like that.
The map shall have pointer to the places and adapt them based on the filter of the table.

It is no problem to create the map with pointers – there exist a lot of resources for it.
For tables, there are modules like for React from Material UI or for Vue.js and other Frameworks.

But I could’nt find a way to combine table and map. Do you have any suggestions on which frameworks works best or if i should use plain javascript and how to tackle the problem with this technology?

I have created one interface and implements it to create a city information with different parameters. I have implemented method definition with cypress code and asserting it in various function as given in the code.

when I execute the code and function is called

assertTC1Func(state:string, city:string: add:string: phone:string),

it also tries to interact with the parameter those are not pssed in the function (i.e add2, phone2 & street), what I am doing wrong here in my code?

interface CreateCityInterface{
        
           state:string;
           city:string;
           add:string;
           phone:string;
           add2?:string;
           phone2?:string;
           street?:string;
          enterdata(state: string, city: string, add: string, phone: string, add2: string, phone2: string, street: string): void;
          enterdata(state: string, city: string, add: string, phone: string): void;
          enterData(state: string, city: string): void;
        }
        
class State extends Country implements CreateCityInterface{
 state:string;
           city:string;
           add:string;
           phone:string;
           add2?:string;
           phone2?:string;
           street?:string;
         enterData(state: string, city: string, add: string, phone: string, add2: string, phone2: string, street: string): void;
          enterdata(state: string, city: string, add: string, phone: string): void;
          enterData(state: string, city: string): void;
            enterData(state: string, city: string, add?: string, phone?: string, add2?: string, phone2?: string, street?: string): void;
        {
        cy.wait(500);
        this.createCityEle.state().contains(state).click();
        this.createCityEle.city().type(city);
        this.createCityEle.add().type(add)
        this.createCityEle.phone().type(phone);
        this.createCityEle.add2().type(add2);
        this.createCityEle.phone2().type(phone2)
        this.createCityEle.street().type(street);
          }
    assertTC1Func(state:string, city:string: add:string: phone:string){
    this.enterData(state, city, add, phone)
    //some code
    }
    
    assertTC2Func(state:String: city:String){
    this.enterData(state, city)
    //some code
    }
    
    assertTC3Func(state:string, city:string: add:string: phone:string, add2:string, phone2:string: street:string){
    this.enterData(state, city, add, phone, add2, phone2, street)
    //some code
    }
        }

I have a simple boilerplate HTML template.

All I want to do is run a simple script which I have installed as an npm package – the script just appends the word “test” into a div with the id of “result”:

const test = () => {
    $('#result').append('test')
}

Currently, the npm package installs fine and works fine by using this script tag:

<script src="../node_modules/@MYUSERNAME/testgenerator/id.js"></script>

However, this script ONLY runs if I call the function separately in a separate script tag:

 <script>test()</script>

Is there a way to make the script run WITHOUT having to use this extra script tag with the function call?

I tried adding the call to the original script like so:

const test = () => {
    $('#result').append('test')
}

test()

But this did nothing.

Is there any way I can get the script to run without having to call it in a separate script tag ?

Full code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML 5 Boilerplate</title>
    <link rel="stylesheet" href="style.css">
<script src="../node_modules/@MYUSERNAME/testgenerator/id.js"></script>
  </head>
  <body>
<div id="result"></div>
    <script>test()</script>
  </body>
</html>

I ran into a problem with my JS project. I declared a global variable:

var agencies = {};

And I have a function:

function getAllAgencies() {
  let request = new XMLHttpRequest();
  request.onreadystatechange = function () {
    console.log(this.readyState);
    console.log(this.status);

    if (this.readyState == 4) {
      if (this.status == 200) {
        agencies = JSON.parse(request.responseText);
      } else {
        alert("Greska prilikom ucitavanja agencije!");
      }
    }
  };
  request.open("GET", firebase + "/agencije.json", true);
  request.send();
}

However, after I call this function it doesn’t change the value of the variable agencies, it’s still {}.

I checked, it goes into the if statements

In my asp.net MVC web application, I’m trying to create a Purchase Order view.

So in this section, I added the table headers that I want to show as the main headers of the form.

<table class="proposedWork" width="100%" style="margin-top:20px">
  <thead>
    <th class="docAdd">
      <button type="button" id="addAnotherItm" class="btn btn-info" href="#">+</button>
    </th>
    <th>ITEM</th>
    <th>QTY</th>
    <th>MEASURE BY</th>
    <th>UNIT PRICE</th>
    <th class="amountColumn">TOTAL</th>
  </thead>

and then in the body section, I created,

 <tbody>
   <tr>
     <td>
       <ul id="PoItmList" style="list-style-type: none"> 
        @if (Model != null && Model.PurchaseOrderItemsViewModelList != null) 
        { 
            foreach (EvoPOS.WebUI.Models.PurchaseOrderItemsViewModel list in Model.PurchaseOrderItemsViewModelList)
            { 
            Html.RenderPartial("_ItemList", list); 
            } 
        } 
        </ul>
     </td>
   </tr>
 </tbody>

this is the javascript that when the + button is pressed, loads the partial view.

$(function () {
  $("#addAnotherItm").click(function () {
    $.get(rootDir + 'PurchaseOrders/AddPoItems', function (template) {
      $("#PoItmList").append(template);
    });
  });
});

This is my partial view code,

  <tr>
    <td contenteditable="true"> @Html.DropDownList("Item_ID", null, "Select Items", new { @id = "ddlReqTypes" + Model.TempID, @class = "js-dropdown", @data_map = Model.TempID })</td>
    <td class="unit" contenteditable="true">
      <input type="text" />
    </td>
    <td contenteditable="true" class="description">
      <input type="text" />
    </td>
    <td class="amount" contenteditable="true">
      <input type="text" />
    </td>
    <td class="amount amountColumn rowTotal" contenteditable="true">
      <input type="text" />
    </td>
  </tr>
  <button type="button" class="btn btn-danger" onclick="$(this).parent().remove();">Delete</button>

So the view looks like this,

My issue is When button + is pressed, it should load the dropdown and other inputs with the order of table headers.

But instead of that, happens this,

I want to load my partial view like this as an example,

I created this tabs component it works properly in desktop but I want hide this in mobile and show .tabsMobile it is a dropdown. but here dropdown items not clickable. they are not changing when click. what is the problem here. I think onChange event in the Select component is not working. I need to pass the relevant value and change dropdown labal when clicked. then it need to load respective content

   'use client';        
    interface IElementTabs {

    }

const ElementTabs:FC<IElementTabs> = ({}) => {
const [toggleState, setToggleState] = useState(1)

const toggleTab = (index:number) => {
  setToggleState(index)
}

const handleDropdownChange = (value: string | null) => {
 console.log(value);
 if (value !== null) {
  const selectedIndex = parseInt(value);
  setToggleState(selectedIndex);
 } 
 };
 const dropdownData = [
   { value: "1", label: "My details" },
   { value: "2", label: "Purchase history" },
   { value: "3", label: "Subscriptions" },
 ];

return <ElementHolder
  classes={`element element--pt-default element--pb-default tabs`}>
  <Container>
    <div className={styles.tabs}>
      <div className={`${styles.tab} ${toggleState===1 ? styles.tabActive: ''}`} 
     onClick={() => toggleTab(1)}>
      <div className={styles.icon}>
        <Profile />
      </div>
      <p>My details</p>
    </div>
    <div className={`${styles.tab} ${toggleState===2 ? styles.tabActive: ''}`}  onClick={() => toggleTab(2)}>
      <div className={styles.icon}>
        <History />
      </div>
      <p>Purchase history</p>
    </div>
    <div className={`${styles.tab} ${toggleState===3 ? styles.tabActive: ''}`}  onClick={() => toggleTab(3)}>
      <div className={styles.icon}>
        <Subscribe />
      </div>
      <p>Subscriptions</p>
    </div>
  </div>
  <div className={styles.tabsMobile}>
    <Select
      value={toggleState.toString()}
      onChange={(value) => handleDropdownChange(value)}
      data={dropdownData}
      itemComponent={({ label }) => <div>{label}</div>}
    />
  </div>
  
  <div className={styles.tabsContent}>
    <div className={`${styles.content} ${toggleState===1 ? styles.contentActive: ''}`}>
      <p>tab1</p>
    </div>
    <div className={`${styles.content} ${toggleState===2 ? styles.contentActive: ''}`}>
      <p>tab2</p>
    </div>
    <div className={`${styles.content} ${toggleState===3 ? styles.contentActive: ''}`}>
      <p>tab3</p>
    </div>
   </div>
  </Container>
</ElementHolder>
}

 export default ElementTabs;

ich schreibe grade eine kleine App, deren Daten aus einer datenbank gelesen werden soll, bzw. später auch geschrieben werden sollen.

ich verwende dafür express und MySql2

ich gebe die Abfrage als JSON aus.

Nun zu meiner Frage.

Wie kann ich mir einzelne Daten aus der JSON holen und mir in meiner index.html anzeigen lassen

Ich verwende aktuell folgenden Code und die Ausgabe der JSON funktioniert.

Kann mir da jemand helfen?

const express = require("express");
const mysql = require("mysql2/promise");

const app = express();
const port = 3000;

// Verbindung zur Datenbank herstellen
const connectionConfig = {
  host: "localhost",
  user: "root",
  password: *******,
  database: "*****",
};

// Routen für die Abfrage definieren
app.get("/antwort", async (req, res) => {
  try {
    const connection = await mysql.createConnection(connectionConfig);
    const [rows, fields] = await connection.execute(
      "SELECT * FROM fahrzeuge"
    );
    const data = rows.map((row) => ({
      ID: row.ID,
      KENNZEICHEN: row.KENNZEICHEN,
      FARBE: row.FARBE,
      ORT: row.ORT,
    }));

    res.json(data);

    await connection.end();
  } catch (err) {
    console.error("Fehler bei der Ausführung der Abfrage: ", err);
    res.status(500).send("Ein interner Serverfehler ist aufgetreten");
  }
});

// Server starten
app.listen(port, () => {
  console.log(`Server läuft auf Port ${port}`);
});