0

I use Truffle to create a Javascript/jQuery file app.js that is set up to call Solidity functions. I also have a file index.html that contains the HTML for the app. I have a smart contract in Solidity that has some functions that just change state in the contract but don't return anything, and I have one function (fetchContractData) that is a view function that returns the new contract data.

Inside index.html there is an input (text) field with id="someid". I want my app.js to call one of the the Solidity functions that do a state change in the smart contract, and I then want the code to call the solidity function fetchContractData that returns the current state of the Solidity contract to update the input "someid" value. I'm not sure how to do this.

Here are more details:

Inside index.html I have

<input type="text" id="someid" value="" size="50">
<button class="button" id="button" type="button" data-id="1">Action 1</button>
<button class="button" id="button" type="button" data-id="2">Action 2</button>

Inside app.js I have

App = {
    ...

    bindEvents: function() {
        $(document).on('click', App.handleButtonClick);
    },

    // Any button press executes handleButtonClick
    handleButtonClick: async function(event) {
        event.preventDefault();

        App.getMetaskAccountID();

        let btnId = $(event.target).data('id');
        switch(btnId) {
            case "1":
                return await App.doAction1(event);
                break;
            case "2":
                return await App.doAction2(event);
                break;
        }
    }

    // I need to modify doAction1 and doAction2 to also call fetchContractData
    // and update input someid
    doAction1: function (event) {
        event.preventDefault();
        App.contracts.MyContract.deployed().then(function(instance) {
            return instance.doAction1({from: App.metamaskAccountID});
        }).then(function(result) {
            console.log('doAction1',result);
        }).catch(function(err) {
            console.log(err.message);
        });
    },
    doAction2: function (event) {
        event.preventDefault();
        App.contracts.MyContract.deployed().then(function(instance) {
            return instance.doAction2({from: App.metamaskAccountID});
        }).then(function(result) {
            console.log('doAction2',result);
        }).catch(function(err) {
            console.log(err.message);
        });
    },
    fetchContractData: function () {
        App.contracts.MyContract.deployed().then(function(instance) {
            return instance.fetchContractData({from: App.metamaskAccountID});
        }).then(function(result) {
            console.log('fetchContractData',result);
        }).catch(function(err) {
            console.log(err.message);
        });
    }
    ... //More code here
};

What is the correct syntax for chaining the calls to (say) doAction1 and fetchContractData? Suppose the Solidity function fetchContractData returns (uint a, uint b, string c). Is the javascript/jQuery something like the code below? Do I have to use await for the call to fetchContractData?

    doAction1: function (event) {
        event.preventDefault();
        App.contracts.MyContract.deployed().then(function(instance) {
            return instance.doAction1({from: App.metamaskAccountID});
        }).then(function(result) {
            console.log('doAction1',result);
            return await App.fetchContractData();  // is await necessary?
        }).then(function(fetchresult) {
            // WHAT GOES HERE? IS THIS CORRECT?
            {0: a, 1: b, 2: c} = fetchresult;
            $("#someid").value(c);
        }).catch(function(err) {
            console.log(err.message);
        });
    },


    

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.