Category: javascript

I am trying to border-radius and gradient color to the chart to my donut chart, images of both the expected chart and what I have managed to create are attached. and code also attached.

Expected chart:-
Expected chart

Chart i am working:-

Chart i am working

  $(function() {
var data = <%= raw @array_color.to_json %>;
var total_project_count = <%= @total_project_count %>
var total_project_text = `Totatl Projects<br/>${total_project_count}`
var total_project_text = `<span class="project_count_text">TOTAL PROJECTS</span><br/><span class="project_count_dummy">""</span><br/><span class="project_count_count">${total_project_count}</span>`
var chart = new Highcharts.Chart({
chart: {
  renderTo: 'container',
  type: 'pie',
},
credits: false,
plotOptions: {
  pie: {
    borderWidth: 6, 
    innerSize: '80%', 
    // borderColor: null, 
    slicedOffset: 5,
    stacking: 'normal',  
    dataLabels: {
      connectorWidth: 2
    },
     allowPointSelect: true,
        cursor: 'pointer',
        point: {
            events: {
                click: function(event) {
                    var options = this.options;
                    update_rag(options.status);
                }
            }
        }
  },
},
title: {
  verticalAlign: 'middle',
  floating: true,
  text: total_project_text,
},
series: [{
  data: data,
}, ],

});

I have a variable that is being altered or stored incorrectly when I call a function to get a chart from a database (directed through a php file). All of the data from the php side is cleaned and corrected, but the markers on the eastern half of the map always have an error, becauase the correct site_id isn’t being passed. When the site_id is passed a chart pops up next to the marker and it works fine. Get chart is only called when a “chart” button is clicked in the info window. The info window pops up when a marker is clicked.

I have tried: declaring site_id inside the createmarkers function, passing sitelist[i][1] instead or site_id inside getchart, placing the getchart function before the createmarkers function.

When I put in the autochart web address with the site_id for the markers that are problematic, a perfect chart pops up.

Correct site_id: 06903990
what the console logs after getchart is called 1450976

My create markers function

var site_id;
function createmarkers(sitelist) {
  var marker;
  var markericon;
 const image = "correctwebaddress/river2.png";
 for (var i = 0; i < sitelist.length; i++) {
    markercount++;
    point = {lat: sitelist[i][4], lng: sitelist[i][5]};
    marker = new google.maps.Marker({
      position: point,
      icon: image,
      title: "Site ID: " + sitelist[i][1] + " Name: " + sitelist[i][2],
      map: map
    });
    site_id=sitelist[i][1];
    console.log(site_id);
   info = "<b>Site ID:</b> " + sitelist[i][1] + "<BR><b>Name:</b> " + sitelist[i][2] +"<button  onclick='getchart("+ site_id+")'>Chart</button>"; ;
    marker.info = info;
 marker.addListener('click', function() {
    infobox.setContent(this.info);
     infobox.open(map, this);
     console.log(site_id);
      });
   allmarkers.push(marker)
  }
}

My getChart function

 function getchart(site_id) {
  console.log('get chart called');
  console.log(site_id);                        // this is where the site_id is different
  let url = "correcturl/autochart.php?site_id=0" + site_id;
  console.log(url);
  document.getElementById("chart").style.display = "block";
  document.getElementById('chart').innerHTML = "<iframe src='correctwebaddress/autochart.php?site_id=0" + site_id+"'  frameborder='0' width='595' height='295' scrolling='no'></iframe>";
 }

I made a code, trying to make a little character run around my screen, but I cannot figure out where I went wrong. HELP!

When I ran the code, the GIFs all ran in different directions, but i cannot make them stay together.

Here is the code:

https://jsitor.com/H28fOGoi97

I am working with Nodejs,I am using expressjs, I am new in express, Right now i am creating an “API”,But i am getting following error
await is only valid in async function
Here is my current code,How can i fix this issue

const UploadImage = async (req, res) => {
 uploadUserImage(req,res,function(err) {
         const file = req.file;
         const UserId=req.body.UserId;
        console.log(file);  // Getting file information
        if (!file) {
                return res.status(400).send({ message: 'Please upload a file.' });
            }
        if(!salonId)
        {
             return res.status(400).send({ message: 'Please enter shopId' });
        }    
        const result= await User.addVendorGalleryImages(req.file.filename,salonId);
        
        res.end("File is uploaded"+req.file.filename);
    });

    }

For request with mode=no-cors, even if the response contains access-control-allow-origin, and the origin of the request is in the list, is the response still opaque?

And how can you tell if the response is opaque by looking at the network tab? I know if I use a service worker to intercept the request and refetch, then I can look at the response type or status to determine if it’s opaque, but network tab doesn’t seem to show whether the response is opaque or not

I have a parent search component that loads data based on search param changes, and it has a child component basically created to separate complicated logic e.g , which fires events and passes data to parent based on changes to state e.g (could be a selector, input change, etc…). what I want is to wait for both the child component to fire its initial events and the parent component as well and then call the function in watch for search params.
currently this code is making two request I want to wait for the child event to be fired to make it a single call, or if there is an alternative solution to this kind of architecture I would appreciate it.

<template>
  <HelloWorld @id-change="(e) => (searchParams.userIds = e)" />
</template>

<script>
import HelloWorldVue from "./components/HelloWorld.vue";
export default {
  name: "App",
  components: {
    HelloWorld: HelloWorldVue,
  },
  data() {
    return {
      searchParams: {
        userIds: [],
        sort: "ID",
        sortType: "DESC",
      },
    };
  },
  watch: {
    searchParams: {
      handler(newVal) {
        console.log("hello", newVal);
        this.loadDataFromBackend(newVal);
      },
      deep: true,
    },
  },
  created() {
    this.searchParams.sortType = "ASEC";
  },
  methods: {
    loadDataFromBackend(params) {
      //an api call here
    },
  },
};
</script>

This the child component that loads the Ids and the passes it to parrent.

<template>
  <div ></div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },

  created() {
    //this event does not hapeeing immedialty
    setTimeout(this.loadIdsFromBackend, 5000);
  },
  methods: {
    async loadIdsFromBackend() {
      this.$emit("id-change", [1, 2, 3, 4]);
    },
  },
};
</script>

I want a way to bring this to a single call but at the moment its call the loadFromBackendFunction twice, yeah I the state is change twice so therefore two calls but I want an alternative solution.

I am currently working on a Discord.js bot and I need to retrieve the amount of time a user has spent in timeout. Is there a way to achieve this using the Discord.js library? I have searched the documentation and looked through various resources online, but I have not been able to find a solution to this problem.

I would appreciate any guidance or suggestions on how I can retrieve the timeout duration for a specific user on Discord.js. Thank you in advance for your help!

I have attempted to retrieve the ban list of a user on Discord using the Discord.js library. Specifically, I used the fetchBans() method to retrieve a collection of banned users from a server. However, the information returned only indicates whether a user is banned or not, without providing any details about the duration or time spent in timeout.

I was expecting to obtain the time duration or any relevant information about a user’s timeout, such as when the timeout was initiated and when it is expected to expire. Unfortunately, the fetchBans() method does not provide this level of detail.

I have used an inline event handler for my form submission validation and to show errors. After showing an error the form is still submitted even though the function is returning false.

Here is my form :

<form action="https://formspree.io/f/xknayrqk" method="POST" id="contact-form">
  <input type="text" name="name" id="name" placeholder="Full name" maxlength="30" required>
  <input type="email" name="email" id="email" pattern="[^ @]*@[^ @]*" placeholder="Email Address" required>
  <textarea rows="4" cols="30" placeholder="Hey I’d like to connect to..." required maxlength="500">     </textarea>
  <div id="error-div">
  </div>
  <button type="submit" id="submit">Get in touch</button>
 </form>

I am using Formspree for submissions of forms.

here is my javascript code. I can only use the inline function otherwise javascript linter shows an error.

const form = document.getElementById('contact-form');
form.addEventListener('submit', (event) => {
  event.preventDefault;
  const email = document.getElementById('email').value;
  const checkString = email.toLowerCase();
  if (!(checkString === email)) {
    const errorDiv = document.getElementById('error-div');
    const errorShow = document.createElement('p');
    errorShow.textContent = 'Form not submitted, email should be in lowercase.';
    errorShow.className = 'error-text';
    errorDiv.appendChild(errorShow);

    return false;
  }
  return true;
});

I use HERE’s api geocode service to return an address suggestion and it works just fine, but now I need to get the localized version of the address if I provide the language code in the geocode request.

I firstly tried to do the geocode request like this:
https://geocode.search.hereapi.com/v1/geocode?apiKey={API_KEY}&q=Suites,+South+Haven,+MI,+49090-2402,+US&lang=ja-JP.
The address property from the response looks like this:

"address": {
                "label": "Broadway St Building 220, Broadway St, South Haven, MI 49090, アメリカ合衆国",
                "countryCode": "USA",
                "countryName": "アメリカ合衆国",
                "stateCode": "MI",
                "state": "Michigan",
                "county": "Van Buren",
                "city": "South Haven",
                "street": "Broadway St",
                "postalCode": "49090"
            },

as you can see it only alters the exonym for the country. (another stack overflow answer: https://stackoverflow.com/a/28560509).

I tried to do as the answer from above suggested, got the coordinates, and did the reverse geocode request like this: https://revgeocode.search.hereapi.com/v1/revgeocode?apiKey={API_KEY}&at=42.40543,-86.27108&lang=ja-JP.

The address in the response looks like this:

"address": {
                "label": "Broadway St Building 220, Broadway St, South Haven, MI 49090, アメリカ合衆国",
                "countryCode": "USA",
                "countryName": "アメリカ合衆国",
                "stateCode": "MI",
                "state": "Michigan",
                "county": "Van Buren",
                "city": "South Haven",
                "street": "Broadway St",
                "postalCode": "49090"
            },

Is there a way to get the address in a localized version based on the language code using the geocode or reverse geocode requests?

NodeJS treats float values with a zero after the point as integer!
This is on the language level.
For example: 5.0 is treated as 5.

I am working with APIs and I must be able to send float values with zero after the point and to be able to accept this in my server exactly as it was sent.

For example, I have this simple endpoint:

app.post('/float-hell', async (req: Request, res: Response) => {
  res.json({ x: req.body.x });
});

When I send {"x":6.2} it is indeed accepted as 6.2.
But if I send it as {"x":5.0} it is accepted as 5.

APIs should be able to accept such a value because they must be language-agnostic and should allow any language to work with them.

Please help me overcome this limitation. I tried everything that came to mind, I tried doing manipulations with parseFloat() – nothing works.

I did everything that came to mind, it seems like a language limitation

Using vanilla HTML, Javascript and preferably just pure CSS I’m trying to implement a feature whereby when a user clicks a button, the next 4 elements are displayed to the user.

.container {
  padding: 16px;
}

.items-container {
  flex-direction: row;
  display: flex;
  gap: 16px;
}

.item {
  flex: 0 0 auto;
  width: 25%;
  background-color: lightblue;
  height: 320px;
}

<div class="container">
  <div class="items-container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <p>Showing 4 of 10</p>
  <button>
    Load more
  </button>
</div>

Due to limitations in the snippet, the styles aren’t quite reflective – as I’ve implemented a grid system, so there’s actually 4 items in a row (they’re just horizontal in the above).

By default I want to show just 4 items, but when the user selects “load more”, then the next 4 are displayed & so on. The button should always remain just below the last visible element.

Can anyone guide or reference an approach that would achieve this result?

I am developing a Javascript SDK and I am using an external library defined on the window object

  private getFromATS(): string {
    return window.ats.retrieveEnvelope(function (envelope: string) {
      console.log('Located ATS.js');
      return JSON.parse(envelope).envelope;
    });
  }

Now I am developing some unit tests and I am trying to mock this library. So far I have tried the following which have not worked

// Method 1
spyOn(window.ats, 'retrieveEnvelope').and.returnValue(function (
      callback: Callback<String>
    ) {
      return callback('{"envelope":"asdfasdfasdf"}');
    });

// Method 2
    spyOn(window, 'ats').and.returnValue({
      retrieveEnvelope: function (callback: Callback<String>) {
        return callback('{"envelope":"asdfasdfasdf"}');
      },
    });

// Method 3
    window = Object.create(window);
    Object.defineProperty(window, 'ats', {
      value: {
        retrieveEnvelope: function (callback: Callback<String>) {
          return callback('{"envelope":"asdfasdfasdf"}');
        },
      },
      writable: true,
    });

// Method 4
const windowStud = {
      ats: {
        retrieveEnvelope: function (callback: Callback<String>) {
          return callback('{"envelope":"asdfasdfasdf"}');
        },
      },
    } as Window & typeof globalThis;

None of these work. How can I mock an “external” property of the window object using Jasmine?

I have the following checkbox:

<!-- Choose betweeen Upload a video and Insert a video link -->
<div class="row mb-3">
    <label class="control-label">Link video</label>
    <input type="checkbox" name="link_video"
        value="0"
        class="switch checkbox-action"
    />
</div>

By default the value is false, that is, I want to allow users to upload a video, that is, I want to have the following code:

<!-- Upload a video -->
<div class="row">
    <div class="col-md-12 mb-3">
        <p>
            Put the video here
        </p>
        {!! Form::hidden('temp_video_filename') !!}
        <input-dropzone
            name="video-dropzone"
            label="Dropzone"
            url="/admin/object/upload-video"
            :config="{
                clickable:true,
                chunking:true,
                chunkSize: 250000,
                parallelUploads: 1,
                uploadMultiple: false,
                maxFilesize: 1000,
                maxFiles: 1,
                acceptedFiles: '.mov, .mp4'
            }"
            @click="initVideoUpload()"
            @drop="initVideoUpload()"
            @upload="videoUploaded($event)"
        />
    </div>
    @if($a->video_id)
    <div class="col-md-12 uploaded-videos">
        <a href="{{ $a->getDirectPlayUrl() }}" target="_blank" class="btn btn-primary download">
            <i class="fa fa-play"></i> View video
        </a>

        <button class="btn btn-danger btn-rounded btn-delete remove" data-record="File" data-url="{{ $a->getAdminVideoRemoveApiUrl() }}" data-callback-function="A.removedAdminVideo">
            <icon-delete color="var(--on-error)"></icon-delete> Remove file
        </button>
    </div>
    @endif
</div>

However, if the user click on the checkbox, that is, the value is true I would like to show the following field:

    <!-- Insert video link -->
    <div class="row mb-3">
        <div class="col-md-6">
            {!! Form::field('video_embed_url', ['label' => __('labels.link_video')]) !!}
        </div>
        <!-- Force next columns to break to new line -->
        <div class="w-100"></div>
        <div class="col-md-6">
            {!! Form::label(__('labels.preview')) !!}
        </div>
    </div>

I’m using Telerik Editor (which is wrapping ProseMirror wysiwyg editor) and have a problem with loading new content into the editor. I have a list of elements which when selected changes the @bind-Value of the component, this works fine while debugging but as soon as I test it on a dedicated server it never updates the text which was set by the first selected item.
The content being passed is correct but the iframe content never changes.

I have tried following the suggestions online which says that one should use “StateHasChanged” after loading the new model, but it doesn’t change anything. I also tried nulling the value of the model first and running stateHasChanged again before setting it again. I also tried to copy the value of the model into another variable, but the same problem persists.

I am new to coding I have no experience in coding I am interested in technology computer related since childhood I googled my interest to learn in a useful way and google said coding covers everything for my interest but there are many coding languages here I don’t know where to start from Say you should start with coding language