I have a long table with 100 items per site. Every item has a canvas chart, which takes a lot of time for loading at the first time. Is there any options (without cache, i do it already) to create a picture or reduce the loading time? Thanks!

 <canvas width="135" height="40" data-rate="' . $fiatrate . '" data-fiat="'. $fiatprefix[$options['currency']] .'" data-color="' . (($options['chart_color'] !== '') ? hex2rgb($options['chart_color']) : (($coin->percent_change_24h >= 0) ? '10,207,151' : '239,71,58')) . '" data-gradient="50" data-border="2" data-points="' . implode(',', array_slice($options['weekly'][$coin->slug], -24)) . '"></canvas>

Hi everyone I am facing some issues while trying to pass JSON object as a parameter to function!
but on that function, while consoling log the data I am getting [object:object].
Here is my code:-

 function buildTable(data){
        var table = document.getElementById('myTable');
        table.innerHTML ="";
        for(var i =0; i<data.length; i++){
            var row = `<tr class="item-id-${data[i].id}"> <td>${data[i].name}</td> <td>${data[i].audio_muted}</td> <td>${data[i].video_muted}</td> <td><button id="audio_handle" class="btn btn-primary" onclick="handleMembers('${data[i]}')">Video</button></td>`

            table.innerHTML += row;

        }
    }

 function handleMembers(data){
        console.log("data = >",data); //= [object:object]
    }

The issue is when I am calling handle function from the button inside template literal string I m getting [object:object] as output

Where I am going wrong kindly help me.

I have this Upload component that I got from antd : react ant design documentation

<Upload
  beforeUpload={()=> {
    return false; }}
  onChange={e => onChangeFile(e, index)}
  onRemove={e => onRemoveFile(e, index)}
>
  <Button
    icon={<UploadOutlined />}
  >
    Upload a file
  </Button>
</Upload>

After uploading the file, a remove icon appears. When I click on the remove button the file does not get removed from the state.

here is the onChange function :

const onChangeFile = (info, index) => {
    console.log(info);
    const newForm = form;
    newForm.inputs[index].value = info.file;
    setForm({
      ...form,
      from: newForm
    });
    console.log(from);
};

I tried removing using onRemove function like this:

const onRemoveFile = (info, index) => {
   const newForm = form;
   newForm.inputs[index].value = null;
   setForm({
     ...form,
     from: newForm
   });
   console.log(form);
};

screenshot of the UI:

I’ve created a chart and want to use radio buttons to allow the user to pick between two colour options. The ‘normal’ colour scheme will be one set of colours and the accessible colour scheme will be a different set of colours for the BackgroundColor and BorderColor.

I have tried to look for an existing answer online but can’t seem to find it. I would like it to be similar to this example but with the bar colours changing rather than the graph type. I just can’t work out the code for it.

Any help would be appreciated!

function myAjaxFunction(){
    $(document).ready(function (){
    var selection= document.getElementById('Console').value;
    var link = "https:/Assignment-1/process.php?Console='"+selection+"'";
  var backgroundcolour1 = '#0B5394';
  var bordercolour1 = '#04213b';
  var backgroundcolour2 = '#b5cbde';
  var bordercolour2 = '#5486b4';
  $.ajax({
    url: link,
    method: "GET",
    success: function(data=this.responseText) {
      console.log(data);
      var Price = [];
      var Model = [];
      var Member = [];

      for(var i in data) {
        Price.push(data[i].Price);
        Model.push(data[i].Model);
        Member.push(data[i].Member);
      }

      var universalOptions = {
        maintainAspectRatio: false,
            responsive: false,
            title: {
            display: true,
            text: 'Console comparison price',
            fontWeight:"bold",
            fontColor: "black",
            fontSize: 20
        },
        legend: {
            display: true,
            fontColor: "black",
            labels:{
              fontSize:14,
              fontColor: "black"
            }
        },
        scales: {
            yAxes: [{
              display: true,
              scaleLabel: {
                display:true,
                labelString: 'Console price in pounds',
                              fontColor:"black",
                              fontSize: 16
              },
            ticks: {
              beginAtZero: true,
              steps: 10,
              stepValue: 50,
              max: 500,
              fontSize: 14,
              fontColor: "black"
               }
            }],
          xAxes: [{
            display:true,
            scaleLabel: {
              display:true,
              labelString: 'Console models',
                            fontColor:"black",
                            fontSize: 16
            },
            ticks: {
              fontSize: 14,
              fontColor: "black"
            }
          }],
        }
    }
      var chartdata = {
        labels: Model,
        datasets : [
          {
            label: 'Price',
            data: Price,
                  backgroundColor: [backgroundcolour1,backgroundcolour1,backgroundcolour1], 
                  borderWidth: '2', 
                  borderColour: [bordercolour1,bordercolour1,bordercolour1], 
                  hoverBorderColor: 'darkblue'
          },
          {
            label: 'Member price',
            data: Member,
                  backgroundColor: [backgroundcolour2,backgroundcolour2,backgroundcolour2], 
                  borderWidth: '2', 
                  borderColour: [bordercolour2,bordercolour2,bordercolour2], 
                  hoverBorderColor: 'darkblue'
          }
        ]
      };
      
      var chart1 = document.getElementById('myChart');
      var ctx = document.getElementById('myChart').getContext('2d');

      var barGraph = new Chart(
        chart1, {
                type: 'bar',data: chartdata, options: universalOptions
        }
      );

      $('select').on('change',function(){
        barGraph.destroy();
    })

    },
    error: function(data) {
      console.log(data);
    }
  });
});
}

<!DOCTYPE html>
<html>
<head>
<title>Assignment 1</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script type="text/javascript" src="chart1.js"></script>
<?php include "connection.php";?>
</head>
<body>

<select id = "Console" onchange=myAjaxFunction();>
<?php 

$sql="SELECT DISTINCT Console FROM game_consoles";

$result = mysqli_query($con, $sql);

while($row = mysqli_fetch_assoc($result)){
    echo "<option value='".$row['Console']."'>".$row['Console']."</option>";
}

?>
</select><br><br>

<script type="text/javascript" src="graphcolours.js"></script>
<input onclick="chartcolour1()" type="radio" value="normal" name="chartcolour"> Normal Colour Scheme
<input onclick="chartcolour2()" type="radio" value="accessible" name="chartcolour"> Accessible Colour Scheme

<br><br>

<canvas id="myChart"></canvas><br>
<script type = "text/javascript" src="chartstyle.js"></script>

</body>
</html>

function chartcolour1(){
    backgroundcolour1 = '#0B5394';
    bordercolour1 = '#04213b';
    backgroundcolour2 = '#b5cbde';
    bordercolour2 = '#5486b4';
    barGraph.update();
};

function chartcolour2(){
    backgroundcolour1 = '#0B5394';
    bordercolour1 = '#04213b';
    backgroundcolour2 = '#D81B60';
    bordercolour2 = '#C7084E';
    barGraph.update();
};

I have a small PHP API that handles basic user CRUD.

Also I am trying out React frontend where I make api calls using axios.

For some reason oftentimes api call does not get executed. For example I have this method:

delete = async (id: number) => {

        if (window.confirm('Are you sure you want to delete this user?')) {

           await  axios.delete(`users/${id}`);

            this.setState({
                users: this.state.users.filter((u:User) => u.id !== id)
            })
        }
    }

that is called like this:

<a href="" className="btn btn-sm btn-outline-secondary"
             onClick={() =>this.delete(user.id)}>Delete</a>

The user is not being deleted all. However in Postman I can delete it. The API works fine.

I am a bit lost, why could this be happening?

The full file is : here

Other methods do work except delete.
I am new to React and kinda lost here.

I need to do the following: having a normal webpage, being able to use a mouse, stylus or finger (in case of a tablet or smartphone) to “draw shapes” over the text, and then using the information of the shapes, determine certain “actions”.

Let me give an example. Imagine this question on stackoverflow, and I “draw” on an ipad a circle around this paragraph. The circle (or the attempt of a circle, manual drawing is always very imperfect), “capture” the paragraph, so I know that I will make an action “over” the paragraph, like, for example, select all the inside text.

My question is: Is this feasible? there is any library that does this? If not, which technologies could be the ones to investigate?

I have been making my own research, but nothing has given me all that I need. For example, canvas draws exactly as I need, but a canvas cannot be used over an html page. It is another element on the page, not one who “wraps” the other.

Is it possible to test if a javascript regex contains a capturing group without executing it?

Ideally using JS regex engine, I guess I can write some regex to analyze regexes :), but asking the regex engine itself would definitely be more reliable.

I need a function that gives these results:

'US-.*' // false
'US-(.*)' // true
'US-(?:east|west)' // false, parentheses define non-capturing group
'US-(.*)' // false, escaped parentheses
// etc.

My use case: I have a component that uses a user-defined regex to filter a set of input strings and creates a group from those matching that regex. If the regex contains capturing groups, first one is used as a group name. Otherwise, user has to define a group name explicitly in another form field (disabled when the regex contains a capturing group). Therefore, at the time of writing the regex, I don’t even have a data set to execute the regex on and check whether there are matched substrings.

You can see in my example that clicking the radio manually fires an alert, but clicking the check/uncheck links – which do it programmatically – does not.

https://codepen.io/PeteWilliams/pen/xxXLpYE

    <!DOCTYPE html>
    <html>
      <head>
    
    <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
      
    <script>
    
        $(document).ready(function() {
    
    
            $('input[type=radio]').change(function() {
                alert(' changed');
            });
    
    
    });
    
    </script>
    </head>
      <body>
    
    
            <p>
                <label for="radio1" > RADIO BUTTON
                <input id="radio1" type="radio" />
            </label>
            </p>
    
            <p>
                <a href="#" onclick="$('#radio1').prop('checked', true ); return false;">check</a>
            </p>
    
            <p>
                <a href="#" onclick="$('#radio1').prop('checked', false ); return false;">uncheck</a>
            </p>
    
      </body>
    </html>

It looks like .change() only fires on user interaction, not just any change.

Is there another way I can achieve this goal? In this instance, I cannot change the code that selects/deselects the radio, only the code that selects it.

I am using slick slider on an image list, and using the focusOnSelect attr.
The focusOnSelect attribute aligns the image I click on the left side of the slider.
How do I align the item clicked on the right side of the slider?

$( document ).ready(function() {
    $('.gallery').slick({
        slidesToShow: 4,
        slidesToScroll: 1,
        dots: false,
        variableWidth: true,
        draggable: false,
        focusOnSelect: true,
    });
});

In my entire vuejs project, I can use any icons from here

https://fonts.google.com/icons?selected=Material+Icons

Lately, I am trying out append-icon, as you can see at

append-icon=”folder”

Proof

calendar_month is a proper spelling of that icon

https://fonts.google.com/icons?selected=Material+Icons&icon.query=calendar_month

Codes

<v-col class="col-sm-4 col-lg-4 col-4">
    <v-text-field
        append-icon="folder"
        class="mb-5"
        v-model="timezone"
        :rules="timezoneRules"
        label="Timezone"
        required
    ></v-text-field>
</v-col>

<v-col class="col-sm-4 col-lg-4 col-4">
    <v-text-field
        append-icon="calendar_month"
        class="mb-5"
        v-model="startDate"
        :rules="startDateRules"
        label="startDate"
        required
    ></v-text-field>
</v-col>

Result

Why only folder works ? Did I do sth wrong ?

I have a web app that displays and passes around user-editable semantic markup. For a variety of reasons, including security, the markup consists entirely of custom elements (plus the i, b, and u tags). For regular rendering, I simply have styles for all the tags and stick them straight in the DOM. This looks and works great.

Now I’m doing screen-reader testing, and things aren’t great. I have a bunch of graphical symbols I want to add labels for. I’ve got divs that I want to make into landmarks. I’ve got custom input fields and buttons.

It would be easy enough to just add role= to all the different tag instances. But part of the reason for the custom markup is to eliminate all the redundant information from the strings that get passed around (note: they’re also compressed). My <ns-math> tag should always have role="math", and adding 11 bytes to what might be tags around a single character is an actual problem when multiplied out over a whole article. I know this because the app started with a bunch of <span class="... type elements instead of custom.

For the fields and buttons, I’ve used a shadow DOM approach. This was necessary anyway to get focus/keyboard semantics correct without polluting the semantic markup with a bunch of redundant attributes, so it’s easy to also slap the ARIA stuff on the shadow elements. Especially since the inputs are all leaf nodes. But most of my custom tags amount to fancy spans, and are mostly not leaf nodes, so I don’t really want to shadow them all when they’re working so well in the light DOM.

After a bunch of searching, it seems like the internals.role property from “4.13.7.4 Accessibility semantics” of the HTML standard is maybe what I want. I may well be using it incorrectly (I’m a novice at front-end), but I can’t seem to get this to work in recent versions of Firefox or Chrome. I don’t get an error, but it seems to have no effect on the accessibility tree. My elements are not form-associated, but my reading is that the ARIAMixin should be functional anyway. This is maybe a working draft? If this is supposed to work in current browsers, does anybody have a code snippet or example?

Is there some other straight-forward way to achieve my goal of accessibility-annotating my custom elements without adding a bunch of explicit attributes to the element instances?

I wanted to make each element inside myArray will have it’s unique action, but I end up with only one of them working.
I have tried one more way of doing it that worked, but it was a complete boilerplate and I’m looking for a better solution than that.
More details:
For each element (Another array of buttons) inside myArray it will have unique action like scrollIntoView of some element in HTML.

In HTML I have 4 divs that share the same class and it looks like that:

<div class='firstDiv'>
<button class="teamBtn"></button>
<button class="serviceBtn"></button>
etc..
</div>
<div class='secondDiv'>
<button class="teamBtn"></button>
<button class="serviceBtn"></button>
etc..
</div>

let aboutSection = document.querySelector('.about')
let serviceSection = document.querySelector('.services')
let teamSection = document.querySelector('.team')
let homeBtn = document.querySelectorAll('.homeBtn');
let aboutBtn = document.querySelectorAll('.aboutBtn');
let serviceBtn = document.querySelectorAll('.serviceBtn')
let teamBtn = document.querySelectorAll('.teamBtn')

let myArray = [];

myArray[0] = homeBtn;
myArray[1] = aboutBtn;
myArray[2] = serviceBtn;
myArray[3] = teamBtn;

myArray.forEach(el => {
  addEventListener('click', () => {
    teamBtn.forEach(() => {
     teamSection.scrollIntoView();
    });
    serviceBtn.forEach(() => {
      serviceSection.scrollIntoView();
    });

  })
})

Why does this work?

<script>

            var today = new Date();
            var yesterday = new Date(Date.now() - 24*60*60*1000);

            from.max = yesterday.toISOString().split("T")[0];
            to.max = today.toISOString().split("T")[0];

            $(document).ready(function () {
            $("#from").change(function () {
            var minDate = $("#from").val();

            var fromDate = new Date(minDate);
            var minToDate = new Date(fromDate - 24*60*60*1000);
            
            $('#to').attr('min', minToDate.toISOString().split("T")[0]);

            });
            });

        </script>

But this does not:

... var minToDate = new Date(fromDate + 24*60*60*1000); ...

The point is to set the minimum date of “to” to the next day of the chosen “from” date. Just for testing purposes I tried the “-” version. And it truly sets the minimum value to the day before the “from” date. But the opposite, which is what I’m looking for, is not working. Crazy! 😀

Working on forget password, I am trying to pass email data from login page to forget password page through Link.

But When I am trying to access the same in forget password, it is giving me undefine.

could you please check my syntax.

Below is the code snippet.

Below is the Login Page code

  <div className="forget-password-container">
          <div>
            {" "}
            <Link
              to={{
                pathname: "/forget-password",
                state: formData.email,
              }}
            >
              <u style={{ textDecoration: "underline" }}>Forget Password</u>
            </Link>
          </div>
          <div>

Forget Password Page.

    const ForgetPassword = (props) => {
      // const { email } = (props.location && props.location.state) || {};
      console.log(props?.location?.state);
      return <div>ForgetPassword </div>;
    };
    
    export default ForgetPassword;

Please suggest me how can I access data in forget password page

We are using factory.printing.PrintHTML(“html://”+strPrintMsg,true); maximum all scenarios getting prints Without error, without exception without screen pausing.

But some scenarios not getting print, no error, no exception and no screen pausing.

We have observed a scenario that is…

We have changed default printer as Foxit Reader PDF Printer (third party software). Print is success with below code in all scenarios. factory.printing.PrintHTML(“html://”+strPrintMsg,true);

We have changed default printer from Foxit Reader PDF Printer from Microsoft print to PDF. Print is not coming with below code in few scenarios.

factory.printing.PrintHTML(“html://”+strPrintMsg,true);

Could you please help us for this scenario