Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Mark
175
Fill Combo with remote JSON call ... Please Help
posted

Hi there,

I am new to the infragistics IgniteUI and am trying to figure some things out before buying the component. The problem i have is with a filling a combobox with a JSON data which i get from a itunes service (just testing it). My code is below. What am i doing wrong???

<!doctype html>

<html>

<head>

    <!-- Infragistics Combined CSS -->

    <link href="Infragistics/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />

    <link href="Infragistics/css/structure/infragistics.css" rel="stylesheet" />

    <!-- jQuery Core -->

    <script src="Scripts/jquery-1.7.1.min.js"></script>

    <!-- jQuery UI -->

    <script src="js/jquery-ui.js" type="text/javascript"></script>

    <script src="Scripts/jquery-ui-1.8.20.min.js"></script>

    <!-- jQuery Templates: http://api.jquery.com/category/plugins/templates/ -->

    <script src="Scripts/jquery.tmpl.min.js"></script>

    <!-- Infragistics Combined Scripts -->

    <script src="Infragistics/js/infragistics.core.js"></script>

    <script src="Infragistics/js/infragistics.dv.js"></script>

    <script src="Infragistics/js/infragistics.loader.js"></script>

    <script src="Infragistics/js/infragistics.lob.js"></script> 

    <script>

        $(function () {

            $("#combo").igCombo({

                loadOnDemandSettings: {

                    enabled: true,

                    pageSize: 25

                },

                responseDataKey: "d.results",

                dataSource: 'http://itunes.apple.com/search?term=metallica',

                textKey: "previewUrl",

                valueKey: "artistId ",

                nullText: 'Choose ...'

            });

        });

    </script>

</head>

<body>

    <div id="combo"></div>

</body>

</html>

Parents
No Data
Reply
  • 24497
    Verified Answer
    posted

    Hi Bakke189,

    The loadOnDemand was designed primary for an Mvc or similar server, which might provide expected format and possible extra settings like pageSize/IndexUrlKey. Though, it may be used for sites, which may return json objects as well. Default implementation of $.ig.DataSource used by igCombo in that situation assumes oData and if some dataSource settings are missing, then it automatically use values expected by oData. For exampe, responseTotalRecCountKey is equal to "d.__count".

    I tested/debugged "itunes" url used by your sample and found that it does not use oData standards: returned value does not have "d.results", but "results" and instead of "d.__count" the "resultCount" is used. I also did not find field "artistId". Also: a space at the end or your value "artistId " may break items even if field was existed.

    You may test something like below:

    $("#combo").igCombo({
          loadOnDemandSettings: {
         enabled: true,
            pageSize: 25
      },
      responseDataKey: "results",
          // $.ig.DataSource may assume oData and automatically use "d.__count" which is wrong
          // commented line below might work, but it may limit total number to default 50 used by itunes
          //responseTotalRecCountKey: "resultCount",
          responseTotalRecCountKey: "",
          dataSource: 'http://itunes.apple.com/search?term=metallica',
          textKey: "artistName",
          valueKey: "trackId",
          itemTemplate: '<img src="${artworkUrl30}" /><span>${artistName}</span>',
          nullText: 'Choose ...'
    });

Children