Category: javascript

I am working on a project where every user has a wallet as a field in their database model, when a button is pressed by the user in the frontend the wallet field should be incremented by a value which is present in another database model and that wallet field should get updated. How can I implement in the code, should I use onclick() function or any other functions like AJAX.

I want someone to explain the methods and process to achieve this functionality.

<script type="text/javascript">

    $(document).ready(function () {
        
        $('#btnRegister').click(function () {
            var UserName = document.getElementById('username').value;
            var Email = document.getElementById('email').value;
            var Password = document.getElementById('password').value;
            var ConfirmPassword = document.getElementById('password-confirm').value;

            if (UserName == "") {
                document.getElementById('uname').innerHTML = "*Please Enter the Username***";

                return false;
            } else {
                document.getElementById('uname').innerHTML = "";
            }

            if (Email == "") {
                document.getElementById('E-mail').innerHTML = "*Please Enter the Email***";

                return false;
            } else {
                document.getElementById('E-mail').innerHTML = "";
            }

            if (Password == "") {
                document.getElementById('pass').innerHTML = "*Please Enter the Email***";

                return false;
            } else {
                document.getElementById('pass').innerHTML = "";
            }

            if (Password != ConfirmPassword) {
                document.getElementById("confirm").innerHTML = "**Passwords are not same";
                return false;
            } 
            debugger;
            $.ajax({
                url: '/api/account/register',
                method: 'POST',
                data:
                {                    
                    username: $('#username').val(),
                    email: $('#email').val(),
                    password: $('#password').val(),
                    confirmPassword: $('#password-confirm').val()
                },
                success: function () {
                    alert("Registration Successful");
                    window.location.href = "Login.html";
                },
                error: function (xhr) {             
                    $('#divErrorText').text(xhr.responseJSON.ModelState["model.Password"]);
                    $('#divError').show('fade');
                }
            });
        });
    });
</script>

i did set the debugger and pressing f10 its not go inside the ajax method . it skip all ajax code

I use React-Export-Excel library (updated version) in my project. When I download excel file nothing comes but this error. Cannot find solution, console shows problem in DataUtils.js in 210 line:

var cell = { v: data[R][C] };
      if (cell.v === null) {
        continue;
      }

      var cellRef = _xlsx2.default.utils.encode_cell({ c: C, r: R });
      if (typeof cell.v === "number") {
        cell.t = "n";
      } else if (typeof cell.v === "boolean") {
        cell.t = "b";
      } else if (cell.v instanceof Date) {
        cell.t = "n";
        cell.z = _xlsx2.default.SSF._table[14];
        cell.v = dateToNumber(cell.v);
      } else {
        cell.t = "s";
      }

      ws[cellRef] = cell;
    }
  }

How can I fix it?

Looked for a solution in Google, but nothing connected.

I am using a Paddle payment system with an overlay method. In this case, it renders an iframe in the DOM, then I tap the input within that iframe to enter credit card data, etc. and then close the iframe – I’m back at my site with an enlarged interface.

I did some research and found several solutions, such as:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />.
and
-webkit-text-size-adjust: none !important; touch-action: none !important; – css rule for iframe
But it doesn’t work for me, maybe someone knows the answer?

I am making a Vue.js project with the google books API.

Everything was fine until this error came out of nowhere :

element.setcapture() is deprecated. use element.setpointercapture()
instead For more informations :
https://developer.mozilla.org/fr/docs/Web/API/Element/setPointerCapture

I don’t use a setcapture() explicitely but maybe it is related to

<div v-if="imageLinks" class="BookCard" 
@mouseover="isMobile ? null : vueInfo = true"
@click="isMobile ? vueInfo = !vueInfo : null" 
@mouseleave="isMobile ? null : vueInfo = false">

Even when I re-use the precedent repo, the same occurs. Until 3 days ago I didn’t have any error.

Put this be related to a software update ?

If you want to check the full code, this is my git :
https://github.com/LaurianeGelebart/web_project.git

Thank you

<%= form_with url: search_orders_path, class: 'row mt-3 order-asset', id: 'search' do |f| %>
xxx
<% end %> 

it send a request with turbo_stream format but when I change method to get(view and routes) like this

xxx
<% end %> 

I want to make a form with get method and turbo format

I want to change the image when the user captures the page using html2canvas.

JSFiddle: https://jsfiddle.net/7t3z4yfo/1/

I change the image using img.src = newImageLink as shown in this code.

const newImageLink = "https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8fDA%3D&w=1000&q=80"

html2canvas(document.querySelector("#capture"), {
    allowTaint: true,
  onclone: function (doc, el) {
    const images = doc.querySelectorAll('img')
    images.forEach(img => {
        img.src = newImageLink
    })
  }
}).then(canvas => {
    document.body.appendChild(canvas)
});

The image is changed in Chrome browser, but not in Firefox.

Someone says it’s the Firefox caching issue, according to this answer.

I have tried to add ?${Date.now()} to the end of the new image source, but it does not work.

Could you tell me how to change the image source in Firefox?

In Angular, I have two JSONs, one JSON(A) consist of entire vehicle records whereas other JSON (B) consist of ids. I want to return only match ids records from JSON (A). Below are details

JSON (A)

{
         "id":100,
         "brand":"Tes1",
         "vname":"Testname1",
 },
 {
         "id":200,
         "brand":"Tes2",
         "vname":"Testname2",
 },
{
         "id":300,
         "brand":"Tes3",
         "vname":"Testname3",
 }

JSON (B)

{
         "id":100
 },
{
         "id":300
 },

Expected Output after aaply filter to (A) by (B)

{
         "id":100,
         "brand":"Tes1",
         "vname":"Testname1",
 },
{
         "id":300,
         "brand":"Tes3",
         "vname":"Testname3",
 },

I want to reduce the dimensions of the image obtained from a canvas

const imgData = this.ctx.getImageData(
  0,
  0,
  280,
  280
);
const img_arr = new ImageData(imgData.data, imgData.width, imgData.height);
// ImageData { width: 280, height: 280, data: Uint8ClampedArray(313600) }
console.log(img_arr);

length 313600 = 280 x 280 x 4 (RGBA)

Is there a way to obtain single chanel image directly rather than looping the rgba image array??

var cnt = 0;
for (var i = 0; i < imgData.data.length; i += 4) {
  grayImgData.data[cnt] = imgData.data[i];
cnt+=1;
}

Hi I am using the highcharts as in below image. I want to add an information icon with a tooltip at the bottom right corner of graph(red marekd in scrtenshot).

Can Any one help to add it?

Here is the sandbox link: http://jsfiddle.net/BlackLabel/smkcd39v/

enter image description here

I have tried to achive this using annotations it din’t helped.

So I’m doing a react natives apps that could decode the video of coloured barcodes that generated from Matlab. I’m thinking about extract each frames from the video using ffmpegkit but not sure how and not sure about how to get each pixel colours to be convert back to binaries and convert back to text. What’s the best option to go?

I have tried other libraries but nothing seems able to do the job

let num = 6;
if (num < 13 && num > 1) {
  let base = 1;
  let remaining = num - 1;
  let result = {
    l: num,
    r: remaining
  };
  while (remaining <= 12 && remaining >= 1) {
    let o = {
      l: num,
      r: remaining
    }
    result["r"] = o;
    console.log(result, o);
    remaining--
  }
  console.log(result)
  //return result;
} else {
  throw new Error('Invalid number');
}

I want to loop 6 times and in result, the r key of result must have object inside object. number should be greater that 12 or less than 1, and want to push o inside the r 6 times.
I tried object accessing like object.key or object[key] but now confused

output i want like

{l:num,r:{l:num,r{...so on 6 times}}}

I have some nested data that I am trying to extract from a big object. I’ve parsed the JSON and can find keys in the object no problem but I cannot for the life of me figure out why I can’t use forEach on a key that’s essentially an array of objects.

My data set looks like this (I’ve removed some bits for ease). This is an extract from currentSnapshot (as per below).

errors: [
    { id: 1, count: 0, delta: 0, checks: 395 },
    { id: 2, count: 14, delta: 0, checks: 395 },
    { id: 3, count: 0, delta: 0, checks: 209 },
    { id: 6, count: 17, delta: 0, checks: 75846 },
    { id: 7, count: 7, delta: 0, checks: 71392 },
    { id: 8, count: 231, delta: 1, checks: 8541 }
  ],

My JS then is fairly simple.

const currentSnapshot = data.current_snapshot
const updatedSnapshot = [{}]

currentSnapshot.errors.forEach((array) => {
   array.forEach((obj) => {
      const objId = obj.id.toString()
      const name = semAuditHeadings[objId]

      if (name !== undefined) {
        updatedSnapshot[0][name] = obj.count
      }
   })
})

But I am getting a TypeError: array.forEach is not a function error. Weirdly enough this only started happening after I activated my linter, so not sure whether the linter could impact the build?

This is for a Node (Express) API.

I’ve tried to convert it to an array manually. I’m able to check the length of the array, and it’s accurate, but no luck

I have a table showing courses details with Thymeleaf to call data and I have “Apply” button to apply the course. I want to bring the value in the row from course.html to applycourse.html when clicking the “Apply” button.

course.html

<table id="coursetable" class="coursetable">
    <thead>
        <tr>
            
            <th>Status</th>
            <th>Course Code</th>
            <th>Course No</th>
            <th>Course Name</th>
            <th>Course Date (Time)</th>
            <th>Apply</th>
            
        </tr>
    </thead>
    <tbody>
        <tr  th:each="class : ${inclass}" th:data-row="${class}">
            
            <td th:text="${class.classStatus}"></td>
            <td th:text="${class.courseId.courseCode}" 
            th:style="${class.courseId.courseCode}"></td>
            <td th:text="${class.classNo}"></td>
            <td th:text="${class.courseId.courseTitleEng}"></td>
            <td th:text="${class.classDate}"></td>
            <td><a  href="../CourseRegistration-NotesForOnlineApplication/individual/individualapplication" class="spinner-trigger-button">Apply</a></td>
        </tr>

    </tbody>
</table>

I’m currently working on creating a hamburger styled menu for a website using Vue v2.6.14 and Vuetify v2.6.0. I’m using the component and am using the ‘temporary’ drawer
https://vuetifyjs.com/en/components/navigation-drawers/ . But for some reason, whenever I use it in my code, the entire screen becomes overlayed with the grey color and nothing in the menu works (= nothing is clickable). Can someone help me or figure out why it’s doing this?
Thanks.

I tried to find other resources but no luck. Seems like everyone else is not facing this issue