Category: javascript

I am facing this error. The coordinates stored in the database of App are in String. I have typecasted the String coordinates to Number but still facing this error.

This is my Map Code

import { View, Text, StyleSheet } from "react-native";
import MapView, { Marker } from "react-native-maps";
import MapboxGL from "@react-native-mapbox-gl/maps";


MapboxGL.setConnected(true);

const Map = ({ data, locationData }) => {
  console.log(data);
  useEffect(() => {
    MapboxGL.setTelemetryEnabled(false);
  }, []);
  const [startCoordinate, setStartCoordinate] = useState([
    Number(locationData.startLong),
    Number(locationData.startLat),
  ]);
  const [endCoordinate, setEndCoordinate] = useState([
    Number(locationData.endLong),
    Number(locationData.endLat),
  ]);
  const renderMarkers = data.map((marker, index) => {
    return (
      <MapboxGL.PointAnnotation
        coordinate={[
          Number(marker.longitude),
          Number(marker.latitude),
        ]}
        // key={index}
      >
        <View
          style={{
            height: 30,
            width: 30,
            backgroundColor: "red",
            borderRadius: 50,
            borderColor: "#fff",
            borderWidth: 3,
          }}
        />
      </MapboxGL.PointAnnotation>
    );
  });
  return (
    <View style={styles.page}>
      <View style={(StyleSheet.absoluteFillObject, styles.container)}>
        <MapboxGL.MapView style={styles.map}>
          <MapboxGL.Camera zoomLevel={7} centerCoordinate={startCoordinate} />
          <MapboxGL.PointAnnotation coordinate={startCoordinate} />
          {renderMarkers}
          <MapboxGL.PointAnnotation coordinate={endCoordinate} />
        </MapboxGL.MapView>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  page: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF",
    marginBottom: 50,
  },
  container: {
    height: 300,
    width: "100%",
    backgroundColor: "tomato",
 
  },
  map: {
    flex: 1,
  },
});

export default Map;

In the above code you can check that I have typecasted the String to Number but still facing the same error coordinates must contain numbers

Thanks in Advance

this is console image

this is code image

always show onclick function not define

I am facing an issue in look and feel of my static assets

my application.css looks

*= home
 *= bootstrap.min
 *= bootstrap-theme
 *= bootstrap-sprockets
 *= bootstrap
 *= require_tree .
 *= require_self
 */

application.js looks

//= require google-map
//= require bootstrap-sprockets
//= require bootstrap
//= require jquery3
//= require popper
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .

I want to add text on the center of polygon feature in maps.
I was referred to the this issue. and I made code like that.

<template>
  <l-map style="height: 350px" :zoom="zoom" :center="center">
    <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
    <l-polygon :lat-lngs="polygon.latlngs" :color="polygon.color">
      <l-marker
        :lat-lngs="polygonCenter(polygon.latlngs)"
        :icon="polyGonText"
      ></l-marker>
    </l-polygon>
  </l-map>
</template>

<script>
import { LMap, LTileLayer, LPolygon, LMarker } from "vue2-leaflet";
import L from "leaflet";

export default {
  components: {
    LMap,
    LTileLayer,
    LPolygon,
    LMarker,
  },
  data() {
    return {
      url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
      attribution:
        '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      zoom: 8,
      center: [47.31322, -1.319482],
      polygon: {
        latlngs: [
          [47.2263299, -1.6222],
          [47.21024000000001, -1.6270065],
          [47.1969447, -1.6136169],
          [47.18527929999999, -1.6143036],
          [47.1794457, -1.6098404],
          [47.1775788, -1.5985107],
          [47.1676598, -1.5753365],
          [47.1593731, -1.5521622],
          [47.1593731, -1.5319061],
          [47.1722111, -1.5143967],
          [47.1960115, -1.4841843],
          [47.2095404, -1.4848709],
          [47.2291277, -1.4683914],
          [47.2533687, -1.5116501],
          [47.2577961, -1.5531921],
          [47.26828069, -1.5621185],
          [47.2657179, -1.589241],
          [47.2589612, -1.6204834],
          [47.237287, -1.6266632],
          [47.2263299, -1.6222],
        ],
        color: "green",
      },
    };
  },
  methods: {
    polygonCenter(latlngs) {
      return L.polygon(latlngs).getBounds().getCenter();
    },
    polyGonText() {
      return L.divIcon({ html: "No.1" });
    },
  },
};
</script>

<style>
</style>

my sample code link

my code is referred to vue-leaflet site, and just add methods to get center of polygon “latLang” and set html object.
But html text(No.1) is not shown on the polygon.
How can I add text in to the polygon?
Does anyone help me?

I have a table in mariadb, say Table X, data is inserted to X by a different source.
I want to this to trigger an API in node js whenever new row is inserted into table X.

I tried using sequelize hooks, but they don’t seem to work.

I’m trying to automate the process of creating a shortcut/link to a Google file as one would manually do by right-clicking on a file and seeing the below screen and clicking “Add shortcut to Drive”

Looking through Google’s Documentation on file object shows no actionable methods of this feature, only pulls (i.e. getTargetId(), etc).

I’m pretty sure this isn’t available but I thought I’d throw it out there and see if anyone had any ideas. I see a couple posts using some external API’s and firefox which isn’t what I’m trying to do.

If I were to guess what code such code would look like, it would be something like this….

function makeSomeFileLink(){
  var theFolder = DriveApp.getFolderById("wdflasdjflaskdjfklsadjflk")
  var aFile = DriveApp.getFileById("1VjOkMPBDr???????????qkZqPCQWOvBbIt_6GawA");
  var myNewBookMark = aFile.makeShortCutAndPutInInThisFolder(theFolder);
}

Obviously, that last row of code is problematic (i.e. I made it up), I’m just trying to illustrate what I’m looking for.

Any meaningful or entertaining feedback will get upvoted. Thanks.

i am working on project in which i have to used python to make blind person to access their account
so when they speak there name i want to display it on input field in forms using djangomy view for register

And beolow is my html code
in which i have used ajax to make post request to server

    <form action="" method="post" >

        <div class="form-group" align="center">

              <input type="text" name="Email" class="form-control"  value="{{ email }}" readonly placeholder="Email Id" id="myNumber" >
        </div>
          
           </br>

        <a type="submit" class="btn btn-success btn-lg rounded-pill" href='{% url 'menu' %}' >Submit</a>
        </form>


  </div>

###### here i have used id to change default input value#######

document.getElementById(‘myNumber’).value = “{{ email }}”;

###### here is the function to make post call #######

function SendPostRequestHome(event){
$.ajax({
url: “{% url ‘register’ %}”,
method:”POST”,
data: { ‘csrfmiddlewaretoken’: ‘{{ csrf_token }}’},
success: function (data) {

if(data.result == ‘success’){
window.location = “{% url ‘menu’ %}”;
}
else if(data.result == ‘failure’){
window.location = “{% url ‘home’ %}”;
}
}
});
}

but when i run it work fine but it doesnt display anything on the input field
it take input and save it in email variable if print it shows it but not displaying in input field
plz answer

I need help, I’ve writen an code that randomly assigns an alliance to the user, then I wanted to do a condition that runs a function if the user gets a certain alliance, this means, if you get marine in the next line it appears a role from the marines, or if you get revolucionary army it appears a role from the revolucionary army. Note: This roles would also be random as the alliance.

This is my code:

function capFirst(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
    }

    function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min)) + min;
    }

function alliance(){
      var alliance = ["Revolucionary Army","Marine","Pirate","Bounty Hunter","Cipher Pol","Royalist","Celestial Dragon"];

      var alliance = capFirst(alliance[getRandomInt(0, alliance.length + 1)]);
        document.getElementById("alliance").innerHTML = alliance;
    }


/* Rank */


function rank() {
            function rankrevolucionary(){
                var rankrevolucionary = ["Leader","Chief of Staff","Army Commander","Officer","Member","Associate"];

                var rankrevolucionary = capFirst(rankrevolucionary[getRandomInt(0, rankrevolucionary.length + 1)]);
                    document.getElementById("rankrevolucionary").innerHTML = rankrevolucionary;
            }

            function rankmarine(){
                var rankmarine = ["Fleet Admiral","Admiral","Vice Admiral","Rear Admiral"];

                var rankmarine = capFirst(rankmarine[getRandomInt(0, rankmarine.length + 1)]);
                    document.getElementById("rankmarine").innerHTML = rankmarine;
            }
}

<!-- index.html -->
<script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>
<script type="module" src="./scripts/auth.js"></script>

# Vite terminal after running "npm run build"
build started...
<script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js">
in "/index.html" can't be bundled without type="module" attribute

I’m trying to add some external scripts to my index.html but the Vite build process assumes I want to have these scripts bundled. Is there any way to suppress this message?

I have some.php page, where iframe located. This iframe is an embedded code from calendly service. After the user has submitted a form inside this iframe – this iframe is making some ajax xhr request and returning the result inside of this iframe.

This result is containing manager name, which was fixed at the appointed meeting. I want to get that name. All I have is an ID of the meeting. API does not provide any functionality for getting manager name by given meeting ID, they just return information about the client.

The thing is – I can see this request (invitees) in the Devtools -> Network:

But I cannot catch it, because it’s inside the iframe.

Are there any walkarounds me to the get this response?

I am using antd tree component I have modified the component according to my requirement what my issue is if you see a component it has a select field when we select the field will add and also count will update but what happens Whenever will select a list after searching it from the search bar it shows the list selected count as 0 what my task is in search whatever field will appear only that field will and update or according to if user select and unselect that field then count will update like the example you can search in you can able to search in lowercase in the search bar Whenever we search a list in the search bar for some specific list name and when we select that searched sanction list then previously selected all list gets unchecked.

const { Search } = Input;
const hasSearchTerm = (n, searchTerm) =>
  n.toLowerCase().indexOf(searchTerm) !== -1;
const filterData = (arr, searchTerm) =>
  arr?.filter(
    (n) =>
      hasSearchTerm(n.title, searchTerm) ||
      filterData(n.children, searchTerm)?.length > 0
  );

function filteredTreeData(data, searchString, checkedKeys, setExpandedTree) {
  let keysToExpand = [];
  const filteredData = searchString
    ? filterData(data, searchString).map((n) => {
        keysToExpand.push(n.key);
        return {
          ...n,
          children: filterData(n.children, searchString, checkedKeys)
        };
      })
    : data;
  setExpandedTree([...keysToExpand]);
  return filteredData;
}
const MultiSelectWithTree = ({
  preExpanded = [],
  value = [],
  name = "multiSelectWithTree",
  onBlur,
  error,
  helperText,
  disabled = false,
  label,
  modalTitle,
  itemsSelectedLabel = "Items Selected",
  onChange = () => {},
  treeData,
  alterCountsCalculation = {}
}) => {
  const [expandedKeys, setExpandedKeys] = useState(preExpanded);
  const [checkedKeys, setCheckedKeys] = useState(value);
  const [tree, setTree] = useState(treeData);
  const [searchValue, setSearchValue] = useState("");
  const [checkedKeysCount, setCheckedKeysCount] = useState(0);
  const [openModal, setOpenModal] = React.useState(false);
  const handleModalClose = () => {
    setOpenModal(false);
    onChange(checkedKeys);
    setSearchValue("");
    setExpandedKeys([]);
  };
  React.useEffect(() => {
    if (searchValue) {
      const filteredData = filteredTreeData(
        treeData,
        searchValue,
        checkedKeys,
        setExpandedKeys
      );
      setTree([...filteredData]);
    } else {
      setTree(treeData);
    }
  }, [searchValue, treeData, checkedKeys]);

  React.useEffect(() => {
    setCheckedKeys(value?.length ? value : []);
  }, [value]);

  React.useEffect(() => {
    let alteredCount = 0;
    let count = checkedKeys.filter((item) => {
      if (Object.keys(alterCountsCalculation).includes(item)) {
        alteredCount = alteredCount + alterCountsCalculation[item];
        return false;
      }
      return !treeData.filter((node) => node.title == item).length;
    }).length;
    setCheckedKeysCount(count + alteredCount);
    console.log("newCount", count + alteredCount);
  }, [checkedKeys, treeData, alterCountsCalculation]);
  console.log("newCount");

  const onExpand = (expandedKeysValue) => {
    // if not set autoExpandParent to false, if children expanded, parent can not collapse.
    // or, you can remove all expanded children keys.
    setExpandedKeys(expandedKeysValue);
    //setAutoExpandParent(false);
  };

  const onCheck = (checkedKeysValue) => {
    setCheckedKeys(checkedKeysValue);
  };
  console.log("newCount");
  return (
    <>
      <FormControl
        variant="outlined"
        size="small"
        name={name}
        error={Boolean(error)}
        fullWidth
      >
        <Box alignItems="center" flexDirection="row" display="flex">
          <TextField
            label={label}
            error={Boolean(error)}
            helperText={helperText}
            onBlur={onBlur}
            name={name}
            disabled={disabled}
            fullWidth
            value={
              checkedKeysCount
                ? checkedKeysCount + " " + itemsSelectedLabel
                : ""
            }
            variant="outlined"
            InputProps={{
              readOnly: true
            }}
            size="small"
            onClick={() => (!disabled ? setOpenModal(true) : "")}
          ></TextField>
        </Box>
      </FormControl>
      <Dialog
        disableBackdropClick={true}
        onClose={handleModalClose}
        aria-labelledby="multi-select-dialog-title"
        open={openModal}
        fullWidth
        maxWidth="md"
      >
        <DialogTitle
          id="multi-select-dialog-title"
          onClose={handleModalClose}
          disableTypography
        >
          <Box
            display="flex"
            justifyContent="space-between"
            alignItems="center"
          >
            <Typography color="primary" variant="subtitle1">
              {modalTitle}
            </Typography>

            {handleModalClose ? (
              <Box
                display="flex"
                justifyContent="space-between"
                alignItems="center"
              >
                <Box mr={3}>
                  <Typography color="primary" variant="subtitle1">
                    {checkedKeysCount} {itemsSelectedLabel}
                  </Typography>
                </Box>

                <IconButton
                  aria-label="close"
                  onClick={handleModalClose}
                  size="small"
                >
                  <CloseIcon size="small" />
                </IconButton>
              </Box>
            ) : null}
          </Box>
        </DialogTitle>
        <Box position="sticky" top="0" zIndex={999} pl={5} pr={5}>
          <Search
            style={{ marginBottom: 8 }}
            placeholder="Search"
            onChange={(e) => {
              setSearchValue(e.target.value);
            }}
          />
        </Box>
        <DialogContent dividers style={{ minHeight: 150 }}>
          <Grid container>
            <Grid item xs={12}>
              <Box>
                <Tree
                  checkable
                  onExpand={onExpand}
                  titleRender={(nodeData) => {
                    const index = nodeData.title
                      .toLowerCase()
                      .indexOf(searchValue);
                    const beforeStr = nodeData.title.substr(0, index);
                    const afterStr = nodeData.title.substr(
                      index + searchValue?.length
                    );
                    const searchedString = nodeData.title.substr(
                      index,
                      searchValue?.length
                    );
                    let countSelectedChilds = 0;
                    if (nodeData.children?.length) {
                      nodeData.children.forEach((child) => {
                        if (checkedKeys?.includes(child.key)) {
                          countSelectedChilds++;
                        }
                      });
                    }
                    return index > -1 ? (
                      <span>
                        {beforeStr}
                        <span className="site-tree-search-value">
                          {searchedString}
                        </span>{" "}
                        {afterStr}{" "}
                        {countSelectedChilds ? (
                          <span>({countSelectedChilds})</span>
                        ) : (
                          ""
                        )}
                      </span>
                    ) : (
                      <span>{nodeData.title}</span>
                    );
                  }}
                  autoExpandParent={true}
                  onCheck={onCheck}
                  checkedKeys={checkedKeys}
                  expandedKeys={expandedKeys}
                  treeData={tree}
                />
              </Box>
            </Grid>
          </Grid>
        </DialogContent>
      </Dialog>
    </>
  );
};

CodeSandBoxLink

I am trying to encode byte array using java package Base64 in a javascript. Javascript engine is Rhino.

Below is the error in logs.

java.util.concurrent.ExecutionException: javax.script.ScriptException: TypeError: Cannot call property getEncoder in object [JavaPackage java.util.Base64]. It is not a function, it is "object". 

Below is the snippet of code.

var md = java.security.MessageDigest.getInstance('SHA-256');
md.update(salt);
var sha256Bytes = []
sha256Bytes=md.digest(new java.lang.String(givenPassword).getBytes('UTF-8'));
var sha256Hash = java.lang.String(java.util.Base64.getEncoder().encode(sha256Bytes));

I am not able to figure out the issue here. Also, the package java.util.Base64.* is imported.

Example input 1: '1 JAN'
Expected output: 'd MMM'

Example input 2: 'JAN 31'
Expected output: 'MMM dd'

I am working on drop down which is working fine.
after i selected option from drop down it background color got changed(lime).
now i focus on another option which color got changed(mango). in this scenario both mango and lime color looking same.how to remove selected option background color when focus on other

code:

<select>
  <option value="grapefruit">Grapefruit</option>
  <option value="lime">Lime</option>
  <option value="coconut">Coconut</option>
  <option value="mango">Mango</option>
</select>

select option:hover,
    select option:focus,
    select option:active {
        background: linear-gradient(#000000, #000000);
        background-color: #000000 !important; /* for IE */
        color: #ffed00 !important;
    }

    select option:checked {
        background: linear-gradient(#d6d6d6, #d6d6d6);
        background-color: #d6d6d6 !important; /* for IE */
        color: #000000 !important;
    }

I have an ArrayBuffer(of an excel file) in my javascript app, which I need to offer as a downloadable excel file on a button click. I generated the Arraybuffer using the excel4node library. I tried the following :

  let element = document.createElement('a');
  let excelBuffer = await fetchService.getBuffer();
  let excelString = String.fromCharCode(...excelBuffer.data);
  console.log(excelString);
  
  element.setAttribute('href', 'application/vnd.ms-excel;charset=utf-8,' + encodeURIComponent(excelString));
  element.setAttribute('download', 'dataFile.xlsx');
  element.style.display = 'none';
  shadowRoot.appendChild(element);
  element.click();
  shadowRoot.removeChild(element);

This code is executed on a button click. But this doesn’t seem to work. I either get Malformed URI errors, or the browser tries to open a new url which reads “application/blocked”. Logging the converted excelString using String.fromCharCode logs some weird symbols. I got to know this method uses UTF-16 encoding for the conversion, but the ArrayBuffer seems to be utf-8 encoded. I also tried this which didnt work :

var blob = new Blob([excelBuffer.data], {type: "application/vnd.ms-excel"});
element.setAttribute('href', 'application/vnd.ms-excel;charset=utf-8,' + blob);
element.setAttribute('download','dataFile.xlsx');

How do I make this work?