Click here to Skip to main content
14,668,615 members
Rate this:
Please Sign up or sign in to vote.
i am new in AngularJS. i need to show some details in modalpopup by click on button in table row.
My table code is :-
<table>
      <tbody>
        <tr ng-repeat="data in DataList |filter : Search">
         <td>{{data.OrderNo}}</td>
              <td>
                <a href="#myModal" class="edit_button" data-toggle="modal" ng-click="ShowDetail(data)">SELECT</a>
                    </td>
                </tr>
            </tbody>
        </table>


i have a table in modalpopup also to show details:-

<div class="modal fade" id="myModal" role="dialog">
<table class="table table-bordered table-striped">
                            <tbody  ng-repeat="data in OrderList">
                                <tr >
                                    <td style="width: 20%">
                                        OrderNumber :-
                                    </td>
                                    <td style="width: 30%">
                                         {{data.OrderNumber}}
                                    </td>
                                </tr>
                                <tr>
                                    <td style="width: 20%">
                                        Order Date:-
                                    </td>
                                    <td style="width: 30%">
                                        {{data.Orderdate}}
                                    </td>
                                  
                                </tr>
</tbody>
</table>
</div>


my JS code is like :-

var app = angular.module('MyApp', []);
app.controller('MyController', function ($http, $scope) {

    $http.get('/Customer/Customerdata').then(function (response) {
        $scope.DataList = JSON.parse(response.data);
    })


    $scope.ShowDetail = function (x) {
        alert(x.OrderNo);
        $.ajax({
            url: '/Order/OrderDetails',
            type: 'GET',
            dataType: 'JSON',
            data: {"OrderNo": x.OrderNo},
            contentType: 'application/json',
            success: function (response) {
                $scope.OrderList = JSON.parse(response);
            }
        });
    }
});


WHEN first time i click on SELECT button
$scope.OrderList
is not bind. and it bind in second time click. can any one suggest me what is the issue in my code.

What I have tried:

i search on google but not getting any solution that work for me..
Posted
Updated 2-Apr-20 2:32am
v3

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

The "A" in "AJAX" stands for "asyncronous".

That means the code doesn't wait for the $.ajax call to complete before it continues. Your success callback will be called once the request has completed, but that will be after the modal is shown.

The second time you click the button, the modal is shown, but it will be bound to the data loaded from the previous button click. If you click the button for a different order, you'll be showing the wrong details.

You need to remove data-toggle="modal" from your button, and manually display the modal from within the success callback instead.
   
Comments
TCS54321 3-Apr-20 4:36am
   
you explain my problem very well. i remove data-toggle="modal" and i also remove bootstrap modal. but still facing the same issue.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month



CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100