Category: javascript

I’m using SendBird Javascript SDK createMyGroupChannelListQuery() and the instance’s next() method to retrieve the list of group channels. However, it will return the list only one time after initialized the instance, the next time it gets called, it result is always an empty array. Since I need to fetch the channels multiple times I need to have the full list of channels always. Please let me know if you have experienced this.

// Retrieve a list of channels
var listQuery = sb.GroupChannel.createMyGroupChannelListQuery();
listQuery.includeEmpty = true;
listQuery.order = 'latest_last_message'; 
listQuery.limit = 100;   // The value of pagination limit could be set up to 100.

if (listQuery.hasNext) {
    listQuery.next(function(groupChannels, error) {
        if (error) {
            // Handle error.
        }

        // A list of group channels is successfully retrieved.
        groupChannels.forEach(channel => {
            ...
        });

        ...
    });
}

I have used

let copy = true;
export const textPaste = () => copy;

function myFunction() {
  
  navigator.clipboard.writeText(copyText.value);

  alert("Copied the text: " + copyText.value);
}

document.querySelector('#textBtn').addEventListener('click', myFunction);

to copy text from a text area to clipboard
But when I try to paste it onto my canvas the canvas doesn’t respond.

for pasting I used:

/* eslint-disable no-undef */
import { textPaste } from "./textHelper.js";

function textInput() {
  this.icon = "./assets/textInput.png";
  this.name = "textInput";

  let drawing = false;
  let startMouseX = -1;
  let startMouseY = -1;

  this.draw = function () {
    if (mouseIsPressed) {
      if (startMouseX === -1) {
        startMouseX = mouseX;
        startMouseY = mouseY;
        drawing = true;
        // save the current pixel Array
        loadPixels();

        if (mouseIsPressed) {
          document.getElementById("myInput").value;
          async function paste(input) {
            const text = await navigator.clipboard.read();
            input.value = text;
          }
        }
      }
    } else if (drawing) {
      // save the pixels with the most recent rectangle and reset the
      // drawing tool and start locations
      const copy = textPaste();
      set(startMouseX, startMouseY, copy);

      loadPixels();
      drawing = false;
      startMouseX = -1;
      startMouseY = -1;
    }
  };
}

export default textInput;

I want to retrieve the variable x from the function, but this code does not work
who has an idea

thank you

function myFunction(){
  var x = document.getElementById("nom").value;
  //document.getElementById("demo").innerHTML =x ;

 return x;
}

response = myFunction();

document.getElementById("deux").innerHTML =response ;

I’m confused by the ordering of event listeners in Javascript. If I have a form with a submit button and I’d like to alert a user instead of automatically submitting the form, but only when the submit using the Enter key, I can create an event listener for an Enter keypress, event.preventDefault(), etc.

Why is it that the default onsubmit event listener for the form is not triggered first?

I got this div-table populated dynamically, but I can’t find a way to add a header to it, given the way this is being built.

HTML piece:

<div class="block div-table" id="sidebar-record-block"></div>

This is the script populating the table dynamically:

function showRecord(record) {
    if (record.length) {
      for (var i = 0; i < record.length; i++) {
        // build field name on the fly, formatted field-1234
        var str = '' + i;
        var fieldId = 'field-' + ('0000' + str).substring(str.length)

        // If this field # doesn't already exist on the page, create it
        if (!$('#'+fieldId).length) {
          var newField = $($.parseHTML('<div id="'+fieldId+'"></div>'));
          $('#sidebar-record-block').append(newField);
        }

        // Replace content of the field div with new record
        $('#'+fieldId).replaceWith('<div id="'+fieldId+'" class="div-table-row"></div>');
        $('#'+fieldId).append('<input id=checkBox type="checkbox"</input>')
                      .append($('<div class="div-table-th">' + record[i].heading + '</div>'))
                      .append('<div class="div-table-td">' + record[i].cellval + '</div>')             
      }  
    }

Appreciate your help!

I work with a website that has a rich text box which gives direct access to the underlying HTML code. I can edit the HTML code, but when I save it, the website intervenes. <style> elements disappear, but <div> and <span> elements remain and seem to keep all their attributes.

I would like a certain <span> element to show a tooltip when hovered over. I’ve considered using the title attribute (it works), but it’s not flexible enough for my need.

Is it possible (and how) to implement a tooltip like shown here without a <style> element, using only attributes of <div> and <span> elements? I was thinking of attributes such as style, onmouseover, and onmouseout, but feel free to suggest other ones as you see fit.

I have been on this for a full day and I just cannot find an answer to it.

Imagine a form with an upload file input field. Next to it there is also a button called “select template”. The user can either upload his own image or select an image from a given template.

Here is the problem, I am unable to send the selected image to the input field(so I can process it in my axios post later on).

This is the table where all the template files are showing up:

<table class="table table-borderless table-hover">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="item in image_gallery">
<td class="align-middle">{{ item.id }}</td>
<td class="align-middle">{{ item.title }}</td>
<td><img :src="'/storage/images/' + item_image" class="img-thumbnail" alt="" style="width: 75px;" @click="selectImage(item.id, $event)">
</td>
</tr>
</tbody>
</table>

When the user clicks on the above image, I would like the file to be set to this input field(which is the same input where the user can upload his own file).

<label class="btn btn-info btn-block btn-sm">
<i class="fas fa-upload text-white"></i>
<input
type="file"
id="file"
@change="onFileAttached(1)"
ref="file"
accept="image/png, image/jpeg"
hidden/>
</label>

I tried this:

selectImage(id, event){

this.$refs.files[0].src = event.files[0].src;
//or
this.$refs.files[0].src = event.target.src;
}

But no luck…..I am not understanding what I am missing 🙁

Is there a way to manually take a URL from a given image to set this image to an input field?

Thanks in advance for guiding me a bit.

I created table with a double loop.
For every cell i put 3 radios and a button that should uncheck the radios.
I can’t do that because the functions inside the loop can’t identify the correct radio (that has id based on 2 vars: ‘NP’+medici[cas]+colonne[col]).
If I put the function outside the loop:

• if I put the function after the loop I get “function not declared” error
• if I put the function before the loop I get “Cannot set properties of null (setting ‘checked’)”

This is the function

for(let cas=0; cas<6; cas++){
        
[...]
    for  (var col=1; col<6; col++){
[...]
var radioboxNM = document.createElement('input');
  radioboxNM.type = 'radio';
  radioboxNM.id = 'NM'+medici[cas]+colonne[col];
  radioboxNM.value = 'NM'+medici[cas]+colonne[col];
  radioboxNM.name = 'radio'+medici[cas]+colonne[col];
  var label = document.createElement('label')
  label.htmlFor = 'NM';
  var description = document.createTextNode('NM');
  label.appendChild(description);
    const newline = document.createElement('br');
 tbodyTdAss.appendChild(radioboxNM);
 tbodyTdAss.appendChild(label);
 
  //crea radio NP
          var radioboxNP = document.createElement('input');
                radioboxNP.type = 'radio';
                radioboxNP.id = 'NP'+medici[cas]+colonne[col];
                radioboxNP.value = 'NP'+medici[cas]+colonne[col];
          radioboxNP.name = 'radio'+medici[cas]+colonne[col];
                var label = document.createElement('label');
                label.htmlFor = 'NP';
                    var description = document.createTextNode('NP');
      label.appendChild(description);  
        tbodyTdAss.appendChild(radioboxNP);
      tbodyTdAss.appendChild(label);
            tbodyTdAss.appendChild(newline);
//Crea radio assente
          var radioboxAss = document.createElement('input');
                radioboxAss.type = 'radio';
                radioboxAss.id = 'Ass'+medici[cas]+colonne[col];
                radioboxAss.value = 'Ass'+medici[cas]+colonne[col];
          radioboxAss.name = 'radio'+medici[cas]+colonne[col];
                var label = document.createElement('label');
                label.htmlFor = 'Ass';
                    var description = document.createTextNode('Ass');
      label.appendChild(description);  
        tbodyTdAss.appendChild(radioboxAss);
      tbodyTdAss.appendChild(label);
// crea bottone reset
buttonX[cas][col] = document.createElement('button');
buttonX[cas][col].innerText = 'Canc';
buttonX[cas][col].id = 'buttonX'+medici[cas]+colonne[col];
buttonX[cas][col].setAttribute("onClick", cancellaRadio(cas,col));
[...]

This is the function:

cancellaRadio = function (cas,col) {
    document.getElementById('NM'+medici[cas]+colonne[col]).checked = false;
  document.getElementById('NP'+medici[cas]+colonne[col]).checked = false;
  document.getElementById('Ass'+medici[cas]+colonne[col]).checked = false;
         }; 

Any ideas?

I’ve been learning ThreeJs and boy did I get stuck trying to call my files.

Let me start by explaining what I wanted to do!
i have 3 models to display on a page, as people scroll a different emoji should be displayed, like small sections, classic webapge way.

I imported these models from blender in one gltb file to improve performance, and theorically, save time, two of the objects are groups and the other is a mesh. There’s nothing else in the import.

However after using gltf loader to load my models I can’t find a way to access them to accomodate them in the positions and rotations I want them to be at. Please help.

I loaded my scene:

gltfLoader.load(
'EMOJIS.gltf',
(gltf) =>
{
    gltf.scene.scale.set(0.25, 0.25, 0.25)
    gltf.scene.position.set(0, 0, 0)

    mixer = new THREE.AnimationMixer(gltf.scene)
    scene.add(gltf.scene)
}

After that I checked my log to reach for the objects

console.log(scene)
console.log(scene.children)
console.log(scene.children[3])

The first and second log show as follows:

I realized that I should reach the children of the scene’s children to get my 3 emojis: heart, peach, heartEyes.
I thought I could just call scene.children[3].children[0] for example. and call the heart object emoji
But I cant call them? I have tried many ways but it always shows as undefined.

console.log(scene.children) shows an array from 0 to 3, in the [3] slot I can see the emoji elements I want, but calling console.log(scene.children[3]) shows undefined, how can I access the group I want?

Calling

var heart = scene.getObjectByName( "heart", true );

or calling by their ID (which are 16, 15 and 23) shows undefined as well.

All help is very much appreciated.

I’m trying to make a simple web socket for my application, but I have problems with the find method.

const io = require('socket.io')(3002, { cors: { origin: 'http://localhost:3000' } })
const api = require('axios').create({ baseURL: 'http://localhost:3001/api', timeout: '5000' })

let users = []

async function verify(user, usePassword){
    let verified

    await api.get(`/users/get?username=${user.username}`)
    .then(() => verified = true)
    .catch(() => verified = false)

    if(usePassword){
        await api.post('/users/login', { data: { username: user.username, password: user.password } })
        .then(() => verified = true)
        .catch(() => verified = false)
    }
}

io.on('connection', (socket) => {
    socket.on('statusOnline', async (user) => {
        if(!user || !user.username || !user.password) return io.to(socket.id).emit('error', 'Invalid user object')
        const isVerified = verify(user, true)
        if(!isVerified) return io.to(socket.id).emit('error', 'Problem with verifying you')

        users.push({ username: user.username, password: user.password, socketId: socket.id })
        console.log(users)
    })

    socket.on('messageSend', async (user, conversationId) => {
        if(!user || !user.username || !user.password) return io.to(socket.id).emit('error', 'Invalid user object')
        if(!conversationId) return io.to(socket.id).emit('error', 'No conversation id provided')
        if(conversationId.length < 12) return io.to(socket.id).emit('error', 'ConversationId must be longer then 12 characters.')
    
        const isVerified = verify(user, true)
        if(!isVerified) return io.to(socket.id).emit('error', 'Problem with verifying you')
    
        const conversation = await api.get(`/conversations/get?conversationId=${conversationId}`)
        if(!conversation?.data?.members?.find((m) => m == user.username)) return socket.to(socket.id).emit('error', 'You are not in that conversation.')
    
        const recieverUsername = conversation.data.members.find((m) => m.username != user.username)
        const reciever = users.find((u) => u.username == recieverUsername)
        if(!reciever) return
    
        io.to(reciever.socketId).emit('messageRecieve', conversation.data._id)
    })

    socket.on('disconnect', () => {
        const user = users.find((u) => u.socketId == socket.id)
        console.log('Someone disconnected')
        users = users.filter((u) => u.socketId != socket.id)
    })
})

As you can see I have a messageSend event. The purpose of that event is to notify the reciever that he got new message.

The problem is:

Lets say that the User1 wanna send message to the User2. The User1 opens the app and sends the message. It works fine.
When the User2 wanna reply, it doesen’t.

I tryed logging the users, recieverUsername and reciever variables and discovered that the reciever is always the User1. When User2 sends the first message, reciever is always User2.

If someone know what is going on here, please help me.

I am making a javascript snake game for my computer science class. It is due on Friday and I need help. I need to create a reset button but I’m not sure how to. Can someone help? Code is posted below.

*This is the index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0px;
            padding: 0px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        canvas{
            box-shadow: black 20px 10px 50px;
        }
    </style>    
</head>

<body>
    <h1>Snake</h1>
    
    <canvas id="game" width="400" height="400"/>
    <script src="index.js"></script>
    
</body>
</html>


This is the index.js
const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");

class SnakePart {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}


let speed = 7;

let tileCount = 20;
let tileSize = canvas.width / tileCount - 2;

let headX = 10;
let headY = 10;
const snakeParts = [];
let tailLength = 2;

let appleX = 5;
let appleY = 5;

let inputsXVelocity = 0;
let inputsYVelocity = 0;

let xVelocity = 0;
let yVelocity = 0;

let score = 0;

const gulpSound = new Audio("gulp.mp3");

function drawGame() {
  xVelocity = inputsXVelocity;
  yVelocity = inputsYVelocity;

  changeSnakePosition();
  let result = isGameOver();
  if (result) {
    return;
  }

  clearScreen();

  checkAppleCollision();
  drawApple();
  drawSnake();

  drawScore();

  if (score > 5) {
    speed = 9;
  }
  if (score > 10) {
    speed = 11;
  }

  setTimeout(drawGame, 1000 / speed);
}

function isGameOver() {
  let gameOver = false;

  if (yVelocity === 0 && xVelocity === 0) {
    return false;
  }

  if (headX < 0) {
    gameOver = true;
  } else if (headX === tileCount) {
    gameOver = true;
  } else if (headY < 0) {
    gameOver = true;
  } else if (headY === tileCount) {
    gameOver = true;
  }

  for (let i = 0; i < snakeParts.length; i++) {
    let part = snakeParts[i];
    if (part.x === headX && part.y === headY) {
      gameOver = true;
      break;
    }
  }

  if (gameOver) {
    ctx.fillStyle = "white";
    ctx.font = "50px Verdana";

    if (gameOver) {
      ctx.fillStyle = "white";
      ctx.font = "50px Verdana";

      var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
      gradient.addColorStop("0", " magenta");
      gradient.addColorStop("0.5", "blue");
      gradient.addColorStop("1.0", "red");
      ctx.fillStyle = gradient;

      ctx.fillText("Game Over!", canvas.width / 6.5, canvas.height / 2);
    }

    ctx.fillText("Game Over!", canvas.width / 6.5, canvas.height / 2);
  }

  return gameOver;
}

function drawScore() {
  ctx.fillStyle = "white";
  ctx.font = "10px Verdana";
  ctx.fillText("Score " + score, canvas.width - 50, 10);
}

function clearScreen() {
  ctx.fillStyle = "black";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
}

function drawSnake() {
  ctx.fillStyle = "green";
  for (let i = 0; i < snakeParts.length; i++) {
    let part = snakeParts[i];
    ctx.fillRect(part.x * tileCount, part.y * tileCount, tileSize, tileSize);
  }

  snakeParts.push(new SnakePart(headX, headY)); 
  while (snakeParts.length > tailLength) {
    snakeParts.shift(); 
  }

  ctx.fillStyle = "orange";
  ctx.fillRect(headX * tileCount, headY * tileCount, tileSize, tileSize);
}

function changeSnakePosition() {
  headX = headX + xVelocity;
  headY = headY + yVelocity;
}

function drawApple() {
  ctx.fillStyle = "red";
  ctx.fillRect(appleX * tileCount, appleY * tileCount, tileSize, tileSize);
}

function checkAppleCollision() {
  if (appleX === headX && appleY == headY) {
    appleX = Math.floor(Math.random() * tileCount);
    appleY = Math.floor(Math.random() * tileCount);
    tailLength++;
    score++;
    gulpSound.play();
  }
}



document.body.addEventListener("keydown", keyDown);

function keyDown(event) {

  if (event.keyCode == 38 || event.keyCode == 87) {
 
    if (inputsYVelocity == 1) return;
    inputsYVelocity = -1;
    inputsXVelocity = 0;
  }


  if (event.keyCode == 40 || event.keyCode == 83) {

    if (inputsYVelocity == -1) return;
    inputsYVelocity = 1;
    inputsXVelocity = 0;
  }


  if (event.keyCode == 37 || event.keyCode == 65) {

    if (inputsXVelocity == 1) return;
    inputsYVelocity = 0;
    inputsXVelocity = -1;
  }


  if (event.keyCode == 39 || event.keyCode == 68) {

    if (inputsXVelocity == -1) return;
    inputsYVelocity = 0;
    inputsXVelocity = 1;
  }
}

drawGame();

The game works otherwise, I just need a reset button! Can someone please reply with the right code and where to put it! Thanks so much.

I’m new to es6, using const and the overall implications that has on the scope of a function. Whenever this function is output, it always says it failed to add all items. Is there something glaringly obvious preventing the loaded const from equaling the total const?

const addContent = function() {
  const getTotal = function() {
    const total = Number("`3");
    return total;
  };
  let content = "<div><span>";
  const loaded = 3;
  const total = getTotal();
  for (let i = 0; i < loaded; i++) {
    content += "<h2>Test " + i + "</h2>";
  }
  const results = loaded == total ? "<h3>Added all of the items.</h3>" : "<h3>Failed to add all of the items.</h3>";
  content += results + "</span></div>";
  return content;
};

i’ve have application in the home page there shows some posts with a contact form, i want to create a modal formset in another view! is it possible please ?

@login_required
def addPopupVistor(request):
    formset = VistorFormSet(queryset=Vistor.objects.none(),prefix='formsetvisitor')
    if request.is_ajax() and request.method == 'POST':
        formset = VistorFormSet(request.POST,prefix='formsetvisitor')
        if formset.is_valid():
        for form in formset:
            obj = form.save(commit=False)
            if form.cleaned_data !={}:                    
                obj.admin = request.user
                obj.save()
                return JsonResponse({'success':True})
    else:
        return JsonResponse({'success':False,'error_msg':formset.errors})

return render(request,'main/home.html',{'formsetvisitor':formset})

    const addNewFormRow = document.getElementById('addPopUpButton')
    const totalNewPopUpForms = document.getElementById('id_formsetvisitor-TOTAL_FORMS')
    addNewFormRow.addEventListener('click',add_new_popuprow);

    function add_new_popuprow(e){            
    if(e){
        
        e.preventDefault();
    }  
    const currentFormPopUpClass = document.getElementsByClassName('popup_modal_formset')

    const countpopupForms = currentFormPopUpClass.length        

    const formCopyPopupTarget = document.getElementById('visitorform')

    const empty_form = document.getElementById('empty_popup_formset').cloneNode(true);        
    empty_form.setAttribute('class','relative p-2 bg-gray-900 bg-opacity-25 border border-gray-900 rounded-xl pb-14 popup_modal_formset')
    empty_form.setAttribute('id',`form-${countpopupForms}`)
    const rgx = new RegExp('__prefix__','g')
    empty_form.innerHTML = empty_form.innerHTML.replace(rgx,countpopupForms)

    totalNewPopUpForms.setAttribute('value',countpopupForms + 1)
    formCopyPopupTarget.append(empty_form)

    }

<button onclick="modal()" class="some css class">add new guest</button>

<div id="modal" class="w-full fixed top-0 md:overflow-y-scroll hidden flex flex-wrap p-1 h-screen justify-center items-center bg-black opacity-90" style="z-index: 99999;">
    <div class="w-full md:w-10/12 p-2 bg-white rounded-xl">
        <button id="addPopUpButton" class="px-4 py-1 pb-2 text-white focus:outline-none header rounded-xl">
            {% trans "add new form" %}
            <i class="fas fa-plus"></i>
        </button>
        <form method="POST" class="mt-2" id="addnewguests">{% csrf_token %}

            {{formsetvisitor.management_form}}
            
            <div id="visitorform" class="grid md:grid-cols-3 gap-16 md:gap-x-3 md:gap-y-8">
                {% for form in formsetvisitor.forms %}
                {{ form.pk }}    
                {{form}}
                <!-- first form -->
                <div class="relative p-2 bg-gray-900 bg-opacity-25 border border-gray-900 rounded-xl pb-14 popup_modal_formset">
                
    
                    <div class="relative groupinput bglightpurple rounded-xl">
                        <label class="absolute mt-1 mr-2 text-xs text-white top-1">full name</label>
                        {{form.full_name | add_class:'w-full pt-6 pb-1 pr-2 text-white bg-transparent focus:outline-none'}}

                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 md:gap-1">
                        <div class="relative mt-2 groupinput bglightpurple rounded-xl">
                            <label class="absolute mt-1 mr-2 text-xs text-white top-1">dob</label>
        
                            {{form.dob | add_class:'w-full pt-6 pb-1 pr-2 text-white bg-transparent focus:outline-none'}}
                            {% if form.dob.errors %}
                            <p class="w-full pb-2 pr-2 text-white rounded-xl" id="dob_error">{{form.dob.errors}}</p>
                            {% endif %}
                        </div>
                        <div class="relative mt-2 groupinput bglightpurple rounded-xl">
                                <label class="absolute mt-1 mr-2 text-xs text-white top-1">city </label>
                                {{form.city | add_class:'w-full pt-6 pb-1 pr-2 text-white bg-transparent focus:outline-none city'}}
                                {% if form.city.errors %}
                                <p class="pb-2 pr-2 text-white rounded-xl" id="city_error">{{form.city.errors}}</p>
                                {% endif %}
                        </div>
                    </div>
        
                    <div class="grid grid-cols-1 md:grid-cols-2 md:gap-1">
                        <div class="relative mt-2 groupinput bglightpurple rounded-xl">
                                <label class="absolute mt-1 mr-2 text-xs text-white top-1">nation</label>
                                {{form.nation | add_class:'w-full pt-6 pb-1 pr-2 text-white bg-transparent focus:outline-none'}}
                                {% if form.nation.errors %}
                                <p class="w-full pb-2 pr-2 text-white rounded-xl" id="nation_error">{{form.nation.errors}}</p>
                                {% endif %}
                        </div>
                        <div class="relative mt-2 groupinput bglightpurple rounded-xl">
                                <label class="absolute mt-1 mr-2 text-xs text-white top-1">gender </label>
                                {{form.gender | add_class:'w-full pt-6 pb-1 pr-2 text-white bg-transparent'}}
                                {% if form.gender.errors %}
                                <p class="w-full pb-2 pr-2 text-white rounded-xl" id="gender_error">{{form.gender.errors}}</p>
                                {% endif %}
                        </div>
                    </div>
                        <div class="relative mt-2 groupinput bglightpurple rounded-xl">
                                <label class="absolute mt-1 mr-2 text-xs text-white top-1">job </label>
                                {{form.job | add_class:'w-full pt-6 pb-1 pr-2 text-white bg-transparent focus:outline-none'}}
                                {% if form.job.errors %}
                                <p class="w-full pb-2 pr-2 text-white rounded-xl" id="job_error">{{form.job.errors}}</p>
                                {% endif %}
        
                        </div>
                </div>                    
                {% endfor %}
            </div>
            
                <div class="relative p-2 bg-gray-900 bg-opacity-25 border border-gray-900 rounded-xl pb-14 hidden" id="empty_popup_formset">                   
                    <div class="relative groupinput bglightpurple rounded-xl">
                        <label class="absolute mt-1 mr-2 text-xs text-white top-1">full name</label>
                        {{formsetvisitor.empty_form.full_name | add_class:'w-full pt-6 pb-1 pr-2 text-white bg-transparent focus:outline-none'}}
                        {% if formsetvisitor.empty_form.full_name.errors %}
                        <p class="w-full pb-2 pr-2 text-white rounded-xl" id="full_name_set_error" >{{formsetvisitor.empty_form.full_name.errors}}</p>
                        {% endif %}
                    
        
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 md:gap-1">
                        <div class="relative mt-2 groupinput bglightpurple rounded-xl">
                                <label class="absolute mt-1 mr-2 text-xs text-white top-1">dob</label>
                                {{formsetvisitor.empty_form.dob | add_class:'w-full pt-6 pb-1 pr-2 text-white bg-transparent focus:outline-none'}}
                                <p class="w-full pb-2 pr-2 text-white rounded-xl" id="dob_set_error">{{formsetvisitor.empty_form.dob.errors}}</p>
        
                        </div>
                        <div class="relative mt-2 groupinput bglightpurple rounded-xl">
                                <label class="absolute mt-1 mr-2 text-xs text-white top-1">city</label>
                                {{formsetvisitor.empty_form.city | add_class:'w-full pt-6 pb-1 pr-2 text-white bg-transparent focus:outline-none'}}
                                <p class="w-full pb-2 pr-2 text-white rounded-xl" id="city_set_error" >{{formsetvisitor.empty_form.city.errors}}</p>
        
                        </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 md:gap-1">
                        <div class="relative mt-2 groupinput bglightpurple rounded-xl">
                                <label class="absolute mt-1 mr-2 text-xs text-white top-1">nation</label>
                                {{formsetvisitor.empty_form.nation | add_class:'w-full pt-6 pb-1 pr-2 text-white bg-transparent focus:outline-none'}}
                                <p class="w-full pb-2 pr-2 text-white rounded-xl" id="nation_set_error" >{{formsetvisitor.empty_form.nation.errors}}</p>
        
                        </div>
                        <div class="relative mt-2 groupinput bglightpurple rounded-xl">
                                <label class="absolute mt-1 mr-2 text-xs text-white top-1">gender </label>
                                {{formsetvisitor.empty_form.gender | add_class:'w-full pt-6 pb-1 pr-2 text-white bg-transparent focus:outline-none'}}
                                <p class="w-full pb-2 pr-2 text-white rounded-xl" id="gender_set_error" >{{formsetvisitor.empty_form.gender.errors}}</p>
        
                        </div>
                    </div>
                        <div class="relative mt-2 groupinput bglightpurple rounded-xl">
                                <label class="absolute mt-1 mr-2 text-xs text-white top-1">job </label>
                                {{formsetvisitor.empty_form.job | add_class:'w-full pt-6 pb-1 pr-2 text-white bg-transparent focus:outline-none'}}
                                <p class="w-full pb-2 pr-2 text-white rounded-xl" id="job_set_error" >{{formsetvisitor.empty_form.job.errors}}</p>
        
                        </div>
        
                    </div>    
            <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse rtl">
                <input name="visitorformbtn" type="submit" class="some css class" value="{% trans "save" %}">
                    
                <button id="cancel" class="some css class">
                    {% trans "cancel" %}
                </button>
              </div>
    
        </form>
    
    </div>
</div>

but i dont have any idea how to call back it in the home page without make it in the home view ? and the form will go through ajax request to save the forms, but i dont know how to call the form inputs into the home template .
i appreciate any idea

I’m struggling with this because all search engine results are about find duplicates in array. And I want exactly the opposite.

I have an array of colors:

const colors = ["#fff", "#666", "#000"];

How do I simply duplicate or triplicate every one of its indexes?

x2: ["#fff", "#fff", "#666", "#666", "#000", "#000"];

x3: ["#fff", "#fff", "#fff", "#666", "#666", "#666", "#000", "#000", "#000"];

x…

I am using Electron Builder to build an Electron app. I would like the executable to have a product version that is different from the package.json version.

This is what the build instruction in package.json looks like:

"build": {
    "appId": "myAppId",
    "productName": "My App",
    "copyright": "Copyright (C) 2022 My Company",
    "artifactName": "My App.exe",
    "directories": {
        "output": "dist/My App"
    },
    "buildVersion": "1.0.0.1"
},

I thought that buildVersion would update the product version, but when I look at the details of the .exe file, the product version has remained the same as the version number in package.json (1.0.0):

How can I solve this?