Category: javascript

I am trying to move an electron screen recorder to a web-based version in React.

The electron.js version uses desktopCapturer to record the video and audio.

I need the ability to capture screen, audio and also need to be able to record clicks. So if a user presses anywhere in the screen the clicks should be captured with the coordinates

I was looking at a few libraries

• https://github.com/fbaiodias/react-video-recorder
• https://github.com/0x006F/react-media-recorder

Are there any other libraries for web that do the same to what desktopCapturer does in electron.js

I am working on a web project and I have a floating action button that is positioned at either the bottom right or bottom left corner of the screen. When I click on this button, four icons are displayed vertically above the button.

Currently, the icons appear in a vertical layout above the floating action button. However, I want the icons to be arranged in a circular arc around the button, maintaining their vertical order. Additionally, I would like to implement clickable tooltips for each icon, showing some information when the user hovers over them.

Code Sanbox Link
https://codepen.io/Markshall/pen/wQyWqq

Below is the image of my requirement.

<div class="adminActions">
  <input type="checkbox" name="adminToggle" class="adminToggle" />
  <a class="adminButton" href="#!"><i class="fa fa-cog"></i></a>
  <div class="adminButtons">
    <a href="#" title="Add Company"><i class="fa fa-building"></i></a>
    <a href="#" title="Edit Company"><i class="fa fa-pen"></i></a>
    <a href="#" title="Add User"><i class="fa fa-user-plus"></i></a>
    <a href="#" title="Edit User"><i class="fa fa-user-edit"></i></a>
  </div>
</div>

<style>
body {
  background-color: #f5f5f5;
}

.adminActions {
  position: fixed;
  bottom: 35px; right: 35px;
}

.adminButton {
  height: 60px;
  width: 60px;
  background-color: rgba(67, 83, 143, .8);
  border-radius: 50%;
  display: block;
  color: #fff;
  text-align: center;
  position: relative;
  z-index: 1;
}

.adminButton i {
  font-size: 22px;
}

.adminButtons {
  position: absolute;
  width: 100%;
  bottom: 120%;
  text-align: center;
}

.adminButtons a {
  display: block;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  text-decoration: none;
  margin: 10px auto 0;
  line-height: 1.15;
  color: #fff;
  opacity: 0;
  visibility: hidden;
  position: relative;
  box-shadow: 0 0 5px 1px rgba(51, 51, 51, .3);
}

.adminButtons a:hover {
  transform: scale(1.05);
}

.adminButtons a:nth-child(1) {background-color: #ff5722; transition: opacity .2s ease-in-out .3s, transform .15s ease-in-out;}
.adminButtons a:nth-child(2) {background-color: #03a9f4; transition: opacity .2s ease-in-out .25s, transform .15s ease-in-out;}
.adminButtons a:nth-child(3) {background-color: #f44336; transition: opacity .2s ease-in-out .2s, transform .15s ease-in-out;}
.adminButtons a:nth-child(4) {background-color: #4CAF50; transition: opacity .2s ease-in-out .15s, transform .15s ease-in-out;}

.adminActions a i {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

.adminToggle {
  -webkit-appearance: none;
  position: absolute;
  border-radius: 50%;
  top: 0; left: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  background-color: transparent;
  border: none;
  outline: none;
  z-index: 2;
  transition: box-shadow .2s ease-in-out;
  box-shadow: 0 3px 5px 1px rgba(51, 51, 51, .3);
}

.adminToggle:hover {
  box-shadow: 0 3px 6px 2px rgba(51, 51, 51, .3);
}

.adminToggle:checked ~ .adminButtons a {
  opacity: 1;
  visibility: visible;
}
</style>

hola buen dia alguien me podría ayudar con un error que estoy teniendo les comento estoy haciendo una tienda virtual con el framework Laravel ya se agrega al carrito de compra y con la cual estoy utilizando una api de paypal para para que se pueda simular una compra real pero el problema esta en que yo cree una base de datos con varias tablas pero una en especifica que se llama “compra” con la cual se creo con migrate en esa tabla se tiene almacenar los datos de la pero no entiendo el porque no se esta almacenando los detalles de dicha compra.

este archivo se llama pago.blade.php

type here
    {{--  --}}

    <script>
        paypal.Buttons({
            style:{
                color: 'blue',
                shape: 'pill',
                label: 'pay'
            },

            createOrder: function(data,actions){
                return actions.order.create({
                    purchase_units:[{
                        amount:{
                            value: '{{ $total }}'
                        }
                    }]
                });
            },

            onApprove: function(data, actions) {


        return  actions.order.capture().then(function(detalles) {
            // console.log(detalles);
            let url = '{{ route('carrito.captura') }}';

            let formData = new FormData();
            formData.append('_token', '{{ csrf_token() }}');
            formData.append('detalles', JSON.stringify(detalles));

            return fetch(url, {
                method: 'POST',
                body: formData
            });
        });
    },



            onCancel: function(data){
                alert("pago cancelado")
            }

        }).render('#paypal-button-container');
    </script>

el siguente archivo es mi archivo CarritoController

    
     public function captura(Request $request)
{
    $json = $request->getContent();
    $datos = json_decode($json, true);

    echo '<pre>';
    print_r($datos);
    echo '</pre>';

    if (is_array($datos)) {
        $detalles = $datos['detalles'];
        $id_transaccion = $detalles['id'];
        $total = $detalles['purchase_units'][0]['amount']['value'];
        $status = $detalles['status'];
        $fecha = $detalles['update_time'];
        $fecha_nueva = date('Y-m-d H:i:s', strtotime($fecha));
        $email = $detalles['payer']['email_address'];
        $id_cliente = $detalles['payer']['payer_id'];

        DB::table('compra')->insert([
            'id_transaccion' => $id_transaccion,
            'fecha' => $fecha_nueva,
            'status' => $status,
            'email' => $email,
            'id_cliente' => $id_cliente,
            'total' => $total
        ]);

        $id = DB::getPdo()->lastInsertId();

        return response()->json(['success' => true, 'id' => $id]);
    }

    return response()->json(['success' => false]);
}

y esta es mis rutas

Route::post('/captura', [CarritoController::class, 'captura'])->name('carrito.captura');

este es mi archivo compra.php con la esta el nombre de las columnas de mi tabla compra

class Compra extends Model
{
    use HasFactory;
    protected $table = 'compra';

    protected $fillable = [
        'id_transaccion',
        'fecha',
        'status',
        'email',
        'id_cliente',
        'total'
    ];

enter image description here

My code doesn’t redirect to my other html file and I have no Idea why. The login function works fine but it just doesn’t redirect for some reason.

function login(){
    let username = document.getElementById("user").value;
    let password = document.getElementById("password").value;
    if (checkUser(username,password)){
      window.location.assign("Student.html");
    }
    else if (username =="Admin" && password == 7800){
      location.assign('Librarian.html');
    }
    else {
        alert("Incorrect Username/Password or Not Registered");
    }
}

   <div class="Log">
        <div class="login">
            <form class="needs-validation">
                <h1 class="text-center pt-3"> Log in Form</h1>
                <hr />
                <div class="form-group was-validated">
                    <label class="form-label" for="user">Username</label>
                    <input class="form-control" type="text" id="user" />
                    <div class="invalid-feedback">
                        Invalid Username
                    </div>
                </div>
                <div class="form-group was-validated">
                    <label class="form-label" for="password">Password</label>
                    <input class="form-control" type="password" id="password" />
                    <div class="invalid-feedback">
                        Invalid Password
                    </div>
                    </div>
                    <div class="form-group">
                        <input class="form-check-input" type="checkbox" id="checkRemember" />
                        <label class="form-check-label" for="check">Remember me</label>
                    </div>
                    <button class="btn btn-success w-100 mb-3" id="btn_Log" onclick="login()">Log In</button>
                    <div class="login-register">
                        <p>Don't have an account? <a href="Register.html" class="register-link">Register</a></p>
                    </div>
            </form>
        </div>
    </div>
    <script src="logreg.js"></script>

I have try the different ways to redirect and none of them worked. I don’t know what to do.

I’m facing this issue were i have text Appearing on the my php website but its not in the HTML

here is the code

    <div class="row">
        <div class="col">
            <?php echo "<h4>Menu - ".$viewData['jobnumber']."</h4>"; ?>
        </div>
        <div class="col text-right">
            <a href="dashboard.php?cat=website-content&subcat=home-content" class="btn btn-secondary content-link">Back</a>
        </div>
    </div>
    <br>
    <div class="row">
        <div class="col">
    <div class="table-responsive">
        <h1><?php echo $revison; ?></h1>
        <h2><?php echo $groupp; ?></h2>
        <p><?php echo $checker; ?></p>
        <p><?php echo $designer; ?></p>
        <p><?php echo $releasedate; ?></p>
    </div>
</div>
</div>
    <!-----==================table content end===================-->
    <?php
}

else{?>

    <!-----=================table content start=================-->
    <br>
    
    <div class="row">
        <div class="col">
            <h4>Current Jobs </h4>
        </div>
        <div class="col text-right">
            <?php if($roleData['role'] == 'admin'){ ?>  
            <a href="dashboard.php?cat=website-content&subcat=add-home-content" class="btn btn-secondary content-link">Add New </a> <?php } ?>
        </div>
    </div>
    <br>
    <div class="row">
        <div class="col">
    <div class="table-responsive"> 
        <table class="table">
            <tr>
            <?php if($roleData['role'] == 'admin' || $roleData['role'] == 'checker' || $roleData['role'] == 'designer' ){ ?>  
                <th>id</th>
                <th>Job Number</th>
                <th>Revison</th>
                <?php } ?>

                <?php if($roleData['role'] == 'admin'){ ?> 
                <th>Group</th>
                <th>Checker</th>
                <?php } ?>

                <?php if($roleData['role'] == 'admin' || $roleData['role'] == 'checker' ){ ?>  
                <th>Designer</th>
                <?php } ?>

                <?php if($roleData['role'] == 'admin' || $roleData['role'] == 'designer' ){ ?> 
                <th>Release Date</th>
                <?php } ?>

                <?php if($roleData['role'] == 'admin' || $roleData['role'] == 'checker' || $roleData['role'] == 'designer' ){ ?>  
                <th>View</th>
                <th>Edit</th>
                <?php } ?>

                
                <?php if($roleData['role'] == 'admin'){ ?> 
                <th>Delete</th
                <?php } ?>>

            </tr>
                        <?php
  $sql1="SELECT * FROM current_job ORDER BY id DESC";
  $res1= $conn->query($sql1);
  if($res1->num_rows>0)
  {$i=1;
   while($data=$res1->fetch_assoc()){
    ?>
    <tr>
       <?php if($roleData['role'] == 'admin' || $roleData['role'] == 'checker' || $roleData['role'] == 'designer' ){ ?>  
        <td><?php echo $i; ?></td>
        <td><?php echo $data['jobnumber']; ?></td>
        <td><?php echo $data['revison']; ?></td>

           <?php } ?>


           <?php if($roleData['role'] == 'admin'){ ?> 
           <td><?php echo $data['groupp']; ?></td>
           <td><?php echo $data['checker']; ?></td>

           <?php } ?>


           <?php if($roleData['role'] == 'admin' || $roleData['role'] == 'checker' ){ ?>  
           <td><?php echo $data['designer']; ?></td>

           <?php } ?>

           <?php if($roleData['role'] == 'admin' || $roleData['role'] == 'designer' ){ ?> 
           <td><?php echo $data['releasedate']; ?></td>
           <?php } ?>

           <?php if($roleData['role'] == 'admin' || $roleData['role'] == 'checker' || $roleData['role'] == 'designer' ){ ?>  
        <td><a  href="dashboard.php?cat=website-content&subcat=home-content&view=<?php echo $data['id']; ?>" class="text-secondary content-link"><i class='far fa-eye'></i></a></td>
        <td><a href="dashboard.php?cat=website-content&subcat=add-home-content&edit=<?php echo $data['id']; ?>" class="text-success content-link"><i class=' far fa-edit'></i></a></td>

        <?php } ?>

        <?php if($roleData['role'] == 'admin'){ ?> 
        <td><a href="javascript:void(0)" class="text-danger delete"  name="current_job" id="<?php echo $data['id']; ?>"><i class='far fa-trash-alt'></i></a></td>
        <?php } ?>>

    </tr>
    <?php
   $i++;}
}else{

?>

<?php } ?>
        </table>
    </div>
</div>
</div>
    <!-----==================table content end===================-->
<?php } ?>

</div>

enter image description here

as you can see in the image i have this ” > > > > “

and i cant find it anywhere in the code

i tried to go and check every line of the code but i couldn’t really get it

So I make a new window using the open method and later call a setTimeout method to close it after 5 seconds but for some reason it doesnt close. I have tried to replicate this bug in another file like this: let win = window.open(”); setTimeout(function() {win.close()}, 5000); and it works just as intended( closes after 5 seconds). But in here it doesnt and when I’ve put some break points it just skips it and the program ends.

            //Global variables
            const button = document.getElementById("btn");
            //Input-Fields
            const nameInput = document.getElementById("input-name");
            const phoneNumber = document.getElementById("input-phoneNum");
            const adress = document.getElementById("input-adress");
            //Variable
            let confWindow;

            function processInput()
            {
                //if statement checks if all fields contain something
                //or true, if not they are falsy
                if(nameInput.value && phoneNumber.value && adress.value)
                {
                    //New Window size and centering
                    let winWidth = 300;
                    let winHeight = 300;
                    let leftPosition = ((screen.width - winWidth)/2);
                    let topPosition = ((screen.height - winHeight)/2);

                    //String that contains onptions for the new Window
                    let options = "width =" + winWidth + ",height=" 
                                + winHeight + ", left =" + leftPosition
                                + ", top =" + topPosition;
                    //creates a new window
                    confWindow = window.open("confirm.htm", "Confirm Page", options);
                    confWindow.document.write("<p>Hi</p>");
                    setTimeout(function(){confWindow.close()}, 5000);
                }
                else{
                    window.alert("Please Enter Information in all fields");
                }
            }



            //Event Listeners
            if(button.addEventListener)
            {  
                button.addEventListener("click", processInput, false);
                
            }
            else if(button.attachEvent)
            {
                button.attachEvent("onclick", processInput); 
            }

Consider the following code:

class Node {
  constructor(data = null, parent = null) {
    this.data = data;
    this.parent = parent;
    this.children = [];
  }

  appendChild(data) {
    this.children.push(new Node(data, this.root));
    return this.root;
  }

  toString() {
    return this.data;
  }
}

class NTree {
  constructor(data) {
    this.root = null;
  }

  addRoot(data) {
    this.root = new Node(data);
  }

  find(data) {
    if (this.root.data === data) {
      return this.root;
    }
  }

  appendChild(data) {
    this.root.appendChild(data);
  }

  toString() {
    console.log(this.root);
  }
}

const t = new NTree();
t.addRoot(1);
t.appendChild(2);
t.appendChild(3);
t.appendChild(4);

console.log(t);

The outputs looks as follows:

NTree {
  root: Node { data: 1, parent: null, children: [ [Node], [Node], [Node] ] }
}

How can I convert the above output to this:

NTree {
  root: Node { data: 1, parent: null, children: [ 2, 3, 4 ] }
}

The following is an example of a JSON file that contains a key value pair with a URL under "next_page_url": "https://www.example.com/example.json", which indicates the next JSON file in my XMLHttpRequest GET request. The GET request could contain hundreds of pages.

{
  "count": 135,
  "description": "Documents published from 01/01/2020 to 01/01/2050 and from Surface Mining Reclamation and Enforcement Office",
  "total_pages": 7,
  "next_page_url": "https://www.example.com/example.json",
  "results": [
    {
      "title": "Agency Information Collection Activities; Revisions; Renewal; and Transfer, Assignment, or Sale of Permit Rights",
      "type": "Notice",
      "abstract": "In accordance with the Paperwork Reduction Act of 1995, we, the Office of Surface Mining Reclamation and Enforcement (OSMRE), are proposing to renew an information collection.",
      "document_number": "2023-09869",
      "html_url": "https://www.federalregister.gov/documents/2023/05/09/2023-09869/agency-information-collection-activities-revisions-renewal-and-transfer-assignment-or-sale-of-permit",
      "pdf_url": "https://www.govinfo.gov/content/pkg/FR-2023-05-09/pdf/2023-09869.pdf",
      "public_inspection_pdf_url": "https://public-inspection.federalregister.gov/2023-09869.pdf?1683549934",
      "publication_date": "2023-05-09",
      "agencies": [
        {
          "raw_name": "DEPARTMENT OF THE INTERIOR",
          "name": "Interior Department",
          "id": 253,
          "url": "https://www.federalregister.gov/agencies/interior-department",
          "json_url": "https://www.federalregister.gov/api/v1/agencies/253",
          "parent_id": null,
          "slug": "interior-department"
        },
        {
          "raw_name": "Office of Surface Mining Reclamation and Enforcement",
          "name": "Surface Mining Reclamation and Enforcement Office",
          "id": 480,
          "url": "https://www.federalregister.gov/agencies/surface-mining-reclamation-and-enforcement-office",
          "json_url": "https://www.federalregister.gov/api/v1/agencies/480",
          "parent_id": 253,
          "slug": "surface-mining-reclamation-and-enforcement-office"
        }
      ]
   ]
}

I have the following script, html, and CSS to request and display the JSON data as desired.

    function loadBLM() {
        const xmlhttp = new XMLHttpRequest();
        xmlhttp.onload = function () {
            const myArr = JSON.parse(this.responseText);

            let text = "<button type='button' class='btn btn-primary' data-toggle='collapse' data-target='#collapse'>Info</button>";
            for (let i in myArr.results) {
                let agencies = myArr.results[i].agencies.map((a) => a.raw_name).join(" - ");
                text +=
                    "<div class='fed-reg-container'><h2 class='title'>" +
                    myArr.results[i].title +
                    "</h2><p>" +
                    myArr.results[i].type +
                    "</p><p>" +
                    agencies +
                    "</p><p>Document # " +
                    myArr.results[i].document_number +
                    "</p><p>Posted on: " +
                    myArr.results[i].publication_date +
                    "</p><p>" +
                    myArr.results[i].abstract +
                    "</p><a class='fed-reg-button' href='" +
                    myArr.results[i].html_url +
                    "'>Read More</a></div>";
            }
            text += "<div class='pages'><button class='btn btn-info' onclick='loadNextPage()'>Next Page</button></div>";
            document.getElementById("demo").innerHTML = text;
            document.getElementById("data-info").innerHTML = myArr.count + " " + myArr.description;
        };
        xmlhttp.open(
            "GET",
            "https://www.federalregister.gov/api/v1/documents.json?conditions%5Bagencies%5D%5B%5D=land-management-bureau&conditions%5Bpublication_date%5D%5Byear%5D=2023",
            true
        );
        xmlhttp.send();
    }

.fed-reg-container {
        background-color: black;
        color: white;
        padding: 20px;
        margin: 20px 0;
    }
    .title {
        color: #fcb900;
    }

    .fed-reg-button {
        background-color: #fcb900;
        color: black;
        padding: 10px;
        display: block;
        max-width: 100px;
        text-align: center;
        font-weight: 600;
        text-decoration: none;
    }

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>

<button class="btn btn-info" type="button" onclick="loadBLM()">Bureau of Land Management</button>
<br><br>


<div class="container">

  <div id="collapse" class="collapse">
  <h2>About this resource</h2>
  <p id='data-info'></p>

  </div>
</div>

<div id="demo"></div>

How can I send another XMLHttpRequest using the URL returned in the "next_page_url": "https://www.example.com/example.json", when the <button class='btn btn-info' onclick='loadNextPage()'>Next Page</button> is clicked? It should repeat the original request using the URL in "nextpage_url".

I have tried adding another function to make another XMLHttpRequest and it does not work. Would a nested function be the proper way?

Thank you!

Does anyone know how to play sound/audio through eclipse RWT application? RWT application is viewed through a browser and I want play the sound on the browser. I can play sound using Javascript, but this is outside RWT application. I could not find any API to play sound either. So, what is the solution? Thanks.
JM

I could not find any method to play the sound through RWT so it plays through the web browser. I can play sound on the server, but that is not what I want.

I am working on a web application which requires pulling information from an X509 Client Certificate (DOD CAC / Smart Card) Header. Of interest is the Name and ID number, to be used in javascript for auto-populating fields.

The stack I am working with is a docker containerized static HTML/CSS/Javascript project running on an NGINX server.

I am new to server configuration, but I generally understand that querying for a client certificate is handled at the NGINX server configuration level, but my question is how would I ingest that information into the web app for use?

I’m trying to get an expandable button to fit into a grid using HTML and CSS but they will not fit properly. I am still fairly new to HTML and CSS so I’m not sure exactly what I am doing wrong. I have a button style I like but I can not for the life of me get them to fit neatly into a grid.

[tying to get rid of the spaces between the buttons][1]

    <style>
    .grid-container {
        display: grid;
        grid-template: auto / auto auto auto auto;
        background-color: gray;
        padding: 10px;
    }
    
    .collapsible {
        background-color: #f1f1f1;
        gap: 15px
        cursor: pointer;
        padding: 18px;
        Border-radius: 15px;
        border: none;
        text-align: left;
        outline: none;
        font-size: 15px;
    }

    .active, .collapsible:hover {
        background-color: #555;
    }

    .collapsible:after {
        content: '02B';
        font-weight: bold;
        float: right;
        margin-left: 5px;
    }

    .active:after {
        content: "2212";
    }

    .content {
        padding: 0 18px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
        background-color: #f1f1f1;
        border-radius: 15px;    
    }
    </style> 

    <div class= "grid-container">
    <button class="collapsible">Open Collapsible</button>
        <div class="content">
            <p> Test </p>
        </div>
    <button class="collapsible">Open Collapsible</button>
        <div class="content">
            <p> Test </p>
        </div> 
    </div>

    <script>
    var coll = document.getElementsByClassName("collapsible");
    var i;

   for (i = 0; i < coll.length; i++) {
       coll[i].addEventListener("click", function() {
       this.classList.toggle("active");
       var content = this.nextElementSibling;
       if (content.style.maxHeight){
           content.style.maxHeight = null;
       } else {
           content.style.maxHeight = content.scrollHeight + "px";
           } 
       });
    }
    </script>


  [1]: https://i.stack.imgur.com/djtYl.png

I’m using CapacitorJS, I got two pages of which only one of those is included when “npm run build” is entered into CLI which makes my javascript redirect invalid.

I got two html files “index.html” which is the landing page of the app & “sigin.html” for signin. When I try to use javascript to redirect, on button click nothing happens. But i’ve noticed that when “npm run build” is entered in the CLI “signin.html” isn’t created in my “dist”-folder. Which is.. why I can’t redirect as the file dosen’t exist. I know this because the it’s working if I change “signin.html” to “index.html” and also there is no “signin.html” inside the “dist”-folder.

So my question now is, how can i make the build include “signin.html” & “signin.js” when i run “npm run build”?

document.addEventListener('DOMContentLoaded', function() {
  var button = document.querySelector('.agree_terms_of_use_btn');

  button.addEventListener('click', function() {
    alert("fok");
    var newURL = "signin.html";
    window.location.href = newURL;
  });
});```

I want to override the default pointElement by extending it to my customPointElement but the code is never called for my custom point. I’m not sure how to register it, or if what I’m doing is even correct. It just uses the default draw logic. It never calls the customPointElement

class CustomPointElement extends Chart.elements.PointElement {
    draw(ctx, area) {
        console.log("custom draw")
        super.draw(ctx, area);
        // custom drawing logic here
    }
}

Chart.register({
    id: 'customPointElement',
    element: CustomPointElement,
});

const ctx = document.getElementById('myChart');

// create a new line chart in chartJS
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            borderWidth: 1,
            pointRadius: 10,
        }]
    },
})

The table table is being rendered by django admin. I will not know the amount of columns, column names or row contents. What I will know is the table id result_list.

The issue is users want tables that can sometimes have 10+ columns. I want to provide a better user experience by either allowing users to select which columns to hide/show after the table has been rendered. My thoughts where to use Datatables but having a hard time finding the correct config.

Because this code snippet will be used by the default template, the code must be agnostic to the data inside the table.

Here is a snippet that I have:

$('#result_list').dataTable({
// initializers here
});

Typical generated table looks like:

<table id="result_list">
  <thead>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
  </tbody>
</table>

I’m using the PowerAudio audio visualizer (https://7ph.github.io/poweraudio/)

How do I change the audio source once it’s initialized with:

this.myVisualizer = new PowerAudio.Viz({
                    container: '#visualization',
                    source: this.snd,
                });

Setting this.myVisualizer.source = newSource doesn’t work (the visualization goes empty), and re-creating a new PowerAudio.Viz() each time makes the vizualization jitter after a few goes (so it mustn’t be releasing some resources or something)