Using Mockoon Instead of MockAPI – POST Request Not Working

I’m following a tutorial that uses MockAPI to create a mock backend. However, since MockAPI now limits the number of resources in free projects (the tutorial was recorded before this limitation), I switched to Mockoon instead. Unfortunately, my POST requests to the Mockoon server are failing, and I’m not sure why.

When using MockAPI, my POST request works fine:

class User {
    user_id = '';
    username = '';
    email = '';
    api_url = 'https://679fe3e324322f8329c4d911.mockapi.io/api/v1';

    create() {
        let data = {
            username: this.username,
            email: this.email,
            password: this.password
        };        

        data = JSON.stringify(data);

        fetch(this.api_url + '/user', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: data
        })
        .then(response => response.json())
        .then(data => {
            console.log('User created');
        })
        .catch(error => console.error(error));
    } 
}

However, when I switch to Mockoon, it does not work:

class User {
    user_id = '';
    username = '';
    email = '';
    api_url = 'http://localhost:1269';

    create() {
        let data = {
            username: this.username,
            email: this.email,
            password: this.password
        };        

        data = JSON.stringify(data);

        fetch(this.api_url + '/users', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: data
        })
        .then(response => response.json())
        .then(data => {
            console.log('User created');
        })
        .catch(error => console.error(error));
    } 
}

With MockAPI, my POST request works correctly, but when I switch to Mockoon, I get the following errors in the browser console:

  • POST http://localhost:1269//users 404 (Not Found)
  • Uncaught (in promise) SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

What I’ve Tried:

  • Double-checked that Mockoon is running on port 1269.
  • Verified that the endpoint /users exists in my Mockoon API configuration.
  • Tried changing /users to /user, /api/users, and other variations.
  • Checked the Mockoon logs to see if the request is reaching the mock server.

Possible Causes (Need Help!):

  • Is there a specific way Mockoon expects API endpoints to be set up?
  • Does Mockoon handle POST requests differently than MockAPI?
  • How do I define response structures in Mockoon similar to MockAPI’s automatic mock data?

Any help would be greatly appreciated!

Can i disappear the save report button from action menu in interactive report in oracle apex?

I have an interactive gride page. i want to hide SAVE button in action menu to prevent user to save report as default or primary report
i have tried to do that using page item be hidden contain value = Y and make dynamic action on it execute JavaScript code. this is the code

function(config) {
  config.initActions = function( actions ) {
    $(() => {
      if ( $v("P3_NEW") === "Y" ) {
        apex.region("todo").widget().interactiveGrid("getActions").hide("save-report");
        apex.region("todo").widget().interactiveGrid("getActions").hide("show-save-report-as-dialog");
        apex.region("todo").widget().interactiveGrid("getActions").hide("show-edit-report-dialog");
      }
    });
  }
  return config;
}```
Can anyone help me to do this in interactive gride and also in interactive report?

VS Code Extension API – bizzare javascript behaviour

I have a normal js file for vscode extension api. When debugging, js seems to be broken (I know, impossible). Here is my code …

context.subscriptions.push(
  vscode.commands.registerCommand("stickyBookmarks.toggleBookmark", 
    () => {
      const textEditor = vscode.window.activeTextEditor;
      if (!textEditor) return;

      const document   = textEditor.document;
      const lineNum    = document.lineCount-1;

      const textLine   = document.lineAt(lineNum-2);
      const lineRange  = textLine.range;

      const rgtChrIdx  = lineRange.end.character;
      const lftChrIdx  = rgtChrIdx-4;

      // debugger breakpoint here
      const lftPos     = new vscode.Position(lineNum, lftChrIdx);
      const rgtPos     = new vscode.Position(lineNum, rgtChrIdx);
      const chrRange   = new vscode.Range(lftPos, rgtPos);
      const text       = document.getText(chrRange);

      if(text === "/**/") textEditor.edit(
        editBuilder => editBuilder.replace(chrRange, ""));
    }
  )
);

At the breakpoint rgtChrIdx == 14 and lftChrIdx == 0. I have tried a breakpoint on every line. Does anyone have any idea what is going on?

How to Update Node Positions in Drawflow After Applying Dagre Layout?

I’m working on a diagram editor built with Drawflow, and I’m experimenting with Dagre to automatically arrange the graph.

I’m successfully computing new positions for the nodes using Dagre, but when I update Drawflow’s node positions (node.pos_x = pos.x; node.pos_y = pos.y;), the changes are not reflected on screen.

I’ve searched through Drawflow’s documentation and source code, but I can’t find a way to force an update to the display so that the nodes visually move to their new positions, while keeping their connections.

Here’s my current function:

function applyDagreLayout(drawflow) {
  const nodes = drawflow.drawflow.drawflow.Home.data;
  const graph = new dagre.graphlib.Graph();
  graph.setGraph({ rankdir: 'LR', nodesep: 50, edgesep: 20, ranksep: 80 });

  // Add nodes to Dagre
  for (let key in nodes) {
    graph.setNode(key, { width: 100, height: 100 });
  }

  // Add edges to Dagre
  for (let key in nodes) {
    const node = nodes[key];
    if (node.inputs) {
      for (let input in node.inputs) {
        const sourceNode = input.node;
        if (sourceNode) {
          graph.setEdge(sourceNode, key);
        }
      }
    }
  }

  // Compute new layout
  dagre.layout(graph);

  // Update node positions in Drawflow
  for (let key in nodes) {
    const node = nodes[key];
    const pos = graph.node(key);

    node.pos_x = pos.x;
    node.pos_y = pos.y;

    console.log(`Updated node ${key} position to:`, node.pos_x, node.pos_y);
    
    // Attempted fixes (None of these work so far)
    // drawflow.moveNode(key, pos.x, pos.y); // Is what I'd like to do ideally, but it doesn't exist
    // drawflow.removeNodeId(key);
    // const newNode = drawflow.addNode({ ...node }); // Deleting the node and creating a new one with the same data might work, but then I'll have to create its connections again, and it can introduce other problems as well since the node's id will technically not be the same, I'd rather avoid this and do it the 'proper' way, if such a thing exists in this library
  }

  // Tried reloading the editor, but this caused there to be duplicate nodes (the new nodes didn't have any connections)
  // drawflow.load();
}

What I’ve Tried:

  • Directly modifying node.pos_x and `node.pos_y.
  • Searching for a function like moveNode(), update(), or refresh() in Drawflow.
  • Removing and re-adding nodes using removeNodeId() and addNode().
  • Calling drawflow.render() to force a redraw.

Question:

How can I update the Drawflow canvas to reflect the new node positions after applying the Dagre layout?

JQuery function does not work after asyncpostback

I am trying to create a JQuery DatePicker Asp.Net ServerControl

To atach a datepicker to a TextBox I am creating a JQuery line of code from c# code behind and output it directly to the webpage using ClientScript.RegisterStartupScript()

So if for example there are 3 instance of the DatePicker control with ids: dpfa,dpar,dpen
then the script being rendered will be:

<script type="text/javascript">
//<![CDATA[
;jQuery(function($){$('#dpfa').datepicker({dateFormat:'yy/mm/dd',regional:'fa'}).change(function(){validateDatepicker(this,1);});});
;jQuery(function($){$('#dpar').datepicker({dateFormat:'yy/mm/dd',regional:'ar'}).change(function(){validateDatepicker(this,1);});});
;jQuery(function($){$('#dpen').datepicker({dateFormat:'yy/mm/dd',regional:''}).change(function(){validateDatepicker(this,1);});});
//]]>
</script>

Everything works fine except for when I put the datepickers inside an asp.net updatepanel and make an ajax call after the asyncpostback the JQuery functions do not work and the datepickers are not attached to the textboxes.

This is what I tried so far:

I tried to put the scripts on the onclick event of the DatePicker (wich extends asp.net TextBox control) as follows:

1- When I do it this way:

onclick=";jQuery(function($){$('#dpfa').datepicker({dateFormat:'yy/mm/dd',regional:'fa'}).change(function(){validateDatepicker(this,1);});});"

the datepicker is attached to the textbox but it does not popup and I need to leave the control and click on it again for it to show.

2- I tried to debug some javascript when I came up to the following script that attaches the datepicker to the textbox and shows it on the first click but as you can see an alert will also popup wich is not a good thing and should not happen:

onclick=";jQuery(function($){$('#dpfa').datepicker({dateFormat:'yy/mm/dd',regional:'fa'}).change(function(){validateDatepicker(this,1);});});alert('hi');"

What is the alert causing? and can it’s behavior be resambled by calling another dummy function but without showing any popups?

My main question: How can I modify the above jQuery functions to work after async postbacks?

random delays in services [closed]

I’m working on a model of high-rise building activities where services represent typical floor operations. I’d like to introduce random delays in each activity, affecting roughly one in five floors. the no.of floors in the building is 100. Can you please help with suggestions on how best to implement this?

i have tried file:///C:/Program%20Files/AnyLogic%208.8%20Personal%20Learning%20Edition/plugins/com.anylogic.ui_8.8.6.202312140457/resources/help/en/anylogic/stochastic/random-number-generator.html#random-number-generator, but did understand how to use this

What queues actually exist in the event loop

Most sources say that there are two queues in the Event Loop: microtask queue and macrotask queue. But also some sources highlight the third queue (callbacks generated by requestAnimationFrame) and the fourth (callbacks generated by requestIdleCallback). How many queues are there actually, or is this just an implementation detail that may differ from browser to browser?

Create array of values from a dictionary of array of objects filtered by property

I have a dictionary where key is string and value is array of objects:

objDict = {
  dataset1: [ { id: 1, count: 6 }, { id: 2, count: 7 }, { id: 3, count: 8 } ],
  dataset2: [ { id: 1, count: 5 }, { id: 2, count: 4 }, { id: 3, count: 3 } ]
}

I need to filter objects with specific id and create an array of count values: for id = 2 it would be countArray = [ 7, 4 ].
I suppose I should first use Object.values(objDict) but I don’t know what to do afterwards.

JS/NodeJS module exporting class from nested directory

I’m new to writing custom JS modules even if I use it occasionally for both work and personal project.

At the moment I managed to write a module (let’s call it my-module) that export a default class (DefaultClass), i.e. in my dist/index.js I have

// dist/index.js
import DefaultClass from "./default-class";

export {DefaultClass};

To test it correctly I set up a local Verdaccio registry, publish my module to it and then import it in a second test project.
In this test project I can use DefaultClass as follow:

import { DefaultClass } from "my-module";

const instance = new DefaultCLass;

So far so good.

I then added some other classes that I nested in dist/subfolder/ with the related dist/subfolder/index.js that exports them:

// dist/subfolder/index.js
import SubClassA from "./subclass-a";
import SubClassB from "./subclass-b";
import SubClassC from "./subclass-c";

export {
    SubClassA,
    SubClassB,
    SubClassC,
};

What I’m trying o do is to be able to import those classes in the test project directly/explicitly (is this the right word?) as follows:

import { SubClassA } from "my-module/subclass";

Just to be even more clear, the desired behaviour is the same as the AWS CDK that lets import only the desired submodule: e.g. for the Amplify module the given example is
import * as amplify from 'aws-cdk-lib/aws-amplify';

It may be not relevant, but for the sake of being as clear as possible, my module source code is in src/ and then I use esbuild with a config file to build both src/index.js and src/subfolder/index.js and output the boundles to dist/.

At the moment, I get the error

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/path/to//test-project/node_modules/my-module/subfolder' imported from /path/to/test-project/index.mjs

I’m having trouble changing the audio source of an audio player I found here on StackOverflow

So, I found an audio player here on StackOverflow that uses youtube links, and I wanted to use it on my website so I didn’t need to put any audio files on it (the server that I use don’t handle audio and video files in their free version). It was made by Max Zheng, the code can be found here: How to play only the audio of a Youtube video using HTML 5?; and is composed of a css code, a javascript code, and a html code.

The idea I had was to have a list of youtube links on the code, for the user to change the song by clicking on the “next” and “previous” buttons

Here is the code I have made so far, with the buttons, links and the audio player included:

<html>
<head>
  <meta charset="UTF-8">
    <link rel="stylesheet" >
    <script src="https://www.youtube.com/iframe_api"></script>

    <script>
      function onPlayerReady(event) {
          document.getElementById(ui.play).addEventListener('click', togglePlay);
          timeupdater = setInterval(initProgressBar, 100);
      }
      
      function onPlayerStateChange(event) {
          if (event.data == YT.PlayerState.ENDED) {
              document.getElementById(ui.play).classList.remove('pause');
              document.getElementById(ui.percentage).style.width = 0;
              document.getElementById(ui.currentTime).innerHTML = '00:00';
              player.seekTo(0, false);//change here the false to true if you want your audio to loop automatically
          }
      }
      
      let ui = {
          play: 'playAudio',
          audio: 'audio',
          percentage: 'percentage',
          seekObj: 'seekObj',
          currentTime: 'currentTime'
      };
      
      function togglePlay() {
          if (player.getPlayerState() === 1) {
              player.pauseVideo();
              document.getElementById(ui.play).classList.remove('pause');
          } else {
              player.playVideo();
              document.getElementById(ui.play).classList.add('pause');
          }
      }
              
      function calculatePercentPlayed() {
          let percentage = (player.getCurrentTime() / player.getDuration()).toFixed(2) * 100;
          document.getElementById(ui.percentage).style.width = `${percentage}%`;
      }
      
      function calculateCurrentValue(currentTime) {
          const currentMinute = parseInt(currentTime / 60) % 60;
          const currentSecondsLong = currentTime % 60;
          const currentSeconds = currentSecondsLong.toFixed();
          const currentTimeFormatted = `${currentMinute < 10 ? `0${currentMinute}` : currentMinute}:${
          currentSeconds < 10 ? `0${currentSeconds}` : currentSeconds
          }`;
          
          return currentTimeFormatted;
      }
      
      function initProgressBar() {
          const currentTime = calculateCurrentValue(player.getCurrentTime());
          document.getElementById(ui.currentTime).innerHTML = currentTime;
          document.getElementById(ui.seekObj).addEventListener('click', seek);
      
          function seek(e) {
              const percent = e.offsetX / this.offsetWidth;
              player.seekTo(percent * player.getDuration());
          }
          
          calculatePercentPlayed();
      }
      
      var a = "jLdAuGarfM0"; //infinita highway
      
      var b = "M7lc1UVf-VE"; 
      
      var c = "glbmprjG3zw"; //hai yorokonde
      
      var d = "p6NzVd3pGdE"; //instambul
      
      var e = "2rHRztFGOm8";
      
      let teste = "37nwLhIA1zs";
      
      let shitpost = "i6l8MFdTaPE";
      
      let techto = e;
      

        function onYouTubeIframeAPIReady() {
            player = new YT.Player('player', {
                height: '360',
                width: '640',
                videoId: id_video,
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
        }
        
        
    </script>
  </head>
  <body>
    <!--Youtube-->
    <div id="player" style="display: none; visibility: hidden;"></div>
    
    <!--Player-->
    <p id="nome_musica"></p>
    
    <div class="audio-player">
        <div class="player-controls">
            <div id="radioIcon"></div>
            <button id="playAudio"></button>
            <div id="seekObjContainer">
                <div id="seekObj">
                    <div id="percentage"></div>
                </div>
            </div>
            <p><small id="currentTime">00:00</small></p>
        </div>
    </div>
    <button id="tras" >Previous Song</button>
    <button id="frente" >Next Song</button>
    <button id="bug"> FUNCIONE DESGRAÇA</button>
    <p>Song number</p>
    <p id="x"> </p>
    <script>
      var xe = 1;
      //var id_video = "jLdAuGarfM0";
      //var id_video = a;
      var inicio = checkin(xe);
      
      document.getElementById("tras").onclick = function() {bottras()};
      document.getElementById("frente").onclick = function()  {botfrente()};
      //document.getElementById("bug").onclick = function()  {onYouTubeIframeAPIReady()};  <----- NÃO
      
      function botfrente(){
        yg = xe + 1;
        if (yg >=4){
          var yg = 1;
          checkin(yg);
          return xe = yg;
        }else{
          checkin(yg);
          return xe = yg;
        }
        document.getElementById("x").innerHTML = xe;
      }
      
      function bottras(){
        yg = xe - 1;
        if (yg <= 0) {
          var yg = 3;
          checkin(yg);
          return xe = yg;
        }else{
          checkin(yg);
          return xe = yg;
        }
      }
      
      function checkin(z){
        document.getElementById("x").innerHTML = z;
        if (z == 1) {
          document.getElementById("nome_musica").innerHTML = "Engenheiros do Hawaii - Infinita Highway (ao vivo)";
      //substitute the text above with the name of the song
          id_video = a;
      //substitute the variable with your song
        }else if (z == 2){
          document.getElementById("nome_musica").innerHTML = "They Might Be Giants - Istambul(not Constantinople)";
          id_video = d;
        }else if (z == 3){
          document.getElementById("nome_musica").innerHTML = "Kocchi no Kento - Hai Yorokonde";
          id_video = c;
        }else{
          document.getElementById("error").innerHTML = "error in the system"
        }
      }
      
        
        
      
    </script>
  </body>
</html>

The links are working, and the buttons are working as well, but they don’t change the source of the song after being determined when the code starts working.
Can someone please help me determine how do I change the audio source after the code starts?

How to burn erc20 token with web3js?

I am trying to burn erc20 token and get this error:
ContractExecutionError: Error happened while trying to execute a function inside a smart contract
at Function._isReverted (/Users/giangtrinh/Desktop/spectre-bot/node_modules/web3-core/lib/commonjs/web3_request_manager.js:328:19)
at Web3RequestManager._processJsonRpcResponse (/Users/giangtrinh/Desktop/spectre-bot/node_modules/web3-core/lib/commonjs/web3_request_manager.js:280:42)
at Web3RequestManager. (/Users/giangtrinh/Desktop/spectre-bot/node_modules/web3-core/lib/commonjs/web3_request_manager.js:167:29)
at Generator.next ()
at fulfilled (/Users/giangtrinh/Desktop/spectre-bot/node_modules/web3-core/lib/commonjs/web3_request_manager.js:21:58)
at processTicksAndRejections (node:internal/process/task_queues:96:5) {
cause: [Eip838ExecutionError: execution reverted] {
cause: undefined,
code: -32000,
receipt: undefined,
data: undefined
},
code: 310,
receipt: undefined
}

Here is my code:

const tokenContract = new web3.eth.Contract(ERC20_ABI, tokenInfo.address, {
    from: account,
    gasPrice: '20000000000'
  });
tokenContract.methods
    .burn(stringAmount)
    .send({
      from: account,
      chainId: chainId,
      value: 0,
      gasPrice,
    })
    .on("transactionHash", (hash) => {
      console.log('hash', hash);
    })

Some one help me plsssss !!!

Tailwind css flex responsive

I have a problem using Flex in Tailwind CSS. When I use the flex class with flex-row, I want to make it responsive by using md:flex-col, lg:flex-col, and sm:flex-col. However, only one class is taking effect imidiately instead of the base flex-row class or then instead of reduce window.

For example, when I reduce the window size using the inspector, md:flex-col does not work as expected. Can you help me fix this issue?

This is my code

import React from "react";

const Resume = () => {
  return (
    <div className="flex flex-row flex-wrap gap-4 p-4 bg-gray-200 md:flex-col h-screen w-screen">
      <div className="p-4 bg-blue-500 text-white">Item 1</div>
      <div className="p-4 bg-green-500 text-white">Item 2</div>
      <div className="p-4 bg-red-500 text-white">Item 3</div>
    </div>
  );
};

export default Resume;

I want responsive when I reduce window then md:flex-col work not immediately effect on the screen.

Im getting error while deploying my react Vite app (Only shows white screen )

i tried deploying my app on vercel but the app only shows the blank white screen .

Is something wrong with my router configuration ?
its not showing my app.

when i run with npm run dev it shows me the correct ui ,
i also tried with npm run buld and previewed with npm run preview it shows me everything correctly .

but when i diploy it only shows me the white screen.

My vite.config.js

import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [tailwindcss(), react()],
  base: "/",
  build: {
    outDir: "dist",
    assetsDir: "assets",
  },
});

also i have included homepage in package.json

{
  "name": "smartkyc-admin",
  "homepage": "https://projects.vercel.app/",
   ....
   ....
}

This is what my folder structure looks

My vercel.json file

{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

My App.jsx file for reference

import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
import { Toaster } from "react-hot-toast";
import Dashboard from "./pages/Dashboard";
import Login from "./pages/Login";
import Signup from "./pages/Signup";
import Layout from "./components/Layout";
import { AuthProvider, useAuth } from "./contexts/AuthContext";
import PropTypes from "prop-types";
import "./index.css";

function PrivateRoute({ children }) {
  const { user } = useAuth();

  if (!user) {
    return <Navigate to="/login" replace />;
  }

  return children;
}

PrivateRoute.propTypes = {
  children: PropTypes.node.isRequired,
};

function App() {
  return (
    <AuthProvider>
      <BrowserRouter basename="/">
        <Toaster position="top-right" />
        <Routes>
          <Route path="/login" element={<Login />} />
          <Route path="/signup" element={<Signup />} />
          <Route
            path="/*"
            element={
              <PrivateRoute>
                <Layout>
                  <Routes>
                    <Route path="/" element={<Dashboard />} />
                  </Routes>
                </Layout>
              </PrivateRoute>
            }
          />
        </Routes>
      </BrowserRouter>
    </AuthProvider>
  );
}

export default App;

Im getting error while deploying my react Vite app

i tried deploying my app on vercel but the app only shows the blank white screen ,
also i tried on netlify its the same issue .

when i run with npm run dev it shows me the correct ui ,

i also tried with npm run buld and previewed with npm run preview it shows me everything correctly .

My vite.config.js

import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [tailwindcss(), react()],
  base: "/",
  build: {
    outDir: "dist",
    assetsDir: "assets",
  },
});

also i have included homepage in package.json

{
  "name": "smartkyc-admin",
  "homepage": "https://projects.vercel.app/",
   ....
   ....
}

This is what my folder structure looks

My vercel.json file

{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

My App.jsx file for reference

import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
import { Toaster } from "react-hot-toast";
import Dashboard from "./pages/Dashboard";
import Login from "./pages/Login";
import Signup from "./pages/Signup";
import Layout from "./components/Layout";
import { AuthProvider, useAuth } from "./contexts/AuthContext";
import PropTypes from "prop-types";
import "./index.css";

function PrivateRoute({ children }) {
  const { user } = useAuth();

  if (!user) {
    return <Navigate to="/login" replace />;
  }

  return children;
}

PrivateRoute.propTypes = {
  children: PropTypes.node.isRequired,
};

function App() {
  return (
    <AuthProvider>
      <BrowserRouter basename="/">
        <Toaster position="top-right" />
        <Routes>
          <Route path="/login" element={<Login />} />
          <Route path="/signup" element={<Signup />} />
          <Route
            path="/*"
            element={
              <PrivateRoute>
                <Layout>
                  <Routes>
                    <Route path="/" element={<Dashboard />} />
                  </Routes>
                </Layout>
              </PrivateRoute>
            }
          />
        </Routes>
      </BrowserRouter>
    </AuthProvider>
  );
}

export default App;