Category: javascript

I want to intercept/suppress http code 404 (not found) error messages from being listed in the console. In my code below, I have tried both catch and onerror. It’s not working.

      val = "abc";

      try {
        var xhr = new XMLHttpRequest();
        xhr.open('HEAD', val, true);

        xhr.onload = function() {
          ...
        };
        xhr.onerror = function() {
          ...
        }

        xhr.send();
      } catch (ex) {
        ...
      }

how to design like bookmyshow seat plan in php?

any guide me

I would like to trigger a pop up message whenever people click on a button.

My button is of

class="send:after"

And my pop up javascript is as below:

<script type="text/javascript">
    
    
window.addEventListener("click", function(){ 
    setTimeout(
        function open(event){
            document.querySelector(".popup").style.display = "block";
        },
        2000 
    )
});


document.querySelector("#close").addEventListener("click", function(){
    document.querySelector(".popup").style.display = "none";
});
    </script>

How can I assign that button class to the pop up to make it appear every time people click on the button?

I have tried this method but it is not working

<script type="text/javascript">
    
    var elem = document.getElementsByClassName('send:after');

for(var i = 0; i < elem.length; i++) {
 elem[i].addEventListener("click", function(){ 
    
            document.querySelector(".popup").style.display = "block";
       

     
 }, false);
}
    



document.querySelector("#close").addEventListener("click", function(){
    document.querySelector(".popup").style.display = "none";
});
    </script>

Hopefully can get some guidance on this. Thank You

I could use some help with explaining to me how custom commands in cypress work. I am currently writing a function that reads a json file and increments the contents by 1 and want to return it to the test spec so it could be typed into a field. Note* new to JS and Cypress

Here is the code from commands.ts:

Cypress.Commands.add('newUser', () => {
    cy.readFile('cypress/fixtures/users.js
    const oldUser = user.user;
    cy.log(typeof oldUser);
    // Getting old number from user
    const reg = /d+/gm;
    let oldNum = oldUser.match(reg);
    cy.log(oldNum);
    oldNum = toInteger(oldNum);
    cy.log(typeof oldNum);
    // New number for user
    const newNum = oldNum + 1;
    cy.log(newNum.toString());
    let newUser = oldUser.split(reg);
    cy.log(newUser);
    // Add to a specified location
    newUser.splice(1, 0, newNum);
    cy.log(newUser);
    newUser = newUser.join('');
    // cy.log(newUser);
    cy.writeFile('cypress/fixtures/users.json', { user: newUser });
    return newUser;
  });
});

and I am trying to use it in the spec file like this:

const newUser = cy.newUser();
    cy.log(newUser);
    cy.get('[data-cy="email_field"]').type(newUser);

I think part of my issue is not fully understanding how ‘chaining’ works with Cypress and most examples of Custom commands show it using or manipulating something in the DOM but it seems I am more writing a Helper function that I will want to re-use in other tests…

Any guidance is greatly appreciated

I’ve tried using ‘wrap’ and ‘then’ but I don’t think I have the order right (probably due to not fully understanding JS)

Below code, full screen option not working safari browser on iphone, But it working fine Mac,iPad and windows laptop and android mobile. How to fixes this issue?

if (devTag.requestFullscreen) {
    devTag.requestFullscreen();
    } else if (devTag.mozRequestFullScreen) { // Firefox
                devTag.mozRequestFullScreen();
    } else if (devTag.webkitRequestFullscreen) { // Chrome, Safari, and Opera
                if (navigator.userAgent.match(/iPhone|iPod/i)) {
                    // Fallback for older versions of Safari on iPhone
                    devTag.webkitRequestFullscreen();
                } else {
                    devTag.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
                }
    } else if (devTag.msRequestFullscreen) { // IE/Edge
                fullscreenImage.msRequestFullscreen();
    }else{
         alert("Fullscreen mode is not supported in this browser");
    }

Try to Full screen all browser in all device, But this code not working on iPhone device.

I am facing an issue on my woocommerce wordpress website product page and after that on every page till the payment page. kindly suggest me something about it.. I have attached the screenshot below.

Website link

screenshot of the error

I have already tried on deactivating and then activating all the plugins but still facing the same issue.

I am new to JavaScript.

Context:
I created a bookmarklet (a browser bookmark that executes JavaScript instead of opening a webpage) that creates a “mousedown” event listener. When the listener is called it determines what element is under the mouse pointer, then if the element is text it changes the text color, alerts the user with some information, and when the alert is over reverts the text to its original color.
Here is the basic code:

document.addEventListener('mousedown', e => {
    const element = document.elementFromPoint(e.clientX, e.clientY);
    if (element is text) {
        const originalBackgroundColor = getComputedStyle(element).backgroundColor;
        const originalColor = getComputedStyle(element).color;
        element.style.backgroundColor = "yellow";
        element.style.color = "black";
        alert(some text);
        element.style.backgroundColor = originalBackgroundColor;
        element.style.color = originalColor;
    }
})

Problem:
Although the element style is updated before the alert is called, it doesn’t appear to update on screen before the alert is displayed, so you cannot see a change.

I determined that there must be some delay between when the style is updated in the code and when it actually updates on-screen, so I tried implementing a setTimeout() function to combat this:

        element.style.backgroundColor = "yellow";
        element.style.color = "black";
        setTimeout(() => {
            alert(some text);
            element.style.backgroundColor = originalBackgroundColor;
            element.style.color = originalColor;
        }, 0)

This seems to work about 90% of the time, but occasionally some text will not visually update in time before the alert is displayed. I tried upping the delay time on the setTimeout() function to 10ms, which still doesn’t always work. When I change it to 20ms it seems to always work, and I have determined that it is most likely because the screen refreshes every ~17ms (60fps), so a 20ms delay nearly guarantees the screen has refreshed before the alert is called.
However, just having a 20ms delay seems arbitrary and there is also a somewhat noticeable delay between when the text is clicked and when the alert is displayed.

Is there a better way to do this? Perhaps a way to wait exactly one frame before calling the alert? Or force the text to update visually before the alert is called?
Any help would be greatly appreciated.

Can you please tell me how to parse html string into an array object using regex in javascript? Also, using replace and match?

String:

<div class="block"><div id="div1"><a href="#">1</a></div>12<p class="abc">123</p>56</div>

Array of objects:

[{
  tag:"div",
  attrs:{class:"block"},
  type:"element",
  childrens:[
   {
    tag:"div",
    attrs:{id:"div1"},
    type:"element",
    childrens:[{
      tag:"a",
      attrs:{href:"#"},
      type:"element",
      childrens:[
       {
         tag:null,
         type:"text",
         textContent:"1"
       }
      ]
    },
    {
     tag:null,
     type:"text",
     textContent:"12"
    }
    ...
    ]
   }
  ]
}]

This can be done via replace or matchAll, but it’s not entirely clear how. If it’s not difficult for you, help me write such a code.

If there are two tags, then also make an array of two such objects.

I will be very grateful for the answer!

I am looping through FormData.entries() when performing form validation. However the entries do not include a radio button. The following is how I initialize my loop, and I have added the logging:

for (let [fieldName, val] of formData.entries()) {
  console.log(fieldName);

This results in the following being emitted to console:

• name
• email
• property
• deliveryAddr
• startDate
• duration
• other

I expected deliveryCity to come right after deliveryAddr. Below is the block of code that contains them both. Please note various classes are from Bulma. My first thought was that I had not specified the value attribute for the radio buttons, but adding those did not result in deliveryCity being added to the FormData.entries() Thanks for having a look.

<div class="mt-2 is-hidden abc-contact-form-delivery-required-fields">
  <div class="field">
    <label class="label is-size-4">
      <span class="mr-1 has-text-primary-dark">Delivery Street Address</span>
      <span class="has-text-danger">*</span>
    </label>
    <div class="control has-icons-left has-icons-right abc-featured-property-label">
      <input class="input" type="text" class="abc-contact-form-field-delivery-addr" name="deliveryAddr" placeholder="Your Beach Home Address">
      <span class="icon is-small is-left">
        <i class="fas fa-road"></i>
      </span>
    </div>
  </div>
  <div>
    <label class="label is-size-4">
      <span class="mr-1 has-text-primary-dark">Delivery City</span>
      <span class="has-text-danger">*</span>
    </label>
    <div class="mb-3 abc-featured-property-label">Sorry we do not deliver to Fort Morgan</div>
    <div class="field abc-featured-property-label">
      <div class="control">
        <label class="radio is-size-5">
          <input type="radio" name="delivery-city" value="Orange Beach" class="abc-contact-form-field-delivery-city">
          Orange Beach
        </label>
        <label class="radio is-size-5">
          <input type="radio" name="delivery-city" value="Gulf Shores" class="abc-contact-form-field-delivery-city">
          Gulf Shores
        </label>
      </div>
    </div>
  </div>
</div>

I have a django app that uses wifi trilateration to calculate a device’s location in x,y. The calculated x,y values are expressed according to the real world locations of 3 wifi access points x1,y1, x2,y2, x3,y3. In the calculations x1, y1 is treated as the point of origin. After the trilateration is done, I want to show the location on a live map using ajax to send the device’s live location.
the map in my app is contained within a div with class .level.level–current which only covers part of the screen.
how can i go from the x,y value given by the trilateration to pixel values that can be expressed within the map?
The trilateration point of origin, x1,y1, may be different from the first pixel of the .level.level–current div.

I have a folder name called menu. This is my root folder. The menu has 2 different folders, slider and dropdown.

I want to set a different indent space in the dropdown folder by using local settings.json. Any other files that outside of the dropdown folder should be affected by User/settings.json.

I set the indent space to 4 in dropdown/.vscode/settings.json, 2 in User/settings.json, but when I open the menu folder on VSC and create a new file in dropdown menu the indent space still set to 2.

Any solutions to fix this problem?

I have experience working with SPA frameworks like Angular and Vue, but I’m a bit naive when it comes to other rendering patterns (SSR, SSG…).

As far as I’m aware, the HTTP requests always come from the frontend or from another service consuming the API/Backend.

My app uses gulp, jquery/ajax/lodash libraries, and pure JS to manipulate and control the reactivity of the JSP that comes from the Java/Tomcat server.

Here’s my problem…

I want to integrate Keycloak with the frontend so that the user can log in from there and only then be redirected to the actual app.

But… I have no idea where this ‘app entry point’ is.

From the Angular perspective, I would usually put this redirect inside app.module.ts using some npm library like keycloak-angular.

Is it possible that this redirect to http://localhost:tomcat_url/login, which occurs once the Maven build is finished, is not being made by the frontend?

I’m not looking for an objective answer like look here, do that…

Just a hint on how to start.

I encountered an issue when making cross-browser calls between Chrome and Firefox users in a WebRTC application. User 2 (using Firefox) receives an error message in the Chrome console: “script.js: Error: Could not start video source,” preventing the display of both the user’s own video and the video from User 1.

I am testing the WebRTC app locally by opening two browsers on the same machine. The WebSocket is initialized with the following URL: const wsUrl = “ws://127.0.0.1:3000/one2one”;

Both User 1 and User 2 have granted permission to access the microphone and camera in their browser settings and also from windows 10 settings. The Chrome and Firefox versions used support the necessary WebRTC features, and the signaling server is functioning correctly, properly handling the offer and answer exchange.stun tun server i have added alredy(as of now public one not yet tried coturn).As i am using kurento utils i am not using getUserMedia().

Interestingly, the same error message occurs when User 1 (Chrome) initiates a call to User 2 (Firefox). This issue persists regardless of the browser configuration.

It seems that the error is specifically related to the video source and arises when establishing the WebRTC connection between Chrome and Firefox browsers. The same issue occurs when using two Chrome browsers for testing.

I would greatly appreciate any insights or suggestions on how to resolve this issue. The application is being developed in Node.js with Kurento media server.

Note: As i am testing localy i am not using ssl and https.My kurento docker image is running on a remote desktop and docker image is running fine

i am following the code in kurento official docs

https://doc-kurento.readthedocs.io/en/latest/tutorials/node/tutorial-one2one.html

I have a problem here…

// Search Bar Page
    let searchBar = document.querySelector(".search-bar");
    let searchBarFooter = document.querySelector(".search-bar-footer");
    let searchPage = document.querySelector(".search-page");
    let cancleBtn = document.querySelector("#cancle-btn");

    searchBar.onclick = function () {
        searchPage.style.display = "flex"
    }
    searchBarFooter.onclick = function () {
        searchPage.style.display = "flex"
    }
    cancleBtn.onclick = function () {
        searchPage.style.display = "none"
    }

    
// Back Btn From Project Info 
    let back = document.querySelector(".back");

    back.onclick = function(){
    history.back();
    }

JS code

There is two ideas, the first is (search bar page) and the second is after the second comment so the first idea is working but the second does not because of the first. It means the first idea is affect on the second because when I have deleted the first then the second workes and I have no idea why??? and I want to make all work.
please help

I’m working on an iframe, the iframe needs to show a HTML code obtained from a response, I have this code:

    function openDocStatusModal(subdomain, docId) {
        $("#overlay").fadeIn(500);
        getDocStatusView(docId)
        .then(function(result) {
            var decodedHtmlResult = htmlDecode(result);
            console.log(decodedHtmlResult);
            showStatusModal(result);
            $("#overlay").fadeOut(500);
        })
        .catch(function(error) {
            // Manejar errores aquí
            console.error(error);
            $("#overlay").fadeOut(500);
        });
    }
    function getDocStatusView(docId) {
        return new Promise(function(resolve, reject) {
            XPointDocStatusViewController.getDocStatusView(docId, function(result, event) {
                if (event.status) {
                    resolve(result);
                } else {
                    reject(event.message);
                }
            });
        });
    }
    function showStatusModal(htmlContent) {
        var decodedHtml = htmlDecode(htmlContent);
        $('.alert-box').empty();
        $('.alert-box').html(decodedHtml);
        $('.alert-box').show();
        openModal();
    }
    function htmlDecode(input) {
        var doc = new DOMParser().parseFromString(input, "text/html");
        return doc.documentElement.innerHTML;
    }

the result is a text with a complete HTML code that has CSS URL
But I need to show that HTML code as HTML, not text

I don’t know exactly how can I show that HTML as HTML and not as a text