Blancer.com Tutorials and projects

I’m encountering an error when trying to mint an NFT using a React frontend and the ethers.js library. The specific error I’m getting is:

Error minting NFT: no matching fragment (operation="fragment", info={ "args": [ "ipfs://bafkreiekiirqbrda7nwlrivh62425gspa3mtag6s7oinfh42vletw7wgmi" ], "key": "mintNFT" }, code=UNSUPPORTED_OPERATION, version=6.13.7)

My React component for minting looks like this:

import React, { useState } from 'react';
import { ethers } from 'ethers';
import PhilosophyNFT from '../abis/PhilosophyNFT.json';

const MintPage = () => {
  const [minting, setMinting] = useState(false);
  const [minted, setMinted] = useState(false);
  const [errorMessage, setErrorMessage] = useState("");
  const [successMessage, setSuccessMessage] = useState("");

  const mintNFT = async () => {
    if (minting) return;
    setMinting(true);
    setSuccessMessage("");
    setErrorMessage("");

    try {
      if (window.ethereum) {
        await window.ethereum.request({ method: 'eth_requestAccounts' });
      } else {
        alert("Please install MetaMask!");
        return;
      }

      const provider = new ethers.BrowserProvider(window.ethereum);
      const signer = await provider.getSigner();

      const contract = new ethers.Contract(
        "0x2020Ac5bCE11e66796aA025a88a6d8E27559Da4E", // Deployed contract address
        PhilosophyNFT.abi,
        signer
      );

      const tx = await contract.mintNFT(`ipfs://bafkreiekiirqbrda7nwlrivh62425gspa3mtag6s7oinfh42vletw7wgmi`);
      await tx.wait();
      setMinted(true);
      setSuccessMessage("Minting successful! Your NFT is now minted.");
    } catch (error) {
      setMinted(false);
      setErrorMessage("Error minting NFT: " + error.message);
    } finally {
      setMinting(false);
    }
  };

  return (
    <div className="mint-container">
      <h1>Mint Your Philosophy NFT</h1>
      {errorMessage && <div className="error-message">{errorMessage}</div>}
      {successMessage && <div className="success-message">{successMessage}</div>}
      <button onClick={mintNFT} disabled={minting} className="mint-button">
        {minting ? "Minting..." : minted ? "Minted!" : "Mint NFT"}
      </button>
    </div>
  );
};

export default MintPage;

The error message suggests that the ethers.js library cannot find a matching function signature (mintNFT) in the provided ABI (PhilosophyNFT.json) that accepts the arguments I’m passing (in this case, a single IPFS URI string).

• I have already tried:

• Verifying that the contract address in my React code is correct.

Any help in resolving this error would be greatly appreciated!

I have a [div] that contains a list of paragraphs and a single [img]. I’d like the image to scale itself so that the total content doesn’t overflow the [div]. That is, if there’s more text, then make the image smaller. If the aspect ratio changes, and the text gains vertical height: scale the image.

I know HTML is reflowable; however, this is picture set with a story. So I’m “fighting” the nature of HTML. I don’t want it to overflow.

Is there a way to do this without arcane javascript hacking?

Can anybody help me find a suitable JS framework for tree view and GUI components?
I want to use it inside an HTML host, so it can support mouse events, allow dynamic content updates, and enable easy expansion or collapsing of nodes.
Specifically, I need support for various GUI controls within the tree, such as text boxes, checkboxes, etc. These controls should be updateable via JavaScript, and user interactions (e.g., clicking a checkbox or editing a field) should trigger corresponding JavaScript event notifications.
While I’ve come across some examples on the internet, they lack the simplicity and ease of use inside HTML hosts. The type of tree view I’m referring to is illustrated in the following image.

I’m using DataTables with pagination and checkboxes to allow users to select multiple banners. Upon clicking “Generate Proposal”, I collect all checked rows, generate HTML, and convert it to a PDF using html2pdf.

Issue:
If I select 2 banners on Page 1 and 1 banner on Page 2, only the banner from the current page (Page 2) gets exported in the PDF. The previously selected ones on Page 1 are lost.

    <script>
    jQuery(document).ready(function($) {
        const table = $('#bannerTable').DataTable({
     dom: 'Blfrtip', 
              paging: true,          // Enable pagination
    pageLength: 10,         // Default number of rows per page
             lengthMenu: [ [10, 25, 50, -1], [10, 25, 50, "All"] ],
            buttons: [{
                    extend: 'excelHtml5',
                    title: 'Banner Data',
                    text: '<i class="dashicons dashicons-media-spreadsheet"></i> Excel',
                    className: 'button button-secondary'
                },
                {
                    extend: 'pdfHtml5',
                    title: 'Banner Data',
                    text: '<i class="dashicons dashicons-pdf"></i> PDF',
                    orientation: 'landscape',
                    pageSize: 'A4',
                    className: 'button button-secondary'
                }
            ]
        });
        function populateFilters(columnIndex, selector) {
    const column = table.column(columnIndex);
    const values = new Set();

    column.data().each(function(d) {
        d.split(',').forEach(item => values.add(item.trim()));
    });

    Array.from(values).sort().forEach(function (val) {
        if (val) {
            $(selector).append(`<option value="${val}">${val}</option>`);
        }
    });
}

// Column indices: Media(2), Type(3), Availability(6), District(7), Place(8)
populateFilters(2, '#filterMedia');
populateFilters(3, '#filterType');
populateFilters(6, '#filterAvailability');
populateFilters(7, '#filterDistrict');
// populateFilters(8, '#filterPlace');

$('#filterMedia, #filterType, #filterAvailability, #filterDistrict, #filterPlace').on('change', function () {
    table.draw(); // <-- very important
});

$.fn.dataTable.ext.search.push(function(settings, data) {
    const media = $('#filterMedia').val();
    const type = $('#filterType').val();
    const availability = $('#filterAvailability').val();
    const district = $('#filterDistrict').val();
//     const place = $('#filterPlace').val();

    return (!media || data[2].includes(media)) &&
           (!type || data[3].includes(type)) &&
           (!availability || data[6].includes(availability)) &&
           (!district || data[7].includes(district)) 
//            (!place || data[8].includes(place));
});

        $('#selectAll').on('click', function() {
            $('.selectBanner').prop('checked', this.checked);
        });

        $('#generateProposal').on('click', function() {
            const selectedRows = $('.selectBanner:checked').closest('tr');
            if (selectedRows.length === 0) {
                alert("Please select at least one banner.");
                return;
            }
//             if (selectedRows.length > 4) {
//                 alert("You can only generate proposals for up to 4 banners at a time.");
//                 return;
//             }

            const $button = $(this).prop('disabled', true).text('Generating...');
            const $pdfContainer = $('#pdfContainer').empty().css('display', 'block');
            let page = 1;

            const coverHTML = `
    <div class="pdf-cover-page">
        <img src="/wp-content/plugins/bannerplugin/cover.png" alt="Cover" />
    </div>
`;
            $pdfContainer.append(coverHTML);

            selectedRows.each(function() {
                const row = $(this);
                const title = row.find('td:eq(1)').text();
                const media = row.find('td:eq(2)').text();
                const type = row.find('td:eq(3)').text();
                const size = row.find('td:eq(4)').text();
                const district = row.find('td:eq(7)').text();
                const place = row.find('td:eq(8)').text();
                const imagesArray = row.find('.banner-images img');
                const faciav=row.find('td:eq(9)').text();
//              console.log(faciav,'Hi')
                let images = '';
                imagesArray.each(function() {
                    const src = $(this).attr('src');
                    if (src) {
                        images += `<div class="image-box"><img src="${src}" crossorigin="anonymous" /></div>`;
                    }
                });

                if (images.trim() === '' && !title.trim() && !media.trim() && !type.trim() && !size.trim()) return; // Skip if no content

                const html = `
                <div class="proposal-page">
                    <div class="proposal-header">
                        <h2>${title}, ${district}</h2>
                        <img class="logo" src="/wp-content/plugins/bannerplugin/logo.png" />
                    </div>
                    <div class="proposal-images-row">
                        ${images}
                    </div>
                    <div class="proposal-details">
                        <p><strong>Facia:</strong> ${faciav}</p>
                        <p><strong>Size:</strong> ${size}</p>
                        <p><strong>Type:</strong> ${type}</p>
                    </div>
                    <div class="page-number">Page ${page++}</div>
                </div>
            `;
                $pdfContainer.append(html);
            });

            // Ensure last page doesn't have page break
            $pdfContainer.find('.proposal-page').last().css('page-break-after', 'auto');

            // Remove empty proposal pages if any
            $pdfContainer.find('.proposal-page').each(function() {
                if (!$(this).text().trim()) {
                    $(this).remove(); // Remove empty page
                }
            });

            setTimeout(() => {

                html2pdf().set({
                    margin: [0, 0, 0, 0],
                    filename: `banner-proposal-${Date.now()}.pdf`,
                    image: {
                        type: 'jpeg',
                        quality: 0.98
                    },
                    html2canvas: {
                        scale: 2,
                        useCORS: true,
                        allowTaint: false,
                        logging: true,
                        scrollX: 0,
                        scrollY: 0
                    },
                    jsPDF: {
                        unit: 'mm',
                        format: 'a4',
                        orientation: 'portrait',
                        putOnlyUsedFonts: true
                    }
                }).from($pdfContainer[0]).save().then(() => {
                    $pdfContainer.css('display', 'none');
                    $button.prop('disabled', false).text('Create Proposal PDF');
                });
            }, 500);
        });
    });
</script>

Im having issues trying to get the following code to work.

I have temporarily set the randomNumber const to 0.99 for testing.
When I click the “Rock” button, the console log displays the 0.99 value in the const randomNumber, but the if else statments only display “paper”.

It should be displaying “Scissors”.

Please could someone point out where im going wrong?
Thanks!

<!DOCTYPE html>
<html>
  <head>
    <title>Rock Paper Scissors</title>
    <style>
     
    </style>
  </head>

  <body>
    <P>Rock Paper Scissors</P>
    
    <button onclick="
      const randomNumber = 0.99    // Math.random();
      console.log (randomNumber);

      if (randomNumber >= 0 && randomNumber < 0.33 ) 
        { console.log ('rock'); } 

      else if (randomNumber => 0.33 && randomNumber < 0.66 ) 
        { console.log ('Paper'); }

      else if (randomNumber >= 0.66 && randomNumber < 1.0 )
        { console.log ('scissors') }"
    
    >Rock</button>

    <button >Paper</button>
    
    <button>Scissors</button>
    <script>
   
    </script>

  </body>

</html>

strong text

I am trying to request a WASM function within a JS Worker. I am stuck with it because nothing works in the way I have tried, but also I cannot see any error. Let me explain what I am doing.

First, I have a function add in my WASM library mywasm (for test, it is written in Rust and built with wasm-pack). As the result, I have the files:

• package.json
• mywasm.js
• mywasm_bg.js
• mywasm_bg.wasm
• …some other files

I installed mywasm with npm i path/to/mywasm.

Second, I added these lines to my App.vue:

<script setup>
...

import TestWorker from './test.worker?worker'

onMounted(async () => {
  // // Working example of add-function from mywasm
  // const wasm = await import('mywasm')
  // const c = wasm.add(-5, 12)
  // console.log(c)  // 7

  // Worker test
  const worker = new TestWorker()
  worker.postMessage({a: -5, b: 12})
})
</script>

...

Third, here is my test.worker.js file:

onmessage = event => {
  const c = event.data.a + event.data.b
  console.log(c)
}

This works totally fine, the number 7 is written to the console from the worker.

After that I am trying to call add function within the worker so I wrote this code. It should work exactly the same way (prints 7 into the console) but using add function from mywasm to sum the numbers.

import wasm from './mywams_bg.wasm'

onmessage = event => {
  WebAssembly.instantiateStreaming(fetch(wasm))
    .then(results => {
      const c = results.instance.exports.add(event.data.a, event.data.b)
      console.log(c)
    })
}

After run, I do not see any error or the correct 7 in the console. Likely, some errors are not tracked in JS workers. How do I rewrite my test.worker.js to make it work correctly?

My vite.config.js:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import wasm from "vite-plugin-wasm"

// https://vite.dev/config/
export default defineConfig({
  build: {
    target: 'esnext',
  },
  plugins: [
    vue(),
    vueDevTools(),
    wasm(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        quietDeps: true
      }
    }
  },
})

The versions:

• node: v18.20.4
• npm: 10.7.0
• vue: 3.5.13
• vite-plugin-wasm: 3.4.1
• vite: 5.4.11

The code of mywasm:

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn add(a: i32, b: i32) -> i32 {
    a + b
}

The build command: RUSTFLAGS='--cfg getrandom_backend="wasm_js"' wasm-pack build --release --target bundler --out-dir mywasm-pkg

In this code:

$.ajax({
    url: "./Home/ClearFilter",
    method: "POST",
    data: { id: id },
    success: function (response) {
        if (response.success) {
            var orders = response.orders;
            /// the orders have values

            content = $('table.toggle-column-table tbody');
            content.empty();
            content.text('');
            document.getElementsByClassName("toggle-column-table").innerHTML = "";
            document.getElementsByClassName("toggle-column-table").innerText = "";
            /// on html I don't see any changes.

            for (let i = 0; i < orders.length; i++) {
                let item = orders[i];
                let row = '<tr>' +
                    '<td>' + item.id + '</td>' +
                    '<td>' + item.status + '</td></tr>';
                document.getElementsByClassName("toggle-column-table").innerHTML += row;
            }
        }
    },
    error: function (error) {
        console.log(error);
    }
});

I don’t know what I should do to clear and add html code, I even used this code:

var content = $('table.toggle-column-table tbody');
content.empty(); /// or content.html('');
for (let i = 0; i < orders.length; i++) {
  let item = orders[i];
  let tr = '<tr>' +
              '<td>' + item.id + '</td>' +
              '<td>' + item.status + '</td></tr>';
  let row = $(tr);
  content.append(row); /// or content.html(tr);
}

Again nothing happened. Do you have any idea why clearing and writing html doesn’t work?

I create a zip file containing images (with their urls extracted server-side via classic asp code) and it works fine.
I was inspired by this excellent example [https://jsfiddle.net/jaitsujin/zrdgsjht/] and implemented it with a progress bar and a message that the ZIP file had been created.
This is the final code that works perfectly and I hope it can be useful for someone

        <html> 
        <body>
        <link href="css/jquery.pnotify.default.css" media="all" rel="stylesheet" type="text/css" />
        <link href="css/jquery.pnotify.default.icons.css" rel="stylesheet" type="text/css" />
        <link href="css/hint.css" rel="stylesheet" type="text/css" />
        <link href='css/nprogress.css' rel='stylesheet' />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip-utils/0.0.2/jszip-utils.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
        <script src="js/nprogress.js"></script> <script type="text/javascript" src="js/jquery.pnotify.js"></script>
    <div class="image-container">
    <table width="200" border="0" cellpadding="1" cellspacing="1">
    <tr>
       <td align="left" valign="middle"><a data-hint="Scarica lo ZIP con le immagini in Alta Risoluzione" href='#'><img class="download" src="img/zip-icon.png" onclick="generateZIP()" /></a></td>
       <td align="left" valign="middle"><a data-hint="Scarica lo ZIP con le immagini in Full HD" href='#'><img class="download" src="img/zip-icon.png" onclick="generateZIP2()" /></a></td>
    </tr>
    </table>
    </div>
    <div class="hide" id="progressbar"></div>
<div class="pdf_link hide"><a href="public/<%Response.Write("" & str_filename & "")%>">Link</a></div>
<div class="gallery">
...
<img class="thumb" src="images/<%=(rs_collezione.Fields.Item("link").Value)%>/thumbs/<%=(rs_collezione.Fields.Item("nome").Value)%>" alt="images/<%=(rs_collezione.Fields.Item("link").Value)%>/fhd/<%=(rs_collezione.Fields.Item("nome").Value)%>" href="images/<%=(rs_collezione.Fields.Item("link").Value)%>/ar/<%=(rs_collezione.Fields.Item("img").Value)%>"><br>
...
</div>
<script>
var links = [];
var links2 = [];

$('.gallery').on('click', '.pdf_link', function () {
  links.push($(this).attr('href'));
  console.log(links);
  });

$('.gallery').on('click', '.thumb', function () {
  $(this).removeClass().addClass('thumbChecked');
  $(this).css("border", "2px solid #c32032");
  links.push($(this).attr('href'));
  links2.push($(this).attr('alt'));
  console.log(links);
  console.log(links2);
  if (links.length != 0) {
    $('.download').css("display", "block");
  }
});

$('.gallery').on('click', '.thumbChecked', function () {
  $(this).removeClass().addClass('thumb');
  $(this).css("border", "2px solid white");
  var itemtoRemove = $(this).attr('href');
  var itemtoRemove = $(this).attr('alt');
  links.splice($.inArray(itemtoRemove, links), 1);
  links2.splice($.inArray(itemtoRemove, links2), 1);
  console.log(links);
  console.log(links2);
  if (links.length == 0) {
    $('.download').css("display", "none");
    $("#result")
        .removeClass()
        .text("");
  }
});

function generateZIP() {
  NProgress.start();
  console.log('TEST');
  var zip = new JSZip();
  var count = 0;
  var zipFilename = "LB_Images_AR.zip";

  links.forEach(function (url, i) {
    var filename = links[i];
    filename = filename.replace("https://www.turismofvgfoto.it/images/","").replace("ar/","");
    // loading a file and add it in a zip file
    JSZipUtils.getBinaryContent(url, function (err, data) {
      if (err) {
        throw err; // or handle the error
      }
      zip.file(filename, data, { binary: true });
      count++;
      if (count == links.length) {
        zip.generateAsync({ type: 'blob' }).then(function (content) {
          saveAs(content, zipFilename);
          NProgress.done();
          pnotify_zip ();
        });
      }
    });
  });
}

function generateZIP2() {
  NProgress.start();
  console.log('TEST');
  var zip = new JSZip();
  var count = 0;
  var zipFilename = "LB_Images_FHD.zip";

  links2.forEach(function (url, i) {
    var filename = links2[i];
    filename = filename.replace("https://www.turismofvgfoto.it/images/","").replace("fhd/","");
    // loading a file and add it in a zip file
    JSZipUtils.getBinaryContent(url, function (err, data) {
      if (err) {
        throw err; // or handle the error
      }
      zip.file(filename, data, { binary: true });
      count++;
      if (count == links2.length) {
        zip.generateAsync({ type: 'blob' }).then(function (content) {
          saveAs(content, zipFilename);
          NProgress.done();
          pnotify_zip ();
        });
      }
    });
  });
}
  </script>
<script type="text/javascript">
/**
 * Reset the message.
 */
function resetMessage () {
    $("#result")
        .removeClass()
        .text("");
}
function pnotify_zip () {
$.pnotify.defaults.history = false;
$.pnotify({
title: 'CREAZIONE ZIP',
text: ("Immagini aggiunte con successo al file ZIP appena creato!"),
type: 'success'});
}
  </script>

</body>
</html>

Now I need to add a pdf file, already present in the code above inside body

<div class="pdf_link hide"><a class="pdf_link" href="public/<%Response.Write("" & str_filename & "")%>">Link</a></div>

to the zip ile containing the images. Any idea?
I tried this code

... 

**var pdf_file = console.log($('.pdf_link a').attr('href'));**

...
zip.file(filename, data, { binary: true });
      **var folder = zip.folder("liberatoria");
      folder.file(pdf_file);**
      count++;
      if (count == links2.length) {
        zip.generateAsync({ type: 'blob' }).then(function (content) {
          saveAs(content, zipFilename);
          NProgress.done();
          pnotify_zip ();
        });
      }
    });
  });
}

but it doesn’t work, it creates the new folder without any file inside…
Thanks in advance for any help!

I am trying to add a group of HTML elements dynamically to the document, and reset and refresh name and id attributes each time when removing or adding the elements.

When I use document.getElementsByClassName it just selects the ones that already existed in the document and does not select new elements that are added or removed dynamically after page load.

Also I can’t change and rearrange id and name attributes of all elements. For example, element1 id=HonorTitle0, element2 id=HonorTitle1, element3 id=HonorTitle2` and so on.

// Add row Honor
var rowHonor = 0;
$(document).on("click", "#Honoradd-row", function() {
  var new_rowHonor = '<tr id="row0" class="row0Class">' +
    '<td>' +
    '<input type="text" class="HonorTiltle form-control my-colorpicker1 colorpicker-element" id="HonorTiltle' + rowHonor + '" name="HonorTiltle' + rowHonor + '">' +
    '</td>' +
    '<td>' +
    '<input type="text" class="HonorAnistitude form-control my-colorpicker1 colorpicker-element" id="HonorAnistitude' + rowHonor + '" name="HonorAnistitude' + rowHonor + '">' +
    '</td>' +
    '<td>' +
    '<button class="Honordelete-row btn btn-danger mdi mdi-delete-forever" type="button" value="-" style="padding:1px;font-size:1.3rem;">Delete</button>' +
    '</td>' +
    '</tr>';

  $('#Honortest-table').append(new_rowHonor);
  rowHonor++;
  document.getElementById('HonorRowValue').value = rowHonor;
  RefreshHonorList();
  return false;
});

// Remove row Honor
$(document).on("click", ".Honordelete-row", function() {
  if (rowHonor > 0) {
    $(this).closest('tr').remove();
    rowHonor--;
    document.getElementById('HonorRowValue').value = rowHonor;
    RefreshHonorList();
  }
  return false;
});

function RefreshHonorList() {
  var str1 = str2 = "";
  var list1, list2, index;
  row = 0;
  list1 = document.getElementsByClassName("HonorTitle");
  list2 = document.getElementsByClassName("HonorAnistitude");
  for (index = 0; index < list1.length; ++index) {
    alert(index);
    str1 = "HonorTitle" + index;
    str2 = "HonorAnistitude" + index;
    list1[index].setAttribute('name', str1);
    list1[index].setAttribute('id', str1);
    list2[index].setAttribute('name', str2);
    list2[index].setAttribute('id', str2);
    row++;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<table id="Honortest-table" class="table table-condensed">
  <thead>
    <tr style="font-size:0.8rem;">
      <th>Title</th>
      <th>Anistitude</th>
    </tr>
  </thead>
  <tbody id="test-body">
    <tr id="row0" class="row0Class">
      <td>
        <input type="text" class="HonorTitle form-control my-colorpicker1 colorpicker-element" id="HonorTiltle@($"{counter}")" name="HonorTiltle1" value="Title 1">
      </td>
      <td>
        <input type="text" class="HonorAnistitude form-control my-colorpicker1 colorpicker-element" id="HonorAnistitude1" name="HonorAnistitude1" value="Colour 1">
      </td>
      <td>
        <button class="Honordelete-row btn btn-danger mdi mdi-delete-forever" type="button" value="-" style="padding:1px;font-size:1.3rem;">Delete</button>
      </td>
    </tr>
  </tbody>
</table>
<div class="row">
     <div class="col-1">
         <button id='Honoradd-row' class='btn btn-info mdi mdi-plus' type='button' value='+' style="padding:1px;font-size:1.3rem;" />
         <input id="HonorRowValue" name="HonorRowValue" type="hidden" value="0">
     </div>
 </div>

I’m working on a 3D mesh viewer using .obj and .mtl files, but I’m running into performance issues — the browser takes a long time to load and render the mesh files, and it’s using a lot of my local PC’s resources which is logical. I’m wondering if using a server ( Remote Desktop) + nodejs +Server-Side Rendering (SSR) or some form of server-side processing could be a solution. Ideally, I’d like the server to handle all the heavy lifting — parsing, simplifying, and converting the mesh files (maybe to .glb), and then send a lightweight version to the client for viewing. Has anyone implemented something like this? Is SSR or another architecture better suited for this kind of task?

i didn’t try anything for the moment i just read some articles about this subject