Front end with smartcontract

i have develop a smartcontract :0x34F04C60439B377E61cf11C4B0e470316c7aED5F( event Organizer on bsc testnet) and front end with js. when i click confirm for creating events metamask is popping and the transaction is working. but the entities are not been saved, its going away with refresh. i want it to be persistent on the page. what should i do?

here is my main.js

const serverUrl = "xxxx"

  const appId = "xxxx"

   Moralis.start({serverUrl, appId})

   async function login() {

    let user = Moralis.User.current();

 

    if (user) {

      try {

        user = await Moralis.authenticate({ signingMessage: ' done' });

 

        console.log(user);

        let addressOfUser= document.getElementById('address')

        addressOfUser.innerHTML="Address:"+(user.get('ethAddress'));

      } catch (error) {

        console.log(error);

      }

    }

  }
async function createEvent(name, date, price, ticketCount, id) {

  await Moralis.enableWeb3();

  let op = {

    contractAddress: "0x34F04C60439B377E61cf11C4B0e470316c7aED5F",

    functionName: "createEvents",

    abi: [

      {

        inputs: [

          { internalType: "string", name: "name", type: "string" },

          { internalType: "uint256", name: "date", type: "uint256" },

          { internalType: "uint256", name: "price", type: "uint256" },

          { internalType: "uint256", name: "ticketCount", type: "uint256" },

          { internalType: "uint256", name: "id", type: "uint256" },

        ],

        name: "createEvents",

        outputs: [],

        stateMutability: "nonpayable",

        type: "function",

      },

    ],

    params: {

      name,

      date,

      price,

      ticketCount,

      id,

    },

  };

  await Moralis.executeFunction(op);

}

let cont = document.getElementById("cont");

let btn = document.getElementById("btn").addEventListener("click", async () => {

  var nam = document.getElementById("name").value;

  let dt = document.getElementById("date").value;

  let pri = document.getElementById("price").value;

  let ticketCount = document.getElementById("ticketCount").value;

  let id = document.getElementById("id").value;

 

  cont.innerHTML +=

    '<div class="well">' +"Project name:" +nam +"<br></br>" +"Deadline:"+dt+"<br></br>"+"Price:" +pri+"<br></br>" +

    "TicketCount:"+ticketCount+"<br></br>" +

    "ID:"+id+

    "</div>" +"<br></br>";

  await createEvent(nam, dt, pri, ticketCount, id);

});

document.getElementById('logn').onclick= login;

html file

<!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 rel="stylesheet" href="stile.css">

    <link href="p.min.css" rel="stylesheet">

     <!-- INSTALL THE SDK and WEB3 -->

        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js"></script>  

        <script src="https://unpkg.com/moralis/dist/moralis.js"></script>

        <!-- / -->

    <title>Document</title>

</head>

<body id="body">

   

   <div><button id="logn">Connect</button></div>

   <div id="address"> </div>

   <p>Create event </p>

    <input type="text" placeholder="name" id="name">

    <div><input type="text" placeholder="date" id="date"></div>

    <div ><input type="text " placeholder="price" id="price"></div>

    <div ><input type="text " placeholder="id" id="id"></div>

    <div ><input type="text " placeholder="ticketCount" id="ticketCount"></div>

   

    <button type="submit" id="btn">confirm</button>

<div id="cont"></div>

<script src="main.js"></script>

</body>

</html>

You can fetch the entities from the smart contract if available or if you have an event in the contract upon creating event, you could also sync the event and use that to update your UI

its available in the smartcontract, again sir if you show me that would be great. if i had event in the smartcontract would that be easier? i hve seen some tutorials on moralis you tube but could not sum it all up. i just want the entities be saved on the database.

You can watch this on how to sync contract events to your db and you can update your client with the event in the db always

ok so i have to create an event on my smartcontract but this tutorials did not show how to update front-end after syncing, will it be automatic?

After your server syncs the contract events, you can then query or listen to your server for this event data to update your frontend. You can use the Moralis SDK to do this and for live queries.

if there was a tutorial how to do this in JS that would be great help.

now i have created an event in my smartcontract(0x9759C7ec42eEd34CeA2957929EB6D46390e2A109) bsc testnet. but the data is still not persistent, its going away with refresh( i have sync the event in moralis server).

you can do a query to get latest x number of events if you want

if you could show me that would be very helpful, or any tutorials how to do that in JS

you could find examples here about how to use queries in vanilla js:
https://docs.moralis.io/moralis-dapp/database/queries

i did look at it, i just could not sum it all up, how to use it on my app. if you could show me. i have add all the files here. and my table name is Events.

What did you try? It shroud be few lines of code to get the data form a table. You can use console.log to show it in the console. You can run the code directly in the browser console too to get the data form a table.

have u go through my code files? i could not set it all up( how to put it correctly) as i already use code to show it temporarily on the screen. do i need to replace that code?

I didn’t look at the code. You can try first to test simple code snippets to see how they work. You can test them directly in the browser console.

ok…i will try to implement it in my app. lets see how far i can go.