Dapp Introduction

@JRB
I was suggesting to use both for debugging purpose.

Change to this:

$("#add_data_button").click(function(){
  inputData();
})

To call a function we need to use parenthesis, that is ()

Also check the click function from jquery docs, link: https://api.jquery.com/click/

1 Like

Hey @Taha!
I did what you said and that made it work. Then I switched back to:
$("#add_data_button").click(inputData). When I did that it worked allso! I have know idea why there was a problem in the first place. :thinking:
But i’m glad that it works now!
Thank you for your help!

1 Like

It a better convention to follow, the way mentioned.
Because in js it is easy to differentiate inputData as a variable and inputData() as a function. :slight_smile:

Happy coding

2 Likes

Hey @Taha!
Rember the problem that you just got done helping me with? Remember it working after awile of waiting for it? Well, I’ve discovered that every time I try to make a change to the localhost:8000, it dosn’t work right away. When this happens I think that there is a problem somewhere and try to find it. After awile I get frustrated and take a break. Then I come back awile later I try in again and then the changes work.
I was wondering if you could help me with this problem.
Thanks! :grin:

I’m up to the Setting Data video. Have added the listeners and struck some RPC error in Metamask when running the Dapp shown in this image if anyone has any suggestions as to the cause.

@JRB
There is no problem with your code in this.

The point is when you run the python server (or any server like go, etc), the changes in JS (HTML and CSS as well) are only detected when you restart the server.
Because, the server file compile and run the pre-determined files and it is not in run-time. Hence, you see the changes you need to restart the server again :+1:

If you want to restart the python server automatically, you can try the following

You can install nodemon to watch for file changes.

e.g.

npm i -g nodemon

Then to use @JRB :

nodemon ./main.js localhost 8000 

source: https://stackoverflow.com/questions/49355010/how-do-i-watch-python-source-code-files-and-restart-when-i-save

2 Likes

@iceman007
Thanks for reaching out!
Check the port on metamask because ganache-cli by default run on port 8545 also check if you have imported the right account.
If it doesn’t work try to logout from metamask, restart your server and reload the page. It’s a common issue with metamask when you are switching to an other network.
How did you deployed it with remix or truffle migrate ?

1 Like

Thanks Taha
I’ve restarted the server, and checked the ganache port is all correct (migrated Peopleproject with Truffle) but still get the RPC Error (added again for reference).
rpcerror2
What’s strange is it does take the GAS from the account, just doesn’t take the 1 ETH and throws the error.
Hopefully you have some other ideas what might cause this…
Cheers

@iceman007
I hope you are not running the cached versions of the main.js. Make sure you are running the correct version of your main.js (or whatever you have named).
Because as you mentioned GAS fees is deducted that means your app is connected to Ganache but does not take 1 ETH, is probably you are running a different cached version of js file.
Clear your cache and/or history.

If it still doesn’t work, will be nice if you can share your code :slight_smile:

1 Like

Ok can’t seem to resolve this. Here is my main.js code

var web3 = new Web3(Web3.givenProvider);
var contractInstance;

$(document).ready(function() {
    window.ethereum.enable().then(function(accounts){
      contractInstance = new web3.eth.Contract(abi, "0xB0DFBac4a7929070aF4B0b37f699506c393fCf3c", {from: accounts[0]});
      console.log(contractInstance);

    });
    $("#add_data_button").click(inputData)
});

function inputData(){
  var name = $("#name_input").val();
  var age = $("#age_input").val();
  var height = $("#height_input").val();

  var config = {
    value: web3.utils.toWei("1", 'ether')
  }

  contractInstance.methods.createPerson(name, age, height).send(config)
  .on("transactionHash", function(hash){
    console.log(hash);
  })
  .on("confirmation", function(confirmationNr){
    console.log(confirmationNr);
  })
  .on("receipt", function(receipt){
    console.log(receipt);
  })
}

@iceman007
Unfortunately, I am not able to reproduce the error with only the js code provided. Can you share your complete code via Github?

1 Like

@ivo, @filip
I do not get any console logs appearing

var web3 = new Web3(Web3.givenProvider);
var contractInstance;

$(document).ready(function() {
	window.ethereum.enable().then(function(accounts){
		contractInstance = new web3.eth.Contract(window.abi, "0x327C1DC2984Cdc61a8EB16D038003721507a8409", {from: accounts[0]});
		console.log(contractInstance);
		console.log("wont event log this text");
	});
});

Metamask is connected to the account in Ganeshe, I connected to the Dapp first before adding the console log and refresh did not output, I disconnected in Metamask and re-connected but still no console logs. :thinking:

I have the same problem as @m8rix:

image

The contract compiles, Ganache is up and running, Metamask is connected to it - it shows the correct balance for the account. I tried to reinstall Metamask, but I get the same errors and no contract on console.

Hi @MarcisB, I didn’t work out the solution yet, wasted a lot of time thinking my code was wrong somewhere but it was something to do with Chrome and/or the Metamask extension. Turns out it works fine in Firefox browser. I would love to find the fix, but I just want to continue on the class now that I have a workaround.

For anyone interested it did not work using…
Metamask: 8.08
Chrome: 85.0.4183.83 (Official Build) (64-bit)
macOS: Catalina 10.15.5 (19F101)

1 Like

Hey @m8rix

The Matamask warings are there and cannot be removed. These are not the cause of your error.
Are you importing Jquery?
Can I see your front end?

1 Like

Hey @dan-i, I ended up getting the code straight from Filip’s GitHub repo. When that also didn’t work I realised it was not my code. So my front-end is exactly the same as Filip’s now. I am happy to use Firefox though as it seems to work ok for me there. Also looks like @MarcisB had the same issue, so future students may also experience this.

1 Like

Thanks, it works on Firefox for me as well! :+1:t5:

Doesn’t work on Brave 1.13.82 Chromium: 85.0.4183.83.

3 Likes

I have an issue with creating a local server. Here is the error I get:

PS C:\Users\Rostyslav\THE_FOLDER\Studying_materials\Ivan_On_Tech\Ethereum_Smart_Contracts\People_Project\ethereum-course-advanced> python -m http.server 8000
Traceback (most recent call last):
  File "C:\Users\Rostyslav\AppData\Local\Programs\Python\Python37\lib\runpy.py", line 193, in _run_module_as_main
    "__main__", mod_spec)
  File "C:\Users\Rostyslav\AppData\Local\Programs\Python\Python37\lib\runpy.py", line 85, in _run_code
    exec(code, run_globals)
  File "C:\Users\Rostyslav\AppData\Local\Programs\Python\Python37\lib\http\server.py", line 1262, in <module>
    test(HandlerClass=handler_class, port=args.port, bind=args.bind)
  File "C:\Users\Rostyslav\AppData\Local\Programs\Python\Python37\lib\http\server.py", line 1230, in test
    with ServerClass(server_address, HandlerClass) as httpd:
  File "C:\Users\Rostyslav\AppData\Local\Programs\Python\Python37\lib\socketserver.py", line 452, in __init__
    self.server_bind()
  File "C:\Users\Rostyslav\AppData\Local\Programs\Python\Python37\lib\http\server.py", line 137, in server_bind
    socketserver.TCPServer.server_bind(self)
  File "C:\Users\Rostyslav\AppData\Local\Programs\Python\Python37\lib\socketserver.py", line 466, in server_bind
    self.socket.bind(self.server_address)
OSError: [WinError 10013] An attempt was made to access a socket in a way forbidden by its access permissions

I have tried running PowerShell as administrator and turning off the Firewall and it didn’t help.

Thanks Taha
I’ve have uploaded my files and link is https://github.com/Spacerat007/dappintro.git

Thanks

Try by closing the operation on your port and restarting it.
Check the following steps:

Step 1:

Open up cmd.exe, then run the below command:

netstat -ano | findstr :<PORT>

(Replace <PORT> with the port number you want, but keep the colon)

The area circled in red shows the PID (process identifier). Locate the PID of the process that’s using the port you want.

Step 2:

Next, run the following command:

taskkill /PID <PID> /F

(No colon this time)

Lastly, you can check whether the operation succeeded or not by re-running the command in “Step 1”. If it was successful you shouldn’t see any more search results for that port number.

source: https://stackoverflow.com/questions/39632667/how-do-i-kill-the-process-currently-using-a-port-on-localhost-in-windows

P.S. I am not using WINDOWS

1 Like