Category: javascript

enter image description here
enter image description here
The last column of table in some cases climb out of the table.
There is an js:

function buildFilesTable(data) {
  const tableBody = $('.raw-revenue-files-table tbody');
  $('.batch-remove').hide();
  $(".selectAll").prop("checked", false);
  $("#counter").html(0);
  $(".checkboxes").prop("checked", false);
  tableBody.html('');

  if (!data.length) {
    tableBody.append(
      `<td colspan="6" class='text-center'>THERE IS NO FILES</td>`
    );
  } else {
    $.each(data, function (i, item) {
      var row = `
          <tr>
              <td><input type="checkbox" 
                         name="selectId" 
                         id="${item.id}" 
                         value=${item.name} 
                         class="checkboxes" /> </td> 
              <td style="max-width:300px;width:300px;word-wrap: break-word;">${
                item.name
              }</td>
              <td>${$.utils.pretifyNumber(item.revenue.net)}</td>
              <td>${$.utils.pretifyNumber(item.revenue.gross)}</td>
              <td>${$.utils.pretifyNumber(item.rawRevenue.net)}</td>
              <td>${$.utils.pretifyNumber(item.rawRevenue.gross)}</td>
              <td>
                <span class="pills ${item.validationStatus}">
                  ${item.validationStatus}
                </span>
              </td>
              <td>
                ${item.existsOnS3 ? 'true' : 'false'}
              </td>
              <td>
                <div class="row ml-0 mr-0">
                 
                  <div class="col-6 pl-0 pr-0">
                    <button
                      type="button"
                      class="btn btn01 small"
                      data-toggle="modal"
                      data-dismiss="modal"
                      data-target="#modalValidate"
                      data-file-id=${item.id}
                      data-ingestion-date=${item.ingestionDate}
                      data-validation-date=${item.validationDate}
                      data-ingestion-total=${
                        item.revenue.net || item.revenue.gross
                      }
                      data-validation-total=${item.validationTotal}
                      data-status=${item.validationStatus}
                    >
                      Validate
                    </button>
                  </div>
                </div>
              </td>
          </tr>
      `;

      tableBody.append(row);
    });
  }
}

There is html:

<div class="modal fade" id="rawRevenueFiles" role="dialog" aria-labelledby="rawRevenueFilesLabel"
             aria-hidden="true">
            <div class="modal05 modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-body">
                        <table class="table table01 raw-revenue-files-table">
                            <thead>
                            <tr>
                                <th>
                                    <label id="counter" for="selectAll">0</label>
                                    <input type="checkbox" class="selectAll" id="selectAll" name="selectAll">
                                </th>
                                <th>Name</th>
                                <th>Net</th>
                                <th>Gross</th>
                                <th>Net (Raw)</th>
                                <th>Gross (Raw)</th>
                                <th>Status</th>
                                <th>Existence on S3</th>
                                <th>
                                    <button type="button" class="btn btn01 small batch-remove">
                                        Remove
                                    </button>
                                </th>
                            </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

There is a css:

.summary-table td {
    vertical-align: middle;
    transition: all 0.14s ease-in-out;
}

.summary-table td p:first-child {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgb(255 255 255 / 10%);
}

.summary-table td p:last-child {
    margin: 0;
    color: #a4a6a9;
}

.summary-table td p.DIFFER {
    color: #d8e02b;
}

.summary-table td p.VALID {
    color: #21A35E;
}

.summary-table td p.NOT_VALID {
    color: #E03F4A;
}

.summary-table tfoot {
    background: #242C33;
}

.summary-table thead th:first-child {
    text-align: left;
    padding-left: 10px;
}

.modal .table01.raw-revenue-files-table td {
    padding: 15px 10px;
    vertical-align: middle;
}

I’m a back-end developer, but i need to fix this issue with the last column in the table. Can you fix my css, please?

I expect a correct table view.

I am creating a modal that can be used in multiple places in my application to upload files, as a result I am not using a <form> because this may be used within an existing form that I don’t want to submit.

html

<input type="file" id="CustomerInvoices-${ogoneRef}" name="uploadFileNameForCustomerInvoices">

JavaScript

$('#CustomerInvoices-'+ogoneRef).change(function (e) {
    clickSubmitUploadFiles(e, ogoneRef);
});

I have the following JavaScript function.

function clickSubmitUploadFiles(event, ogoneRef) {
    let files = event.target.files;
    ;[...files].forEach(function (file) {
        let urlString = 'http://localhost:8085/papertrail/upload-document/'+userName+'/'+ogoneRef;

        $.ajax({
            type: "POST",
            url: urlString,
            headers: {
                "Authorization": "Basic " + btoa(username+":"+password)
            },
            data: file,
            error : function (result) {
                console.log('error', result);
                },
            success : function (result) {
                console.log('success', result)
            }
        });
    });
}

Error

Uncaught TypeError: Illegal invocation
    at o (jquery-1.10.2.min.js:6:7939)
    at gn (jquery-1.10.2.min.js:6:8398)
    at x.param (jquery-1.10.2.min.js:6:8180)
    at Function.ajax (jquery-1.10.2.min.js:6:12615)
    at powWowDashboard.do:18456:15

jquery-1.10.2.min.js:6 Uncaught (in promise) TypeError: Failed to execute 'arrayBuffer' on 'Blob': Illegal invocation
    at o (jquery-1.10.2.min.js:6:7939)
    at gn (jquery-1.10.2.min.js:6:8398)
    at x.param (jquery-1.10.2.min.js:6:8180)
    at Function.ajax (jquery-1.10.2.min.js:6:12615)
    at powWowDashboard.do:18456:15

Problem

So I think the problem is with the data I am trying to upload is not in the correct format.

I get the data as follows:

let files = event.target.files;

and then set it in the ajax request:

            data: file,

Question

How should I set the data for the uploaded file in the request?

I’m simply passing a function to a modal

<a data-modal="modal" data-modal-id="#quick-look" data-tooltip="tooltip" @click="addToModal({{product.product_name}})"  data-placement="top" title="Quick View"><i class="fas fa-search-plus"></i></a>

which logs into this

Raw expression: @click="addToModal(Mini Zoo)"

which looks ok but makes my app crash

the complete error is

[Vue warn]: Error compiling template:

invalid expression: missing ) after argument list in

    addToModal(Mini Zoo)

  Raw expression: @click="addToModal(Mini Zoo)"


1165|    <li>
1166|  
1167|<a data-modal="modal" data-modal-id="#quick-look" data-tooltip="tooltip" @click="addToModal(Mini Zoo)" data-placement="top" title="Quick View"><i class="fas fa-search-plus"></i></a></li>
   |                                                                                                                                           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
1168|   <li>
1169|  

(found in <Root>)

I even added a control to see if Vue reaches all the elements v-if="mounted === true "

I want to create a grid with 3 columns, each column have 4 rows. First and last one start with margin-top 0, center one start with margin-top of 15px

Above image is for example.
Thanks for the help.

I added the image, I want a code for this example in css

I want to understand once concept related to the map iterator in javascript. I want to execute multiple map iterator and I have came up with the below solution.

await Promise.all({
    arrOne.map(async first => {
         arrTwo = //call another await operation
        arrTwo.map(async second => {
            arrThree = //call another await operation
            arrThree.map(async third => {
                //return await operation and result
            })
        })
    })
})

What I want to achieve is to process the data in the parallel approach which I think through Promise.all we can achieve. I want to know if this is the good approach.

Also I want to process a large dataset. Will the above approach works because I was also thinking to process the data in batches.

I have been working on a page for a gaming group I am a part of, but I am not very experienced in HTML nor JS, but figured I would try it out. After a couple of hours of work, I realized I could have used objects… but I do not want to take the time to rebuild it now as I have put a ton of work into it.

currently I have a function to add a couple of input fields and give them personalized IDs for each

function add(){
        var teamList = parseInt($('#teamList').val())+1; 
        var feedMenu = parseInt($('#feedMenu').val())+1; 
        var inputMenu = "<p> <input type='text'  id='teamlead"+teamList+"'> <select  id='SS"+teamList+"'>  </p>";

        var feedText = "<p id=stantonList"+teamList+"> Stanton "+teamList+": '<span id=contentGen"+teamList+"></span>' | <span id=listValue"+teamList+"></span> </p>";

        $('#teamMenu').append(inputMenu); 
        $('#feedMenu').append(feedText);
        $('#teamList').val(teamList); 
        $('#feedMenu').val(feedMenu);

    }

I am trying to create a button that will collect all of the +teamList+ values for the respective field IDs, yet I am drawing a blank, and cannot find documentation on anything regarding it. (Most likely as I am the only one with a small enough of an intelligence to try it this way).

Currently, i’m using Throttle in lodash and setInterval to make a pop up modal. After 5 minutes, the pop up will show asking “Are you still there?”. If click “yes” then the setInterval will reset count 5 minutes. It works normally in browser, but not in webview of android and iOS. When i change 5 minutes to 20 seconds, it works normally.

After the first 5 minutes and click “yes” and 5 minutes later, nothing happen until i click again on screen, the pop up appear. I want it working normally without touching the screen

I want to get the html element so i can make changes to it but after opening the page when i try to get the id or class with getElement method

<iframe width="853" height="480" src="https://my.matterport.com/show/?m=YBurs3mz9E7" frameborder="0" allowfullscreen="" allow="xr-spatial-tracking"></iframe>

I’ve got some client-side javascript that generates an image based on passed in parameters, like so:

https://medabots.github.io/medarot3_dialog-previewer-js/?t=%3C%40LL%2C00%2C04%3EIt%27s%20a%20vending%20machine%20that%20sells%20ice%20cream.%3CCF%3E%3C%40LL%2C00%2C04%3EPudding%20ice%20cream…!%3CCF%3E%3C%40LL%2C00%2C04%3ENah...

the generated image

It uses the Canvas API to draw the image.

However, this does not seem to work within Google Sheets. I’d like to take advantage of GitHub pages or Google Sheets such that I don’t need to host this image generation tool on a personally-hosted server.

Specifically, I’ve tried:

=IMAGE(CONCAT("https://medabots.github.io/medarot3_dialog-previewer-js/?t=", ENCODEURL("<%40LL%2C00%2C04>It's a vending machine that sells ice cream.<CF><%40LL%2C00%2C04>Pudding ice cream...!<CF><%40LL%2C00%2C04>Nah...")))

and it doesn’t seem to load at all.

A PHP implementation running on an external server works fine, but I assume this is because an image is being pre-generated and served to the client without any hassle…

Is there any solution that can work with Google Sheets such that I don’t need to host the preview tool myself (e.g. doing this within AppScript)? Or is a hosted solution the only feasible answer?

With Javascript I often have to do something like this:

   if (predicate) el.setAttribute('data-foo', '')
   else el.removeAttribute('data-foo')

what I would really like to do is this (nice and DRY):

   el.setBoolAttribute('data-foo', predicate)  // Desired function

Its a function I would like to use in the DOM, and web component shadow roots, in many places, so its not really a function I would like to import from a module. Does Javascript have any sort of native way?

<script type="text/javascript
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script type="text/javascript">  


$(document).ready(function () {
$.ajax({
type: "Get", url: "https://eduteksolutions.in//info//AcademicMaster?instituteCd=29", dataType: "json", contentType: "application/json",

data: "{}",
success: function (data) {
var s = '<option value="-1">Please Select a Department</option>';
for (var i = 0; i < data.length; i++) {
s += '<option value="' + data[i].ClassCd + '">' + data[i].ClassName + '</option>';
}
$("#ctl00_center_ddlNationality").html(s);
}
});
});  
});

its giving Error message Uncaught TypeError Can Read Proeperties of undefined Caught.plz provide any solutions reading.`

The package should be written in react native and that has to work in both ios and android. Can’t use existing third party libraries because of some concerns. Should I have to write codes in native language as well ?

I have went through source code of different third party libraries and still confused.

So, I have a video call channel where two users can connect. I’m checking the number of connected users by checking the length of client.remoteUsers array. The problem is, that when one of the users refreshes the video call page, then instead of returning 2, it returns me 3.

In my code, I only show the video screen when the length of client.remoteUsers array is 2. But, I’m perplexed by this unexpected behavior. Can anyone please help? Thanks.

Reference code:

client.on("user-published", async (user, mediaType) => {
          console.log(user, "agoramiccc")
          await client.subscribe(user, mediaType);
          // console.log("subscribe success");          
          if (mediaType === "video") {
            if (!users.length) {
              setUsers((prevUsers) => {
                return [user];
              });
            }
          }
          if (mediaType === "audio") {
            user.audioTrack?.play();
          }
        });



        client.on("user-unpublished", (user, type) => {
          console.log(user, "unpub")

          // console.log("unpublished", user, type);
          if (type === "audio") {
            user.audioTrack?.stop();
          }
          if (type === "video") {
            setUsers((prevUsers) => {
              return prevUsers.filter((User) => User.uid !== user.uid);
            });
          }
        });
        client.on("user-left", (user) => {
          // console.log("leaving", user);
          setUsers((prevUsers) => {
            return prevUsers.filter((User) => User.uid !== user.uid);
          });
        });
        await client.join(config.appId, name, config?.token, null);
        if (tracks) await client.publish([tracks[0], tracks[1]]);
        setStart(true);
      };

I am working with React and Nodejs. And we have scenerio where we have to upload 10gb of file on the aws. I know that cannot be possible with single request and that is why I devided it into chunks but still it is not working and throw error after couple of chunk uploads. Here is the code

Frontend

import React, { useState, useEffect } from "react";
import { UploadDropzone } from "../../../components/icons";
import { Progress } from "antd";
import Dropzone from "react-dropzone";
import axios from "axios";
import { notification } from "antd";
import { isEmptyArray } from "formik";

const chunkSize = 1048576 * 25;

function UploadLocalVideo(props) {
  const { setUploadUrl, storageId, acceptFileType, isResourceBucket, callBackFun } = props;
  const [progress, setProgress] = useState(0);
  const [beginingOfTheChunk, setBeginingOfTheChunk] = useState(0);
  const [endOfTheChunk, setEndOfTheChunk] = useState(chunkSize);
  const [fileToBeUpload, setFileToBeUpload] = useState({});
  const [progressUpload, setProgressUpload] = useState(0);
  const [fileSize, setFileSize] = useState(0);
  const [chunkCount, setChunkCount] = useState(0);
  const [uploadId, setUploadId] = useState("");
  const [name, setName] = useState("");
  const [parts, setParts] = useState([]);
  const [counter, setCounter] = useState(1);
  const [percent, setPercent] = useState(0);
  const [fileType, setFileType] = useState("");
  const [uploading, setUploading] = useState(false);
  const onUpload = async (files) => {
    if (!isEmptyArray(files)) {
      setUploading(true);
    }
    let percent = 0;
    let name = Math.random().toString(36).substring(2, 10);
    resetChunkProperties();
    const _file = files[0];
    name = (name + _file?.name?.replace(/ +/g, "")).replace(/[{()}]/g, "");
    setName(name);
    setFileType(_file.type);
    setFileSize(_file.size);

    const _totalCount = _file.size % chunkSize == 0 ? _file.size / chunkSize : Math.floor(_file.size / chunkSize) + 1;
    setChunkCount(_totalCount);
    percent = 100 / _totalCount;
    setPercent(percent);
    setFileToBeUpload(_file);
    setProgress(1);
  };

  const resetChunkProperties = () => {
    setProgressUpload(0);
    setCounter(1);
    setBeginingOfTheChunk(0);
    setEndOfTheChunk(chunkSize);
    setUploadId("");
    setName("");
    setParts([]);
    setPercent(0);
    setProgress(0);
    setFileType("");
  };
  useEffect(() => {
    if (fileSize > 0) {
      fileUpload(counter);
    }
  }, [fileToBeUpload, progressUpload]);

  const fileUpload = () => {
    setCounter(counter + 1);
    if (counter <= chunkCount) {
      var chunk = fileToBeUpload.slice(beginingOfTheChunk, endOfTheChunk);
      uploadChunk(chunk);
    }
  };

  const uploadChunk = async (chunk) => {
    try {
      const formData = new FormData();
      formData.append("file", chunk);
      formData.append("name", name);
      formData.append("fileType", fileType);
      formData.append("chunkSize", chunk.size);
      formData.append("currentIndex", counter);
      formData.append("totalChunk", chunkCount);
      formData.append("uploadId", uploadId);
      formData.append("EtagArray", JSON.stringify(parts));
      formData.append("storageId", storageId);
      formData.append("isResourceBucket", isResourceBucket);
      await axios({
        method: "post",
        url: `${process.env.REACT_APP_NEW_API_HOSTNAME}/upload-chunk`,
        data: formData,
      }).then((response) => {
        if (response.data.uploadStatus == "uploading") {
          setBeginingOfTheChunk(endOfTheChunk);
          setEndOfTheChunk(endOfTheChunk + chunkSize);
          setUploadId(response.data.uploadId);
          setParts([...parts, response.data.etag]);
          setProgress(parseInt((progressUpload + 1) * percent));
          setProgressUpload(progressUpload + 1);
        } else if (response.data.uploadStatus == "complete") {
          setUploadUrl(response.data.url); // set url or response url
          callBackFun(fileToBeUpload);
          setProgress(100);
          setUploading(false);
        } else if (response.data.uploadStatus == "failed" || response.data.status == false) {
          notification["error"]({ message: response.data.message });
          setProgress(0);
          setUploading(false);
        } else if (response.data.success == false) {
          notification["error"]({ message: "Storage not found" });
          setProgress(0);
          setUploading(false);
        }
      });
    } catch (error) {
      console.log(error, "error");
    }
  };
  return (
    <div className="form-group">
      <Dropzone
        onDrop={(acceptedFiles) => {
          onUpload(acceptedFiles);
        }}
        accept={acceptFileType}
        disabled={uploading}
      >
        {({ getRootProps, getInputProps }) => (
          <div className="dropzone">
            <div className="dropzone-inner" {...getRootProps()}>
              <input {...getInputProps()} />
              <div className="dropzone-icon">
                <UploadDropzone />
              </div>
              <div className="dropzone-title">Upload a File</div>
              <div className="dropzone-subtitle">
                Click to <u>browse</u>, or drag & drop your file here
              </div>
              <Progress strokeLinecap="butt" type="line" percent={progress} /> {progress > 1 ? `${progress} %` : ""}
            </div>
          </div>
        )}
      </Dropzone>
    </div>
  );
}

export default UploadLocalVideo;

Backend

const handler = async (request, reply) => {
    try {
        let uploadId = (_.get(request.payload, "uploadId", ""));
        let fileName = (_.get(request.payload, "name", ""));
        let multiParts = JSON.parse(_.get(request.payload, "EtagArray", []))
        let storageId = _.get(request, "payload.storageId", "")
        let dataBuffer = Buffer.from(request.payload.file)
        let currentChunkIndex = parseInt(request.payload.currentIndex);
        let totalChunk = parseInt(request.payload.totalChunk);
        let isResourceBucket = JSON.parse(_.get(request, "payload.isResourceBucket", false))
        let region = ""
        let credentials = {}
        let squery = {
            name: { $in: ["aws"] }
        }
        if (isResourceBucket && storageId == "") {
            squery._id = mongoose.Types.ObjectId("62e112750e3d4dada1b9a3c0")
        } else {
            squery._id = mongoose.Types.ObjectId(storageId)
        }

        if (currentChunkIndex <= totalChunk) {
            let storages = await Storage.findOne(squery)
            if (storages && storages.credentials) {
                credentials = await StreamService.decrypt_storage_credentials(storages.credentials, 'aws')
                region = (credentials.region).replace("s3.", "").replace(".amazonaws.com", "").replace("s3-", "")
            } else {
                return reply({
                    status: false,
                    message: 'Storage not found',
                    uploadStatus: "failed"
                })
            }
        }
        AWS.config.update({
            accessKeyId: credentials.access_key,
            secretAccessKey: credentials.secret_key,
            region: region
        })

        const s3 = new AWS.S3({
            params: {
                Bucket: credentials.bucket_name,
            },
            // endpoint,
            signatureVersion: 'v4',
            region: region,
            apiVersion: '2006-03-01'
        })

        let filename = `uploadFile/${fileName}`;

        if (currentChunkIndex == 1) {
            uploadId = await getUploadId(filename, s3, credentials.bucket_name)
            console.log("currentChunkIndex", " == ", currentChunkIndex, { uploadId })
        }

        if (currentChunkIndex < totalChunk) {
            let etag = await uploadParts(filename, credentials.bucket_name, dataBuffer, currentChunkIndex, uploadId, s3)
            return reply({
                status: true,
                uploadId,
                etag,
                uploadStatus: "uploading",
                message: "uploading"
            })
        } else if (currentChunkIndex == totalChunk) {
            let finalChunk = await uploadParts(filename, credentials.bucket_name, dataBuffer, currentChunkIndex, uploadId, s3)
            let etag = { ETag: finalChunk.ETag, PartNumber: currentChunkIndex };
            multiParts.push(etag)
            let location = await completeFileMultiPartUpload(filename, credentials.bucket_name, uploadId, multiParts, s3, credentials.cdn_suffix);
            location = location.replace("%2F","/")
            console.log({ location })
            if (location) {
                return reply({
                    status: true,
                    url: location,
                    uploadStatus: "complete",
                    message: "upload completed"
                })
            }
        }
    } catch (error) {
        logger.error(error)
        return reply({
            success: false,
            message: error.message
        });
    }
};

These are the logs

So I have couple of question. 1. When we upload the 10gb file does it consumes node memory? if “Yes” then what is the solution?

Thanks

I have a array as follows

data = [
{
 sNo:1,
 month:[
 {
  id:1,
  value:0
 },
  id:5,
  value:10
 },
 {
 sNo:2,
 month:[
 {
  id:6,
  value:10
 },
  id:9,
  value:20
 }
]

I have a method as follows:

myMethod(value,sNo,indexOfMonthArray) {

}

this method receives three aruguments. one is value to be updated, second is sNo and third is index of inner month array where value needs to be updated. I want to search of sNo in data array and for that particular sNo, in month array I need to update value which I am recieving in argument. How can I do that?