Category: javascript

I would like to be able to focus on input field when certain keys are entered. The input I would like to focus on exists inside autocomplete-vue.
This is where I call it:

<autocomplete v-shortkey="['alt', 's']"
              @shortkey.native="theAction()"
              ref="autocompleteInput" 
></autocomplete>

theAction method which I would like to allow me to focus on the input, looks like this:

theAction () {
      this.$refs.autocompleteInput.$el.focus()
    }

this focus on the whole section which is not what I want. the input exists 2 divs inside the what theAction focuses on. For bettere perspective, this is what this.$refs.autocompleteInput.$el returns :

<div>
  <div data-position="below" class="autocomplete"> 
     <input role="combobox" class="autocomplete-input"> 
  </div>
</div>

Any ideas on how I can focus on the input with class autocomplete-input? any suggestion is helpful!

Getting ‘422 Unprocessable Entity’ trying to post a list of files to a FastAPI route.

Python:

@app.post("/upload-images/")
async def images(images: List[UploadFile] = File(...)):
    
    for image in images:
        print(image.filename)

Javascript:

    async function handleUpload() {
    if (files.length > 0) {
      const formData = new FormData();

      Array.from(files).forEach((f) => {
        formData.append("images[]", f);
      });

      console.log(formData.getAll("images[]")); //can see the images appended properly
      const imageUploadResponse = await axios
        .post("/upload-images/", formData, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then(function (response) {
          console.log(response);
        })
        .catch(function (error) {
          // toast.error("Woops. Image upload failed.");
        });
    }
  }

I’ve also tried just appending the array with no luck:

formData.append("images", files);

Can someone please let me know what I am doing wrong?

I want to access two HTML files classes at the same time. The first function takes the classes of index.html & the second function takes the class of cart.html but it is not getting the .cart-items class and gives me the else-statement.

I don’t want to use getElementByClassName() in the second function because it gives me nodes. Instead, I want to get the original HTML text using querySelector() so that I could use it to add the items in cart.html

function addToCartClicked(event) {
    var Title, Price, Image
    var button = event.target
    var shopItem = button.parentElement.parentElement.parentElement.parentElement
    var title = shopItem.getElementsByClassName("name-of-product")[0].innerText
    var price = shopItem.getElementsByClassName('product-price')[0].innerText
    var image = shopItem.getElementsByClassName("hover-img")[0].src

    let itemsList = {
        Title: title,
        Price: price,
        Image: image,
    }    
    let cartItems = {
        [itemsList.Title]: itemsList
    }
    localStorage.setItem("productsInCart", JSON.stringify(cartItems)); // It stores the data in localstorage.
    addItemToCart(title, price, image);
}

function addItemToCart(title, price, image) {
    var cartItems = document.querySelector(".cart-items");
    if (cartItems) {
        console.log(cartItems);
    } else {
        console.log("not getting the HTML code.")
    }
}

cart.html

<tbody class="cart-items"> 
    <tr class="cart-row">
        <td class="image" data-title="No"><img src="../../static/images/32.jpg" alt="#"></td>
        <td class="product-des" data-title="Description">
            <p class="product-name"><a href="#">Women Dress</a></p>
        </td>
        <td class="price" data-title="Price"><span>$200.00</span></td>
    </tr>
</tbody>

I am trying to select an array from google sheets to create google calendar events based on that. The code chunk below runs just fine and gets the job done. But I want to be able to only select the range that has value of “select” in their column D.
I know it is probably a very easy answer but I am new to JS.

function calendarSync() {
    var spreadSheet = SpreadsheetApp.getActiveSheet;
    var eventCal = CalendarApp.getCalendarById(calendarId);
// Below instead of selecting the entire range I only need the rows that have a value of "select" in their D cell.
    var eventArray = spreadSheet.getRange("A1:D100").getValues();
    
    for (x=0; x<eventMatrix.length; x++){
      var calEvent = eventArray[x];
      var eventName = calEvent[0]
      var startTime = calEvent[1];
      var endTime = calEvent[2];
      
      eventCal.createEvent(eventName, startTime, endTime);
    }

I’ve been trying for a really long time to make it work, I tried the await version too but none of them collect the reactions. The collector completes its cycle, but then it shows that no reaction was collected.

        if (command == 'react') {

        const filter = (reaction,user) => {
            return user.id === message.author.id;
        }
        
        const collector = message.createReactionCollector({
            filter,
            max: 1,
            time: 1000 * 5,
        })

        collector.on('collect',(reaction) =>{
            console.log(reaction.emoji);
        })

        collector.on('end',(collected) =>{
            console.log(collected);
        })
    }

I am new to testing. I have an error on 3 lines in my react project, but I am not sure what to test for. I have done a few tutorials and understanding how to run a test. However on this project, it wants me to test:

1. setToggle(!toggle);
2. setActive(!active);
3. the render
   But I am not sure what I kind of tests I am suppose to run. How do I know what type of test to run based on the the line info they give me?
   

I am new to react and was trying to use a map function inside jsx to render an array. However nothing gets rendered inside the loop .

I am passing data to my child component like this:

                            {showMaterialConfirmModal && (
                            <MaterialModalConfirm
                              closeModal={setshowMaterialConfirmModal}
                              orderList={orderListE}
                              itemList={itemListE}
                              errorList={errorListE}
                              title="Success"
                            />
                          )}

and inside the child component I am calling the map function like this:

              <Card>
              <GridContainer>
                <GridItem xs={12}>Design Successful for: 0</GridItem>
                <h5>Order:{props.orderList[0]}</h5>
                {props.orderList.map((order, i) => {
                  <div>
                    {order}
                    <h1>Hi</h1>
                    {/* <GridItem xs={12}>
                      order/item no {order[i]}/{props.itemList[i]} due to{" "}
                      {props.errorList[i]}
                    </GridItem> */}
                  </div>;
                })}
              </GridContainer>
            </Card>

The data in orderList is coming in the tag however nothing gets printed which is inside the loop.

I have checked various documents to run the map function however I am at a loss as to why nothing is getting printed .

Please help

tôi có một webpage với tên domain là abc.000webhostapp.com làm sao để chuyển sang trang khác với URL là htpps://abc.000webhostapp.com/congnghe ( tôi làm website với các file HTML ) và làm sao up file html congnghe để nó có thể hiện ra trang công nghệ khi nhấn vào chữ công nghệ trên thanh menu.xin cảm ơn ạ

I am trying to generate pdf using JSPDF and it is working fine, However I have a requirement where I want pdf to be converted with page breaks after div which means Div1 on page1, Div2 on page2 and so on..
Please help, Thankyou in advance.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/html2canvas.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js"></script>
<script>
function generatePDF() {
    html2canvas(document.getElementById('report-container')).then(function (canvas) {

    var imgData = canvas.toDataURL('image/png');

      var imgWidth = 210; 
      var pageHeight = 295;  
      var imgHeight = canvas.height * imgWidth / canvas.width;
      var heightLeft = imgHeight;

      var doc = new jsPDF('p', 'mm');
      var position = 0;

      doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
      heightLeft -= pageHeight;

      while (heightLeft >= 0) {
        position = heightLeft - imgHeight;
        doc.addPage();
        doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
        heightLeft -= pageHeight;
      }
      doc.save( 'file.pdf');
});
}
</script>

enter image description here

I am calling my background.js file from content script but i don’t know how to open my popup.html file like normally it’s open when we click on extension icon.

background.js

 chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.message == 'buttonClicked') {
        console.log(request.message)
        chrome.tabs.update({
            active: true,
            url:  'sidepopup.html'
        }, null);
   }
  });

• I want to show a menu When the mouse moves to the path
• but farbicjs’s path has a Square Touchable area ,Instead of linear
  https://codesandbox.io/s/xz6mi?file=/src/environments/environment.prod.ts
  zrender has Simple implementation
  thanks, all

It is said that “RETURN” statement terminates a for loop in javascript but in this case the code will still output 3 why? does that mean the return statement doesn’t terminate the loop?

var printNumTwo;
for (var i = 0; i < 3; i++) {
  if (i === 2) {
    printNumTwo = function() {
      return i;
    };
  }
}
console.log(printNumTwo());

I have a node.js webserver and this webserver is call from around 50 different clients and at every call the same json file is opened and data is written into to the file.

I have code a check which looks like following:

let newtext= JSON.stringify(text);
if(JSON.parse(newtext))
{
 write new data into json
}

normaly this should be a check to help against errors in the Json file, but because this webserver is call from many clients at same time and all are using the same json file because of that i think a error come into the json file.

so my problem is that a error message come from node.js at another place where i read the json file with JSON.parse

I need to remove HTML tags from results retrieved in a column as follows:

var objPattern = new RegExp(
        ("/<[^>]*>/g"),
        );

DTColumnBuilder.newColumn('message_content').withTitle('Message Content').renderWith(
function(data, type, full, meta){
return data === null ? "" : type === 'display' ? data.objPattern : data;})

I’m not sure where/how to implement the Replace method here using the regex pattern above.

i am trying to load this json in my page but foreach break and gives error as the number is not in serial

if we provide the number in serial it works.
serial means in incremental
this is my json

{
    "": {
        "id": "",
        "name": "",
        "reply": "",
        "parent": "",
        "actions": []
    },
    "0": {
        "id": "0",
        "name": "",
        "reply": "",
        "parent": "",
        "actions": [
            "01",
            "02",
            "03",
            "04",
            "06",
            "07"
        ]
    },
    "01": {
        "id": "01",
        "name": "Order Status",
        "reply": "Please provide your order number",
        "parent": "0",
        "actions": [
            "011"
        ]
    },
    "07": {
        "id": "07",
        "name": "Book Appointment",
        "reply": "Book Appoinme",
        "parent": "0",
        "actions": []
    },
    "welcomeMssg": "Do you need help with :-",
    "startId": "0",
    "scName": "test name"
}

and this is my javascript

var scenario = "";
var fdata = null;

function getScenarioData(scid, cid) {
  scenario = scid;
  var obj = {
    client: cid,
    scenario: scid,
  };
  $.ajax({
    type: "GET",
    url: "getdata.php",
    data: obj,
    success: function (data) {
      data = JSON.parse(data);
      fdata = data;
      console.log(fdata);
      document.getElementById("welcomeMessage").value = data.welcomeMssg;
      document.getElementById("scenarioName").value = data.scName;
      scenarioName = data.scName;
      welcomeMessage = data.welcomeMssg;
      start = data.startId;
      buttons = data;
      document.getElementById("main1").style.display = "block";
      document.getElementById("entry").style.display = "none";
      ac = buttons[start].actions;
      for(let k in buttons) {
        if(buttons[k].actions){
          count[k] = buttons[k].actions.length+1;
        }
      }
      console.log(count);
      ac.forEach(e => {
        var input = document.createElement("input");
        input.type = "text";
        input.className = "replybox m-1 p-2 form-control";
        input.placeholder = "reply";
        input.style.display = "inline";
        input.value = buttons[e].name;  
        input.id = buttons[e].id;
        var id = buttons[e].id;
        input.onclick = function () {
            addRes(id, buttons[e].parent);
        };
     //   input.onkeyup = function () {
                input.onchange = function () {
            buttons[id].name = document.getElementById(id).value;
            if (document.getElementById("show" + id)) {
            document.getElementById("show" + id).innerHTML =
                "(for " + document.getElementById(id).value + ")";
            }
        };
        var d = document.createElement("div");
        var s = document.createElement("span");
        d.id = "reply"+id;
        s.innerHTML = `<i class='fa fa-times-circle circle' aria-hidden='true' onclick='deleteButton("${id}");' style='font-size:15px;cursor:pointer;margin-left:-10px;;'></i>`;
        d.appendChild(input);
        d.appendChild(s);
        document.getElementById("replies0").appendChild(d);
      });
  },
  error: function (e) {
    console.log(e.message);
  },
 });
}

if i change the json output to 2 instead of 7 it works fine. i am confused is it mandatory to have data in incremental if we are using foreach

when i say if i replace 7 with 2 means this

"07": {
        "id": "07",
        "name": "Book Appointment",
        "reply": "Book Appoinme",
        "parent": "0",
        "actions": []
    },

here is live site for demo
https://way2enjoy.com/shopify/1/whatsapp-chat/bot/1/2/edit_scenario.php?client=50457

any help will be great

i get this error at console

Uncaught TypeError: Cannot read properties of undefined (reading 'name')
    at edit_scenario.js:39
    at Array.forEach (<anonymous>)
    at Object.success (edit_scenario.js:33)
    at c (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at l (jquery.min.js:2)
    at XMLHttpRequest.<anonymous> (jquery.min.js:2)