Category: javascript

I am using semantic ui modal
inside it I have 1 input tag, 1 select and 2 btns
everything else is working but the input tag is not working, I cant write inside it.

I have not applied any event listener on this input tag, and Im using javascript, jquery for my project.

<div class="ui mini modal modalcss modal-for-adding-var transition visible active" id="modal-for-adding-var" style="margin-top: -100px;">
    <div class="add-modal-wrap">
      <div class="add-modal-heading">Add Variable</div>
      <div class="add-modal-body">
        <div class="variable-name-div">
            <span>Variable Name</span>
            <input type="text" id="variable-name101">
        </div>
        <div class="select-dataset-div">
            <span>Select Dataset</span>
            <select type="text" id="selected-dataset">
              <option selected="" disabled="" value=""> Select an option</option>
              <option value="cashflow" data-name="Cash Flow" id="cashflow">Cash Flow </option><option value="incomestatement" data-name="Income Statement" id="incomestatement">Income Statement </option><option value="balancesheet" data-name="Balance Sheet" id="balancesheet">Balance Sheet </option><option value="capitalstructure" data-name="Capital Structure" id="capitalstructure">Capital Structure </option><option value="covenants" data-name="Covenants" id="covenants">Covenants </option>
            </select>
        </div>
      </div>
      <div class="add-var-btn-grp">
        <button id="cancel-btn">Cancel</button>
        <button id="add-btn">Add</button>
    </div>
    </div>
    </div>

the input tag is on line 7

 <input type="text" id="variable-name101">

I need a Javascript method to get me the full path of any application installed on MacOS based on the app name.
I tried using the Javascript method – mdfind – but it’s execution is asynchronous, and I am not getting the path at the point where I need it.

Here is how I used it,

var fullAppPath = "";
var mdfind = require('mdfind');
var res = mdfind({query:'kind:app', attributes: ['kMDItemDisplayName']});
res.output.on('data', function(data){
    var foundApps = data.kMDItemDisplayName === appName; // eg. appName = "Adobe Acrobat"
    if (foundApps) {
        console.log("FOUND!!");
        fullAppPath = data.kMDItemPath;
        console.log(data.kMDItemPath);
    }
});

How can I use the above or any similar method in a synchronous way, so that I get the results, and then move forward?

Suppose a SaaS platform, which is about to create a customer support chat box for user’s websites. When a user creates a chat box on this SaaS platform, the platform provides a JavaScript script tag with a specific src. When users use this script into their website, the chat box becomes visible on their website.

Now, my question is, how can I develop such a feature? Could someone please provide an explanation? Can i use Next.js?

I tried to load playlist items by using:

kalturaPlayer.loadPlaylistByEntryList({entries: [{entryId: '123'}, {entryId: '456'}]}, {countdown: {duration: 20}});

And below is my player config

const kalturaPlayer = KalturaPlayer.setup({
      "sources": {
        "options": {},
      },
      "targetId": "player-placeholder",
      "ui": {
        "components": {},
        "settings": {
          "showSpeedMenu": true,
        }
      },
      "provider": {
        "partnerId": PARTNER_ID,
        "uiConfId": UI_CONFIG_ID,
        "ks": KS_SESSION
      },
      "playback": {
        "autoplay": true,
        "allowMutedAutoPlay": true,
        "playsinline": true,
        "textLanguage": "default",
        "pictureInPicture": false,
        "inBrowserFullscreen": false,
      },
      "plugins": {
        "share": {
          "disable": true
        },
        "download": {
          "disable": true
        },
        "report": {
          "disable": true
        }
      }
    });

If you noticed I config the player with KS in order to play the video. I used my own API to get the player KS by passing the entry_id.
So when the player is being loaded, I called API to get the KS and play the video.

Since I wanted to use playlist feature, So when the entry is being switched to next or previous, I want to get the entry_id and update player config KS when the entry is being played.

kalturaPlayer.addEventListener(KalturaPlayer.playlist.PlaylistEventType.PLAYLIST_ITEM_CHANGED, () => {
   // get entry_id ? // then call my own API to get KS // then update player config with the new KS // then play the media
});

I also checked with the kaltura change-media API but I could not solve my problem.

I am creating a product page that show all available product in the form of card. This image show’s how products is displayed on the products page I want a functionality that whenever user click’s on any product card from the available product cards a request is to be made to server to open productshowcase page with complete product detailImages show’s the file i need to render in responce. I tried some method to do that, but none worked well.

The code for product card is

<div class="product-display-c">
                    <div class="product-card-holding-c">
                        <!--  -->
                        <% for (let i=0; i < data.length; i++) {%>
                            <div id="<%= data[i].id%>" class="product-card-c">
                                <div class="product-image-c">
                                    <img class="product-card-image" src="<%= data[i].images[0]%>"
                                        alt="random image" />
                                </div>
                                <div class="product-detail-c">
                                    <p class="product-name">
                                        <%= data[i].p_name%>
                                    </p>
                                    <p class="product-sp">Rs. <%= data[i].selling_price%>
                                    </p>
                                    <p class="product-mrp">M.R.P: Rs. <span>
                                            <%= data[i].mrp%>
                                        </span> </p>
                                    <p class="product-discount">
                                        <%= data[i].mrp - data[i].selling_price%> off
                                    </p>
                                    <p class="product-quality">Quality verified</p>
                                </div>
                            </div>
                            <% }%>
                    </div>
                </div>

This code create cards as per data received from database.

after that I created a javascript code to send request to server to open productshowcase page with complete product detail. The code is like

document.querySelectorAll('.product-card-c').forEach((div) => {
  div.addEventListener('click', function(event) {
    console.log(event.target.closest('.product-card-c').id);
    const selectedId =event.target.closest('.product-card-c').id;
    fetch(`/products/${selectedId}`)
          .then(response => console.log(response.text()))
  });
});

this code send the id of clicked card to the server. The server side code to handle this is like
app.get('/products/:id', async function(req, res) { try { const selectedId = await db.query(SELECT * FROM products WHERE id=${req.params.id}); res.render("productshowcase.ejs", {product :selectedId.rows}); } catch (err) { console.log(err); } });

I don’t know what is the issue but nothing happen when i click the card.

Although the server response when i try to hit browser url section with url localhost:3000/products/2 the server open productshowcase page without CSS apllied to it and with lots of error in console like
“Failed to load resource: the server responded with a status of 404 (Not Found)
great-value-trademart.png:1
Failed to load resource: the server responded with a status of 404 (Not Found)
header.js:1

   Failed to load resource: the server responded with a status of 404 (Not Found)

1:1 Refused to execute script from ‘http://localhost:3000/products/jscript/header.js’ because its MIME type (‘text/html’) is not executable, and strict MIME type checking is enabled.
catagory-2.jpg:1

   Failed to load resource: the server responded with a status of 404 (Not Found)"

I am totally stucked. Can anyone help me to find where is the error. Thanks in advance.

I tried searching for the correct method to send request to the server but failed to find the right one

Description:

I’m currently working on the backend of my project, utilizing Multer to handle image file uploads from the frontend. For the frontend, I’m using Postman as a testing tool.

Here’s a brief overview of the algorithm I’m developing for user registration:

1. Users submit image files from the frontend.
2. These files are temporarily stored in the project/temp folder, located in the root directory.
3. Subsequently, the files are to be uploaded to Cloudinary.

You can find the full algorithm in the source code on my GitHub repository [https://github.com/mangesh123vispute/SocialMediaPro].

Problem:

While attempting to store files in the public/temp folder using Multer, I encounter the following error:

plaintext
Error: ENOENT: no such file or directory, open ‘C:UserslaxmaOneDriveDesktopcodinglearningbackendprojectpublictempmangesh.jpg’

Screenshots:

Postman Request:

Postman Error:

Issue Description:

I believe the problem lies within the multer.middleware.js file rather than the user.controllers.js. Here’s my reasoning:

1. I added a console.log("req.body: ", req.body); statement inside the user.controller.js file.
2. However, this log statement is not being printed, indicating that the registerUser controller is not being called.
3. Therefore, I infer that the error is likely in the middleware (multer.middleware.js).
4. Additionally, the files (images) are not being stored in the public/temp folder as expected.

user.controllers.js:Added console.log() to check it is executing or not.

multer.middelware.js

user.routes.js

Error with console logs:

Question:

Can someone help me identify and resolve the issue in the multer.middleware.js file that might be preventing the registerUser controller from being called and causing the files not to be stored in the designated folder?

Assume that we have a container div which have a width equal to 600, and a height equal to 600, now When I click a button, a div should be placed inside that container,and when I click the button again a new div will be created and also placed in the container, but it should not overlap the other divs, and if the divs sizes that has been added due to the button click became greater than the container, then we should display a message where we say no enough space.

You can think of this problem as a room where you want to place items in it,the items will be added randomly in the room when you click a button but the items should not overlap the other items, and if there is no space left in the room, then we should display a message where we say no space left.

Can someone help me write a react code to do this logic

I am rendering a dynamic form using JS and API calls now if I use then chaining it render form but not in same order I want, and my current code show failed to execute append child and return [object Promise] instead of form I try many ways to render but it does not render anything other method I use to resolve promises still no result.
The below is my current code it still shows same error:

createSelectComponent: async function (
            form,
            labelTextContent,
            defaultSelectTextContent,
            id,
            name,
            apiEndpoint
        ) {
            const label = document.createElement("label");
            form.appendChild(label);
            
            const select = document.createElement("select");
            select.id = id;
            select.name = name;

            try {
                const response = await fetch(apiEndpoint);
                const parsedResponse = await response.json();
                const data =
                    parsedResponse.categories ||
                    parsedResponse.brands ||
                    parsedResponse.users;

                data.forEach((object) => {
                    const option = document.createElement("option");
                    option.value = object.id || object.userId;
                    option.textContent =
                        object.categoryObjName ||
                        object.brandObjName ||
                        object.userName;
                    select.appendChild(option);
                });
            } catch (error) {}
            form.appendChild(select);

            return form;
        },

        createForm: async function (e) {
            const form = document.createElement("form");
            try {
                const brandSelectComponent = await this.createSelectComponent(
                    form,
                    "Select Brand:",
                    "Select Brand",
                    "brandSelect",
                    "brand",
                    "/get-brands"
                );
                form.appendChild(brandSelectComponent);
            } catch (error) {
                console.error(error);
            }

            try {
                const categorySelectComponent = await this.createSelectComponent(
                    form,
                    "Select Category:",
                    "Select Category",
                    "categorySelect",
                    "category",
                    "/get-categories"
                );
                form.appendChild(categorySelectComponent);
            } catch (error) {
                console.error(error);
            }

            // User select goes here

            return form;
        },

I send a request to the server, which launches creating files there, then client gets a response and creating files proceeds. Then websocket is used to message client about progress. I try to send a message after every file created. Client gets first message but then doesn’t while other files are being creating. Is this because of quantity of messages?

I suppose to send message not for each file, but, for example, for each 10th or 20th, or make a delay there. So I’d like to ask skilled colleagues how to do it properly?

I am calling an API to fetch details about several hockey games. I am storing the results in a ref called games.

const games = ref<Game[]>([])

const todaysGameSummaries = await NHL.getTodaysGameSummaries()
const gamePromises = todaysGameSummaries.map(async (gameSummary) => await getCompleteGameData(gameSummary.id))
games.value = await Promise.all(gamePromises)

const firstGameFirstPlayer = games.value[0].playerSummaries[0]
console.log("Immediate:", firstGameFirstPlayer)
setTimeout(() => console.log("After:     ", firstGameFirstPlayer), 1)

//Output
//Immediate: Proxy(Object) {id: 8471218, teamId: 3, firstName: 'Blake', lastName: 'Wheeler', number: 17, …}
//After:     Proxy(Object) {id: 8480012, teamId: 3, firstName: 'Blake', lastName: 'Wheeler', number: 17, …}

Notice that the id changes immediately, but the rest of the object remains correct. Naturally, my first thought was “Somehow the value is being overwritten”, so I set up a watcher to see if it was being accessed subsequently:

watch(
  games,
  (newValue, oldValue) => {
    console.log("Old:", oldValue[0]?.playerSummaries[0])
    console.log("New:", newValue[0]?.playerSummaries[0])
  },
  { deep: true }
)

//Output
//Old: undefined
//New: Proxy(Object) {id: 8480012, teamId: 3, firstName: 'Blake', lastName: 'Wheeler', number: 17, …}

But as you can see, the watcher is triggered just once.

I recognize that providing insight is difficult without being able to see the issue reproduced, but I have not been able to do so without Vue3.

Some notes:

• The incorrect id belongs to a different player in the same array.
• It is consistently the same wrong id.

Why is the id changing?

Raw API Response:

Vue ref:

I’m working on a Next.js project with Tailwind CSS and I’ve encountered a compilation error that I can’t seem to resolve. The error is related to a custom utility class I’ve defined in my theme.css file. Here’s the error message:

Failed to compile

./styles/theme.css:7:9
Syntax error: D:DeveloperProjectsNextjs13nextappstylestheme.css The `bg-light-850` class does not exist. If `bg-light-850` is a custom class, make sure it is defined within a `@layer` directive.

  5 | @layer utilities {
  6 |     .background-light850_dark100 {
> 7 |         @apply bg-light-850 dark:bg-dark-100;
    |         ^
  8 |     }
  9 |     .background-light900_dark200 {

In my theme.css file, I have:

@layer utilities {
    .background-light850_dark100 {
        @apply bg-light-850 dark:bg-dark-100;
    }
    // ... other classes ...
}

And my tailwind.config.ts includes:

// ... other config settings ...

extend: {
  colors: {
    // ... other colors ...
    light: {
      900: '#FFFFFF',
      800: '#F4F6F8',
      850: '#FDFDFD',
      // ... other light colors ...
    },
    // ... other color settings ...
  },
  // ... other extended theme settings ...
}

// ... rest of the configuration ...

As you can see, light-850 is defined in my Tailwind configuration, but the compiler does not seem to recognize it. I have tried clearing the Next.js cache and rebuilding the project, but the issue persists.

Could anyone help me understand why this error is occurring and how to fix it?

Thank you in advance for your assistance!

Rebuild, remove cache, asked copilot.

fairly new to this area, and not really sure what I’m doing, so some help would be appreciated.

I’ve been trying to build a plugin for Chrome that will download all files on a page, into a folder that is named the same as the file on the desktop. Currently, nothing happens.

I’ve got these files:

• manifest.json (collects it all together)
• popup.html (displays the popup)
• popup.js (waits for the button click and sends the ‘downloadButton’ message to
• content.js (which finds all the links, and triggers the download, which allows
• background.js (to download them into the file)

However, what I’m getting at the moment is the pop-up button coming up, but no downloads happening. I can’t see anything on system logs, and am a bit lost on where to look.

This is actually the backup plan – I want to download specific files from webpages but I dont’ know how to do that and I researched and found this was easier so I thought I’d try to understand how this works first and then try the specific one.

I’ve attached my code (it’s not toooooo long). Not sure how general standards and protocols work on here. Sorry for any stackoverflow mishaps!

 {   
    "manifest_version": 2,
    "name": "Download Scraper",
    "version": "1.0",
    "permissions": ["activeTab", "downloads", "storage"],
    "background": {
        "scripts": ["background.js"],
        "persistent": false
    },

    "browser_action":{
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },

    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["content.js"],
            "run_at": "document_idle"
        }
    ]
    
}

<!DOCTYPE html>
<html>
<head>
  <title>File Downloader</title>
  <script src="popup.js"></script>
</head>
<body>
  <button id="downloadButton">Download File</button>
</body>
</html>

document.getElementById('downloadButton').addEventListener('click', function () {
    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
      var tab = tabs[0];
      chrome.tabs.sendMessage(tab.id, { action: 'downloadFile' });
    });
  });
  

chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
  if (message.action === 'downloadAllFiles') {
    // Find all links on the page
    var fileLinks = document.querySelectorAll('a');

    // Loop through each link and trigger a download
    fileLinks.forEach(function (link) {
      // Get the href attribute of the link (download URL)
      var downloadUrl = link.href;

      // Extract the file name from the href
      var fileName = getFileNameFromUrl(downloadUrl);

      // Send file information to the background script
      chrome.runtime.sendMessage({ action: 'initiateDownload', fileName: fileName, fileUrl: downloadUrl });
    });
  }
});

// Function to extract file name from a URL
function getFileNameFromUrl(url) {
  var matches = url.match(//([^/?#]+)[^/]*$/);
  return matches && matches.length > 1 ? decodeURIComponent(matches[1]) : null;
}

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === 'initiateDownload') {
    const fileName = message.fileName;
    const folderName = fileName.replace(/[^ws]/gi, ''); // Remove special characters from the title

    console.log('Folder Name:', folderName);

    const filePath = `Desktop/${folderName}/${fileName}.pdf`;
    chrome.downloads.download({
      url: message.fileUrl,
      filename: filePath
    }, () => {
      console.log('File downloaded and saved.');
    });
  }
});

Any body know ? how to make a new role in Strapi with Rest API, i didn’t find any docs for this, i want to manage Strapi user roles with Rest API.

i know there is an endpoint for managing users, but i didn’t find any endpoint for managing user-permissions or roles with REST API.

This is the Strapi REST API Documentation

i found only REST APIs for collections and parameter using.
thank you.

I have an image and a list next to it. I want the image to change to a different source whenever I hover over each item in the list depending on which one it is. For example if I hover over the <div> “Czech”, the image source will change to a map with Czech-speaking areas highlited, but if I hover over the <div> “Resian” then the image source in the neighboring (website-space-speaking-wise) div will change to a map with areas speaking the Resian dialect of Slovenian highlited.

I’ve tried JavaScript functions and CSS.

[nodemon] starting ts-node -r tsconfig-paths/register -r dotenv/config app.ts
Error: accept EBADF at TCP.onconnection (node:net:1594:24) {
    errno: -9,
    code: 'EBADF',
    syscall: 'accept'
}
[nodemon] app crashed - waiting for file changes before starting...

[ version ]
node: v16.15.0
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]

An error occurs when requesting.
Four months ago it worked without any problems.
I have a file read code with fs and I don’t use a socket.

const options = {
    key: fs.readFileSync('/etc/letsencrypt/live/test.pem'),
    cert: fs.readFileSync('/etc/letsencrypt/live/test.pem'),
    ca: fs.readFileSync('/etc/letsencrypt/live/test.pem'),
};

It just happened out of the blue
Failed to even try debug.