1

I am using JQuery DataTable Plugin for Sorting , Filtering , Searching from

https://datatables.net/

I have an edit button in my html markup on click of that a modal will open .

Its working fine , on click of edit button it open the modal but only for records on first page ( 5 records per page ).

When I using paging and goes to 2nd page or any other page than jQuery , Angular JS code on edit button does not do anything , neither it show modal .

I tried to check html markup but its valid . If I remove Jquery DataTable Plugin than it works on every record . Why code is not running for rest of records in other the pages

Below is my code to gave an idea about whats happening HTML

<tr id="row36" ng-show="!hiddenrow[36]" role="row" class="odd">
<td id="edit36" class="sorting_1"> 
<a id="editbtn_36" ng-click="SetData('36','11443','Person%20Name','06-10-2017','04-12-2017','PUNJAB','Badaun','N/A')" data-toggle="modal" href="#update_modal">
<i class="fa fa-pencil-square-o fa-lg" aria-hidden="true" style="color:green"></i></a>
</td>
<td>36</td>
<td contenteditable="true">11443</td>
<td contenteditable="true">Yusuf Khan</td>
<td id="dp36" contenteditable="true">06-10-2017</td>
<td id="dp36" contenteditable="true">04-12-2017</td>
<td contenteditable="true">PUNJAB</td>
<td contenteditable="true">Badaun</td>
<td contenteditable="true">N/A</td>
<td>21-11-2017</td>
</tr>

Modal

<div id="update_modal" class="modal">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title">Update Record ID : {{RecordID}}</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <p><input type="text" ng-model="staffid" class="form-control" placeholder="Enter StaffID here"/></p>
            <p><input type="text" ng-model="staffname" class="form-control" placeholder="Enter Staff Name here"/></p>
            <p><input type="text" ng-model="fromdate" class="form-control"  id="dp"/></p>
            <p><input type="text" ng-model="todate" class="form-control" id="dp"/></p>
            <select ng-model="state" ng-options="item for item in StateList" class="form-control"></select>
            <select ng-model="branch" ng-options="item for item in BranchList" class="form-control"></select>
            <p><input type="text" ng-model="reason" class="form-control" placeholder="Enter Reason here"/></p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-primary" ng-click="UpdateSchedule()">Save changes</button>
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

DataTable Plugin Initialization

$('[id^="tbl"]').dataTable();

Angular Js Code

$scope.SetData = function (recordId,staffid,staffname,fromdate,todate,state,branch,reason)
               {
                   $scope.RecordID = recordId.replace('%20',' ');
                   $scope.staffid = staffid.replace('%20', ' ');
                   $scope.staffname = staffname.replace('%20', ' ');
                   $scope.fromdate = fromdate.replace('%20', ' ');
                   $scope.todate = todate.replace('%20', ' ');
                   $scope.state = state.replace('%20', ' ');
                   $scope.branch = branch.replace('%20', ' ');
                   $scope.reason = reason.replace('%20', ' ');
                   $scope.StateList = [];
                   $scope.BranchList = [];

                    $http({
                        //Some Code Here
                    }).then(function mySuccess(response) {
                            $window.alert('Success');                    
                    }, function myError(response) {
                        $window.alert('Warning! It failed.');
                    });
               }

Update 1 for davidkonrad Only

enter image description here

Tanwer
  • 1,503
  • 8
  • 26
  • 41
  • 1
    angular wont catch jquery events by default i use apply() or digest() after each trigger for applying a jquery event to angular , also check this answer https://stackoverflow.com/questions/14659204/jquery-and-angularjs-bind-events-to-changing-dom – Panos K Nov 23 '17 at 07:12
  • @PanosK , Ok . But how its working for first page only ?? – Tanwer Nov 23 '17 at 07:13
  • probably digest cycle running after the jquery event for first time, i am not sure aboute this – Panos K Nov 23 '17 at 07:20
  • That's just a guess – Tanwer Nov 23 '17 at 07:25
  • give it a try to apply inside the event , data tables API https://datatables.net/reference/event/page also it would be usefull if you could make a working plunker with issue – Panos K Nov 23 '17 at 07:30
  • Urgs, JACK. You should kick jQuery. Don't mix AngularJS with jQuery. Please check https://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background – lin Nov 23 '17 at 07:31
  • @lin , Its There is no Jquery Code here , Only plugin , And that's compatible with Angular , Check the link I shared – Tanwer Nov 23 '17 at 07:48
  • 1
    @PanosK , thanks For your help , I found the problem . The Custom attribute was created problem. After removing them all is well . But still don't Know the reason why it was happening on paging . Need To check source code for pager event in library – Tanwer Nov 23 '17 at 07:50
  • Look at **https://l-lin.github.io/angular-datatables/#/welcome** – davidkonrad Nov 23 '17 at 12:29
  • 1
    @davidkonrad , I am sorry what what it is - all I am seeing is a cat , nothing else – Tanwer Nov 24 '17 at 04:19
  • ?? https://l-lin.github.io/angular-datatables/#/getting-started – davidkonrad Nov 24 '17 at 07:41
  • @davidkonrad , See update 1 in my question , the last part . you will see what it is – Tanwer Nov 24 '17 at 12:16
  • @Jack, have raised it as an issue -> https://github.com/l-lin/angular-datatables/issues/1139 What browser version are you using? It is a good catch, I guess the author uses some JS not supported by IE (an older version of IE) You can delete the image, it is on githubs server now. – davidkonrad Nov 24 '17 at 12:26
  • @davidkonrad , I was using IE 11 (Version : 11.726.15063.0),(Update Version : 11.0.48 [KB4047206]) . Tried in Chrome and it works. Not supported by IE – Tanwer Nov 27 '17 at 06:57

0 Answers0