Category: javascript

I need to create a model of the Earth. The user can spin and zoom the planet. He can see countries and cities. When he cliks on the country name, it refers him to the related page about this country. In addition to that, there are flags of all countries around the planet, and the user can click on the flag as well. How do I achieve this?

I don’t realy know what to do. I would be very grateful if you could provide me with the solution.

I’m trying to implement deleting of individual rows from table. Each row has a delete icon that opens a confirm dialog when clicked. If the user clicks the “Yes” button, that specific row should be deleted.

However, the issue is that no matter what row I click, the last row of table is always deleted.

Here is my code:

// table
<v-data-table
   :headers="headers"
   :items="tableData"
   :search="search"
>
   <template v-slot:item.actions="{ item }">
      <div class="table__icons">
        <v-icon
           small
           class="mr-2"
           @click="goToContract(item)"
        >
          mdi-pencil
        </v-icon>
        <a v-if="$route.name === 'pregled-ugovora' || $route.name === 'pregled-znsa'" :href="ispisRow(item)"
           target="_blank">
           <v-icon
             small
           >
             mdi-download
           </v-icon>
          </a>
          <v-icon
              v-if="$route.name === 'pregled-znsa'"
              small
              @click="openDeleteModal(item)"
          >
            mdi-delete
          </v-icon>
          <v-icon v-if="$route.name === 'pregled-ugovora'"
                  small
                  @click="getIzvjestaj(item)"
          >
            mdi-note-text
          </v-icon>
        </div>
      </template>
</v-data-table>

// delete dialog
<v-dialog v-model="dialogDelete" max-width="500px">
  <v-card>
    <v-card-title class="text-h2 delete-text">Do you want to remove this row?</v-card-title>
    <v-card-actions>
      <v-spacer></v-spacer>
      <div class="m-btn delete-btn" @click="closeDeleteModal">No</div>
      <div class="m-btn delete-btn" @click="deleteZnsConfirm">Yes</div>
      <v-spacer></v-spacer>
    </v-card-actions>
  </v-card>
</v-dialog> 

// methods
openDeleteModal(item) {
   this.deletedZnsIndex = this.tableData.indexOf(item)
   this.deletedZns = Object.assign({}, item)
   this.dialogDelete = true
},
closeDeleteModal(item) {
   this.deletedZnsIndex = ''
   this.deletedZns = {}
   this.dialogDelete = false
},
deleteZnsConfirm(item) {
   this.tableData.splice(this.tableData.indexOf(this.deletedZns), 1)
   this.dialogDelete = false
},

I am working on Nodejs and using “Express js”, Right now i am working on “middleware function”, here is my current code

const express = require('express')
const app = express()

const myLogger = function (req, res, next) {
  console.log('LOGGED')
  next()
}

app.use(myLogger)

app.get('/', (req, res) => {
  res.send('Hello World!')
})

I am confuse regaring “next” parameter,I have following question regarding middleware function

1. what is use of “next” ? is this redirect to “next middlware function” ? if yes then how ?
2. if there is not “second middleware” exist then what will happen ?
3. if we not use “next” then what will happen ?
4. can we redirect to custom middleware inside “next” ?

I have a web component, thats quite large and complicated, but here is the part that is giving me an issue.
About once in every 20 times I reload the page I get this error (within connected call back, it does not have a parent element):

wc-reorder-wrapper.min.js:153 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
    at Component.setupDragEvents (wc-reorder-wrapper.min.js:153:28)

The error is being generated in the connectedCallback:

    connectedCallback() {
        this.setupDragEvents()
    }
    setupDragEvents() {
        this.parentElement.addEventListener('dragover', this.parentDragoverHandler.bind(this));
    }

this does not have a parentElement, how can it be connected then?
To quote MDN

Inside the method connectedCallback, we define all the functionality the element will have when the element is connected to the DOM

If I set a breakpoint when there is no parent, and I console.log(this) then right click on it and select Reveal om elements panel it says:
Node cannot be found in the current page. … which confirms it is not connected to the DOM, despite is connected callback being fired.

Using Chrome 113

Why does the element not have a parent element in connectedCallback, what is connectedCallback for then?

I have Main.html and simple.js connected to Main.html. I want to import some variables from out.js to simple.js. I dont want to connect out.js to html. I tried to write basic import and export code, but i had and error, also changed type of simple.js from

<script src="simple.js" type="text/javascript"></script>

to

<script src="simple.js" type="module"></script>

and still not working, i know it possible, but i dont know how.

I tried require too, and it didnt work. Pls helppp

I want to use react-select with cdn. I tried downloading cdn into react-select but I keep getting error as select is not defined.

I tried to download the zip package of react-select with but I dont know how to use it.

Following is how I did it.

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react-select/5.7.3/index-2ce68625.prod.min.js" type="module"></script>

and in js file I want to import.

my english is not good, sorry.

I have accented words in the display.
But I want the word to be searched without axan and additional items.

i want find text in data-attr value (data-search=””):

function findElementByText(elem,text) {
    var find = $(elem+":contains(" + text + ")")
        .filter(function(){return $(this).text().replace(/#/i,'');})
        .clone().get();
    return find;

}
$(".searcher").on('keyup change',function(){
$(".result").html('')
  var value=$(this).val().trim().replace(/#/i,'');
  var listItems=".items";
  var found=findElementByText(listItems,value);
  if(found!='')
      $(".result").html(found);
  else
      $(".result").html('<i>Not found!</i>');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--search:-->
<input class="searcher">
    
    
<ul>    
<!--items:-->
<li class="items" data-search="A-plus">#À plus !</li>
</ul>
   
<!--result:-->
<div class="result"></div>

I want to specifically change an area’s fillColor with an onClick function of a button. But when I do area.fillColor = ‘colorThatIWant’ it doesn’t change or update.

I have tried changing the fillColor property on the map itself but that is not what I wanted.

So I have this function which allocates objects in a grid chronologically sort of like Instagram posts:

let count = 0;
const grid = document.querySelector('.format-rows');

function addCard(){
count++;
console.log(count);
const s = `<div><img class="card-image"><div class="text-box"><p 
onclick="popupaction()">${count}</p></div></div>`;
console.log(s);
grid.insertAdjacentHTML('afterbegin', s);
if (count == 20) clearInterval(interval);
};

My console logs return the intended variables, so I know that neither counter nor s are wrong, but javascript still returns the same error. What am I doing wrong here?

I wanna create a section in the style of this hero-section: https://www.untitledui.com/
The animations and elements work as intended, but i am missing the delay/smoothness that happens when you scroll. For this my idea is to use the lenis scroll library (https://github.com/studio-freight/lenis).
A similar effect can be achieved by setting the duration to a higher value. The problem is, that this amount of delay feels wrong for the rest of the page, so I either need to change the duration for the rest of the site or only enable lenis for this particular section. Do you have any idea on how to achieve this?
Or do you have a generally different approach for this kind of delay effect of the inspiration site?
Just in case it helps, I am using Webflow to build the site, coincidentally the same as the source site, so that gives me hope to achieve my goal, since they did it as well using the same framework.

Thanks in advance:)

I tried using the wrapper attribute of lenis to only be active in my hero-section, but implementing this results in this section to not scroll at all. The rest of the page scrolls fine.

Typing problems hello plz my Mac book keyboard is typing in Arabic and I have no Arabic on the keyboard

I want to remove Arabic typing because I don’t have it on my keyboard and I can’t write anything English please help

I’m writing an application with a Svelte frontend and a Spring Boot 3 backend (version “3.0.6”).

I read about the new protection against the BREACH attack, and I applied the new configuration from Spring Security.

On my frontend, before sending any POST request, I read the value of the XSRF-TOKEN cookie and I copy that value to the header X-XSRF-TOKEN.

By debugging the code, I can see that CsrfFilter is able to extract the token value from the header.

Unfortunately, the method XorCsrfTokenRequestAttributeHandler::getTokenValue which receives two identical strings as input returns null. Given that the input is entirely defined by what my client sends, I guess that I must transform the XSRF-TOKEN value before copying it into the header X-XSRF-TOKEN.

The method code is:

// example call: actualToken = token = "b4b40051-9f64-4d8e-9092-cc84cc769ae0"
private static String getTokenValue(String actualToken, String token) {
    byte[] actualBytes;
    try {
        actualBytes = Base64.getUrlDecoder().decode(actualToken);
    }
    catch (Exception ex) {
        return null;
    }

    byte[] tokenBytes = Utf8.encode(token);
    int tokenSize = tokenBytes.length;
    if (actualBytes.length < tokenSize) {
        // 24 < 36 so we arrive here
        return null;
    }

    // extract token and random bytes
    int randomBytesSize = actualBytes.length - tokenSize;
    byte[] xoredCsrf = new byte[tokenSize];
    byte[] randomBytes = new byte[randomBytesSize];

    System.arraycopy(actualBytes, 0, randomBytes, 0, randomBytesSize);
    System.arraycopy(actualBytes, randomBytesSize, xoredCsrf, 0, tokenSize);

    byte[] csrfBytes = xorCsrf(randomBytes, xoredCsrf);
    return Utf8.decode(csrfBytes);
}

When everything goes fine, this method is supposed to return the same value as “token” and the call equalsConstantTime(csrfToken.getToken(), actualToken) returns true, where actualToken is the return value of the above method.

So, what am I supposed to do with the value of the cookie XSRF-TOKEN before copying it into the header X-XSRF-TOKEN ?

I attempted fetching html between two delimiters (here “tools” and “hobbies”) via JS, but there is nothing displayed:

fetch('https://ry3yr.github.io/OSTR/Diarykeepers_Homepage/Cool_Stuff.html')
  .then(response => response.text())
  .then(data => {
    const start = data.indexOf('Tools');
    const end = data.indexOf('Hobbies');
    const result = data.substring(start, end); document.getElementById('output').innerHTML = result;
  })

I *do have it working in php:

<?php
$url = 'https://ry3yr.github.io/OSTR/Diarykeepers_Homepage/Cool_Stuff.html';
$html = file_get_contents($url);
$start = strpos($html, '<!------Tools---------->');
$end = strpos($html, '<!-----Hobbies---->', $start);
$length = $end - $start;
$result = substr($html, $start, $length);
echo $result;
?>

So:
How can I convince JS to do its job ?

I’m trying to install emailjs in my react application using npm i emailjs/browser , if i click enter it asks me to authenticate with github after authentication it throws me bunch of erros i don’t know how to do it . like wise if i trying to install fortawesome/free-brands-svg-icons also throws this kind of error.
your text
npm i emailjs/browser
info: please complete authentication in your browser…Completed in 1ms
npm ERR! code 128
npm ERR! An unknown git error occurred
npm ERR! command git –no-replace-objects ls-remote ssh://[email protected]/emailjs/browser.git
npm ERR! [email protected]: Permission denied (publickey).
npm ERR! fatal: Could not read from remote repository.
npm ERR!
npm ERR! Please make sure you have the correct access rights
npm ERR! and the repository exists.

npm ERR! A complete log of this run can be found in: C:UsersaldriAppDataLocalnpm-cache_logs2023-05-28T08_39_32_720Z-debug-0.log

I want to install emailjs in my react app

Heelo I want to alert the message of an exception when jquery post method calls the Httphandler ashx class then after checking that client didn’t fill any inputs that throw exception then alert that message recieved from catch block I tried this codes below but unfortunately doesnt work, so could anyone please help me about this problem? thanks a lot.
first of all, I tried to use the answer of this problem : How to call a C# function from JavaScript?
but unfortunately it didn’t work.

catch block in my Httphandler class:

 catch (Exception ex)
            {
                result.ResultStatus = HandlerResult.Status.Error;
                result.Result = ex.Message;
                resultJson = JsonConvert.SerializeObject(result);
            }

the ajax method:

$.ajax({
                            url: "/Report/Handlers/NewMoshaverRegedContracts.ashx",
                            context: document.body,
                            type: "POST",
                            data: {
                                ExportToXML: "true",
                                FromDate: fromDate, ToDate: toDate, HcShowGridCode: HcShowGridCode, ShenaseMoshaver: shenaseMoshaver, ContractType: contractType
                            },

                            success: function (result) {
                                if (result != null && result != "" && result.resultJson.ResultStatus == null) {
                                    lblDownloadExcel.style.display = 'block';
                                    lblDownloadingMsg.style.display = 'none';
                                    btnExportToExcel.disabled = false;
                                    btnReport.disabled = false;
                                    lblDownloadingMsg.disabled = true;
                                    var endIndex = window.location.toString().indexOf("/", 10);
                                    //lblDownloadExcel.href = window.location.toString().substring(0, endIndex) + "/files/ReportResult/" + result;
                                    lblDownloadExcel.href = "/HttpHandler/GetFile.ashx?IsReport=1&FileType=.xls&FileName=" + result;
                                    //lblDownloadExcel.href = window.location.toString().substring(0, endIndex) + "/files/ReportResult/" + result;
                                }
                                else {
                                    lblDownloadExcel.style.display = 'none';
                                    lblDownloadingMsg.style.display = 'none';
                                    lblNothingShow.style.display = 'block';
                                    alert(result.resultJson.Result);
                                }
                            },
                            error: function () { alert("error"); }
                        });

my HandlerResult class:

public class HandlerResult
    {
        public string Result { get; set; }

        public Guid UserId { get; set; }

        public Status ResultStatus { get; set; }

        public HandlerResult(Status resultStatus, string result)
        {
            this.ResultStatus = resultStatus;
            this.Result = result;
        }

        public HandlerResult(string result)
        {
            ResultStatus = Status.Novalue;
            this.Result = result;
        }

        public HandlerResult()
        {

        }

        public enum Status
        {
            Novalue = 0,
            Successful = 1,
            Error = 2,
            Notvaliduser = 3,
            Successfulupdate = 4,
            UserExists = 5,
            UserNotConfirmed = 6
        }
    }