0

I have an issue in displaying data in front end

I am unable to recreate the table after getting data from the server (I am using DWR to get data from the server)

On clicking the header of tables i call sort() inside sort() there is a call to getObj() function which makes the DWR call to get the data,

When I click on search button I get the value of selected option and input field value and pass it to DWR call via getObj..... Herein lies my problem, when I am clicking on table header, the fetched data gets displayed but when I click on search button it doesn't.

Here is my controller and function-

var searchApp = angular.module('searchApp', []),
    selectData = [];

var inputValue='Yahoo',
    filterValue='0'
searchApp.controller('searchCtrl', function ($scope) {
    $scope.results = [];
    $scope.filterOption=0;
    $scope.filters = [
        {id:1,value:'Campaign'},
        {id:2,value:'Account'},
        {id:3,value:'Publisher Url'},
        {id:4,value:'Email Address'}
    ];

    $scope.obj = [];
    $scope.loaded = false;
    $scope.isSorting = false;
    $scope.inputData='yahoo';

    // Default sort order
    $scope.sortValue = 'categoryId';
    $scope.isSortAsc = false;
    $scope.headList = [
        {
            name: '',
            value: '',
            css: ''
        },
        {
            name: 'Name',
            value: 'value',
            css: 'col-sort-asc'
        },
        {
            name: 'Type',
            value: 'categoryId',
            css: 'col-sort'
        }

    ]          


    // build array
    /*angular.forEach(resultsObj, function (obj, key) {
        /*$scope.filters.push({
            value: key,
            name: obj.label
        });
        for (var i = 0; i < obj.item.length; i++) {
            $scope.results.push({
                label: obj.label,
                name: obj.item[i].name
            });
        } 


    });*/

    $scope.getObj = function() {
        // Add the dialog loader
        dialog.load.init();
        dialog.load.add('search');
        // Make the DWR call
        console.log($scope.isSortAsc,$scope.sortValue,inputValue,filterValue);
        BimDWRLogic.getSearchByCateogry($scope.isSortAsc,$scope.sortValue,inputValue,filterValue, function(obj) {
            $scope.$apply(function() {
                $scope.setObj(obj);
                // Complete the dialog loader
                dialog.load.complete('search');
            });
        });
    };

    // ==================================================
    // Set Object
    // ==================================================
    $scope.setObj = function(obj) {
        $scope.obj = obj;
        console.log('Length is '+$scope.obj.list.length);
        for(i=0;i<$scope.obj.list.length;i++)
        {
            console.log($scope.obj.list[i].categoryId);
            console.log($scope.obj.list[i].value);
        }
        //dialog.load.init();
        //dialog.load.add('performance-summary-chart');
        // Load the chart
        // Sometimes the div is not there
        // TODO: might be a better way of handling this
        // Don't load the chart if we are sorting
        /*if($scope.isSorting !== true){
            window.setTimeout(function(){
                $scope.loadChart();
            }, 500);
        }*/
        $scope.isSorting = false;
        $scope.loaded = true;

    };

    $scope.search=function(){
        inputValue=$scope.inputData;
        console.log('Input value is '+inputValue);

        $scope.getObj();


    }

    $scope.filterCriteria=function(opt){
        $scope.filterOption=opt;
        filterValue=opt;
        console.log('Selected Criteria is '+filterValue);
    }    

    $scope.sort = function(value){

        // Return if the column object is not sortable
        if(value === ''){
            return false;
        }

        // Sets the Data Value
        if(value === $scope.sortValue){
            if($scope.isSortAsc === false){
                $scope.isSortAsc = true;
            }else{
                $scope.isSortAsc = false;
            }
        }else{
            $scope.sortValue = value;
            $scope.isSortAsc = false;
        }

        // Sets the Style
        // Note: we don't loop through the first row
        for(var i=1; i<$scope.headList.length; i++){
            if(value === $scope.headList[i].value){
                if($scope.isSortAsc === true){
                    $scope.headList[i].css = 'col-sort-asc';
                }else{
                    $scope.headList[i].css = 'col-sort-desc';
                }
            }else{
                $scope.headList[i].css = 'col-sort';
            }
        }
        console.log('Inside Sort '+$scope.isSortAsc+' '+$scope.sortValue+' '+inputValue+' '+filterValue);
        // Get the object
        $scope.isSorting = true;
        $scope.getObj();

    };


});

Here is the html page template, i am including this page inside a jsp page

HTML Page-

<table class="table table-index search-results">
            <thead>
                <tr class="info">
                    <th colspan="3">
                        <div>Filter By:
                            <select ng-model="searchData" ng-options="f.id as f.value for f in filters" class="search-filter" ng-change="filterCriteria(searchData)">
                               <option>--none--</option>
                            </select>
                        </div>
                    </th>
                </tr>
                <tr>
                   <th ng-repeat="th in headList" class="{{th.css}}" ng-click="sort(th.value)">{{th.name}}</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <td colspan="3">&nbsp;</td>
                </tr>
            </tfoot>
            <tbody>
                <tr ng-repeat="resultObj in obj.list">
                    <td>{{$index + 1}}.</td>
                    <td>{{resultObj.categoryId}}</td>
                    <td>{{resultObj.value}}</td>
                </tr>
            </tbody>
        </table>

and jsp page is 

<div class="container-fluid" ng-app="searchApp">
        <h1>Search Results</h1>
        <section class="group" ng-controller="searchCtrl">
            <input type="text" class="search-input" ng-model="inputData"/><div id="button1" class="btn btn-lg btn-search" ng-click="search()">Search</div>
            <div>74 results</div>
        </section>
        <section>
            <!-- Search Results -->
            <div class="row">
                <div class="col-12" id="searchCtrl" ng-controller="searchCtrl"  ng-include="'views/search.htm'"></div>
            </div>
        </section>
    </div>

1 Answer 1

0

The problem is related with missing controller in search result html template. I think it will work:

<table class="table table-index search-results" ng-controller="searchCtrl">
        <thead>
            <tr class="info">
                <th colspan="3">
                    <div>Filter By:
                        <select ng-model="searchData" ng-options="f.id as f.value for f in filters" class="search-filter" ng-change="filterCriteria(searchData)">
                           <option>--none--</option>
                        </select>
                    </div>
                </th>
            </tr>
            <tr>
               <th ng-repeat="th in headList" class="{{th.css}}" ng-click="sort(th.value)">{{th.name}}</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td colspan="3">&nbsp;</td>
            </tr>
        </tfoot>
        <tbody>
            <tr ng-repeat="resultObj in obj.list">
                <td>{{$index + 1}}.</td>
                <td>{{resultObj.categoryId}}</td>
                <td>{{resultObj.value}}</td>
            </tr>
        </tbody>
    </table>

But better way will be wrap yours sections with one tag and use one controller declaration.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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