Category: javascript

I have a task schedule similar to the picture on the website (https://app.todoist.com/app/today). If the current time exceeds the scheduled time for the todo, it will automatically update the expiration date! (I am using React.js). Thank you for reading. enter image description here]1

In order to use Mongo-Session-Store, I needed to install “connect-mongo” npm package to use in my project to ** use sessions through Mongo Atlas**. But its not getting installed due to version incompatibility of another npm packages such as “cloudinary” – a cloud based service platform.

Terminal eror
package.json file

I tried changing versions of the indicated packages. Also I tried to install it forcibly by commands such as npm install connect-mongo –force and npm install connect-mongo –legacy-peer-deps, but still its not getting installed.

I’m creating my first browser extension – and this is for Firefox (testing in Firefox Dev v120), ive included an image in ‘images’ directory of the extension, i have “web_accessible_resources” in my manifest, but the image wont load.
At the moment im using manifest v2, i also tried with manifest v3 – taking note of what Mozilla say here: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources

But using manifest v2 no image will display. If i use manifest v3 & include "matches" the extension throws an error.

My manifest.json (v2)

{
    "manifest_version": 2,
    "name": "Newscorp",
    "version": "1.0",
  
    "description": "An attempt to replace the logo's of Newscorp news sites with more correct logos",
  
    "icons": {
      "48": "icons/border-48.png"
    },
  
    "content_scripts": [
      {
        "matches": ["*://*.heraldsun.com.au/*"],
        "js": ["newscorp.js"]
      }
    ],

    "web_accessible_resources": [
        "images/Herald-Scum.png"
      ]   
  }

if i try v3 manifest then web resources has this:

"web_accessible_resources": [
    {
      "resources": ["Herald-Scum.png"],
      "matches": ["/images/*"]
    }
]

and here’s my JS

document.body.style.border = "2px solid red";
var head= document.getElementsByClassName("header_link_image")[0];
head.src = "images/Herald-Scum.png";

In debugging in the browser (with v2 manifest) – i can see its replaced the image src

but it appears the extension is trying to load the image from the website URL & not from the extension, so its getting a 404 for the image (as obviously it doesn’t exist on the website)

I am using javascript for form validation and the calling the backend api using fetch the backend is hanlded by django then the view associated by the api is rendering a page with some context but the response is going back the fetch instead of returning the html page so i want to render the page with some context
how can i do it

javascript form validation

try {
        const response = await fetch("/save_dependent", { // Ensure you replace "/save_dependent" with your actual endpoint
            method: "POST",
            headers: {
                "X-CSRFToken": document.querySelector('input[name="csrfmiddlewaretoken"]').value, // Pass the CSRF token in the request headers
                // Do not set 'Content-Type' manually; let the browser handle it for multipart/form-data boundary
            },
            body: formData,
        });
        if (response.ok) {
            let data = await response.text(); 
            console.log('Server Response:', data);

        } else {
            // Handle HTTP error responses (e.g., 400, 401, 403, 404, 500)
            console.error('Server responded with non-OK status:', response.status);
        }
        } catch (error) {
        console.error('Error:', error);
    }

views.py

@login_required(login_url='auth/signin')
def save_dependent(request):
    # print('request.data: ',request.data)
    print("POST data:")
    for key, value in request.POST.items():
        print(f"{key}: {value}")
    if request.method == 'POST':
        uploaded_file = request.FILES.get('dependent_docs')
        print('uploaded_file ',uploaded_file)
        if uploaded_file:
            # Handle file processing
            print(f"Received file: {uploaded_file.name}")
            save_path = os.path.join(SETTINGS.BASE_DIR, 'static', 'assets', 'img', 'beyond_border_dependents_doc', uploaded_file.name)
            try:
                # Writing the uploaded file to the specified directory
                with open(save_path, 'wb+') as destination:
                    for chunk in uploaded_file.chunks():
                        destination.write(chunk)
                print('returning....')
                return render(request, 'nhcp_registration_test.html',{'dependent_saved':'successs'})
                # return HttpResponse("File uploaded successfully")
            except Exception as e:
                # Handle exceptions that occurred during file upload
                print(f"Failed to upload file. Error: {e}")
                return HttpResponse("Failed to upload file.", status=500)
        else:
            print('in else of uploaded_file')
            return render(request, 'nhcp_registration.html',{'dependent_saved':'successs'})
    print('at last return')    
    return render(request, 'nhcp_registration_test.html')

i want to the view to render a html page with some context but as i am calling the backend api using fetch the output of view is being returned to the response of the fetch
but i want to render the page with the context

I tried to render the output of the view( which is a html page with context) using document.documentElement.innerHTML = data;
but it is not working and i don’t think it is the best way so how can i render the html page with the context which is reutrned by the view

I created a filter option to filter the products by brand
So, In my index.html

<select id="brandFilter">
              {%  for v in vendors  %}
                <option value="">All Brands</option>
                <option value="brand1" data-filter="vendor" class="filter-checkbox" type="checkbox" name="checkbox" value="{{v.id}}">{{v.title}}</option>
                <!-- Add more options as needed -->
              {%  endfor  %}
            </select>

And I make a script for this So, In my function.js

$(document).ready(function(){
    $(".filter-checkbox").on("click" , function(){
        console.log("Clicked");
    })
})

And I also connected the template with the js file

<script src="{% static 'assets/js/function.js' %}"></script>

by this code. I am sure that the js file is connected with template but the filter function is not working.
And also In my context-processor.py

def default(request):
    categories=Category.objects.all()
    vendors=Vendor.objects.all()
    try:
        address=Address.objects.get(user=request.user)
    except:
        address=None
    return {
        'categories':categories,
        'address':address,
        'vendors':vendors,
    }

Please help me out with this!!!

I’m using spatialNavigation for focusing the element as below code

in index.html

<script src="https://cdn.jsdelivr.net/npm/[email protected]/spatial_navigation.min.js"></script>
<script>
window.addEventListener('load', function () {
              // Initialize
              SpatialNavigation.init();
        
              // Define navigable elements (anchors and elements with "focusable" class).
              SpatialNavigation.add({
                selector: '.focusable',
                straightOnly: true,
                straightOverlapThreshold: 0.5,
                rememberSource: true,
              });
        
              // Make the *currently existing* navigable elements focusable.
              SpatialNavigation.makeFocusable();
        
              // Focus the first navigable element.
              SpatialNavigation.focus();
            });
</script>

inside component

<div>
  <button className="myFirstElement focusable">
    <div>
      <img src={'images/nocontent.png'} className="nocontentcard" />
      <img className="cardimage1" src={'images/landscape_card.png'} />           
    </div>
   </button>

  <button className="mySecondElement focusable">
    <div>
      <img src={'images/nocontent.png'} className="nocontentcard" />
      <img className="cardimage2" src={'images/landscape_card.png'} />
    </div>
   </button>
</div>

where ever I want to focus I’ll use focusable classname to add the focus styling

I need outline focus shifting smooth style like as a below video

I have a basic form that I am trying to submit, with no luck.

My main goal is to introduce a modal that has a “Are you sure you would like to submit the form”, with a cancel and a submit (external) button that would allow the user pass the details along.

It is a basic form where I’m trying to use form actions to retrieve the values on the backend.

+page.svelte

<div class="base">
    <form id='myCustomForm' method="POST" action="?/create" use:enhance={createUser}>
        <label>
            Name
            <input type="text" name="name" required />
        </label>
        <label>
            Age
            <input type="number" name="age" required />
        </label>
        <button type="submit">Submit</button>
    </form>
    <div class="outsideSubmit">
        <button type="submit" form="myCustomForm">Outside Submit</button>
    </div>
</div>

On the server side of things, I have a very basic form using which I’m trying to retrieve the values

+page.server.ts

async function createAction({ request }){
    const data = await request.formData().then(res => res.json())
    console.log("create:", data)

    return { success: true}
}

export const actions = {
    default: createAction,
    "/create": createAction,
    "create": createAction
} satisfies Actions

However, I keep receiving the following error:

{
    "type": "error",
    "error": {
        "message": "POST method not allowed. No actions exist for this page"
    },
    "status": 405
}

Everything is at a root-level, so I don’t understand why this is an issue. I have a minimum reproducible example CodeSandbox here

Also added a csrf: { checkOrigin: false } to the svelte.config.js

My larger problem is that I am unable to submit the form using the external button. I’m setting the value of the formId dynamically. My guess is that it is not able to find the form from the modal. But trying to solve this problem first.

when i try solve a xss game which is sudo.co.il/xss’s level 13.
Parentheses are prohibited on this site,my payload is ';u0061u006Cu0065u0072u0074`//`
I successfully executed the alert，but i failed when i want to alert with document.domain context

i try this payload';u0061u006Cu0065u0072u0074document.domain`//`,but i failed
my question is why this payload doesn’t execute correcttly and how can i alert with domain context

I’m trying to scrape data from a script. First I use soup.find_all then convert it using js2py and finally print the desired data. but it didn’t work. I want to know how can I collect soldNum information?

Here’s my code:

from bs4 import BeautifulSoup
import requests
import js2py

html_text = requests.get('https://www.daraz.com.bd/womens-shalwar-kameez/?spm=a2a0e.home.cate_1_1.2.735212f7tVtHu9&price=600-&from=filter').text
soup = BeautifulSoup(html_text, 'lxml')
# Find the div with the specific attribute
script_content = soup.find_all('script')[3]
for script in script_content:
    f = js2py.eval_js(script)
    print(f)
    soldNum = f['soldNum']
    print(soldNum)

Does anyone know how I could implement an algorithm to solve this problem directly in angular (with ionic) the idea is that my app works without internet.

I saw algorithms in python, but I don’t know if the solution goes that way.

I researched for a while to see if there was anything but found this library.
npm install –save stock-cutting but the howToCutBoards2D doesn’t work from.

I need to know the purpose of console.log in js

console.log purpose .Need a detailed explanation of console.log with a basic example so as to understand how it works in applications .Also how will it help in debugging the code if error exist

I need regular expression that validate string in such way – The string is not valid when it contains ONLY numbers OR is not valid when it contains only letters.
So 12345 – not valid, gwgqw – also not valid. Everthing another is valid – 321fw3r@# or fweqfw@$@ or 1243WEF or 12332!@$!@$

I tried something like that, but it doesnt work ofc:

this.regexValidator(new RegExp('[^a-zA-Z]|[^0-9]'), {

Im noobie in regexps so just give me regexp wih explanation please))). I tried to find it in the internet but i havent found anything like that. Thanks.

I am trying to make a site where the user can hit a button and it will return data from the array. For example, a button called ‘show male dogs’ should bring back the 3 male dogs in the array.

I am not seeing any errors, but nothing happens when I click the button.

<!DOCTYPE html>
<html lang="en">
 <body>  
  <main> 
   <br> <!-- ******************* Button *********************** -->
   <button onclick="showMales()"> # Show Male Dogs </button>
   <p id="btn"></p>

    <br> <!-- ******************* JS Code *********************** -->
    <script>
     const dogArray = [
      {Name: "Boris", Gender: "Male", Age: "Senior", Breed: "Labrador", Link:    "Boris.html"},
      {Name: "Lucy", Gender: "Female", Age: "Puppy", Breed: "Golden Retriever", Link: "Lucy.html"},
      {Name: "Daisy", Gender: "Female", Age: "Senior", Breed: "Golden Retriever", Link: "Daisy.html"}, 
      {Name: "Honey", Gender: "Female", Age: "Puppy", Breed: "Golden Retriever", Link: "Honey.html"}, 
      {Name: "Harley", Gender: "Male", Age: "Senior", Breed: "Labrador", Link: "Haryley.html"}, 
      {Name: "Dolly", Gender: "Female", Age: "Puppy", Breed: "Golden Retriever", Link: "Dolly.html"},
      {Name: "Max", Gender: "Male", Age: "Senior", Breed: "Golden Retriever", Link: "Max.html"}, 
      {Name: "Birdie", Gender: "Female", Age: "Senior", Breed: "Pregnant Hog", Link: "Birdie.html"}, 
      ];

      function showMales(dog) {
      return dog.Gender === "Male";
      }

      console.log(dogArray.find(showMales));
    </script>
 </main>           
</body> 

I use date-fns and I want to know the first day of the month and the last day.

The problem is get both but with 2 hours back so I get the previous month and the current month day minus one. How can I remove the timezone ?

expected output:

2024-04-01T00:00:00.000Z
2024-04-30T00:00:00.000Z

recieved output:

2024-03-31T22:00:00.000Z
2024-04-29T22:00:00.000Z

here is my code:

const { addMonths, lastDayOfMonth } = require('date-fns');

const today = new Date();

const monthPlusOne = addMonths(today, 1);

const firstDay = new Date(
  monthPlusOne.getFullYear(),
  monthPlusOne.getMonth(),
  1
);

const lastDay = lastDayOfMonth(firstDay);

console.log(firstDay);

console.log(lastDay);

I created session in php and navigate to the sample Mastercard payment gateway.I cansucessfully navigate to it but I cannot obtain the data from afterRedirect function passed by beforeRedirect function. It seems to be afterRedirect funtion doesn’t work. Is it because security conditions in payment gateway. Can you offer some help to solve this problem. I want to bring back passed data like orderId, sessionId ….

Here are my functions,

    function beforeRedirect() {
        return {
            successIndicator: successIndicator,
            orderId: orderId,
            sessionId: sessionId,
            sessionVersion: sessionVersion,
            merchantId: merchantId
        };
    }

    function afterRedirect(data) {
        //return;
        //return false;
    // Compare with the resultIndicator saved in the completeCallback() method
        if (resultIndicator) {
            var result = (resultIndicator === data.successIndicator) ? "SUCCESS" : "ERROR";
            window.location.href = "payment-complete.php/" + data.orderId + "/" + result;
            //break;
        }
        else {
            successIndicator = data.successIndicator;
            alert(successIndicator);
            orderId = data.orderId;
            sessionId = data.sessionId;
            sessionVersion = data.sessionVersion;
            merchantId = data.merchantId;

            window.location.href = "payment-complete.php/" + data.orderId + "/" + data.successIndicator + "/" + data.sessionId;
        }
    }
   
   
    function completeCallback(response) {
        console.log("completeCallback", sessionId);
        console.log("completeCallback", response);
        console.log("completeCallback", Checkout);
        console.log(successIndicator);
        alert();
            
            //window.location.href = "payment-complete_UT_boc.php";
            //console.log("hello");
            
            
            console.log("completeCallback", response);

            var sParam = "completeCallback " + orderId + " " + response;

            // Save the resultIndicator
            resultIndicator = response;
            var result = (resultIndicator === successIndicator) ? "SUCCESS" : "ERROR";

            //window.location.href = "/hostedCheckout/" + orderId + "/" + result;
            window.location.href = "payment-complete.php"+ orderId + "/" + result;;
    }


    Checkout.configure({
        session: {
            id: sessionId
        }
    });

Thank you!