Category: javascript

Category Added in a WPeMatico Campaign

javascript file not able to be requested from html but other type such as css, images were fetched successfully

I have some questions about why my js files (there are two here in this html) not able to be fetched from my localhost when I am testing in Firefox (for both of them, I got the NS_ERROR_NET_RESET error when I check the FireFox Developer Network Tab). Other files such as .css, .png were able to be transferred when I entered https://localhost:8080 into my tab.

<!doctype html>
<html lang="en">

<head>
    <!-- <base href="index.html"> -->
    
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="myCustomStyle.css" rel="stylesheet" type="text/css">
    <link rel="icon" type="image/png" href="myFavoriteicon.png">
        
     <!-- This is the first script tag to request a .js file -->
    <script src="/tools.js" async> </script>
    <title>Document's Special Title here!lala</title>
    
</head>
<body>
    This is HTML here!
    

    <p class="hometown">
        Another line here!
    </p>

    <img src="/check.png" alt="an image here" width="100" height="88">

    <p id="para1">
        Should be in Yellow color this line.
        Document.get
    </p>

    <p>
        <a href="https://www.Youtube.com/">
            <img src="https://www.tutorialspoint.com/assets/questions/media/426142-1668760872.png" alt="not shown!" style="width:50px;height:50px;">
        </a>
    </p>

    <h1 style ="color:blue"> A simple Chat Application</h1>
    <h2> a h2 here </h2>
    <p> a new paragraph!</p>
    <p> current module: __dirname</p>

    
    <label for="ChatBox1" id="ChatboxCol"> Conversation (You send): </label>
    <input type="text" id="ChatBox1"
    name = "Name" required minlength="8"
    maxlength="24" size="33" /> 

    
    
    <script>
        document.addEventListener("load", () => {
          console.log("This function is executed once the page is fully loaded");
        });
    </script>
    
    <!-- This is the second script tag to request a .js file -->
    <script src="./ListOfEventListenersUsed.js" type="text/javascript" async> </script> 
    
    </body>
</html>

And this is my firefox network tool tab:

enter image description here

could someone advises what I should do? thanks

I have tried testing in chrome as well, same thing happens. None of my .js file were fetched successfully. The NS_ERROR_NET_RESET appears for those two .js files.

How to hide the Intercom chat widget, and only chat window visible?

I’m currently using Intercoms live chat, as shown on this image I only want the chat window to be visible and hide or remove the chat button/widget.

I also checked their document and I didn’t find anything or maybe I just missed it.

<script>window.intercomSettings = {
  api_base: "https://api-iam.intercom.io",
  app_id: "yuow5buf",
};
</script>

<script>(function(){
  var w = window; 
  var ic = w.Intercom; 
  if (typeof ic === "function") {
    ic('reattach_activator'); 
    ic('update', w.intercomSettings);
  } else {
    var d = document; 
    var i = function() { i.c(arguments); }; 
    i.q = []; 
    i.c = function(args) { i.q.push(args); }; 
    w.Intercom = i; 
    var l = function() {
      var s = d.createElement('script');
      s.type = 'text/javascript'; 
      s.async = true; 
      s.src = 'https://widget.intercom.io/widget/yuow5buf'; 
      var x = d.getElementsByTagName('script')[0]; 
      x.parentNode.insertBefore(s, x);
    }; 
    if (document.readyState === 'complete') {
      l();
    } else if (w.attachEvent) {
      w.attachEvent('onload', l);
    } else {
      w.addEventListener('load', l, false);
    }
  }

  // Hide the chat button initially
  var intercomChatButton = document.querySelector('.intercom-launcher');
  if (intercomChatButton) {
    intercomChatButton.style.display = 'none';
  }

  // Observe changes to the chat window
  var observer = new MutationObserver(function() {
    var intercomChatWindow = document.querySelector('.intercom-messenger');
    if (intercomChatWindow && intercomChatWindow.style.display !== 'none') {
      intercomChatButton.style.display = 'none';
    } else {
      intercomChatButton.style.display = 'block';
    }
  });
  observer.observe(document.body, { childList: true, subtree: true });
})();
</script>

what I want to achieve is to make the chat window always visible no need any button/widget to open the chat.
And in case it doesn’t have an option or workaround for it, can you guys recommend a live chat that can it? I got stuck on this one, any help would be much appreciated!

Pass value of to onChange function in React using Props

I am trying to call a function from onChange event of <select> tag.

<select id="select-option" onChange = {() => this.props.onPressed(this.value)}>
     <option value="standard">Standard: 7 day</option>
     <option value="rush">Rush: 3 days</option>
     <option value="express">Express: next day</option>
     <option value="overnight">Overnight</option>
</select>

I want to pass the value of the <option> to onPressed() function. How can I do it?

Issues with Managing the Sliding Window in a JavaScript Function – Longest Substring Without Repeating Characters

I’ve been working on a JavaScript function to calculate the length of the longest substring without repeating characters. I encountered a couple of issues that I’m hoping to get some clarity on:

Using if vs. while for Duplicate Detection:
My initial implementation used an if statement to check for duplicates (if(set.has(s[right]))). However, I noticed it doesn’t work as expected, and replacing if with while (while(set.has(s[right]))) seems to solve the issue. Why does the while loop work correctly here instead of if?

Order of Operations with Increment and Deletion:
In my function, when a duplicate is detected, I tried to delete the character from the set immediately after incrementing the left pointer (left++ followed by set.delete(s[left])). This approach doesn’t seem to work properly. What’s the correct order of operations in this scenario to maintain the integrity of the sliding window?

function subs(s) {
       const set = new Set();
       let left = 0;
       let total = 0;
       for(let right = 0; right< s.length; right++) {
           if(set.has(s[right])){
            set.delete(s[left]);
            left++;
          }
          set.add(s[right]);
          total = Math.max(total, right - left + 1);
       }
       return total;
    }

Loop through an array and return all indexes not just the 1st value

As the title says atm i am looping through and array and when I try to return it, it only returns the first index.

const array = ['blue', 'orange', 'brown', 'pink'];

const stuff = () => {
    let store = [];
    let arr = array;
    console.log('this returns ['blue', 'orange', 'brown', 'pink']', array);
    for(let i = 0; i <= arr.length; i++) {
      console.log('Log individual indexes', arr[i]);
      const element = arr[i];
      console.log('stores those indexes in element', element);
      // in console I see:
      // blue
      // orange
      store.push(element);
      return element; // function only returns blue
    }
  }

I know its because a return stops the loop but how can I return all the values in the array:

When editing a dashboard and previewing it in another tab: Forms and process network calls are made in both tabs when changing page in preview

enter image description hereTitle: Preventing unnecessary network requests in Angular tabs

Description:

In my Angular project, when I switch to a specific tab, it makes some network requests that are visible in the Network section of the browser’s DevTools. However, these requests are also being made in other open tabs of my Angular project, even though they are not using those specific requests.

I want to ensure that these requests are only made in the tabs that actually need them. To achieve this, I’ve tried placing the services that make these requests in the ngOnDestroy lifecycle hook, but this hasn’t resolved the issue.

Question:

How can I prevent these unnecessary network requests from being made in other tabs of my Angular project? What strategies or best practices can I use to ensure that requests are only made in the tabs that require them?

What I’ve tried so far:

Placing services in the ngOnDestroy lifecycle hook
Expected outcome:

I expect the network requests to only be made in the tabs that are actively using them, and not in other open tabs of my Angular project.

How do I find the x coordinate and y coordinate of a group in Phaser 3?

I have created a dynamic group in phaser 3 using let group = this.physics.add.group(). However, I have tried group.x,group.x to try and get the x and y coordinate of the group, but the result seems to be undefined.

I want to find a way to find the x coordinate and the y coordinate of the group, but I haven’t found anything. The way I have created the group is let group = this.physics.add.group().

Issues with JavaScript-Based Keyboard in Shiny App on shinyapps.io

I’m working on a Shiny app that predicts the next word using n-grams. To enhance the user experience, I tried to build a custom keyboard interface using JavaScript and CSS. Everything works perfectly when I run the app locally, but once I upload it to shinyapps.io, the keyboard part isn’t rendering as expected.

After checking the logs in the browser’s console, I encountered the following errors:

Failed to load resource: the server responded with a status of 404 ()
next_word_app/:1 Refused to apply style from ‘https://matcord.shinyapps.io/next_word_app/_w_08a82524/Keyboard.css’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.
next_word_app/:63 Refused to apply style from ‘https://matcord.shinyapps.io/next_word_app/_w_08a82524/Keyboard.css’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.
It seems like the server is treating my CSS and JS files as HTML, leading to a MIME type mismatch that causes the resources to be blocked.

What I’ve Tried:

Verified that the files are in the www folder and referenced correctly in the app.
Checked the file extensions and content to ensure they match the expected types.
Ensured the app works perfectly in my local environment.
Despite this, the problem persists on shinyapps.io.

Has anyone encountered a similar issue or have any ideas on how I can resolve this? Any help would be greatly appreciated!

Check out my Shiny app!

Thanks in advance!

css and js file not called correctly in ftl

Im developing a color picker plugin and got it added in the app. However i cant make the plug in works as there is a problem with the ftl file(i think). Heres the error i got from the dev console.

` GET http://localhost:8080/jw/plugin/sample/cs/colpick.css net::ERR_ABORTED 404 (Not Found)
GET http://localhost:8080/jw/plugin/sample/js/colourpicker.js net::ERR_ABORTED 404 (Not Found)
GET http://localhost:8080/jw/plugin/sample/js/jqueryLibrary.js net::ERR_ABORTED 404 (Not Found)

Query.Deferred exception: $(...).colorPick is not a function TypeError: $(...).colorPick is not a function
TypeError: $(...).colorPick is not a function
at HTMLDocument.<anonymous> (preview/:185:22)
at e (common.preload.js?build=cab4c77:2:30005)
at t (common.preload.js?build=cab4c77:2:30307)`

The error happens when my path looks like this.

<script type="text/javascript"src=”${request.contextPath}/plugin/sample/js/jqueryLibrary.js”>`

i tried not using request.contextPath to this but it still does not work
<script type="text/javascript" src="/jw/plugin/sample/js/jqueryLibrary.js"></script>

i also tried to run this line in my browser search bar but the error is 404
http://localhost:8080/jw/plugin/sample/js/jqueryLibrary.js

let me know if i should paste my ftl file or any other file that might be related. please help me resolve this problem as it has been haunting me for a week.

Order of promises in Promise.allSettled()

I have the following piece of code

Promise.allSettled([
    foo(a), // expected to resolve
    foo(b), // expected to be rejected
])
.then((results) => {
    return results // one resolved and one rejected
})

results ends up with a rejected promise and a resolved promise.

However, if I change up the order of the promises, I get 2 rejected promises

Promise.allSettled([
    foo(b), // expected to be rejected
    foo(a), // expected to resolve
])
.then((results) => {
    return results // both rejected promises
})

Is this expected behavior? Ideally, I’d like to get one resolved promise regardless of the order of the promises

Javascript Date without consistency [duplicate]

I know that Javascript Date is really weird, to not say other thing but what I see in the example below is annoying and I don’t really know the reasons why.

/*
 * It will be considered as "2018-10-01", so if we consider the zero-index
 * way to see months we should at least see something like 2018-09-01T00:00:00.000Z
 * but we do see 2018-10-01T00:00:00.000Z
*/
const d1 = new Date("2018-10");

console.log(d1.getMonth()); // output 8 - not 9 or 10

console.log(d1.getDate()); // output 30 - not 01

console.log(d1.getTime()); // output 1538352000000

console.log(new Date(1538352000000)); // output 2018-10-01T00:00:00.000Z ... WHAT?

I’m so lost to understand why I got 8 and 30 in the example above.

I’m expecting to see correct day and month information.

And yes, I know we have date-fns and moment, but I really want to know the issue here.

Can’t change the fill color of a SVG element with Javascript

I’m puzzled by SVG fills. I can’t seem to set the fill of a rect with styling, and I can’t set the fill of a rect with Javascript. With this test program, element cal23 is black. Element cal24 is transparent, showing the underlying yellow through, but the Javascript doesn’t set the fill color to red.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Test of setting background color</title>
<style>
body    {background-color:yellow;}
</style>
</head>
<body>
<svg    xmlns:svg="http://www.w3.org/2000/svg"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20.2 11"
        >
<style>
        #cal23  {fill="none';}
</style>

<rect id="cal23" width="10" height="10" x="0" y="0" stroke-width="0.2" stroke="orange"/>
<text x="5" y="5" font-size="1.5" text-anchor="middle" fill="black">Test</text>

<rect id="cal24" width="10" height="10" x="10" y="0" stroke-width="0.2" stroke="pink" fill="none"/>
<text x="15" y="5" font-size="1.5" text-anchor="middle">Test</text>
</svg>
<script>
        document.getElementById('cal23').style.backgroundColor = "red";
        document.getElementById('cal24').style.backgroundColor = "red";
        console.log('Ran setColor on cal23 and cal24');
</script>
</body>
</html>