Category: javascript

Category Added in a WPeMatico Campaign

Event Listener is not calling function

I have an HTML/CSS file with a form and I’m trying to add an event listener to the button of the form.
The HTML looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
    ... all css files here
</head>


<body class="registrationFormBody"> 
    <section class="sectionForms">

        <div class="serviceProviderRegistrationFormDiv">
            <form class="serviceProviderRegistrationForm">
                .... labels and inputs
                <button id="verifyProviderAddress" type="button" value="ProviderAddress">Verify</button>
            </form>
        </div>
    </section>
</body>
<script type="module" src="publicjsGeocode.js"></script>
</html>

I also have my Geocode file that correctly selects the button:

let buttonVerifyProviderAddress = document.getElementById("verifyProviderAddress");

buttonVerifyProviderAddress.addEventListener("click", () => onClickVerifyAddress());

function onClickVerifyAddress()
{
    window.alert("I'm in");
    console.log("Verifying");
}

I checked on the debugger, the event listener is there:

enter image description here

But it’s not calling it. When I click nothing happens. No console.log, no window alert.
What am I doing wrong?

I’ve tried already change the way of adding the listener:

buttonVerifyProviderAddress.addEventListener("click",()=>{console.log("Hey")});
buttonVerifyProviderAddress.onclick = ()=>{console.log("Ola");};

But nothing happens.
I think something is preventing the event listener to actually call, but what? Does anyone have a clue?

Problems with Responsiveness

I did in my project accessibility button but I have problem with the Responsiveness of the Button. I can’t see the menu in screens untill the size 1300px and and even then there is a problem ‘cuz the the menu became bigger the bigger the screen. What can I do the solve this?

Here’s the code of the menu:

import React, { useState } from "react";
import "../../../css/AccessibilityMenu.css";

const AccessibilityMenu = ({
  style,
  onToggleDarkMode,
  onToggleTextOnly,
  onToggleAnimations,
  onToggleLinkHighlight,
}) => {
  const [fontSize, setFontSize] = useState(16);

  const fontFamilies = [
    { name: "Arial", text: " מעבר לפונט אריאל" },
    { name: "Times New Roman", text: "מעבר לפונט טיימס ניו רומן" },
    { name: "Verdana", text: "מעבר לפונט ורדנה " },
  ];

  const increaseLineSpacing = () => {
    const bodyStyles = getComputedStyle(document.body);
    const currentFontSize = parseFloat(bodyStyles.fontSize);
    const currentLineSpacing =
      parseFloat(bodyStyles.lineHeight) / currentFontSize;
    const newLineSpacing = currentLineSpacing + 0.2;
    document.body.style.lineHeight = `${newLineSpacing}`;
  };

  const decreaseLineSpacing = () => {
    const bodyStyles = getComputedStyle(document.body);
    const currentFontSize = parseFloat(bodyStyles.fontSize);
    const currentLineSpacing =
      parseFloat(bodyStyles.lineHeight) / currentFontSize;
    const newLineSpacing = currentLineSpacing - 0.2;
    document.body.style.lineHeight = `${newLineSpacing}`;
  };

  const increaseTextSize = () => {
    setFontSize((prevFontSize) => {
      const newFontSize = prevFontSize + 2;
      document.documentElement.style.fontSize = `${newFontSize}px`;
      console.log("New Font Size:", newFontSize);
      return newFontSize;
    });
  };

  const decreaseTextSize = () => {
    setFontSize((prevFontSize) => {
      const newFontSize = prevFontSize - 2;
      document.documentElement.style.fontSize = `${newFontSize}px`;
      console.log("New Font Size:", newFontSize);
      return newFontSize;
    });
  };

  const changeFontFamily = (fontFamily) => {
    document.body.style.fontFamily = fontFamily;
  };

  const changeTextColor = (color) => {
    document.body.style.color = color;
  };

  const toggleHeaderHighlight = () => {
    const headers = document.querySelectorAll("h1, h2, h3, h4, h5, h6");
    headers.forEach((header) => {
      header.classList.toggle("highlighted-header");
    });
  };

  return (
    <div className="accessibility-menu" style={style}>
      <button onClick={increaseTextSize}>הגדל טקסט</button>
      <button onClick={decreaseTextSize}>הקטן טקסט</button>
      <button onClick={onToggleDarkMode}>מצב לילה</button>
      <button onClick={onToggleTextOnly}>מצב טקסט בלבד</button>
      <button onClick={() => changeTextColor("black")}>טקסט שחור</button>
      <button onClick={() => changeTextColor("blue")}>טקסט כחול</button>
      <button onClick={() => changeTextColor("red")}>טקסט אדום</button>
      <button onClick={onToggleLinkHighlight}>הדגש קישורים</button>
      <button onClick={toggleHeaderHighlight}>סמן כותרות</button>

      <div className="font-family-buttons">
        {fontFamilies.map((fontFamily) => (
          <button
            key={fontFamily.name}
            onClick={() => changeFontFamily(fontFamily.name)}
          >
            {fontFamily.text}
          </button>
        ))}
      </div>
      <button onClick={increaseLineSpacing}>הגדל רווח בין שורות</button>
      <button onClick={decreaseLineSpacing}>הקטן רווח בין שורות</button>
    </div>
  );
};

export default AccessibilityMenu;

Ans this is the code of the css:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.accessibility-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: white;
  border: 1px solid #ccc;
  padding: 1rem;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 100%;
  width: auto;
}

.accessibility-menu button {
  background-color: #4a90e2;
  border: none;
  color: white;
  font-size: 14px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  padding: 0.5rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
  border-radius: 10px 10px 10px;
}

body.dark-mode {
  background-color: #333;
  color: red;
  font-weight: bold;
}

body.dark-mode a {
  color: red;
}

/* High contrast mode */
body.high-contrast {
  background-color: #fff;
  color: #000;
}

body.high-contrast a {
  color: #000;
}

/* Text-only mode */
body.text-only * {
  background: none !important;
  color: #000 !important;
  font-size: 16px !important;
  font-weight: normal !important;
  text-decoration: none !important;
  font-family: Arial, sans-serif !important;
}

body.text-only img {
  display: none !important;
}

body.text-only *::before,
body.text-only *::after {
  content: none !important;
}

.font-family-buttons button:not(:last-child) {
  margin-bottom: 0.5rem;
}

.highlight-links {
  background-color: yellow;
}

.highlighted-header {
  text-decoration: underline;
}

.zoomed-element {
  transform: scale(1.5);
  transition: transform 0.3s ease-in-out;
}

:root {
  --animation-speed: 1s;
}

.some-animation {
  animation-duration: var(--animation-speed);
}

@media only screen and (min-width: 320px) and (max-width: 480px) {
  .accessibility-menu {
    top: auto;
    bottom: 10%;
    max-height: 500px;
    overflow-y: auto;
    width: auto;
  }
}

@media only screen and (min-width: 481px) and (max-width: 767px) {
  .accessibility-menu {
    top: auto;
    bottom: 10%;
    max-height: 500px;
    overflow-y: auto;
    width: auto;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .accessibility-menu {
    top: auto;
    bottom: 10%;
    max-height: 500px;
    overflow-y: auto;
    width: auto;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1215px) {
  .accessibility-menu {
    top: auto;
    bottom: 10%;
    max-height: 500px;
    overflow-y: auto;
  }
}

@media only screen and (min-width: 1216px) {
  .accessibility-menu {
    top: auto;
    bottom: 10%;
    max-height: 500px;
    overflow-y: auto;
  }
}

And this is the code of the button itself:

import React, { useState, useEffect } from "react";
import { createPortal } from "react-dom";
import "../../../css/AccessibilityButton.css";
import AccessibilityMenu from "./AccessibilityMenu";

const AccessibilityButton = (props) => {
  const [menuVisible, setMenuVisible] = useState(false);
  const [menuStyle, setMenuStyle] = useState({});

  const handleClick = () => {
    setMenuVisible((prevVisible) => !prevVisible);
  };

  const handleKeyPress = (event) => {
    if (event.key === "Enter") {
      handleClick();
    }
  };

  const toggleAnimations = () => {
    document.body.classList.toggle("animation-active");
  };

  const toggleLinkHighlight = () => {
    const links = document.querySelectorAll("a");
    links.forEach((link) => {
      link.classList.toggle("highlight-links");
    });
  };

  useEffect(() => {
    const buttonElement = document.querySelector(".accessibility-button");
    if (buttonElement) {
      const rect = buttonElement.getBoundingClientRect();
      setMenuStyle({
        position: "absolute",
        top: `${rect.bottom}px`,
        left: `${rect.left}px`,
      });
    }
  }, []);

  const toggleDarkMode = () => {
    document.body.classList.toggle("dark-mode");
  };

  const toggleTextOnly = () => {
    document.body.classList.toggle("text-only");
  };

  const changeColors = (bgColor, textColor) => {
    document.body.style.backgroundColor = bgColor;
    document.body.style.color = textColor;
  };

  return (
    <>
      <button
        className="accessibility-button"
        onClick={handleClick}
        onKeyPress={handleKeyPress}
        aria-label={props.ariaLabel}
        tabIndex={0}
      >
        תפריט נגישות
      </button>
      {menuVisible &&
        createPortal(
          <AccessibilityMenu
            style={menuStyle}
            onToggleDarkMode={toggleDarkMode}
            onToggleTextOnly={toggleTextOnly}
            onChangeColors={changeColors}
            onToggleAnimations={toggleAnimations}
            onToggleLinkHighlight={toggleLinkHighlight}
          />,
          document.body
        )}
    </>
  );
};

export default AccessibilityButton;

And this is the code of the css of the button itslef:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.accessibility-button {
  position: absolute;
  top: 60px;
  right: 5px;
  font-size: 16px;
  padding: 8px 16px;
  border: none;
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

.accessibility-button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
}

@media only screen and (min-width: 1px) and (max-width: 480px) {
  .accessibility-button {
    position: absolute;
    top: 60px;
    right: 5px;
    font-size: 16px;
    padding: 4px 8px;
    border: none;
    background-color: #007bff;
    color: white;
    cursor: pointer;
  }
}

javascript create a variable with array

I need to create this data structure in Javascript:

var bar_data = {
  data: [
    [sistOper[0], tot[0]],
    [sistOper[1], tot[1]],
    [sistOper[2], tot[2],
    [sistOper[3], tot[3]]
  ],
  color: '#3c8dbc'
}

It works correctly, but if I have an array with 20 elements this syntax is very inefficient.

I’ve tried this, but doesn’t work:

var bar_data = {
  data: [[ sistOper, tot ]],
  color: '#3c8dbc'
}

Any suggestions?

When I run this JavaScript code in Visual Studio Code, some console.log() operations work but some don’t

I am working on a JavaScript objects exercise for a course I’m following, but when I run the code I don’t get the expected result. I’ve cut the code down to the essentials for clarity.

const myObject = {
    _array: [ 
        {item: 'a', item2: 'b', item3: 'c'},
        {item: 'd', item2: 'e', item3: 'f'},
        {item: 'g', item2: 'h', item3: 'i'}
        ],

    get items () {
        return this._array;
    },

    addThing (newItem1, newItem2, newItem3) {
        let thing = {
            item1: newItem1,
            item2: newItem2,
            item3: newItem3
        };
        /* `this.players.push(player);` is adding a new player object to the `_players` array of the `team` object. It uses the `push()` method to add the `player` object to the array. */
        this._array.push(thing);
      }

}
console.log('hello before');
myObject.addThing('j', 'k', 'l');
console.log(myObject._array);
console.log('hello after');

Running this from a terminal window gives me the expected result where the array is dumped …

Terminal capture

… but running it with F5 or Run and Debug gives me this

Debug console capture

I’d like to understand why there is no output of _array when run this way.

Convert array of number and object into array of number

I have an array in my Angular class containing number and object as shown below.

What I want to do is recreate the array with only number like so [5,8,9,1,7] i.e. I get the id of the object inside the array and append it to the array.

allowedDepartmentAccess = [
    5,
    8,
    9,
    {
        "id": 1,
        "name": "Human Resource",
        "abbreviation": "HR"
    },
    {
        "id": 7,
        "name": "Warehouse",
        "abbreviation": "WH"
    }
]

How to drag one div item from a scrollable area and drop it to another scrollable area?

I want to make a vertical and scrollable list of custom divs and I want to dragged them from it to another div area, droppable one, also with vertical scroll, see image below:

https://i.stack.imgur.com/v1N1j.png

I can’t do that with following HTML code:

<div class="container-fluid">
   <div id="sdsds" class="row">  
      <button id="addNewDevice" class="btn btn-primary">New Device</button>
   </div>
   <br>
   <div id="shared-lists" class="row">
      <div id="example2-left" class="list-group col"  style="overflow-y: scroll;height: 23em; max-width: 30%;">
         <div id="parentItem_Device1" class="list-group-item draggable" style="background-color: #ffffff26; border: 3px solid #a1a1a1; margin-bottom: 5px; padding: 0.1rem 0.25rem; position: relative;">
            <div class="row">
               <div class="col-form-label col-lg-6 col-sm-6 col-xs-6 col-md-6 col-xl-9 col-xxl-6">
                  <svg style="cursor: move;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-grip-vertical" viewBox="0 0 16 16">
                     <path d="M7 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0M7 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0M7 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0m-3 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0m-3 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0"></path>
                  </svg>
                  <span id="parentItemName_Device1">Device 1<span> </span></span>
               </div>
               <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 col-xl-1 col-xxl-1">
                  <a href="javascript:;" id="ww" class="btn btn-sm btn-clean btn-icon" title="Delete">
                     <span class="svg-icon svg-icon-md">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18px" height="24px" viewBox="0 0 24 24" version="1.1">
                           <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                              <rect x="0" y="0" width="24" height="24"></rect>
                              <path d="M6,8 L6,20.5 C6,21.3284271 6.67157288,22 7.5,22 L16.5,22 C17.3284271,22 18,21.3284271 18,20.5 L18,8 L6,8 Z" fill="#B5B5C3" fill-rule="nonzero"></path>
                              <path d="M14,4.5 L14,4 C14,3.44771525 13.5522847,3 13,3 L11,3 C10.4477153,3 10,3.44771525 10,4 L10,4.5 L5.5,4.5 C5.22385763,4.5 5,4.72385763 5,5 L5,5.5 C5,5.77614237 5.22385763,6 5.5,6 L18.5,6 C18.7761424,6 19,5.77614237 19,5.5 L19,5 C19,4.72385763 18.7761424,4.5 18.5,4.5 L14,4.5 Z" fill="#000000" opacity="0.3"></path>
                           </g>
                        </svg>
                     </span>
                  </a>
               </div>
            </div>
         </div>
      </div>
      <div id="example2-right" class="list-group col"  style="overflow-y: scroll;height: 23em;">
         <div class="list-group-item tinted treeParent" style="background-color: #78787826; border: 3px solid #a1a1a1; margin-bottom: 5px;">
            <span>DESTINATION 1</span>
            <div id="droppable" class="dropzones">
               <p>Drop here</p>
            </div>
         </div>
         <div class="list-group-item tinted treeParent" style="background-color: #78787826; border: 3px solid #a1a1a1; margin-bottom: 5px;">
            <span>DESTINATION 1</span>                                 
            <div id="droppable2" class="dropzones">
               <p>Drop here</p>
            </div>
         </div>
      </div>
   </div>
</div>

Every time that I’ve tried to dragged one item I can’t do it, because scrollable area didn’t let me, see image:

This is my basic jquery draggable / droppable code:

$(".draggable").draggable({
    revert: "false",
    helper: "clone"
});

$('.dropzones').droppable({ 
    drop: function(event, ui) {
        var newClone = $(ui.helper).clone();
        $(this).after(newClone);
    } 
});

And I’ve used this jquery lib. version:

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Do you have any suggestion?

Geolocation API – getCurrentPosition() does not resolve when watchPosition() is activated on Chrome

Is it normal that navigator.geolocation.getCurrentPosition() does not resolve on Chrome if navigator.geolocation.watchPosition() was called before.

For instance the issue can be reproduced with this:

navigator.geolocation.watchPosition(function(position) { console.log("watchPosition", position); }, console.error);

//this wont resolve on Chrome
navigator.geolocation.getCurrentPosition(function(position) { console.log("getCurrentPosition", position); }, console.error)

This issue was already observed in this question: navigator.geolocation.getCurrentPosition and navigator.geolocation.watchPosition are not working if used in same Page

want to maintain the sending order on every page in React pagination

Please check the programme here. I have pagination data with an asending order. On the 1st page, all the data is asending, but on the next page, asending data is not shown, so on every page, how do I show the asending data in pagination? For example, on the 1st page, data is showing like 1 2 3 in the second, or the rest of the pages id should be asending like 1 2 3 but when you go to the next page, it shows 2 3 1 so how do I solve that?

import Pagination from "@mui/material/Pagination";
import { useState } from "react";

export default function App() {
  const employees = [
    { id: 2, name: "Bob", country: "Belgium" },
    { id: 3, name: "Carl", country: "Canada" },
    { id: 1, name: "Alice", country: "Austria" },
    { id: 2, name: "Mike", country: "USA" },
    { id: 3, name: "Sam", country: "India" },
    { id: 1, name: "jake", country: "Japan" }
  ];
  const [emp] = useState(employees);
  const rowsPerPage = 3;
  const [page, setPage] = useState(1);
  const handleChangePage = (event, newPage) => {
    setPage(newPage);
  };
  const sortTypes = {
    assending: {
      class: "assending",
      fn: [...emp].sort((a, b) => (a.name > b.name ? 1 : -1)) 
    }
  };
  const startIndex = (page - 1) * rowsPerPage;
  const endIndex = startIndex + rowsPerPage;
  const displayedRows = sortTypes.assending.fn.slice(startIndex, endIndex);

 
  return (
    <>
      <table>
        <thead>
          <th>ID</th>
          <th>Name</th>
          <th>Country</th>
        </thead>
        {displayedRows.map((data, i) => (
          <tbody key={i}>
            <tr>
              <td>{data.id}</td>
              <td>{data.name}</td>
              <td>{data.country}</td>
            </tr>
          </tbody>
        ))}
      </table>
      <Pagination
        count={Math.ceil(emp.length / rowsPerPage)}
        color="primary"
        variant="outlined"
        page={page}
        onChange={handleChangePage}
      />
    </>
  );
}

ZOHO JS SDK library code is not working on my VSCODE i want to make widget

I want to build and package widgets in Zoho CRM. but i cant be able to use a single piece of code .I got error every time when i run code on ZOHO CRM. i got alway undefined value error in my code .I try very thing but it not working .

I just try all thinks to explain in this documentation ZOHO DOCUMENTATION But it is not working properly

I want to try to make widget in my ZOHO account but ZOHO sdk CDN is not working properly . could you please explain how can i use this CDN properly on code .I just want to make a widget

<!DOCTYPE html>
<html>
  <head>
    <script src=" https://js.zohostatic.com/creator/widgets/version/1.0/widgetsdk-min.js"></script>
    <meta charset="UTF-8">
    <script src=""></script>
  </head>
  <body>
    <h2>This is a sample Widget built using Zoho Extension toolkit.</h2>
    <h2>simple text</h2>
    <script>
      ZOHO.embeddedApp.on("PageLoad",function(data){ 
        console.log(data);
        ZOHO.CRM.CONFIG.getCurrentUser().then(function(data){
                            console.log(data);
                        });
      
      })
      ZOHO.embeddedApp.init()
    </script>
  </body>
</html>

Failed to parse source map in my terminal in vs code

It said failed to parse source map after using import antd/dist/antd.css

I tried looking for the source map so that I can rectify the issues since chat.openai.com provided me ways how to rectify it though using .env file but I tried that it still didn’t work. Please this the error I am facing below

Woocommerce: Hide Other Shipping Rate When COD Payment Gateway Selected

i found this code, you can use, but it’s not working if you use thirdparty plugin like table rate..please use snippet plugin if you don’t know how to install..

PHP CODE:

// Assuming you're working in WordPress or some other PHP-based system with WooCommerce

// Enqueue the script in your theme's functions.php or a custom plugin file
function enqueue_custom_script() {
    wp_enqueue_script('custom-script', get_template_directory_uri() . '/js/custom-script.js', array('jquery'), null, true);

    // Pass the URL to admin-ajax.php to your script
    wp_localize_script('custom-script', 'ajax_object', array('ajax_url' => admin_url('admin-ajax.php')));
}
add_action('wp_enqueue_scripts', 'enqueue_custom_script');

// Add an action to handle the AJAX request
function handle_cod_selection() {
    // Check if the COD payment method is selected
    if ($_POST['payment_method'] == 'cod') {
        // If COD is selected, hide the shipping options
        update_option('woocommerce_ship_to_countries', 'disabled');
    } else {
        // If another payment method is selected, show the shipping options
        update_option('woocommerce_ship_to_countries', 'all');
    }
    
    die(); // This is required to return a proper result
}
add_action('wp_ajax_handle_cod_selection', 'handle_cod_selection');
add_action('wp_ajax_nopriv_handle_cod_selection', 'handle_cod_selection');

JS CODE:

jQuery(document).ready(function ($) {
    // Listen for changes in the payment method
    $('form.checkout').on('change', 'input[name="payment_method"]', function () {
        var paymentMethod = $(this).val();

        // Perform an AJAX request to handle the payment method selection
        $.ajax({
            type: 'post',
            url: ajax_object.ajax_url,
            data: {
                action: 'handle_cod_selection',
                payment_method: paymentMethod
            },
            success: function (response) {
                // Handle the success response if needed
                console.log(response);
            }
        });
    });
});

Hide all shipping rate when choose cod payment

Issue while swapping elements in Shopify swappable

Actually i have a table in which there are multiple tbody elements and i am swapping tbody with one another and their child inside like tr with one another and they are swapping.
Now what i want is that tr elements should be swappable inside their parent tbody and they should not swap with the tr elements of other tbody elements.

I am using:

JS:

let tableContainer = document.querySelectorAll(".draggable-zone");
let tbodyContainer = document.querySelectorAll(".tbody_draggable_zone");
   

function initSwappable(containers) {
    if (containers.length === 0) {
        return false;
    }

    var swappable = new Swappable.default(containers, {
        draggable: ".draggable",
        handle: ".draggable .draggable-handle",
        mirror: {
            //appendTo: selector,
            appendTo: "body",
            constrainDimensions: true
        }
    });
}

initSwappable(tableContainer);
initSwappable(tbodyContainer);

HTML:

<table
  class="table align-middle draggable-zone table-row-dashed fs-6 gy-5"
  id="kt_table_users"
>
  <thead>
    <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
      <th class="w-10px pe-2"></th>
      <th class="w-10px pe-2"></th>
    </tr>
  </thead>
  <tbody class="draggable">
    <tr>
      <td class="ticker_td">
        <p class="fs-5">
          کوٹ رادھاکشن: جڑانوالہ میں ہونے والے افسوس ناک واقعہ کے بعد ،ملکی
          سیکیورٹی صورتحال کے پیش نظر کوٹ رادھاکشن شہر بھر میں پولیس کی جانب سے
          فلیگ مارچ کیا گیا
        </p>
      </td>
    </tr>
    <tr>
      <td colspan="12">
        <div class="ticker_details_table table-responsive">
          <div class="separator"></div>
          <table class="table align-middle table-row-dashed fs-6 gy-5">
            <tbody class="text-gray-600 fw-semibold tbody_draggable_zone">
              <tr class="draggable">
                <td>A</td>
              </tr>
              <tr class="draggable">
                <td>B</td>
              </tr>
            </tbody>
          </table>
        </div>
      </td>
    </tr>
  </tbody>
  <tbody class="draggable">
    <tr>
      <td class="ticker_td">
        <p class="fs-5">
          کوٹ رادھاکشن: جڑانوالہ میں ہونے والے افسوس ناک واقعہ کے بعد ،ملکی
          سیکیورٹی صورتحال کے پیش نظر کوٹ رادھاکشن شہر بھر میں پولیس کی جانب سے
          فلیگ مارچ کیا گیا
        </p>
      </td>
    </tr>
    <tr>
      <td colspan="12">
        <div class="ticker_details_table table-responsive">
          <div class="separator"></div>
          <table class="table align-middle table-row-dashed fs-6 gy-5">
            <tbody class="text-gray-600 fw-semibold tbody_draggable_zone">
              <tr class="draggable">
                <td>C</td>
              </tr>
              <tr class="draggable">
                <td>D</td>
              </tr>
            </tbody>
          </table>
        </div>
      </td>
    </tr>
  </tbody>
</table>;

rxjs function not running

I am trying to wait for a function to run in async context in rxjs, but I cannot get the function to run:

export async function scan(options: TaskOptions) {
  console.log("running scan");
  await setTimeout(5000);

  return true;
}

export const queue$ = new Subject<TaskOptions>();
const scanTasks$ = new Subject<TaskOptions>();

export const scanResult$ = scanTasks$.pipe(
  switchMap((options) =>
    // Doesn't run
    from(scan(options)).pipe(
      map(() => ({ error: undefined, success: true })),
      catchError((error: Error) => of({ error, success: false }))
    )
  )
);

queue$.subscribe((options) => {
  console.log("queue subscribe"); // runs
  scanTasks$.next(options);
});

// async context
queue$.next(options)

await firstValueFrom(scanResult$)

I also tried to add .subscribe to the end of the pipe at scanResult$. What would be the proper way to get the function to run

How to access a Django variable in an external JavaScript?

I am making a Django website. In it I am trying to access a variable in view.py file in an external static JS file linked to my template.

I tried using the syntax var is_empty = "{{is_empty}}", but it didn’t work in a if statement where if(Number(is_empty) == 1), and also I tried creating a div in my body(with id = "temp") and adding an attribute data-dj = {{is_empty}} and then using var is_empty = document.getElementById("temp").getAttribute("data-dj");, but it was showing an error that cannot call getAttribute on null.

Please help!