Category: javascript

I have the below object and I wanted to toggle all the boolen value inside of the object

{
    "2211284396232-5": {
        "2211284396232-5": false, 
        "644889430161": {
            "4812219518053": false, 
            "4812219518055": false,
            "4812219518063": false,
            "4812219518064": false,
            "4812219518069": false, 
            "644889430161": false
        }, 
    },
    
    "2211628865398-6": {
        "2211628865398-6": false, 
            "729563966440": {
                "5229922707373": false, 
                "729563966440": false
            }, 
    },
    
     "2212485574058-4": {
        "2212485574058-4": false, 
            "689399023594": {
                "5077186698704": false, 
                "5077186698712": false, 
                "689399023594": false
            }, 
    },
     
 }

I want to loop through this object and change all this false value to true value
How can I do this?

We have a C# application where I am using nested views to display user form data. I want to disable the nested form and keep another form on the page enabled. Everything is working as intended but I don’t understand why.

The nested view – to be disabled.
@Html.Partial("~/Views/Folder/TheView.cshtml", Model)

The on page form – to keep enabled.
@using (Html.BeginForm("Modify", "Controller", FormMethod.Post))

The script disabling
document.addEventListener('DOMContentLoaded', function () { $("#Form *").prop("disabled", true); });

All of the checkboxes/textboxes on “TheView.cshtml” are disabled, however my on page form is not. I can’t figure out why this is not disabling all DOM form elements and only those in the nested views and I can’t find information on what $(“#Form *”) is retrieving and why. Any help is much appreciated.

Using mapbox js I am trying to color lines/features that I place onto the map with a switch statement.

I have a function to generate the switch statement after importing the KML data. Which gives me the following array

[
    "case",
    [
        "boolean",
        [
            "feature-state",
            "hover"
        ],
        false
    ],
    "green",
    [
        "boolean",
        [
            "feature-state",
            "#Aerial2ActiveID"
        ],
        false
    ],
    "rgb(255, 51, 255)",
    [
        "boolean",
        [
            "feature-state",
            "#Aerial2PlannedID"
        ],
        false
    ],
    "rgb(255, 208, 0)",
    [
        "boolean",
        [
            "feature-state",
            "#Aerial12ActiveID"
        ],
        false
    ],
    "rgb(255, 235, 27)",
    [
        "boolean",
        [
            "feature-state",
            "#Aerial24ActiveID"
        ],
        false
    ],
    "rgb(255, 235, 27)",
    [
        "boolean",
        [
            "feature-state",
            "#Aerial24PlannedID"
        ],
        false
    ],
    "rgb(255, 0, 0)",
    [
        "boolean",
        [
            "feature-state",
            "#Aerial48ActiveID"
        ],
        false
    ],
    "rgb(255, 235, 27)",
    [
        "boolean",
        [
            "feature-state",
            "#Aerial48PlannedID"
        ],
        false
    ],
    "rgb(255, 0, 0)",
    [
        "boolean",
        [
            "feature-state",
            "#Buried2ActiveID"
        ],
        false
    ],
    "rgb(255, 92, 156)",
    [
        "boolean",
        [
            "feature-state",
            "#Buried2PlannedID"
        ],
        false
    ],
    "rgb(255, 1, 1)",
    [
        "boolean",
        [
            "feature-state",
            "#Buried12ActiveID"
        ],
        false
    ],
    "rgb(255, 92, 156)",
    [
        "boolean",
        [
            "feature-state",
            "#Buried48ActiveID"
        ],
        false
    ],
    "rgb(255, 92, 156)",
    [
        "boolean",
        [
            "feature-state",
            "#Drop2ActiveID"
        ],
        false
    ],
    "rgb(255, 255, 255)",
    [
        "boolean",
        [
            "feature-state",
            "#Drop2PlannedID"
        ],
        false
    ],
    "rgb(255, 0, 255)",
    [
        "boolean",
        [
            "feature-state",
            "#Future1ActiveID"
        ],
        false
    ],
    "rgb(255, 6, 160)",
    [
        "boolean",
        [
            "feature-state",
            "#Future1PlannedID"
        ],
        false
    ],
    "rgb(255, 8, 135)",
    [
        "boolean",
        [
            "feature-state",
            "#DuctActiveID"
        ],
        false
    ],
    "rgb(255, 51, 153)",
    [
        "boolean",
        [
            "feature-state",
            "#DuctPlannedID"
        ],
        false
    ],
    "rgb(255, 51, 153)",
    "blue"
]

Finaly I add the feature to the map like this

if (type == 'line'){
    window.MAP.mapbox.addSource(this.l_uid, {
        type: "geojson",
        data:{
            type: "FeatureCollection",
            features: []
        }
    })

    window.MAP.mapbox.addLayer({
        id: this.l_uid,
        type: 'line',
        source: this.l_uid,
        paint: {
            "line-width": 4,
            "line-color" : hover_style['line-color']
        }
    })
}

for some reason, the colors are not being applied to the correct features. While coloring this way does seem to work with no errors like I said it’s not applying the correct color to the correct feature they seemed to be swapped in some way. Is there something wrong with my switch array?

The first hover rule seems to always work. The color preceding the case rule is the color I desire. Is there something wrong with my formatting?

Is this method okay or is there a better solution to coloring lines individually?

I have a hero which moves in the direction of click. in below code, when I pass runH(10,0), as per the code it should move to right and should stop when collision detected, and i works perfectly.
BUT
ISSUE : it stops few pixels before the block ( It does not stick to colliding block ).

function runH(x, y) {
    clearInterval(interV);
    inmotion = true;
    interV = setInterval(function () {
        var HeroP = $("#BTB_Hero").position();
        var HeroW = $("#BTB_Hero").width();
        var HeroH = $("#BTB_Hero").height();
        var HeroX = HeroP.left + x;
        var HeroY = HeroP.top + y;
        
        // Check for collisions with blocks
        let collision = false;
       
        for (let i = 0; i < blocksA.length; i++){
         var block = $(blocksA[i]);
         var blockP = block.position();
         var blockX = blockP.left;
         var blockY = blockP.top;
         var blockW = $(blocksA[i]).width();
         var blockH = $(blocksA[i]).height();
         
         if ( HeroX + HeroW >= blockX && HeroX <= blockX + blockW && HeroY + HeroH >= blockY && HeroY <= blockY + blockH) {
             collision = true;
            
             
             break;  //Stop checking for collisions on the first collision detected
         }
     }
     if (collision) {
      clearInterval(interV); // Stop movement on collision
      inmotion = false;
  } else {
      $("#BTB_Hero").css({ "top": HeroY + "px", "left": HeroX + "px" });
  }
        // Check for level change condition
        checkLevelChange(HeroX,HeroY);
    }, 1);
}

I tried many thing

1. I decreased the x and y values to 1 , but then speed of hero block decreases to next level and for mobile devices it feels in slowmotion.
2. I tried decreasing the interval (setTimeInterval ) to 1/10000 but it does not work , speed is still slow.
3. Finally i tried to get the width and position of colliding block and adjust the hero to that position after collision.

Expectation :
1.to increase hero speed by keeping x or y as 1
2. to steek to block when collision detects when i keep x and y 10

I am attempting to make a basic fetch request to the API I created with Strapi, then take the data and put it into my HTML page. So far I have been able to make the request show up on my page, but the results are showing up as undefined. Here is what that looks like:

Fetch Request:

function getSprites() {
    const div = document.getElementById('hello')
    fetch('http://localhost:1337/api/sprites')
    .then(res => res.json())
    .then(data => {
      data.data.forEach(sprite => {
        div.innerHTML += `
        <li>${sprite.author}</li>
        `
      })
    })
  }

getSprites();

HTML:

<div id="hello" class="sprite-container"></div>

JSON Structure:

{
  "data": [
    {
      "id": 1,
      "attributes": {
        "title": "Example",
        "author": "Rosabelle",
        "submitter": "Exmaple",
        "createdAt": "2023-11-27T13:08:56.236Z",
        "updatedAt": "2023-11-27T14:08:29.447Z",
        "publishedAt": "2023-11-27T13:09:10.204Z"
      }
    }
  ],
  "meta": {
    "pagination": { "page": 1, "pageSize": 25, "pageCount": 1, "total": 2 }
  }
}

I am 100% sure it has to do with how I structured my fetch request, as I am having to say data.data.forEach rather than just data.forEach to make the request show up on the page. How should I change my fetch request so that instead of “undefined” the author “Rosabelle” shows up correctly in my HTML?

I’m connecting to mongodb (on a Ubuntu machine) from a js script; when I execute the command from command line (node name of the script) everything works just fine but when I execute the same command from cron the connections times out:

const mongodb = require("mongodb").MongoClient;

async function dbConnection() {
    // I've checked this variable and it's valid both when executed as cron or 
    // simply from command line
    let url = env.DB_URL;

    // Mongo options
    let opts = {
        useNewUrlParser: true,
        useUnifiedTopology: true
    };

    try {
        return mongodb.connect(url, opts);
    } catch (err) {
        throw err;
    }
}

async function DataLoading() {
    try {
        let dbInstance;
        try {
            dbInstance = await dbConnection()
            if(!dbInstance)
                throw "DB connection failed"
        } catch (err) {
            errors.push({
                date: new Date().toISOString(),
                error: err,
                location: "Db connection" 
            });
        }
        console.log("Time elapsed: " + (new Date() - time) )
        // On cron dbInstance is undefined, causing an error, on command line it's what's supposed to
        let dbStocks = dbInstance.db(env.DB_NAME).collection("stocks")

Time elapsed console log is somewhere near 30 seconds when executed as cron, few hundreds ms when from command line.

Note: When I say command line I’m referring to server’s command line (mongo is on localhost), not my remote personal computer.

Hala, por favor me podían colaborar si de pronto saben como poner contraseña con GAS a documentos de PDF creados y guardados en Drive.
Encontré como opción PDF.co, pero se debe de pagar por consumo de la API.

Muchas gracias.

Quiero conocer si hay un código en Google app Script que asigne una contraseña a un documento PDF.

I have a self-made HTML editor with selectors for minimal modifications of the HTML text to change colors or font type or insert images, etc. and it works perfectly. The editor has two editable divs, one in which the web page is shown with its images and colors, and another editable div with the innerHTML that, if not processed, is seen all in plain text with all black letters.

In the latter I color the tags so that they look better, for example
I mark it in blue,

I mark it in red, etc. and until now I do it with JavaScript execCommand, with the code:

document.designMode = "on";
var text1 = "<br>";
var sel = window.getSelection();
sel.collapse(document.getElementById('divInnerHTML'), 0);
while (window. Find(text1)) {
document.execCommand("foreColor", false, "blue");
sel.collapseToEnd();
}
document.designMode = "off";

I already say that it works well but now I find that execCommand has become obsolete so I have to look for another alternative and I can’t find the necessary code to make the
look blue or the <p and

look red or the <img substrings look green, etc. I imagine that an alternative could be to create an array with all the positions of the substrings that contain those strings and then mark all those positions with the corresponding color, that is, the foreColor of the old execCommand.

I am going to try different alternatives but I will thank anyone who can guide me on how to color code without the need for execCommand.

Greetings to the group.

An alternative to execCommand

I have a website with a series of buttons, when these buttons are clicked, I want it to change the innerHTML of multiple elements, however, when the buttons are clicked, nothing happens.

<script>
function changeName() {
document.getElementById("img").src="image.png";
document.getElementById("name").innerHTML = "name";
document.getElementById("date").innerHTML = "date";
document.getElementById("hook").innerHTML = "hook";
document.getElementById("text").innerHTML = "“text";
}
</script>

<button class="button" onclick="changeName()">Name</button>

<img src="image2.png" id="image" alt="Portrait">
<h1 id="name">test</h1>
<p id="date">test</p>
<h1 id="hook">test</h1>
<p id="text">test</p>

And I am just wondering what I could be doing wrong, I am semi-new to JavaScript and I expected problems to arise, however, it seems to me that my code should work. (In theory) I have tried changing the names of the elements and the name of the function to try and see if it would work however nothing I seem to do will change the innerHTML. I have also run my JavaScript code through JSHint only to find no issues except an unused variable.

My web app recently moved to HTTP2 protocol, and since then the web pages et stuck at Waiting_for_available_socket randomly and nothing works till either browser is closed or sockets are flushed manually.

net-export logs show that there are already 6 open sockets (max per domain) and corresponding HTTP2_sessions.

It seems that these sessions are sitting ideal for some time (big gap between st).

But chrome is neither using these sessions for next request nor closing these. Thus new requests are waiting for sockets to be available. (SOCKET_POOL_STALLED_MAX_SOCKETS_PER_GROUP)

Web app works fine in firefox, why is it a problem in chrome?

I am trying to add three numbers “90.370”, “1.180” and 8.450. And I get the result as 100.00000000000001. when I slightly change these values I am getting exact 100. Can someone please explain me this.
90.370+1.180+8.450 = 100.00000000000001
90.350+1.200+8.450 = 100
image shows above addition operation in chrome console

How to correct this and get the correct value in all the cases.

I use a shopify app and want to customize some things that I cant do in the app.

So I have 4 Forms and in the forms are 4-7 input radio buttons

every form is structured like this:

Form 1
<div class="globo-form-control layout-2-column">
  <div class="globo-form-input">
    <ul class="flex-wrap">

      <li class="globo-list-control option-3-column">
        <div class="radio-wrapper">
          <input class="radio-input" type="radio" />
          <label class="radio-label">White</label>
        </div>
      </li>

      <li class="globo-list-control option-3-column">
        <div class="radio-wrapper">
          <input class="radio-input" type="radio" />
          <label class="radio-label">White</label>
        </div>
      </li>

    </ul>
  </div>
</div>

Form 2
the same

How can I make that for each Form he can only select one ?

I tried this but this dont work and then he remove all

        const rd = document.querySelectorAll('.radio-label');

        rd.forEach(e => {
            e.addEventListener('click', el => {
                rd.forEach(e2 => {
                    e2.classList.remove('selected-radio');
                })
              e.classList.add('selected-radio');
            });
        });

I need Javascript that searches a web page for a specific text and highlights it with css.
What makes this problem difficult: The solution must not modify the actual text in the HTML.

This is a paragraph with the word find me in it.
If I provide the search string “me”, I want this to be highlighted. Note that I cannot simply apply styling the

. In fact, there is no element to apply styling to that would allow me to highlight that word!

The obvious solution would be to modify the DOM like this:

This is a paragraph with the word me in it.

However, this is not what I want!

To upload a file in Selenium, you send the file directory path string to the input element.

If that input element is hidden style=display:none;, you can make it unhidden with javascript

element.removeAttribute("style");

My element is hidden but it also does not exist until a click event is triggered. How do I trigger this with javascript and/or c# and/or selenium?

The developer of the application has given the background below:

We are using Split Buton component from primeng (https://primeng.org/splitbutton). When we select any of the item from that split button component internally its considering that as click event and emitting on event handler command for us. Based on that command, we are triggering click event on tag which is in hidden mode.

HTML the developer has provided:

<div class="button-ph">
    <p-splitButton style="margin-top: -17px; margin-right: -35px;"
        class="pm-btn--primary pull-right m-r-28" label="Import New" [model]="createnew">
        <input #fileInput (change)="onFileChange ($event)" type="file" style="display:none;" />
    </p-splitButton>
</div>

Code the developer has provided:

this.createnew = [{
label: 'Benefit Leave',
command: () => {
    this.update(2480);
}
}];


ngAfterViewInit(): void {
    this.fetchResults(true);
}

update(importID: number): void {
    this.payrollEntryBatchID = Number(this.ID);
    this.processingID = importID;
    const fileupload = this.myNameElem.nativeElement;
    fileupload.click();
}

I do not see a click event in his code or HTML. This is what the page view looks like:

This is my JSON Data.

data: any = {
  laneId: '0e8679b6-0138-44hj-a645-4738ca4fa0op',
  totalLegs: 3,
  totalOrders: 180,
  laneLegs: [
    {
      legNo: 1,
      startCity: 'Los Angeles',
      startProvince: 'KY',
      endCity: 'Los Angeles',
      endProvince: 'KY',
      totalOrders: 57,
    },
    {
      legNo: 1,
      startCity: 'Los Angeles',
      startProvince: 'KY',
      endCity: 'Washington',
      endProvince: 'ON',
      totalOrders: 10,
    },
    {
      legNo: 1,
      startCity: 'Los Angeles',
      startProvince: 'KY',
      endCity: 'Houston',
      endProvince: 'ON',
      totalOrders: 6,
    },
    {
      legNo: 2,
      startCity: 'Los Angeles',
      startProvince: 'KY',
      endCity: 'Houston',
      endProvince: 'ON',
      totalOrders: 34,
    },
    {
      legNo: 2,
      startCity: 'Los Angeles',
      startProvince: 'KY',
      endCity: 'Memphis',
      endProvince: 'ON',
      totalOrders: 21,
    },
    {
      legNo: 2,
      startCity: 'Los Angeles',
      startProvince: 'KY',
      endCity: 'Chicago',
      endProvince: 'ON',
      totalOrders: 1,
    },
    {
      legNo: 2,
      startCity: 'Washington',
      startProvince: 'ON',
      endCity: 'Boise',
      endProvince: 'ON',
      totalOrders: 4,
    },
    {
      legNo: 2,
      startCity: 'Washington',
      startProvince: 'ON',
      endCity: 'Memphis',
      endProvince: 'ON',
      totalOrders: 4,
    },
    {
      legNo: 2,
      startCity: 'Washington',
      startProvince: 'ON',
      endCity: 'Houston',
      endProvince: 'ON',
      totalOrders: 2,
    },
    {
      legNo: 2,
      startCity: 'Houston',
      startProvince: 'ON',
      endCity: 'Boise',
      endProvince: 'ON',
      totalOrders: 4,
    },
    {
      legNo: 2,
      startCity: 'Houston',
      startProvince: 'ON',
      endCity: 'Memphis',
      endProvince: 'ON',
      totalOrders: 2,
    },
    {
      legNo: 3,
      startCity: 'Houston',
      startProvince: 'ON',
      endCity: 'Boston',
      endProvince: 'ON',
      totalOrders: 36,
    },
    {
      legNo: 3,
      startCity: 'Memphis',
      startProvince: 'ON',
      endCity: 'Boston',
      endProvince: 'ON',
      totalOrders: 35,
    },
    {
      legNo: 3,
      startCity: 'Chicago',
      startProvince: 'ON',
      endCity: 'Boston',
      endProvince: 'ON',
      totalOrders: 1,
    },
    {
      legNo: 3,
      startCity: 'Boise',
      startProvince: 'ON',
      endCity: 'Boston',
      endProvince: 'ON',
      totalOrders: 8,
    },
  ],
};

I tried many approaches. But all are available here.

It works like legNo.

Leg 1 Value:

Start City: Los Angeles, End City: Los Angeles
Start City: Los Angeles, End City: Washington
Start City: Los Angeles, End City: Houston

Here Leg 1 Output is:

[Los Angeles, Los Angeles]
[Los Angeles, Washington]
[Los Angeles, Houston]

Leg 2 Value:
Leg 2 Output depends on Leg 1 Output:

Start City: Los Angeles, End City: Houston
Start City: Los Angeles, End City: Memphis
Start City: Los Angeles, End City: Chicago
Start City: Washington, End City: Boise
Start City: Washington, End City: Memphis
Start City: Washington, End City: Houston
Start City: Houston, End City: Boise
Start City: Houston, End City: Memphis

Here Leg 2 Output is:

[Los Angeles, Los Angeles, Houston] //Here checked 2 index if Los Angeles available then push Houston on last index
[Los Angeles, Los Angeles, Memphis] //Here copy array index and add Memphis on last index
[Los Angeles, Los Angeles, Chicago] //Here copy array index and add Chicago on last index
[Los Angeles, Washington, Boise]
[Los Angeles, Washington, Memphis]
[Los Angeles, Washington, Houston]
[Los Angeles, Houston, Boise]
[Los Angeles, Houston, Memphis]

Leg 3 Value:
Leg 3 Output depends on Leg 1 and Leg 2 Output:

Start City: Houston, End City: Boston
Start City: Memphis, End City: Boston
Start City: Chicago, End City: Boston
Start City: Boise, End City: Boston

Here Leg 2 Output is:

[Los Angeles, Los Angeles, Houston, Boston] //Here checked 3 index if Houston available then push all place Boston
[Los Angeles, Los Angeles, Memphis, Boston] //Here checked 3 index if Memphis available then push all place Boston
[Los Angeles, Los Angeles, Chicago, Boston] 
[Los Angeles, Washington, Boise, Boston]
[Los Angeles, Washington, Memphis, Boston] //Here checked 3 index if Memphis available then push all place Boston
[Los Angeles, Washington, Houston, Boston] //Here checked 3 index if Houston available then push all place Boston
[Los Angeles, Houston, Boise, Boston]
[Los Angeles, Houston, Memphis, Boston]

I need this for my final Output:

[Los Angeles, Los Angeles, Houston, Boston]
[Los Angeles, Los Angeles, Memphis, Boston]
[Los Angeles, Los Angeles, Chicago, Boston] 
[Los Angeles, Washington, Boise, Boston]
[Los Angeles, Washington, Memphis, Boston]
[Los Angeles, Washington, Houston, Boston]
[Los Angeles, Houston, Boise, Boston]
[Los Angeles, Houston, Memphis, Boston]