0

Please help! We have come across a new problem with our code. This is a Solidity contract, with HTML and JavaScript. For some reason, when data is entered in the site window, the return shows a window with the labels, but not the inputted data. We have combed over this code for days and can't seem to find the solution. Here is the code:

pragma solidity ^0.4.18;

 import "./Ownable.sol";


contract RentalContractTesting is Ownable {

  struct Article{
  uint id;
  address seller;
  address buyer;
  uint8 beds;
  uint8 baths;
  string propaddress;
  uint rental_price;
  string property_type;
  string description;
  string contact;
  }
  mapping(uint => Article) public articles;

  struct Article2{
  uint id;
  address seller;
  address buyer;
  string available;
  }

  mapping(uint => Article2) public articles2;
  uint articleCounter;

    event LogSellArticle(
    uint indexed _id,
    address indexed _seller,
    uint8 _beds,
    uint8 _baths,
    string _propaddress,
    uint _rental_price,
    string _property_type,
    string _description,
    string _contact
    );
    event LogSellArticle2(
    string _available
    );

  event LogBuyArticle(
    uint indexed _id,
    address indexed _seller,
    address indexed _buyer,
    uint8 _beds,
    uint8 _baths,
    string _propaddress,
    uint _rental_price,
    string _property_type,
    string _description,
    string _contact
    );
  event LogBuyArticle2(
    uint indexed _id,
    address indexed _seller,
    address indexed _buyer,
    string _available
);
function kill() public onlyOwner {

selfdestruct(owner);
}


//  function sellArticle(uint8 _beds, uint8 _baths, string _propaddress, uint _rental_price, string _property_type, string _description, string _available, string _contact_email) public {
  function sellArticle(uint8 _beds, uint8 _baths, string _propaddress, uint _rental_price, string _property_type, string _description, string _contact) public {
    articleCounter++;

    articles[articleCounter] = Article(
      articleCounter,
     msg.sender,
     0x0,
     _beds,
     _baths,
     _propaddress,
     _rental_price,
     _property_type,
     _description,
     _contact
);
LogSellArticle(articleCounter, msg.sender, _beds, _baths, _propaddress, _rental_price, _property_type, _description, _contact);
}

  function getNumberOfArticles() public view returns (uint){
  return articleCounter;
}

function getArticlesForSale() public view returns (uint[]){

  uint[] memory articleIds = new uint[](articleCounter);

  uint numberOfArticlesForSale = 0;

  for(uint i = 1; i <= articleCounter; i++){
    if(articles[i].buyer == 0x0){
      articleIds[numberOfArticlesForSale] = articles[i].id;
      numberOfArticlesForSale++;
    }
  }
    uint[] memory forSale = new uint[](numberOfArticlesForSale);
    for(uint j = 0; j < numberOfArticlesForSale; j++){
    forSale[j] = articleIds[j];
    }
    return forSale;
    }

     function sellArticle2(string _available) public {
       articleCounter++;

     articles2[articleCounter] = Article2(
     articleCounter,
     msg.sender,
     0x0,
     _available
    );

      LogSellArticle2(_available);
}
       function getArticlesForSale2() public view returns (uint[]){

         uint[] memory articleIds = new uint[](articleCounter);
         uint numberOfArticlesForSale2 = 0;

      for(uint i = 1; i <= articleCounter; i++){
     if(articles2[i].buyer == 0x0){
       articleIds[numberOfArticlesForSale2] = articles2[i].id;
     numberOfArticlesForSale2++;
      }
  }

     uint[] memory forSale = new uint[](numberOfArticlesForSale2);
     for(uint j = 0; j < numberOfArticlesForSale2; j++){
     forSale[j] = articleIds[j];
     }
     return forSale;
   }


 function buyArticle(uint _id) payable public {

   require(articleCounter > 0);
   require(_id > 0 && _id <= articleCounter);

   Article storage article = articles[_id];

   require(article.buyer == 0x0);

   require(msg.sender != article.seller);

   require(msg.value == article.rental_price);

   article.buyer = msg.sender;

   article.seller.transfer(msg.value);
   // LogBuyArticle(_id, article.seller, article.buyer, article.beds, article.baths, article.propaddress, article.rental_price, article.property_type, article.description, article.available, article.contact_email);
    LogBuyArticle(_id, article.seller, article.buyer, article.beds, article.baths, article.propaddress, article.rental_price, article.property_type, article.description, article.contact);
 }
 function buyArticle2(uint _id) payable public {

   require(articleCounter > 0);
   require(_id > 0 && _id <= articleCounter);

   Article2 storage article2 = articles2[_id];

   require(article2.buyer == 0x0);

   require(msg.sender != article2.seller);

   //require(msg.value == article2.rental_price);

   article2.buyer = msg.sender;

   article2.seller.transfer(msg.value);

    LogBuyArticle2(_id, article2.seller, article2.buyer, article2.available);
 }
}

This is the HTML:

<!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">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <title>Rent My Place</title>
<!-- Title will appear as a tab in browser on webpage -->
  <!-- Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet">

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

  <!-- Application -->
  <link href="css/app.css" rel="stylesheet">
  <!-- stylesheet refers to the look of the page, Font, color-->

</head>

<body>
  <div class="container">
    <!-- container that contains title panel-->
    <div class="jumbotron text-center">
<p style="font-size:80px;padding: 1em;padding-top: 10px;padding-bottom: 10px; border:10px;border-style:solid;border-color:#c3c3c3;">
      <font color = "#880015" >Rent My Place</font></p>
    </div>

    <div class="col-md-12" id="article-list">
      <div class="row">
        <div class="col-lg-12">
          <p id="account" class="welcome pull-right"></p>
          <p id="accountBalance" class="welcome pull-left"></p>
        </div>
      </div>

      <div class="row panel panel-default">
        <div class="panel-heading clearfix">
          <div class="panel-title">
            <p style="font-size:24px;padding: 1em;padding-top: 10px;padding-bottom: 10px; border:5px;border-style:solid;border-color:#c3c3c3;">
                  <font color = "#880015">Renter's Tip: </font><font color = "#000000">Inspect the property before you send money.</font><br><font color = "#880015">Landlord's Tip: </font><font color = "#000000">Meet prospective tenants in person.</font></p>
            <!-- Button that opens second window to a form to fill out-->
            <button class="btn btn-info btn-lg pull-right" data-toggle="modal" data-target="#sellArticle">Post a Rental</button>
          </div>
        </div>
        <!-- when the event button gets click, it will show the list-->
        <ul id="events" class="collapse list-group"></ul>
      </div>

      <div id="articlesRow" class="row">
        <!-- ARTICLES with pertinent item information LOAD HERE -->
      </div>
    </div>
  </div>

<!--Result that is displayed after input-->
  <div id="articleTemplate" style="display: none;">
    <div class="row-lg-12">
      <div class="panel panel-default panel-article">
        <div class="panel-heading">
          <h3 class="panel-title"></h3>
        </div>
        <div class="panel-body">
          <strong>Beds</strong>: <span class="beds"></span><br/>
          <strong>Baths</strong>: <span class="baths"></span><br/>
          <strong>Address</strong>: <span class="propaddress"></span><br/>
          <strong>Rental Price</strong>: <span class="rental_price"></span><br/>
          <strong>Property Type</strong>: <span class="property_type"></span><br/>
          <strong>Description</strong>: <span class="description"></span><br/>
          <strong>Contact Email</strong>: <span class="contact"></span><br/>
          <strong>Property is available for showing</strong>: <span class="available"></span><br/>
          <!--<strong>Sold by</strong>: <span class="article-seller"></span><br/>-->
        </div>
        <!-- <div class="panel-footer">
          <button type="button" class= "btn btn-primary btn-success btn-buy" onclick="App.buyArticle(); return false;">Buy</button>
      </div> -->
    </div>
  </div>
</div>

  <!-- Modal form to sell an article -->
  <div class="modal fade" id="sellArticle" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Rent Your Place</h4>
        </div>
        <div class="modal-body">

          <div class="row">
            <div class="col-lg-12">
              <form>
                <div class="form-group">
                  <!--NOTE: For radio buttons to work, 'name' field must match-->
                  <label for="property_type">Property Type</label>
                  <input type="radio" name="Group3" id="house" value="House" > House
                  <input type="radio" name="Group3" id="apartment" value="Apartment" > Apartment
                  <input type="radio" name="Group3" id="duplex" value="Duplex" > Duplex
                </div>
                <div class="form-group">
                  <label for="propaddress">Address</label>
                  <input type="text" class="form-control" id="propaddress" placeholder="Enter the address">
                </div>
                <div class="form-group">
                  <label for="beds">Beds</label>
                  <input type="radio" name="Group1" id="studio" value="0"> Studio
                  <input type="radio" name="Group1" id="one" value="1"> One
                  <input type="radio" name="Group1" id="two" value="2"> Two
                  <input type="radio" name="Group1" id="three" value="3"> Three
                  <input type="radio" name="Group1" id="four" value="4"> Four
                </div>
                <div class="form-group">
                  <label for="baths">Baths</label>
                  <input type="radio" name="Group2" id="onea" value="1"> One
                  <input type="radio" name="Group2" id="twoa" value="2"> Two
                  <input type="radio" name="Group2" id="threea" value="3"> Three
                </div>
                <div class="form-group">
                  <label for="rental_price">Rent (in USD) </label>
                  <input type="text" class="form-control" id="rental_price" placeholder="$" pattern="[0-9]+([\.,][0-9]+)?">
                </div>
                <div class="form-group">
                  <label for="description">Description</label>
                  <textarea type="text" class="form-control vresize" id="description" placeholder="Describe your property" maxlength="255"></textarea>
                </div>
                <div class="form-group">
                  <label for="available">Property is available for showing</label>
                  <input type="radio" name="Group4" id="yes" value="Yes"> Yes
                  <input type="radio" name="Group4" id="no" value="No"> No
                </div>
                <div class="form-group">
                  <label for="contact">Contact Email</label>
                  <input type="text" class="form-control" id="contact" placeholder="Enter your contact email" >
                </div>
              </form>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary btn-success" data-dismiss="modal" onclick="App.sellArticle(); " onclick="(function(){App.sellArticle2(); return false;})(event)">Submit</button>
                    <button type="button" class="btn" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

  <div id="footer" class="container">
    <nav class="navbar navbar-default navbar-fixed-bottom">
      <div class="navbar-inner navbar-content-center text-center">
        <p class="text-muted" credit><a href="http://www.axbean.com">AXbean - &copy; 2018</a></p>
      </div>
    </nav>
  </div>


  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="js/RentalApp.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/web3.min.js"></script>
  <script src="js/truffle-contract.js"></script>

</body>

</html>

Here is the js:

App = {
  web3Provider: null,
  contracts: {},
  account: 0x0,
  loading: false,

  init: function() {
    return App.initWeb3();
  },

  initWeb3: function() {
    // initialize web3
    if(typeof web3 !== 'undefined') {
      //reuse the provider of the Web3 object injected by Metamask
      App.web3Provider = web3.currentProvider;
    } else {
      //create a new provider and plug it directly into our local node
      App.web3Provider = new Web3.providers.HttpProvider('http://localhost:7545');
    }
    web3 = new Web3(App.web3Provider);

    App.displayAccountInfo();

    return App.initContract();
  },

  displayAccountInfo: function() {
    web3.eth.getCoinbase(function(err, account) {
      if(err === null) {
        App.account = account;
        $('#account').text(account);
        web3.eth.getBalance(account, function(err, balance) {
          if(err === null) {
            $('#accountBalance').text(web3.fromWei(balance, "ether") + " ETH");
          }
        })
      }
    });
  },

  //runTwoFunctions: function() {
  // sellArticle();
  //  sellArticle2();
  //},

  initContract: function() {
    $.getJSON('RentalContractTesting.json', function(chainListArtifact) {

      // get the contract artifact file and use it to instantiate a truffle contract abstraction
      App.contracts.RentalContractTesting = TruffleContract(chainListArtifact);
      // set the provider for our contracts
      App.contracts.RentalContractTesting.setProvider(App.web3Provider);
      // listen to events
      App.listenToEvents();
      // retrieve the article from the contract
      return App.reloadArticles();
    });
  },

  //initContract: function() {
  //  $.getJSON('RentalContractTesting.json', function(chainListArtifact) {

      // get the contract artifact file and use it to instantiate a truffle contract abstraction
  //    App.contracts.RentalContractTesting = TruffleContract(chainListArtifact);
      // set the provider for our contracts
  //    App.contracts.RentalContractTesting.setProvider(App.web3Provider);
      // listen to events
  //    App.listenToEvents2();
      // retrieve the article from the contract
  //    return App.reloadArticles2();
  //  });
  //},

  reloadArticles: function() {
    //avoid reentry bugs
    if(App.loading){
      return;
    }
    App.loading = true;

    // refresh account information because the balance might have changed
    App.displayAccountInfo();

    var chainListInstance;

    App.contracts.RentalContractTesting.deployed().then(function(instance) {
      chainListInstance = instance;
      return chainListInstance.getArticlesForSale();
    }).then(function(articlesIds) {

      // retrieve the article placeholder and clear it
      $('#articlesRow').empty();

      for(var i = 0; i < articlesIds.length; i++){
        var articleId = articlesIds[i];
        chainListInstance.articles(articleId.toNumber()).then(function(article){
          App.displayArticle(article[0], article[1], article[3], article[4], article[5], article[6], article[7], article[8], article[9]);
        });
      }
      App.loading = false;
    }).catch(function(err) {
      console.error(err.message);
      App.loading = false;
    });
  },

  reloadArticles2: function() {
//    avoid reentry bugs
    if(App.loading){
      return;
    }
    App.loading = true;

    // refresh account information because the balance might have changed
    App.displayAccountInfo();

    var chainListInstance;

    App.contracts.RentalContractTesting.deployed().then(function(instance) {
      chainListInstance = instance;
      return chainListInstance.getArticlesForSale2();
    }).then(function(articlesIds) {

      // retrieve the article placeholder and clear it
      $('#articlesRow').empty();

      for(var i = 0; i < articlesIds.length; i++){
        var articleId = articlesIds[i];
        chainListInstance.articles(articleId.toNumber()).then(function(article){
          App.displayArticle2(article[4]);
        });
      }
      App.loading = false;

    }).catch(function(err) {
      console.error(err.message);
      App.loading = false;
    });
  },

  //displayArticle: function(id, seller, beds, baths, propaddress, rental_price, property_type, description, available, contact_email) {
  displayArticle: function(id, seller, beds, baths, propaddress, rental_price, property_type, description, contact) {
    var articlesRow = $('#articlesRow');

    //var etherPrice = web3.fromWei(price, "ether");

    var articleTemplate = $("#articleTemplate");
    //articleTemplate.find('.panel-title').text(propaddress);
    articleTemplate.find('.beds').text(beds);
    articleTemplate.find('.baths').text(baths);
    articleTemplate.find('.propaddress').text(propaddress);
    articleTemplate.find('.rental_price').text('$' + rental_price);
    articleTemplate.find('.property_type').text(property_type);
    articleTemplate.find('.description').text(description);
    articleTemplate.find('.contact').text(contact);
    //articleTemplate.find('.article_price').text(etherPrice + " ETH");
    articleTemplate.find('.btn-buy').attr('data-id', id);
    //articleTemplate.find('.btn-buy').attr('data-value', etherPrice);

      //seller
    if(seller == App.account){
      articleTemplate.find('.article-seller').text("You");
      articleTemplate.find('.btn-buy').hide();
    }else{
      articleTemplate.find('.article-seller').text(seller);
      articleTemplate.find('.btn-buy').show();
    }
    //add this new article
    articlesRow.append(articleTemplate.html());
  },

  displayArticle2: function(id, seller, available) {
    var articlesRow = $('#articlesRow');

    //var etherPrice = web3.fromWei(price, "ether");

    var articleTemplate = $("#articleTemplate");
    //articleTemplate.find('.panel-title').text(propaddress);
    articleTemplate.find('.available').text(available);

      //seller
    if(seller == App.account){
      articleTemplate.find('.article-seller').text("You");
      articleTemplate.find('.btn-buy').hide();
    }else{
      articleTemplate.find('.article-seller').text(seller);
      articleTemplate.find('.btn-buy').show();
    }
    //add this new article
    articlesRow.append(articleTemplate.html());
  },

  sellArticle: function() {
    // retrieve the detail of the article
  //  var _article_name = $('#article_name').val();
    var _description = $('#description').val();
    //var _beds = $('#beds').val();
    var _beds = $('input[name=Group1]:checked').val();
    var _baths = $('input[name=Group2]:checked').val();
    //var _baths = $('#baths').val();
    var _propaddress = $('#propaddress').val();
    var _rental_price = $('#rental_price').val();
    var _property_type = $('input[name=Group3]:checked').val();
    //var _property_type = $('#property_type').val();
    var _contact = $('#contact').val();

  //  var _article_price = $('#article_price').val();
  //  var _price = web3.toWei(parseFloat($('#article_price').val() || 0), "ether");

//    if((_description.trim() == '') || (rental_price == 0)) {
      // nothing to sell
//      return false;
App.contracts.RentalContractTesting.deployed().then(function(instance) {
  //return instance.sellArticle(_description, _beds, _baths, _propaddress, _rental_price, _property_type, _available, _contact_email, {
  return instance.sellArticle(_beds, _baths, _propaddress, _rental_price, _property_type, _description, _contact,{

      from: App.account,
    gas: 500000
  });
}).then(function(result) {

}).catch(function(err) {
  console.error(err);
});
},

   sellArticle2: function() {
     var _available = $('input[name=Group4]:checked').val();
     App.contracts.RentalContractTesting.deployed().then(function(instance) {
       //return instance.sellArticle(_description, _beds, _baths, _propaddress, _rental_price, _property_type, _available, _contact_email, {
       return instance.sellArticle2(_available,{

           from: App.account,
         gas: 500000
       });
     }).then(function(result) {

     }).catch(function(err) {
       console.error(err);
     });
     },


  // listen to events triggered by the contract
  listenToEvents: function() {
    App.contracts.RentalContractTesting.deployed().then(function(instance) {
      instance.LogSellArticle({}, {}).watch(function(error, event) {
        if (!error) {
          $("#events").append('<li class="list-group-item">' + event.args._propaddress + ' is now for sale</li>');
        } else {
          console.error(error);
        }
        App.reloadArticles();
      });

      instance.LogBuyArticle({}, {}).watch(function(error, event) {
        if (!error) {
          $("#events").append('<li class="list-group-item">' + event.args._buyer + ' bought ' + event.args._propaddress + '</li>');
        } else {
          console.error(error);
        }
        App.reloadArticles();
      });
    });
  },

  listenToEvents2: function() {
    App.contracts.RentalContractTesting.deployed().then(function(instance) {
      instance.LogSellArticle2({}, {}).watch(function(error, event) {
        if (!error) {
          $("#events").append('<li class="list-group-item">' + event.args._propaddress + ' is now for sale</li>');
        } else {
          console.error(error);
        }
        App.reloadArticles2();
      });

      instance.LogBuyArticle2({}, {}).watch(function(error, event) {
        if (!error) {
          $("#events").append('<li class="list-group-item">' + event.args._buyer + ' bought ' + event.args._propaddress + '</li>');
        } else {
          console.error(error);
        }
        App.reloadArticles2();
      });
    });
  },

  buyArticle: function() {
    event.preventDefault();

    // retrieve the article price and data
    var _articleId = $(event.target).data('id');
    var _price = parseFloat($(event.target).data('value'));

    App.contracts.RentalContractTesting.deployed().then(function(instance){
      return instance.buyArticle(_articleId, {
        from: App.account,
        value: web3.toWei(_price, "ether"),
        gas: 500000
      });
    }).catch(function(error) {
      console.error(error);
    });
  },
  buyArticle2: function() {
   event.preventDefault();

    // retrieve the article price and data
   var _articleId = $(event.target).data('id');
    var _price = parseFloat($(event.target).data('value'));

    App.contracts.RentalContractTesting.deployed().then(function(instance){
      return instance.buyArticle2(_articleId, {
        from: App.account,
        value: web3.toWei(_price, "ether"),
        gas: 500000
      });
    }).catch(function(error) {
      console.error(error);
    });
  }
  };

$(function() {
  $(window).load(function() {
    App.init();
  });
});



$(function() {
 $(window).load(function() {
    App.init();
  });
});
  • Can't really tell anything without a code. – Maxpeinas Jul 2 '18 at 8:07
  • 1
    Please read how to create a minimum, complete, and verifiable example. There is so much dead code to comb through here, there is no way anyone will have the time to help you. Isolate the part of your program that is failing, remove all other parts, and share that. – Shawn Tabrizi Jul 3 '18 at 4:56
1

So the problem seemed to be in the Javascript file, at the second "initContract: function() " lines. Once I commented that out, the data showed up. The thing I hate is not knowing why commenting out that second section made it work. Thanks to all who responded. I will try to keep my question clearer in the future.

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.