Category: javascript

(https://i.stack.imgur.com/8KDvQ.png)

In the tree grid which i am using has 60 rows. I am performing a search operation on one of the column in the grid.The search highlights the row with the given search pattern , but only first 25 row is getting searched.

Dojo frame work is used to create this tree grid.

points i noticed while debugging

1.divs are loading when i scroll based on some px value(the first div attached in the picture).
2.only first 25 rows are populating

Suppose I own a website called https://stackoverflow.com, so when a user visits that website, I want to record the video of the screen (just like employee monitoring tools do) and save the video in database. I searched a lot online but no luck. Is it possible? Any suggestions?

I tried the code given in codesandbox, it gets video in iframe using requestAnimationFrame but how to convert it into a video file?

I have an stock listing html table. Adding rows or deleting rows with this javascript.

 <script>
function addRow(dataTable) {
"use strict";
var table = document.getElementById("dataTable");
var rowCount = table.rows.length;
if(rowCount < 20){
    var row = table.insertRow(rowCount);
    var colCount = table.rows[0].cells.length;
    for(var i=0; i<colCount; i++) {
        var newcell = row.insertCell(i);
        newcell.innerHTML = table.rows[0].cells[i].innerHTML;}  
}else{
     alert("En fazla 20 satır ekleyebilirsiniz.");
           
}
}

function deleteRow(dataTable) {
"use strict";
var table = document.getElementById("dataTable");
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
    var row = table.rows[i];
    var chkbox = row.cells[0].childNodes[0];
    if(null !== chkbox && true === chkbox.checked) {
        if(rowCount <= 1) {
            alert("Tüm satırları silemezsiniz.");
            break;
        }
        table.deleteRow(i);
        rowCount--;
        i--;
    }
}
    }
  </script> 

And in each row i have select option which retrieves data from mysql database including stock ids.
When i select a stock from select option, getting price of from mysql table and showing in third td with ajax post.

  <script type="text/javascript">
  $(document).ready(function(){
  $("#tek_ice_stok_id").on('change',function(){
    var row = $(this).closest("tr");
    var tek_ice_stok_id = row.find(".tek_ice_stok_id").val();
    var tek_ice_birim_fiyat = row.find(".tek_ice_birim_fiyat").val();
    var dataString = "tek_ice_stok_id="+tek_ice_stok_id; 

  $.ajax({ 
    type: "POST", 
    url: "stok_fiyat_cek.php", 
    data: dataString, 
    success: function(result){ 
      row.find("td:eq(3)").html(result);
      
    }
  });
});
  })();
</script>

My first problem is when i add rows, the prices are all same in each rows price area. So i should do something and when i select 2nd or 3rd,etc select optons ajax should bring me those stocks prices.

Can anyone help me about this?

Thanks.

Searched for it many times but couldnt find exactly same.

I am programming a paid extension for the VS Code marketplace. Sadly this marketplace does not integrated a payment solution. So I thought I use GitHub (marketplace) for payment and authentication.

But my problem is since VS Code extensions are practically open-source how do I prevent the users of my extension to just remove the license check and use it without payment?

I am very new to JavaScript and VS Code development. I used Kotlin/JS to write the plugin and just a thin JavaScript layer to integrate it into VS Code.

I thought maybe I can obfuscate the JavaScript layer to make it more difficult to remove the check. But this might still be too easy to bypass. Just like copy-protection in the 90s. 😉

In another project I only published part of the software and let that part download the rest once the user is authenticated. Just like Blizzard with Starcraft 2. 🙂

Unless there is another solution that I missed… How would I do this in a way so the downloaded file would be cached and still is save from sharing it with others?

I’m currently writing a “converter” for importing and exporting data.
The specific data are vehicles.

So basically I’m getting a vehicle from a supplier let’s say like so

{
    "id": 1234,
    "category": "CAR",
    "warranty": {
        "warranty_begin": "tomorrow",
        "warranty_end": "the day after tomorrow"
    } 
    // And so on
}

And on an import I will map it to a json format reasonable for our api like:

{
    "internal_id": 1234,
    "category": "CAR",
    "warranty": {
        "warranty_start_date": "tomorrow",
        "warranty_end_date": "the day after tomorrow"
    } 
    // And so on
}

This is pretty easy to write you just access the keys you need and map the values to your keys.

Exactly the same thing can be done for an export where we map our data to the suppliers format.

But
I’m right now looking for method to do it in a two way function manner. I imagine myself something like this.

On import

fromPathTo("id", "internalId");
fromPathTo("category", "category");
// And so on
run();

On export

fromPathTo("id", "internalId");
fromPathTo("category", "category");
// And so on
runInverse();

Where run Inverse then flips the parameters there should also be a way to write functions like:

convertWithFn(originPath: string, converter: Function, destinationPath: string)
convertWithEnum(originPath: string, enum: Array<Array<string> | string>, destinationPath: string)

And things like that

I’m pretty sure there might be a way to do it I just can’t find it. Does someone of you have an idea?

Pls am a beginner in React learning context. am trying to pass some value to my introduce component in App file but am stock. pls I need help. below are my code:

// from my App file

import React from 'react';
import './App.css';
import { useUser } from './UserContext';

function Introduce() {
  const { user } = useUser();

  return (
    <div>
      <p>My name is {user.name}</p>
    </div>
  );
}

function App() {
  return <Introduce />;
}

export default App;

//from my useContext file

import React, { createContext, useContext } from 'react';

const UserContext = createContext();

export function UserProvider({ children }) {
  const [user] = React.useState({
    name: 'Williams',
    email: '[email protected]',
    age: 30,
  });

  <UserContext.Provider value={{ user }}></UserContext.Provider>;
}
export const useUser = () => useContext(UserContext);

// from my index.js file

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { UserProvider } from './UserContext';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <UserProvider>
      <App />
    </UserProvider>
  </React.StrictMode>
);

jquery.jcryption is a library used to encrypt and decrpyt the data with the help of public key and private key in json format and the encrypted string comes out as a hex format..
Can someone write a code in python that works identical as jcryption

I am trying to open a new tab in Blazor Server. I am currently using JavaScript:

        [Inject]
        private IJSRuntime JSRuntime { get; set; } = null!;

        JSRuntime.InvokeVoidAsync("open", PaymentWindowUrl, "_blank");

This does attempt to open the Url in a new tab, however it is blocked by the browser’s popup blocker and has to be allowed before it appears.

I would like to do this without the user having to click a button or link manually.

Seems to be OK in Edge but the popup issue occurs on Google Chrome.

Have tried to place an a href tag on the page and then do a .click() instead with JavaScript but the issue still occurs.

Is there anyway I can bypass this? I am unable to find much on the internet. Or do I have to bite the bullet and let the user allow the popup?

Hi ı cant deploy my node js app on Render.com ı get this error;
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath ‘./lib/api/traversing’ is not defined by “exports” in /opt/render/project/src/node_modules/cheerio/package.json how can ı fix this

ı can run the app on my local with using npm run start it works.But on render ı use Nodemon index.js as start command and ı get this error

` $(“.sb-modal-ranks__list tbody tr”).each(function() {
var currentScore = parseInt($(“.current-score”).text());
var minScore = parseInt($(this).find(“.sb-modal-ranks__rank-points”).text());

            if (currentScore === minScore) {
            var $currentRow = $(this);
            var $nextRow = $currentRow.next();
        
            $nextRow.addClass("sb-modal-ranks__achieved").removeClass("sb-modal-ranks__current")
                .find(".sb-modal-ranks__rank-marker").removeClass("current-score");
        
            $currentRow.addClass("sb-modal-ranks__current").find(".dot, .line").addClass("achieved")
            .find(".sb-modal-ranks__rank-marker").append('<span class="current-score">' + currentScore + '</span>');
        
            // Update sb-progress-dots with current score
            $(".sb-progress-dot").each(function() {
                var dotScore = parseInt($(this).text());
                if (currentScore >= dotScore) {
                $(this).addClass("completed");
                } else {
                $(this).removeClass("sb-progress-dot__achieved");
                }
            });
            }
        });`

I want to append the current-score class to the sb-modal-ranks__rank-marker class

I need to create a Partial View where I render a table created with the Tabulator.js library. The problem is that each table (Table Partial View) has different settings passed by javascript on table creation.
In my case a page (View) can contain more than one table. For that reason I’m look for a solution to use multiple partial view in one page, each with different settings (provided by the modelview) but with a single javascript that handle everything.

Currently I created a working table in a single View, which is created using all information provided by the ModelView.

Here i create the javascript object (the table) – I need to find a solution to pass the Column setting in another way, because each table could have different settings

        var table = new Tabulator("#example-table", {
            layout: "fitColumns", 
            columns: @Html.Raw(Model.TableComponent.GetAllTableSettings()),
        });

And here is the HTML generate by the View using the data passed by the ModelView

<table id="example-table">
        <thead>
            <tr>
                @foreach (var header in Model.TableComponent.TableHeaders)
                {
                    <th>@header.ColumnName</th>
                }
            </tr>
        </thead>
        <tbody>
            @foreach (var school in Model.TableComponent.Data)
            {
                <tr>
                    @foreach (var header in Model.TableComponent.TableHeaders)
                    {
                        <td>@Model.TableComponent.GetPropertyValueByPropertyName(school, header.FieldName)</td>
                    }
                </tr>
            }
        </tbody>
    </table>

Example of setting:

{title: 'IdSchool', field: 'IdSchool', editor: false, headerFilter: true}
{title: 'IdSchoolType', field: 'IdSchoolType', editor: true, headerFilter: false}
{title: 'IdCountry', field: 'IdCountry', editor: true, headerFilter: true}
{title: 'Town', field: 'Town', editor: true, headerFilter: true}
{title: 'SchoolName', field: 'SchoolName', editor: true, headerFilter: true}
{title: 'UstCode', field: 'UstCode', editor: true, headerFilter: true}

In a nutshell, how can I pass the settings to JS file for each table through the ViewModel, do I have to set it inside the DOM?

I want to resize font-size based width of div container like this snippet:

.container {
  background-color: green;
  width:100px;
  height: 30px;
  color: yellow;
  font-size: 30px;
}

<div class=container>short</div>
<br>
<div class=container style="font-size: 23px;">middlemid</div>
<br>
<div class=container style="font-size: 18px;">longlonglong</div>

In my actual code short, middlemid, etc are dynamic values comes from API and container div is a same element with static width value. Maximum font-size is 30px but if text value is overflowing, font-size should be rescaled to match the div width.

Is it possible to do with CSS?
Actually JavaScript is also Okay but, all solutions that I found has more 15-20 lines of code or using external libraries, what is looks like overhead. Isn’t here no simple solution for this basic case?

I have a static website, hosted on Azure (with free plan). The following is the structure of my website:

Goal: I want that the webpage all-travel-blogs.html display the titles of all the travel blogs present inside the folder travel-blogs. To achieve this, I have the following javascript present in the file bloglist.js file:

function getBlogList() {
   var blogsFolder = './travel-blogs';
   var xhr = new XMLHttpRequest();
   xhr.onreadystatechange = function() {
       if (xhr.readyState === 4) {
           if (xhr.status === 200) {
               var blogList = document.getElementById('blogList');
               var blogFiles = xhr.responseText.split('n');
               var blogHTML = '';
               for (var i = 0; i < blogFiles.length; i++) {
                   if (blogFiles[i]) {
                       var blogTitle = getBlogTitle(blogFiles[i]);
                       var blogIntro = getBlogIntro(blogFiles[i]);
                       blogHTML += '<div><a href="' + blogsFolder + '/' + blogFiles[i] + '">' + blogTitle + '</a><p>' + blogIntro + '</p></div>';
                   }
               }
               blogList.innerHTML = blogHTML;
           } else {
               console.error('Failed to load blog files');
           }
       }
   };
   xhr.open('GET', blogsFolder, true);
   xhr.send();
}

function displayBlogList() {
   getBlogList();
}

function getBlogTitle(blogFile) {
   // Extract the title from the file name
   return blogFile.substring(0, blogFile.indexOf('.html'));
}

function getBlogIntro(blogFile) {
   // Get the first <p> element from the blog file
   var xhr = new XMLHttpRequest();
   xhr.open('GET', './travel-blogs/' + blogFile, false);
   xhr.send();
   var blogHTML = xhr.responseText;
   var parser = new DOMParser();
   var doc = parser.parseFromString(blogHTML, 'text/html');
   return doc.querySelector('p').innerHTML;
}

Code of the HTML Page to list all Travel blogs:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Travel Blog List</title>
    <script src="./bloglist.js"></script>
</head>
<body onload="displayBlogList()">
    <h1>Travel Blog List</h1>
    <div id="blogList"></div>
</body>
</html>

PROBLEM: Since, the webpage was not displaying the list of blogs, I opened the Inspect webpage and found that I am getting following errors:

Access to XMLHttpRequest at ‘file:///C:/github-client/Website/Eterna-Bootstrap-Theme-based-website/blogs/blogs/travel-blogs’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.

This is my HTML and JS code:

<!DOCTYPE html>
<html>
    <head>
        <script>
            function validateForm() {
                let x = document.forms["myForm"]["fname"].value;
                 if (x == "") {
                    alert("Name must be filled out");
                    return false;
                }
            }

            function validateForm() {
                let x = document.forms[myForm][lname].value;
                if (x == "") {
                    alert("Last name should be filled out");
                    return false;
                }
                else
                    alert("Thank you for your response");
            }
        </script>
    </head>

    <body>
        <h1>Student Information Form</h1>

        <br>
        <br>

        <form name="myForm" onsubmit="return validateForm()" method="post">
            <label for="fname">First name:</label><br>
            <input type="text" id="fname" name="fname"><br>
            <label for="lname">Last name:</label><br>
            <input type="text" id="lname" name="fname"><br> <br>
            <label for="email">Email:</label>
            <input type="text" id="email" name="email">

            <input type="reset">
            <input type="submit" value="Submit">
        </form>
    </body>
</html>

And upon clicking the submit button I’m calling the alert to appear but it’s not appearing. When I have data in the input tags, when I click submit the data just dissapears. Why is this happening???

(I’m assuming the old value of i is not needed, so i++ and ++i should at most affect performance.)

Then thing is, I’ve seen a counter incremented like this in code

i++;

and it left me wondering: should I suggest to write ++i; because given the semantics of pre-increment and post-increment there’s no reason to believe that ++i could ever be slower than i++, whereas there is a little chance that i++ is indeed slower?

My double stems from what I know of C++, and which mostly applies for non-builtin types (see here).

But I don’t know enough of JavaScript.

As state above, exactly because I don’t know the answer as whether i++ is slower than ++i or not, I’d write ++i because I assume it can’t be slower than i++ (otherwise what starnge language would JavaScript be?).