jQuery UI Widgets › Forums › Plugins › AngularJS › jqx-input dynamic source

Tagged: , , , , , , , ,

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    jqx-input dynamic source Posts
  • October 5, 2015 at 12:58 pm 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.

    October 6, 2015 at 11:38 am 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/

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.