Table not getting displayed on a button click in AngularJS

Question

Hi I'm learning AngularJS and I have a question. I want to display a table on a button click. On clicking the button, JSON data gets fetched but I have to press the button twice for the data to be displayed.

This is the HTML page.

<html>
  <body>
    <div class="container">
      <label for="tags" style="margin-top: 30px;margin-left: 15px;">GSTIN </label>
      <input id="tags">
        <button ng-click="searchfunction()">search</button>
    </div>
    <br/>
    <hr>
    <div class="container">
      <div ng-show="tshow"  ng-repeat="x in searchdata">
        <table class="table table-bordered table-responsive">
          <thead>
            <tr>
              <th>MON</th>
              <th>SGST</th>
              <th>CGST</th>
              <th>IGST</th>
              <th>CESS</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="i in x">
              <td>{{i.mon}}</td>
              <td>{{i.sgst}}</td>
              <td>{{i.cgst}}</td>
              <td>{{i.igst}}</td>
              <td>{{i.cess}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </body>
</html>

This is the controller:

app.controller("searchcontroller", function ($scope,$http) {
  $scope.tshow=false;
  function make_base_auth(user, password) {
    var tok = user + ':' + password;
    var hash = btoa(tok);
    return "Basic " + hash;
  }

  $scope.searchfunction=function() {
    $scope.tshow=true;
    var tf=document.getElementById("tags");
    var value=tf.value;
    var auth = make_base_auth("gstadmn112","Gstn@123");
    var url6 = "http://164.100.148.67:8080/wsgstr3B/rest/payment/gstinsearch?gstin="+value+"&year=201718";
    xml = new XMLHttpRequest();
    // jQuery
    $.ajax({
      url : url6,
      method : 'GET',
      beforeSend : function(req) {
        req.setRequestHeader('Authorization', auth);
      },
      success:function(response) {
        console.log(response);
        scope.searchdata=response;
      },
      failure:function() {
        window.alert("wrong input data doesn't exist");
      }
    });
  }
});

I need to click twice on the search button for the table to be displayed. I want the table to be hidden initially and once the search is successful the table should be displayed. The table is hidden initially and after clicking twice correct data gets displayed.

Proper indentation is a necessary skill. For one, it will show what is missing in your code -- in this case, for instance a closing </input> tag. Start with that. — dda
– dda, Commented Jan 1, 2018 at 10:33

Aleksei Korkoza · Accepted Answer · 2018-01-01 12:02:32Z

0

Maybe, you try to add $scope.tshow=true; in function success:

success:function(response) {
        console.log(response);
        $scope.tshow=true;
        $scope.searchdata=response;
      },

P.S. I advise to use $http instead of $ajax.

answered Jan 1, 2018 at 12:02

Aleksei Korkoza

4657 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Amey Bhivshet Over a year ago

is it possible to add authentication headers using $http??

Aleksei Korkoza Over a year ago

Yes, you may add authentication headers without any problems. Here is example: stackoverflow.com/questions/11876777/…

Amey Bhivshet Over a year ago

one question headers: {'Authorization': 'Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ=='} the text after basic is the username:password in ascii format right?

Aleksei Korkoza Over a year ago

I think that yes. Did my answer helped you ?

Amey Bhivshet Over a year ago

no after clicking search no table was getting displayed

|

Marcus Höglund · Accepted Answer · 2018-01-01 13:01:07Z

0

This problem is related to the digest loop of angularjs which keeps all changes sync between your view and controller.

When you invoke the searchfunction(), angularjs will know whats happening inside the method and sync the changes made with the view when its completed. The problem is that your method uses $.ajax which has some async callback methods. When these methods gets invoked angularjs have already left the party (digest loops is over) and don't know what these methods have done to your controller $scope. The jQuery success callback will however set the $scope.searchdata=response; and this change gets notified the next time angularjs is in the party (the next time you click).

So basically you need to make sure angularjs is aware of the async methods which makes changes to your $scope. To solve this I would inject angularjs own $http service (which takes care of async changes to the scope) and use that instead.

var req = {
 method: 'GET',
 url: url6,
 headers: {
   'Authorization': auth
 }
}
$http(req).then(function(response){
    console.log(response);
    $scope.searchdata=response;
}, function(){
    window.alert("wrong input data doesn't exist");
});

edited Jan 1, 2018 at 13:01

answered Jan 1, 2018 at 10:54

Marcus Höglund

16.9k11 gold badges54 silver badges72 bronze badges

3 Comments

Amey Bhivshet Over a year ago

$scope is a typo its there in the code tried putting tshow=true in the success function same output theres a ngRoute that routes it to this controller and a particular html

Amey Bhivshet Over a year ago

Amey Bhivshet Over a year ago

still the same issue

Ayuktia · Accepted Answer · 2018-01-01 16:47:17Z

0

You can use this way.

$scope.searchfunction=function(){
$scope.tshow=true;
var tf=document.getElementById("tags");
var value=tf.value;

$http.get("http://164.100.148.67:8080/wsgstr3B/rest/payment/gstinsearch?gstin="+value+"&year=201718")
.success(function(result) {
     $scope.searchdata=response;
     $scope.tshow=false;
})
.error(function() {
     window.alert("wrong input data doesn't exist");
 });                 
}

answered Jan 1, 2018 at 16:47

Ayuktia

4313 silver badges11 bronze badges

1 Comment

Amey Bhivshet Over a year ago

I need to add the authentication headers also Using the above method get wont be able to access the link

Collectives™ on Stack Overflow

Table not getting displayed on a button click in AngularJS

3 Answers 3

6 Comments

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related