jQuery UI Widgets Forums Plugins AngularJS jqx-input dynamic source

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 8 years, 8 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • jqx-input dynamic source #76434

    tak
    Participant

    can you please give example for dynamic source where results are fetch from a url.

    I tried doing by giving jqx-source=”myFunction” and assigning the source there.

    but the problem is that it keeps on continuously firing the myFunction and does not stop that at one time fetch.

    jqx-input dynamic source #76461

    Dimitar
    Participant

    Hello tak,

    Please take a look at the following example. We hope it is helpful to you.

    <!DOCTYPE html>
    <html ng-app="demoApp">
    <head>
        <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />
        <script type="text/javascript" src="../../scripts/angular.min.js"></script>
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript">
            var demoApp = angular.module("demoApp", ["jqwidgets"]);
    
            demoApp.controller("demoController", function ($scope, $http) {
                $scope.createWidget = false;
                $http({
                    method: 'get',
                    url: '../sampledata/customers.txt'
                }).success(function (data, status) {
                    // prepare the data
                    var source =
                    {
                        datatype: "json",
                        datafields: [
                            { name: 'CompanyName' },
                            { name: 'ContactName' }
                        ],
                        localdata: data
                    };
    
                    var dataAdapter = new $.jqx.dataAdapter(source);
    
                    $scope.inputSettings =
                    {
                        source: dataAdapter,
                        placeHolder: "Contact Name:",
                        displayMember: "ContactName",
                        valueMember: "CompanyName",
                        width: 200,
                        height: 25
                    };
    
                    // now create the widget.
                    $scope.createWidget = true;
                }).error(function (data, status) {
                    // Some error occurred
                });
            });
        </script>
    </head>
    <body>
        <div ng-controller="demoController">
            <jqx-input jqx-create="createWidget" jqx-settings="inputSettings"></jqx-input>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.