Category: javascript

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"
    }
]

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?

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

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}
      />
    </>
  );
}

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>

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

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

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>;

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

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!

I’ve build a website with a frontend and a backend. I’m doing a survey, and I send the questions asked to the backend. Here I want to use the API but I’ve encountered a problem, here is my code and the output of the Terminal:

app.post('/submit-data', async(req, res) => {
  const formData = req.body;
  const prompt = createPromptForOpenAI(formData, companyCriteria);

  try {
    const openaiResponse = await fetch('https://api.openai.com/v1/chat/completions', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer [OPENAI_API_KEY]`,
      },
      body: JSON.stringify({
        "model": "gpt-3.5-turbo",
        "usage": {
          "total_tokes": 300
        },
        "choices": [{
          "message": {
            "role": "user",
            "content": prompt,
          },
          "finish_reason": "stop",
          "index": 0
        }]
      })
    });

    const data = await openaiResponse.json();
    console.log(data);
    if (data.choices && data.choices.length > 0) {
      res.json({
        openAIResponse: data.choices[0].text
      });
    } else {
      console.error("OpenAI API response is missing 'choices':", data);
      res.status(500).send('Error processing OpenAI API response');
    }
  }
})

And this is the Terminal output:

Server running on port ${PORT}
{
  error: {
    message: "'messages' is a required property",
    type: 'invalid_request_error',
    param: null,
    code: null
  }
}
OpenAI API response is missing 'choices': {
  error: {
    message: "'messages' is a required property",
    type: 'invalid_request_error',
    param: null,
    code: null
  }
}

Thank you very much for helping me if you can!

I’ve read through the OpenAI API documentation, but I don’t get what I should change. I changed that the choices is invloved but that didnt really do anything.

I want to change group label of vuetify data-table. For earlier versions of Vuetify below the code was working fine but now it doesn’t work.

<va-data-table-server
  :items-per-page="50"
  :group-by="groupBy"
  row-create
  row-clone
  row-edit
  disable-edit
  disable-show
  disable-clone
  disable-create-redirect
>
  <template v-slot:column.data-table-group>
  </template>
</va-data-table-server>

Here is demo link.

https://play.vuetifyjs.com/#eNq9lt9vmzAQx

I have a general Javascript question

The setup

1. Webserver ( number 1 ) with a website that uses html and javascript

2. A second ( number 2 ) webserver with Apache and Django

Webserver 1 with html / javascript page < ——- javascript applications requests data from Webserver 2 ———- > Webserver 2

The website from point 1 runs a javascript application that sends data to the web server number 2.

How can I make sure that web server number 2 only accepts http requests from the javascript application of web server number 1 ? For example I had
thought of a csrf token.

Is this already a good approach, are there any other possibilities I have? Thanks in advance.

i have following example from code

interface A {
    a:string;
}

interface B extends A{
    b:string;
}

const b:B = {
    a:'a',
    b:'b'
}

const a:A = b;

console.log(a)

The question is. Now it prints both properties ‘a’ and ‘b’. However I would only like to get the A properties excluding the B properties.

Any anser appreciated.

I tried AES-256 ECB encryption in JavaScript and the result is: ipgM+tsZuzq1CjE1nDxMmA== but the same key value and message I tried on the online encryption website gave a different result

can someone explain to me about this?