Category: javascript

I have a table and i just have to download invoice for a particular row. I want to download directly without show the preview.

I have tried pdfjs and html2canvas but not be able to understand properly how to download without preview.

So if you know the right way then please let me know.

Thank you.

I am working on a form in Angular.

In form.component.ts I have:

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { FormService } from '../services/form.service';

@Component({
  selector: 'my-app',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css'],
})
export class FormComponent {
  public accountTypes!: any;
  public selectedAccountType: any;

  public form: FormGroup = new FormGroup({
    first_name: new FormControl('', Validators.required),
    last_name: new FormControl('', Validators.required),
    email: new FormControl('', [Validators.required, Validators.email]),
    account_type: new FormControl(''),
  });

  constructor(private formService: FormService) {}

  ngOnInit(): void {
    this.getAccountTypes();
  }

  public getAccountTypes() {
    this.formService.getAccountTypes().subscribe((response) => {
      this.accountTypes = response;
    });
  }

  public sendFormData() {
    console.log(this.form);
  }
}

The form’s template:

<form [formGroup]="form">
    <mat-form-field appearance="outline" floatLabel="never">
      <mat-label class="mat-label">Fast name:</mat-label>
      <input class="mat-input" matInput formControlName="first_name" />
    </mat-form-field>

    <mat-form-field appearance="outline" floatLabel="always">
      <mat-label class="mat-label">Last name:</mat-label>
      <input class="mat-input" matInput formControlName="last_name" />
    </mat-form-field>

    <mat-radio-group
      formControlName="account_type"
      [(ngModel)]="this.selectedAccountType"
    >
      <mat-radio-button
        *ngFor="let accountType of accountTypes"
        [value]="accountType.value"
      >
        <span class="top-label">{{ accountType.label }}</span>
      </mat-radio-button>
    </mat-radio-group>

    <mat-form-field appearance="outline" floatLabel="never">
      <mat-label class="mat-label">Email:</mat-label>
      <input class="mat-input" matInput formControlName="email" />
    </mat-form-field>
  </div>
  <div class="center">
    <button
      (click)="sendFormData()"
      mat-raised-button
      color="primary"
      [disabled]="!form.valid"
    >
      Submit
    </button>
</form>

See this Stackblitz.

The problem

If the user forgets to select a radio button, there is no viable way, from a visual standpoint, to signal the <mat-radio-group> as invalid. I want the first option to be selected by default, instead.

I have not been able to achieve this goal.

What is the easiest and most reliable way to achieve the desired result?

I am trying to build the form repeater where ID and Datapoint are select tag. When I select ID than Datapoint will be taken from AJAX response and appended to option. In the picture you can see when I call for select for the first time the datapoint (select tag) is showing the values but when trying to add another the datapoint there is no response.

<form method="post" class="repeater" enctype="multipart/form-data">
  <div data-repeater-list="samplernetwork">
    <div data-repeater-item="data-repeater-item" class="row">
      <div class="mb-3 col-lg-2">
        <label for="id">ID</label>
        <select class="form-control" name="id" id="id">
          <option></option>
          {% for id in id %}
            <option value="{{id.id}}">{{id.id}}</option>
          {% endfor %}
        </select>
      </div>

      <div class="mb-3 col-lg-2">
        <label for="datapoint">Datapoint</label>
        <select class="form-control" name="datapoint" id="datapoint"></select>
      </div>

      <div class="col-lg-2 align-self-center">
        <div class="d-grid">
          <input data-repeater-delete="data-repeater-delete" type="button" class="btn btn-primary" value="Delete"/>
        </div>
      </div>
    </div>

  </div>
  <input data-repeater-create="data-repeater-create" type="button" class="btn btn-success mt-3 mt-lg-0" value="Add"/>

</form>

<script src="/libs/jquery.repeater/jquery.repeater.min.js"></script>
<script src="/js/pages/form-repeater.int.js"></script>

<script>
  $("#id").on('change', function (e) {
    var consti = $(this).val()
    console.log(consti)
    if (consti === "") {
      $('#datapoint').find('option').remove()
    } else if (consti != null) {
      var url = '{{path(' app_info ',{' id ':' ReplaceMeWithCorrectValue '})}}';
      url = url.replace("ReplaceMeWithCorrectValue", consti);
      var options = ""
      $.ajax({
        type: "POST",
        url: url,
        success: function (response) {
          var information = JSON.parse(response)
          for (let item in information) {
            options += `<option value=${item}>${item}</option>`;
          }
          $("#datapoint").html(options);
        }
      });
    }
  });
</script>

<script src="/js/app.js"></script>

I’m working with the following code.

First, I have an empty webpage because I have no items to render. Then, onMount fires and I fetch some items from an API. Finally, the items get rendered.

<script>
import { slide } from "svelte/transition";
import { onMount } from "svelte";

// Initially we have no items.
let items = [];
let id = 0;

onMount(() => {
    // Fetch items from API.
    items = [
        {id: id, name: `item ${id++}`},
        {id: id, name: `item ${id++}`},
        {id: id, name: `item ${id++}`},
    ];
});

function addItem() {
    items = [
        ...items,
        {id: id, name: `item ${id++}`},
    ];
}
</script>

<div>
    <button on:click={addItem}>add</button>
    {#each items as it (it.id)}
        <div transition:slide>
            <p>{it.id} {it.name}</p>
        </div>
    {/each}
</div>

The problem is that fetch gets like 50 items and I don’t want to play transitions for any of them. However, I do want transitions when individual items are added or removed only inside of the list.

Is there a way to achieve this effect?

Sandbox: https://codesandbox.io/s/blue-shape-njxx9o?file=/App.svelte

I am trying to integrate Twitter in a chrome extension (private use only) but most of the tutorials require Node.js. Is there a way to communicate with Twitter API v2 client side only?

 $('#update_reading').click(function(e) { 
    e.preventDefault();
    var values = [];
$("table tr").each((_, row) => {
  var value = {};
  $(row).find(":input[name='mono_cmr[]']").each((__, e) =>
    value['mono_cmr'] = $(e).val()
  );
  $(row).find(":input[name='mono_pmr[]']").each((__, e) =>
    value['mono_pmr'] = $(e).val()
  );
  $(row).find(":input[name='color_cmr[]']").each((__, e) =>
    value['color_cmr'] = $(e).val()
  );
  $(row).find(":input[name='color_pmr[]']").each((__, e) =>
    value['color_pmr'] = $(e).val()
  );
  $(row).find(":input[name='scn_cmr[]']").each((__, e) =>
    value['scn_cmr'] = $(e).val()
  );
  $(row).find(":input[name='scn_pmr[]']").each((__, e) =>
    value['scn_pmr'] = $(e).val()
  );
  $(row).find(":input[name='asset_id[]']").each((__, e) =>
    value['asset_id'] = $(e).val()
  );

  values.push(value);
  
});
// console.log(values)
values.shift();
values.shift();
values.shift();
values.shift();
var billing_date = $('#billing_date').val();         
 $("#overlay").fadeIn(300); 

  
  $.ajax({ 
  type: "POST", 
  dataType: "json", 
  url: 'billing/post_reading', 
  data: {'values': values,'billing_date': billing_date,"_token":"{{ csrf_token() }}"},
  
  success: function(data){ 
    // var msg =JSON.parse(data);
    
  } 
  }).done(function() {
    setTimeout(function(){
       $("#overlay").fadeOut(300);
      alert("Reading Updated Successfully"); 
    },
    
    500);
    
  }); 
  }); 
     
  </script>

i am using above to execute an Ajax call to post Data the script works well when i have like 10 input but when having like 400 rows to post i get 302 not found error am unable to find why am getting this redirect and data is not posted. The below is what is seen in inspect

how can i handle this issue?

the request also shows blocked

I am trying the following Postgresql query with Prisma’s $executeRaw function. But it is not returning the values inserted. Instead only returning the number of records inserted.

await prismaClient.$executeRaw(`
INSERT INTO table1 (name, place, animal, thing)
SELECT * FROM table2
WHERE place = 'California'
RETURNING *;
`);

It is returning

1

While I want the records inserted to be returned. How can that be done?

When I import Prism.js in a React app, Prism.js automatically and immediately hightlights all code blocks.

I want to highlight the code blocks manually.

This is my React app codes:

import React from "react";
import Prism from "prismjs";
import "prismjs/themes/prism-tomorrow.css";

const code = `const App = props => {
  return (
    <div>
      <h1> React App </h1>
      <div>Awesome code</div>
    </div>
  );
};
`;

export default function App() {
  return (
    <pre>
      <code className="language-javascript">{code}</code>
    </pre>
  );
}

See the live example at Codesandbox

How can I highlight the code block manually?

The target video is：https://www.youtube.com/watch?v=vJNVramny9k

The problem at console. log (Letter ${i} is ${logo [i]. getTotalLength()});
GetTotalLength is reported as Uncaught TypeError: logo [i]. getTotalLength is not a function

I just started to learn the web, and I encountered this problem when trying to imitate the effect. I can’t understand. I have the same code as the author of the video. Why not?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    <!-- Initialize margin -->
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        body{
            width: 100%;
            height: 100%;
            background-color:rgb(227, 228, 232);
        }
        #logo{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        <!-- Draw offset for each character -->
        #logo path:nth-child(1){
            stroke-dasharray: 200px;
            stroke-dashoffset: 50px;
        }
        #logo path:nth-child(2){
            stroke-dasharray: 30px;
        }
        #logo path:nth-child(3){
            stroke-dasharray: 30px;
        }
        #logo path:nth-child(4){
            stroke-dasharray: 30px;
        }
        #logo path:nth-child(5){
            stroke-dasharray: 30px;
        }
        #logo path:nth-child(6){
            stroke-dasharray: 30px;
        }
        #logo path:nth-child(7){
            stroke-dasharray: 30px;
        }
        #logo path:nth-child(8){
            stroke-dasharray: 30px;
        }
        #logo path:nth-child(9){
            stroke-dasharray: 30px;
        }
        #logo path:nth-child(10){
            stroke-dasharray: 300px;
        }
        #logo path:nth-child(11){
            stroke-dasharray: 300px;
        }
        
    </style>
</head>
<body>
<!-- Import svg path -->
    <svg id="logo" width="734" height="151" viewBox="0 0 734 151" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M25.904 119.32H3.44L19.856 2.96799H40.448C50.336 2.96799 57.824 5.41599 62.912 10.312C68.096 15.112 71.36 21.976 72.704 30.904C74.144 39.832 74.048 50.344 72.416 62.44C70.976 74.056 68.432 84.136 64.784 92.68C61.136 101.128 56.144 107.704 49.808 112.408C43.472 117.016 35.504 119.32 25.904 119.32ZM38.864 16.216L32.816 16.072L20.144 106.072H27.632C35.888 106.072 42.32 102.376 46.928 94.984C51.632 87.496 54.944 76.792 56.864 62.872C59.168 46.84 58.832 35.08 55.856 27.592C52.88 20.104 47.216 16.312 38.864 16.216Z" stroke="#2459E1" stroke-width="5"/>
        <path d="M90.3688 119.32H76.6888L89.0728 31.048H102.753L101.169 42.136C103.953 37.912 107.265 34.888 111.105 33.064C114.945 31.24 118.977 30.328 123.201 30.328L121.329 44.584C116.049 43.912 111.249 45.256 106.929 48.616C102.609 51.88 99.6808 57.112 98.1448 64.312L90.3688 119.32Z" stroke="#2459E1" stroke-width="5"/>
        <path d="M169.96 95.56C167.656 103.528 163.96 109.72 158.872 114.136C153.784 118.552 147.784 120.76 140.872 120.76C133.576 120.76 128.2 118.792 124.744 114.856C121.288 110.824 119.224 105.352 118.552 98.44C117.976 91.528 118.216 83.656 119.272 74.824C120.424 65.992 122.248 58.216 124.744 51.496C127.336 44.776 130.888 39.544 135.4 35.8C139.912 31.96 145.528 30.04 152.248 30.04C159.256 30.04 164.488 32.008 167.944 35.944C171.4 39.784 173.416 45.352 173.992 52.648C174.664 59.944 174.28 68.728 172.84 79H132.52C131.944 83.992 131.704 88.696 131.8 93.112C131.896 97.432 132.712 100.984 134.248 103.768C135.784 106.456 138.424 107.8 142.168 107.8C149.08 107.8 154.072 103.096 157.144 93.688L169.96 95.56ZM151.096 43C146.968 43 143.56 45.064 140.872 49.192C138.184 53.32 136.024 59.32 134.392 67.192H159.88C160.264 62.584 160.312 58.456 160.024 54.808C159.736 51.16 158.872 48.28 157.432 46.168C156.088 44.056 153.976 43 151.096 43Z" stroke="#2459E1" stroke-width="5"/>
        <path d="M228.777 119.32H215.529L216.249 111.4C214.137 114.28 211.738 116.536 209.049 118.168C206.457 119.896 203.722 120.76 200.842 120.76C196.234 120.76 192.249 119.224 188.889 116.152C185.625 113.08 183.37 108.088 182.122 101.176C180.874 94.168 181.065 84.856 182.697 73.24C184.713 58.648 188.361 47.848 193.641 40.84C199.017 33.736 205.209 30.184 212.217 30.184C218.649 30.184 223.306 33.112 226.186 38.968L227.193 31.48H241.161L228.777 119.32ZM196.954 74.824C196.186 80.968 195.754 86.536 195.658 91.528C195.658 96.52 196.33 100.504 197.674 103.48C199.018 106.36 201.321 107.8 204.585 107.8C206.889 107.8 208.953 106.984 210.777 105.352C212.697 103.624 214.33 101.416 215.674 98.728C217.018 96.04 218.074 93.208 218.842 90.232L223.45 58.12C223.546 53.704 222.681 50.104 220.857 47.32C219.129 44.536 216.682 43.144 213.514 43.144C210.538 43.144 207.946 44.584 205.738 47.464C203.53 50.344 201.706 54.184 200.266 58.984C198.826 63.784 197.722 69.064 196.954 74.824Z" stroke="#2459E1" stroke-width="5"/>
        <path d="M257.157 119.32H243.189L255.717 31.48H268.821L268.101 39.976C270.501 36.424 273.141 33.88 276.021 32.344C278.997 30.808 281.877 30.04 284.661 30.04C288.501 30.04 291.861 31.048 294.741 33.064C297.717 35.08 299.637 38.488 300.501 43.288C302.997 38.488 305.877 35.08 309.141 33.064C312.501 31.048 315.813 30.04 319.077 30.04C322.533 30.04 325.605 30.904 328.293 32.632C331.077 34.264 333.093 36.952 334.341 40.696C335.685 44.44 335.877 49.528 334.917 55.96L325.989 119.32H311.877L320.661 58.264C322.101 48.088 319.653 43 313.317 43C310.149 43 307.413 44.488 305.109 47.464C302.805 50.44 301.125 54.28 300.069 58.984L291.573 119.32H277.461L286.245 58.264C287.685 48.088 285.237 43 278.901 43C275.829 43 273.141 44.44 270.837 47.32C268.533 50.2 266.853 53.896 265.797 58.408L257.157 119.32Z" stroke="#2459E1" stroke-width="5"/>
        <path d="M395.945 95.56C393.641 103.528 389.945 109.72 384.857 114.136C379.769 118.552 373.769 120.76 366.857 120.76C359.561 120.76 354.185 118.792 350.729 114.856C347.273 110.824 345.209 105.352 344.537 98.44C343.961 91.528 344.201 83.656 345.257 74.824C346.409 65.992 348.233 58.216 350.729 51.496C353.321 44.776 356.873 39.544 361.385 35.8C365.897 31.96 371.513 30.04 378.233 30.04C385.241 30.04 390.473 32.008 393.929 35.944C397.385 39.784 399.401 45.352 399.977 52.648C400.649 59.944 400.265 68.728 398.825 79H358.505C357.929 83.992 357.689 88.696 357.785 93.112C357.881 97.432 358.697 100.984 360.233 103.768C361.769 106.456 364.409 107.8 368.153 107.8C375.065 107.8 380.057 103.096 383.129 93.688L395.945 95.56ZM377.081 43C372.953 43 369.545 45.064 366.857 49.192C364.169 53.32 362.009 59.32 360.377 67.192H385.865C386.249 62.584 386.297 58.456 386.009 54.808C385.721 51.16 384.857 48.28 383.417 46.168C382.073 44.056 379.961 43 377.081 43Z" stroke="#2459E1" stroke-width="5"/>
        <path d="M418.728 119.32H405.048L417.432 31.048H431.112L429.528 42.136C432.312 37.912 435.624 34.888 439.464 33.064C443.304 31.24 447.336 30.328 451.56 30.328L449.688 44.584C444.408 43.912 439.608 45.256 435.288 48.616C430.968 51.88 428.04 57.112 426.504 64.312L418.728 119.32Z" stroke="#2459E1" stroke-width="5"/>
        <path d="M447.815 138.328H534.215L532.775 148.12H446.375L447.815 138.328Z" stroke="#2459E1" stroke-width="5"/>
        <path d="M548.703 119.32H534.303L550.575 2.96799H564.975L558.207 51.352H587.295L594.063 2.96799H608.463L592.191 119.32H577.791L585.423 65.032H556.335L548.703 119.32Z" stroke="#2459E1" stroke-width="5"/>
        <path d="M656.981 119.32H643.733L644.453 111.4C642.341 114.28 639.941 116.536 637.253 118.168C634.661 119.896 631.925 120.76 629.045 120.76C624.437 120.76 620.453 119.224 617.093 116.152C613.829 113.08 611.573 108.088 610.325 101.176C609.077 94.168 609.269 84.856 610.901 73.24C612.917 58.648 616.565 47.848 621.845 40.84C627.221 33.736 633.413 30.184 640.421 30.184C646.853 30.184 651.509 33.112 654.389 38.968L655.397 31.48H669.365L656.981 119.32ZM625.157 74.824C624.389 80.968 623.957 86.536 623.861 91.528C623.861 96.52 624.533 100.504 625.877 103.48C627.221 106.36 629.525 107.8 632.789 107.8C635.093 107.8 637.157 106.984 638.981 105.352C640.901 103.624 642.533 101.416 643.877 98.728C645.221 96.04 646.277 93.208 647.045 90.232L651.653 58.12C651.749 53.704 650.885 50.104 649.061 47.32C647.333 44.536 644.885 43.144 641.717 43.144C638.741 43.144 636.149 44.584 633.941 47.464C631.733 50.344 629.909 54.184 628.469 58.984C627.029 63.784 625.925 69.064 625.157 74.824Z" stroke="#2459E1" stroke-width="5"/>
        <path d="M697.456 120.76C688.144 120.76 681.76 117.112 678.304 109.816C674.848 102.424 674.128 91 676.144 75.544C678.16 59.896 681.808 48.424 687.088 41.128C692.464 33.736 699.712 30.04 708.832 30.04C718.24 30.04 724.672 33.736 728.128 41.128C731.584 48.424 732.304 59.896 730.288 75.544C728.272 91 724.576 102.424 719.2 109.816C713.92 117.112 706.672 120.76 697.456 120.76ZM698.464 107.8C702.88 107.8 706.48 105.208 709.264 100.024C712.144 94.744 714.352 86.584 715.888 75.544C717.52 64.408 717.664 56.2 716.32 50.92C714.976 45.64 712.096 43 707.68 43C703.456 43 699.952 45.64 697.168 50.92C694.384 56.2 692.176 64.408 690.544 75.544C689.008 86.584 688.864 94.744 690.112 100.024C691.36 105.208 694.144 107.8 698.464 107.8Z" stroke="#2459E1" stroke-width="5"/>
        </svg>
        
    <script>
    <!-- Get total length -->
        const logo =document.querySelectorAll("#logo path");
        for(let i=0;i<logo.length;i++)
        {
            console.log(`Letter ${i} is ${logo[i].getTotallLength()}`);
        }
    </script>    
</body>
</html>

<!DOCTYPE html>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0">

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>


    <style>
        .text_red {
            font-weight: bold;
            color: red;
        }

        .hide {
            display: none;
        }
    </style>
</head>

<body>
    <div class="container">
        <center>
            <h2>New Form</h2>
        </center>
        <div class="main_div">
        </div>
    </div>
    <div class="load hide">
        <div class="row parent_div mb-5">
            <div class="row div1">
                <div class="question_index">
                    <label id="question_index">Question_index</label>
                    <input type="text" name="question_index" id="question_index" class="form-control">
                </div>
                <div class="div2">
                    <div class="option_div_optionindex">
                        <label id="option_index_1">Option_index_1</label>
                        <input type="text" name="option_index_1" id="option_index_1" class="form-control">
                    </div>
                    <div class="option_div_optionindex">
                        <label id="option_index_2">Option_index_2</label>
                        <input type="text" name="option_index_2" id="option_index_2" class="form-control">
                    </div>
                </div>
            </div>
            <div class="div3 row mt-4">
                <div class="col-4">
                    <button id="add_question_index" class="form-control add_question">add question</button>
                </div>
                <div class="col-4">
                    <button id="add_option_index" class="form-control add_option">add option</button>
                </div>
                <!-- <div class="col-4">
                    <button id="remove_option_index" class="form-control remove_option">remove option</button>
                </div> -->
            </div>
        </div>
    </div>
    <div class="load2 hide">
        <div class="option_div_optionindex">
            <label id="option_index_count">Option_index_count</label>
            <input type="text" name="option_index_count" id="option_index_count" class="form-control">
        </div>
    </div>
    </div>
    <script>
        $(document).ready(function () {

            $(document).on('click', '.add_option', function () {
                var count1 = $('.main_div').length;
                var count3 =  $('.div2').length;
                console.log(count1)
                // 1
                console.log(count3)
                // 2
                var innerhtml3 = $('.load2').html();
                var addrow3 = innerhtml3.replace(/index/g, count1-1).replace(/count/g, count3+1);
                $(this).parent().parent().siblings().children('.div2').append(addrow3);
                count1++;
                count3++;
                
            })
            
            function getData1() {
                var count1 = $('.main_div').children().length;
                var innerhtml1 = $('.load').html();
                var addrow1 = innerhtml1.replace(/index/g, count1);
                $('.main_div').append(addrow1);
            }
            
            getData1();


            $(document).on('click', '.add_question', function () {
                var count2 = $('.main_div').children().length;
                var innerhtml2 = $('.load').html();
                var addrow2 = innerhtml2.replace(/index/g, count2).replace(/add_question/g, "remove_question").replace(/add question/g, "remove question");
                $('.main_div').append(addrow2);
            })

            // var remove_option = ``;
            // $(document).on('click', '.remove_option', function () {
            //     $(this).parent().parent().parent().remove();
            // })

            $(document).on('click', '.remove_question', function () {
                $(this).parent().parent().parent().remove();
            })

        })
    </script>
</body>

</html>

i have made a page for dynamically appending input fields for new question as well as new options.
all are input fields only, i have to generate index for the fields like this:
question_0
option_0_1
option_0_2
option_0_3

question_1
option_1_1
option_1_2
option_1_3
….
but when i click on “add option” the options input fields are appending but the index is not generating correctly
also i have to generate index similarly for the buttons too
please help with this part
also i have to dynamically remove the added option fields too when clicked on “remove option” button, i have commented it as of now

JavaScript Excerpt

var counter = 0
var txt = "";

for (let i = 0; i < 5; i++) {
  for (let c = 0; c < 3; c++) {
    txt += "the value of c is " + c + "<br>"
  }
  counter = i;
}

What is the value of counter?

Asking for final output

I have an object as follows:

{
        "id":1,
        "vol":"0.0"
        "vol_per":"0.0%"
        "ABC":"8.30",
        "OFG":"13.85",
        "SPG":"70.80"
        
  }

from this object I want to create a array in following format.

data = [
{field:'vol',header:'VOL'},
{field:'vol_per',header:'VOL%'},
{field:'ABC',header:'ABC'},
{field:'OFG',header:'OFG'},
{field:'APG',header:'SPG'}
]

in this array, field will have value same as key of above object and header values will be similar to shown in data array. Similaryly at run time many attributes can come. How can I do that?

Im trying to bring the scroll up when different sections clicked (portfolio, about me etc.) I know I have to use window.scrollTo(0, 0); but im not sure where to put it to make it work

const sections = document.querySelectorAll(“.section”); const sectBtns
= document.querySelectorAll(“.controls”); const sectBtn = document.querySelectorAll(“.control”); const allSections =
document.querySelectorAll(“.main-content”);

function PageTransitions() { // Button click active class for (let
i = 0; i < sectBtn.length; i++) {
sectBtn[i].addEventListener(“click”, function () {
let currentBtn = document.querySelectorAll(“.active-btn”);
currentBtn[0].className = currentBtn[0].className.replace(“active-btn”, “”);
this.className += ” active-btn”;
}); }

 //Sections Active   allSections[0].addEventListener("click", (e) => {
const id = e.target.dataset.id;
if (id) {
  //   //remove selected from the other btns
  sectBtns.forEach((btn) => {
    btn.classList.remove("active");
  });
  e.target.classList.add("active");

  //hide other sections
  sections.forEach((section) => {
    section.classList.remove("active");
  });

  const element = document.getElementById(id);
  element.classList.add("active");
}   });    }

PageTransitions();

Html part

Document


This is the first
Hello

Javascript Part

let a = document.getElementsByClassName(“head”);
console.log(a);

Tried everything but it is always showing null

I want to update ta.nmbr and ta.totl to an existing indctr. How do I do it? is it possible to join?

This is the SELECT query.

$sql = "SELECT ind.indctr_code, ind.indctr_name, ctr_ind.ctr_indctr_id, ta.actl_trgt, ta.nmbr, ta.totl 
    FROM indctr AS ind 
    LEFT JOIN ctr_indctr 
    AS ctr_ind ON ind.indctr_code = ctr_ind.indctr_code 
    LEFT JOIN actl_trgt AS ta 
    ON ctr_ind.ctr_indctr_id = ta.ctr_indctr_id
    LEFT JOIN qtr
    ON ta.qtr_code = qtr.qtr_code";

This is the ralationship of the entities.

I was doing an inline editing table for this where the indctr_code and the indctr_name are already there. and the data for ta.nmbr & ta.totl will be editable in the table.