Return the previous values in the form when the button is clicked (Javascript)

I have the following form shown below. I would like that when you click on the Cancel changes button the values of the fields return to the previous ones.

For example, if I have the word John and I delete hn (thus having Jo), clicking on the button I would like it to return to John.

How can I do this?

<form >
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Cancel changes">
</form> 

Why does sheet.js not red formular generated excel data?

So i have a birthday excel which looks like this: (Sorry i haven’t found a method to upload the excel data correctly..)
enter image description here

And i want to read my excel with sheet.js but i can’t figure out what i’m missing or doing wrong.
So the Age (“Alter” in my Screenshot) is generated by a simple formular which takes the birthdate and subtracts it from the current date.The birthdate is typed in staticly. Just FYI

Now i have the following code:

const path = require("path");
const xlsx = require("xlsx");

const filePath = path.resolve(__dirname, "Mitarbeiter Geburtstagsliste.xlsx");

const workbook = xlsx.readFile(filePath);
const sheetNames = workbook.SheetNames;
//console.log(workbook.Sheets[sheetNames[0]])

const data = xlsx.utils.sheet_to_json(workbook.Sheets[sheetNames[0]]);

data.map(person => {
    console.log(`${person.Name} is ${person.Alter} old!`)
})

And when i console log i get undefined for every param as output, why is that?

undefined is undefined old!
undefined is undefined old!
undefined is undefined old!
undefined is undefined old!
undefined is undefined old!
undefined is undefined old!
undefined is undefined old!
undefined is undefined old!
undefined is undefined old!
undefined is undefined old!
undefined is undefined old!
undefined is undefined old!
undefined is undefined old!
undefined is undefined old!
undefined is undefined old!
undefined is undefined old!
undefined is undefined old!
undefined is undefined old!
undefined is undefined old!
undefined is undefined old!
undefined is undefined old!
undefined is undefined old!
undefined is undefined old!

How make steps calendar diagram in Vue.js?

The data is for the moment registered in raw I still have to make it dynamic but I would like to make a kind of diagram with the data present. Like in this picture:

enter image description here

I don’t really know where to start I tried to look for diagrams but nothing really matches…

Here is my code:

<template>
    <v-row>
        <v-col cols="5" lg="8" md="6" sm="5" class="months">
                <div  v-for="(month) in months" :key=month.id :value="month" class="month">
                    <h3>{{month.month}}</h3>
                </div>
        </v-col>
        <v-container style="max-width: 100%; height: 420px;" class="overflow-y-auto scrollbar-hidden card-association">
            <p v-for="(s) in sowing" :key="s.id" :value="s">Sowing : {{s.start[0] === 1 ? "January" : ""}} to {{s.end[0] === 5 ? "May" : ""}}</p>
            <p v-for="(p) in planting" :key="p.id" :value="p">Planting : {{p.start[0] === 3 ? "March" : ""}} to {{p.end[0] === 8 ? "August" : ""}}</p>
            <p v-for="(h) in harvesting" :key="h.id" :value="h">Harvesting : {{h.start[0] === 7 ? "July" : ""}} to {{h.end[0] === 11 ? "November" : ""}}</p>
        </v-container>
    </v-row>
</template>

<script>
    import { mapGetters } from "vuex";

    export default {
        props: {
        },
        data: () => ({
            months: [
                {id: 1, month:'January'},  
                {id: 2, month:'February'},
                {id: 3, month:'March'},
                {id: 4, month:'April'},
                {id: 5, month:'May'},
                {id: 6, month:'June'},
                {id: 7, month:'July'},
                {id: 8, month:'August'},
                {id: 9, month:'September'},
                {id: 10, month:'October'},
                {id: 11, month:'November'},
                {id: 12, month:'December'}
            ],
            sowing: [],
            planting: [],
            harvesting: [],
        }),
        computed: {
            console: () => console,
            ...mapGetters({
                plantActive: 'permatheque/getPlant',            
            }),
            
        },
        methods: {
            async getPlantStepSowing() {
                this.$axios.$get('/lnk/plant/steps?plant_id_id='+this.plantActive.id+'&step_title=Sowing')
                .then(response => {
                    this.sowing = response
                    console.log(this.sowing)
                }).catch(error => {
                    console.log(error)
                });           
            },
            async getPlantStepPlanting() {
                this.$axios.$get('/lnk/plant/steps?plant_id_id='+this.plantActive.id+'&step_title=Planting')
                .then(response => {
                    this.planting = response
                    console.log(this.planting)
                }).catch(error => {
                    console.log(error)
                });           
            },
            async getPlantStepHarvesting() {
                this.$axios.$get('/lnk/plant/steps?plant_id_id='+this.plantActive.id+'&step_title=Harvesting')
                .then(response => {
                    this.harvesting = response
                    console.log(this.harvesting)
                }).catch(error => {
                    console.log(error)
                });           
            },
            

        },
        mounted() {
            this.getPlantStepSowing();
            this.getPlantStepPlanting();
            this.getPlantStepHarvesting();
        }
    }
</script>

And what it looks like now:

enter image description here

And here is an example of what I get in response with the API:

    [
  {
    "id": 9,
    "plant_id": {
      "id": 136,
      "name": "Basilic"
    },
    "start": [
      7
    ],
    "end": [
      11
    ],
    "step_title": "Harvesting",
    "step_order": 3,
    "step_subtitle": "Récolte",
    "help": ""
  }
]

svg image texture threejs

am creating t-shirt customization using THREEJS and trying to create dynamic change of the particular design’s color using svg image and update the t-shirt model in threejs. am stuck in updating the color of the svg image,looking for suggestions and thanks in advance.

Rewriting “If element has scrolled down past another element, do the following” from JQuery to vanilla JS?

Hello is it possible to rewrite the following JQuery snippet:

$(window).scroll(function (event) {
  var scroll = $(window).scrollTop();
    $(".navigation").toggleClass("is-active", scroll >= $("example-div").offset().top);
});
$(window).scroll(); 

Into vanilla JS? I’ve tried everything, and searched through some other questions, to no avail.

Thanks.

How do I align columns from two different rows and categorize them using a filter?

I’m using java script to hide my content so that it doesn’t appear all at once, but in order for it to work, I had to create two separate rows, which means that if two columns have the same filter category, they won’t align on the same row. Is there a way to fix this? Any assistance or advice would be greatly appreciated.

function toggleText() {
    var showMoreText = document.getElementById("more");
    var buttonText = document.querySelector("#moreButton span");
    var moreIcon = document.querySelector("#moreButton img");

    if (startpoint.style.display === "none") {
        showMoreText.style.display = "none";
        startpoint.style.display = "table-cell";
        buttonText.innerHTML = "Show More";
        buttonText.classList.remove('less');
        moreIcon.classList.remove('less');
    } else {
        showMoreText.style.display = "table-cell";
        startpoint.style.display = "none";
        buttonText.innerHTML = "Show Less";
        buttonText.classList.add('less');
        moreIcon.classList.add('less');
    }
}
.pink{
  color: #FF7B5F;
}

#more {
  display: none;
}
#moreButton{
  background-color:transparent;
  border-color: transparent;
}
.less{
  color: #FF7B5F;
}

img.more.less {
  transform: rotate(180deg);
}


.list-inline-item{
  font-family: 'Inter', sans-serif;
  color: #6F727B;
  font-weight: bold;
  padding: 13px;
}
.list-inline-item.active{
  color: #FF7B5F;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.list-inline-item:hover{
  color: #FF7B5F;
  text-decoration: underline;
  text-underline-offset: 5px;
  cursor: pointer;
}
<!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">
      <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
      <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
      <!-- Favicon icon -->
   </head>
   <body>
    <div class="container-fluid clientbox text-center">
<div class="row">
<div class="col-12 col-md-12 col-lg-12">
   <ul>
      <li class="list-inline-item active" data-filter="all">ALL WORKS</li>
      <li class="list-inline-item" data-filter="1">1</li>
      <li class="list-inline-item" data-filter="2">2</li>
      <li class="list-inline-item" data-filter="3">3</li>
      <li class="list-inline-item" data-filter="4">4</li>
      <li class="list-inline-item" data-filter="5">5</li>
      <li class="list-inline-item" data-filter="6">6</li>
   </ul>
</div>
<div class="clients 4 col-6 col-md-4 col-lg-3">
   <img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="clients 1 2 col-6 col-md-4 col-lg-3">
   <img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="clients 2 4 col-6 col-md-4 col-lg-3">
   <img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="clients 3 6 col-6 col-md-4 col-lg-3">
   <img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
           
            <div id="startpoint"></div>
            <div id="more">
               <div class="row">
                <div class="clients 4 col-6 col-md-4 col-lg-3">
   <img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="clients 1 2 col-6 col-md-4 col-lg-3">
   <img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="clients 2 4 col-6 col-md-4 col-lg-3">
   <img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="clients 3 6 col-6 col-md-4 col-lg-3">
   <img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
               </div>
            </div>
            <button onclick="toggleText()" id="moreButton">
            <span class="pink">Show More</span> 
            <img class="more" src="./images/load-more.png" alt="">
            </button>
         </div>
      </div>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

     
      <script>$(document).ready(function (){$('.list-inline-item').click(function(){const value = $(this).attr('data-filter');if(value == 'all'){$('.clients').show('1000');}else{ $('.clients').not('.'+value).hide('1000');$('.clients').filter('.'+value).show('1000');}$(this).addClass('active').siblings().removeClass('active')})})</script>
   </body>
</html>

How can I mock a function of other file that return a promise?

I have function below. I can’t test this function using Jest framework.

The function:

exports.example = async function (data) {

let utility;
  if (data.flag) {
    utility = require('./utility');
  } else {
    utility = require(Runtime.giveFunctions()['utility'].path);
  }
  const valueFromUtility = await utility.getValue(data);
     .
     .
     .

From the test I pass the data object that contains several properties, including:

  • flag: if it is true I require the utility.js file and then I call the getValue (data) function, if it is false I get the path of the utility file that contains the getValue function and then I call the getValue (data) function.

If from the test pass data.flag === true the test is fine, otherwise (data.flag === false) the test fails telling me “utility.getValue is not a function”.

In the utility.js file the getValue function returns a promise, as a parameter it has the data object which contains the mocked functions that will be called in getValue.

The test I wrote is the following:

test('Test with flag === false', async () => {

    jest.mock('../functions/utility', () => () => false);

    await handler(data);

});

I also tried to mock the utility getValue function to return a resolved promise:

test('Test with flag === false', async () => {

    jest.mock('../functions/utility', () => jest.fn().mockReturnValue(Promise.resolve('Some values')));

    await handler(data);

});

Finally, I mocked as follows:

const Runtime = {
    giveFunctions: jest.fn().mockReturnValue({
        utility: jest.fn().mockReturnValue({
            path: jest.fn()
        })
    })
};

window.Runtime = Runtime;

How can I solve this problem? Thanks everyone in advance

How to make setting scrollTop scroll to the point instantly?

I’m trying to scroll to a certain block on page load like this (needs to work in IE 11):

getScrollbaleContainer().scrollTop = 
         block.getBoundingClientRect().top + 
         (window.pageYOffset || document.documentElement.scrollTop);

But Chromium browsers and Firefox scroll to that point with a duration. Is there a way to make it scroll instantly?

Using Selectpicker for filter-control

I am using bootstrap-select in a <select> that serves as a filter-control component of a bootstrap table.

I want to use this select to filter via various types of cars, not only one.

I have everything working but, when I select one or more types of cars, this error shows up in the browsers’ console:

Uncaught TypeError: a.trim is not a function

It is retrieving the error from the bootstrap-table script:

https://unpkg.com/[email protected]/dist/extensions/filter-control/bootstrap-table-filter-control.min.js:10

Might it be that it is returning an array while the script wants a string? (Arrays do not have a trim function). In that case, can I patch it so it returns a joined array? It does not seem to be the case since the error is thrown even if I change the value like this:

let stringVal = multiSelect.val().join()
multiSelect.val(stringVal)

Any advice would be appreciated.

Shopify Store Refresh cart content. AJAX request

I have product page on which I have shop now btn. When user clicks on this button, page opens cart drawer with custom ajax template content.

I rewrited click event with my own logic. I use AJAX and send request for adding product by myself. Products are adding but is not showing in the cart drawer. Only after reloading page it is appearing.

Question is to can I refresh cart content? I’m trying to past content template via inner html. But it is looks like not liquid format.

Here is the template

 <script id="CartTemplate" type="text/template">
{% render 'banana-stand-cart-top-container' %}
{% raw %}
<div class="drawer__scrollable">
  {{#items}}
  <div class="ajaxcart__product appear-animation appear-delay-{{animationRow}}">
  <div class="ajaxcart__row">
    <div class="grid">
      <div class="grid__item one-third">
        <a href="{{url}}" class="ajaxcart__product-image"><img src="{{img}}" alt="{{name}}"></a>
      </div>
      <div class="grid__item two-thirds">
        <div class="ajaxcart__product-name--wrapper">
          <a href="{{url}}" class="ajaxcart__product-name">{{{name}}}</a>
          {{#if variation}}
            <div class="ajaxcart__product-meta">{{variation}}</div>
          {{/if}}
          {{#if selling_plan_name}}
            <div class="ajaxcart__product-meta">{{selling_plan_name}}</div>
          {{/if}}
          {{#properties}}
            {{#each this}}
              {{#if this}}
                <span class="ajaxcart__product-meta">{{@key}}: {{this}}</span>
              {{/if}}
            {{/each}}
          {{/properties}}
        </div>

        <div class="grid grid--full display-table">
          <div class="grid__item display-table-cell one-half">
            <label for="updates_{{key}}" class="visually-hidden">{% endraw %}{{ 'products.product.quantity' | t }}{% raw %}</label>
            <div class="js-qty__wrapper">
              <input type="text" id="updates_{{key}}"
                class="js-qty__num"
                value="{{itemQty}}"
                data-id="{{key}}"
                min="0"
                aria-label="quantity"
                pattern="[0-9]*"
                name="updates[]">
              <button type="button"
                class="js-qty__adjust js-qty__adjust--minus"
                aria-label="{% endraw %}{{ 'cart.general.reduce_quantity' | t }}{% raw %}">
                  {% endraw %}<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-minus" viewBox="0 0 20 20"><path fill="#444" d="M17.543 11.029H2.1A1.032 1.032 0 0 1 1.071 10c0-.566.463-1.029 1.029-1.029h15.443c.566 0 1.029.463 1.029 1.029 0 .566-.463 1.029-1.029 1.029z"/></svg>{% raw %}
                  <span class="icon__fallback-text" aria-hidden="true">&minus;</span>
              </button>
              <button type="button"
                class="js-qty__adjust js-qty__adjust--plus"
                aria-label="{% endraw %}{{ 'cart.general.increase_quantity' | t }}{% raw %}">
                  {% endraw %}<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-plus" viewBox="0 0 20 20"><path fill="#444" d="M17.409 8.929h-6.695V2.258c0-.566-.506-1.029-1.071-1.029s-1.071.463-1.071 1.029v6.671H1.967C1.401 8.929.938 9.435.938 10s.463 1.071 1.029 1.071h6.605V17.7c0 .566.506 1.029 1.071 1.029s1.071-.463 1.071-1.029v-6.629h6.695c.566 0 1.029-.506 1.029-1.071s-.463-1.071-1.029-1.071z"/></svg>{% raw %}
                  <span class="icon__fallback-text" aria-hidden="true">+</span>
              </button>
            </div>
          </div>
          <div class="grid__item display-table-cell one-half text-right">
            {{#if discountsApplied}}
              <small class="cart__price--strikethrough">{{{price}}}</small>
              <span class="ajaxcart__price">
                {{{discountedPrice}}}
              </span>
            {{else}}
              <span class="ajaxcart__price">
                {{{price}}}
              </span>
            {{/if}}
          </div>
        </div>
        <div class="grid grid--full display-table">
          {{#if discountsApplied}}
            <div class="grid__item text-right">
              {{#each discounts}}
                <small class="ajaxcart__discount cart__discount">
                  {{this.discount_application.title}} (-{{{this.formattedAmount}}})
                </small>
              {{/each}}
            </div>
          {{/if}}

          {{#if unitBase}}
            <div class="grid__item text-right">
              <div class="product__unit-price">
                {{{ unitPrice }}}/{{{ unitBase }}}
              </div>
            </div>
          {{/if}}
        </div>
      </div>
    </div>
  </div>
</div>
{{/items}}

  {% endraw %}{% if settings.cart_notes_enable %}{% raw %}
  <div class="appear-animation appear-delay-{{lastAnimationRow}}">
    <label for="CartSpecialInstructions" class="ajaxcart__note">{% endraw %}{{ 'cart.general.note' | t }}{% raw %}</label>
    <textarea name="note" class="input-full cart-notes" id="CartSpecialInstructions">{{note}}</textarea>
  </div>
{% endraw %}{% endif %}{% raw %}
   </div>
    <div class="drawer__footer appear-animation appear-delay-{{lastAnimationRow}}">
   {{#if cartDiscounts }}
    <div class="grid grid--full">
     <div class="grid__item one-half">
      <p class="ajaxcart__subtotal">{% endraw %}{{ 'cart.general.discounts' | t }}{% raw %}</p>
    </div>
      <div class="grid__item one-half text-right">
      {{#each cartDiscounts}}
        <p class="ajaxcart__price cart__discount">
          {{this.title}} (-{{{this.formattedAmount}}})
        </p>
      {{/each}}
    </div>
  </div>
{{/if}}
<div class="grid grid--full">
  <div class="grid__item one-half">
    <p class="ajaxcart__subtotal">{% endraw %}{{ 'cart.general.subtotal' | t }}{% raw %}</p>
  </div>
  <div class="grid__item one-half text-right">
    <p class="ajaxcart__price"><span class="tdf-cart-total-parent">{{totalPrice}}</span></p>
  </div>
</div>
<p class="ajaxcart__note">
  {% endraw %}{{ 'cart.general.shipping_at_checkout' | t }}{% raw %}
</p>
{% endraw %}{% if settings.cart_terms_conditions_enable %}
  <p class="ajaxcart__note ajaxcart__note--terms">
    <input type="checkbox" id="CartAgree" />
    <label for="CartAgree">
      {% if settings.cart_terms_conditions_link != blank %}
        {{ 'cart.general.terms_html' | t: url: settings.cart_terms_conditions_link }}
      {% else %}
        {{ 'cart.general.terms' | t }}
      {% endif %}
    </label>
  </p>
   {% endif %}{% raw %}
   {% endraw %}
   {% if additional_checkout_buttons and settings.cart_additional_buttons %}
      <div class="additional-checkout-buttons additional-checkout-buttons--vertical">{{ content_for_additional_checkout_buttons }}</div>
   {% endif %}
  {% raw %}
  <button type="submit" class="btn btn--full cart__checkout{% endraw %}{% if settings.cart_terms_conditions_enable %}{% raw %} cart__checkout--ajax{% endraw %}{% endif %}{% raw %}" name="checkout">
  {% endraw %}{{ 'cart.general.checkout' | t }}{% raw %}
</button>
</div>
{% endraw %}

Is there a way to Override the same javascript for different inputs locally?

So, suppose there is a html code that has two buttons, A and B. Both buttons call the same javascript, say Callscript(), but with different inputs, that is A calls with Callscript(A) and B calls with Callscript(B). I have overridden the response of Button A to a local file, and I want B to get the usual response, but the response of button B is also being Overridden.

I want to override only the response of button A, but not of B. Is this possible in Chrome’s Overrides option?

Karate Java String interpolation

I am trying to call a java method that accepts a string as a parameter inside a karate script, and interpolate a value defined in karate in that string.

In my case it’s a simple database INSERT statement, for example:

INSERT INTO A(id, time, value) VALUES(1, '2099-05-10 18:20:18.674 UTC', 'test')

The script itself looks as follows:

Background:
    * def db = Java.type('com.example.DbTestHelper')
    * def offsetDateTime = Java.type('java.time.OffsetDateTime')
    * def zoneId = Java.type('java.time.ZoneId')

  Scenario: testScenario
    * def t = offsetDateTime.now(zoneId.of("Europe/Berlin")).plusDays(1)
    * def row = db.insertRow("INSERT INTO A(id, time, value) VALUES(123, #t, 'test')")

And the insertRow method looks as follows:

    @JvmStatic
    fun insertRow(vararg strings: String) {
        jdbc.batchUpdate(*strings)
    }

I have tried multiple combinations of setting value t like #(t), #t, “#(t)” etc. Unfortunately, none of them worked resulting in various javascript parse errors even before the java method gets invoked.

What would be the right way to achieve that? Is it even possible?

Unhandled Runtime Error in react class component when using async function

When I run getData in the following

const FunctionalComponent = observer(): JSX.Element => {
  const { userStore, authStore } = useStores()

  const getData = async (): Promise<void> => {
    const result = await userStore.findById(authStore.id)

    console.log('result in getData', result)
  }

  useEffect(() => {
    getData()
  }, [])
})

I console.log

{
  clientSettings: {test: 'hello'}
}

When I attempt run getData in a React class component like the following

class AUIGrid extends React.Component<Props, State> {

  getData = async (): Promise<void> => {
    const { userStore, authStore } = useStores()
    const result = await userStore.findById(authStore.id)

    console.log('result in getData', result)
  }

  saveColumnLayoutWithOrder = (): void => {
    this.getData()
  }
}

and run saveColumnLayoutWithOrder with

<button onClick={() => {this.saveColumnLayoutWithOrder()}}>save</button>

I get an Unhandled Runtime Error

enter image description here

Why am I getting this error?