jQuery UI Widgets › Forums › Lists › DropDownList › drop down list not refreshing from json source

Tagged: , , , , ,

This topic contains 2 replies, has 2 voices, and was last updated by  Mark 12 years, 3 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    drop down list not refreshing from json source Posts
  • September 2, 2012 at 11:19 pm drop down list not refreshing from json source #7366

    Mark
    Member

    I have created a dropdown datasourced from a json rest service. I insert a element (new) and when clicked a popup is shown for the user to enter data. On save of this popup the code posts the new data back to the server correctly, however I cannot get the dropdown list (or the dataadapter to recall the rest service to get the updated data to populate in the list. I have pasted the code below and the records.length remains constant (in the dataAdapter loadcomplete callback) throughout the session even when I can see that the code is correctly adding in records to the json service. I tried to force a reload in the .ajax callback to save the data but that has not worked.

    Could this be a caching issue which is stopping the dataAdapter from going back to source?

    script type="text/javascript">
    $(document).ready(function () {
    var theme = 'ui-lightness';

    jQuery.support.cors = true;

    function sourcedata() {
    var source = {
    datatype: "json",
    datafields: [
    { name: 'AdvertiserID' },
    { name: 'Name' }
    ],
    url: '@ViewBag.URL/Admin.svc/Advertisers',
    async: false
    }
    var dataAdapter = new $.jqx.dataAdapter(source, {
    loadComplete: function () {
    alert(dataAdapter.records.length);
    }
    });

    $("#advertiser").jqxDropDownList({ source: dataAdapter, displayMember: 'Name', valueMember: 'AdvertiserID', width: '310px', height: '25px', theme: theme });
    $("#advertiser").jqxDropDownList('insertAt', { label: '(new)', value: '0' }, 0);
    }

    sourcedata();

    $("#advertiser").bind('select', function (event) {
    if (event.args) {
    var args = event.args;
    // new advertiser selected
    if ('0' == args.item.value) {
    var offset = $("#wnd_campaign").offset();
    $("#wnd_advertiser").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 }, width: '400px', isModal: true, title: 'Add Advertiser', theme: theme, autoOpen: false, cancelButton: $("#advertisercancel"), modalOpacity: 0.01 });

    $("#advertisercancel").jqxButton({ theme: theme });
    $("#advertisersave").jqxButton({ theme: theme });
    $("#advertisersave").click(function () {
    jQuery.support.cors = true;

    $.ajax(
    {
    type: "PUT",
    url: '@ViewBag.URL/Admin.svc/Advertisers',
    data: '{ "name": \"' + $('#advertisername').val() + '\"}',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) { alert('worked'); var dataAdapter = sourcedata(); },
    error: function (msg, url, line) {
    alert('error trapped in error: function(msg, url, line)');
    alert('msg = ' + msg + ', url = ' + url + ', line = ' + line);
    }
    });

    //$("#advertiser").jqxDropDownList({ source: da, displayMember: 'Name', valueMember: 'AdvertiserID', width: '310px', height: '25px', theme: theme });
    $("#wnd_advertiser").jqxWindow('hide');
    });

    $("#wnd_advertiser").jqxWindow('show');
    }
    }
    });

    $("#datestart").jqxDateTimeInput({ theme: theme, height: '25px', formatString: 'D' });
    $("#dateend").jqxDateTimeInput({ height: '25px', theme: theme, formatString: 'D' });
    $("#revenue").jqxNumberInput({ width: '310px', height: '25px', theme: theme, spinButtons: true, symbol: '£', digits: 3 });
    $("#wnd_campaign").jqxWindow({ position: { x: 100, y: 150 }, theme: theme, width: '420px', isModal: false, resizable: false, draggable: false, showCloseButton: false, title: 'Campaign Details' });
    $("#wnd_campaign").jqxWindow('show');

    $("#wnd_advertiser").jqxWindow('hide');
    });

    September 3, 2012 at 6:04 am drop down list not refreshing from json source #7369

    Dimitar
    Participant

    Hello Mark,

    To refresh the data dynamically, you need to use

    dataAdapter.dataBind();

    You can learn more about jqxDataAdapter here.

    Also, take a look at the following example. There is a dropdown list with city names. When a button is clicked, only the ones with names starting with Sofia appear on the list.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>In this example is demonstrated how to use the jqxListBox with
            Search field. ListBox is automatically updated when at least two characters are
            entered into the search field.</title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../scripts/jquery-1.7.2.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/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../scripts/gettheme.js"></script>
        <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = getTheme();
                // prepare the data
                var source =
                {
                    datatype: "jsonp",
                    datafields: [
                        { name: 'countryName' },
                        { name: 'name' },
                        { name: 'population', type: 'float' },
                        { name: 'continentCode' },
                        { name: 'adminName1' }
                    ],
                    url: "http://ws.geonames.org/searchJSON",
                    data: {
                        featureClass: "P",
                        style: "full",
                        maxRows: 12
                    }
                };
                var dataAdapter = new $.jqx.dataAdapter(source,
                    {
                        formatData: function (data) {
                            $("#searchBtn").click(function () {
                                data.name_startsWith = $("#searchBtn").text();
                                dataAdapter.dataBind();
                            });
                            return data;
                        }
                    }
                );
                $("#jqxdropdownlist").jqxDropDownList({ selectedIndex: 0, source: dataAdapter, displayMember: "name", valueMember: "countryName", width: 200, height: 25, theme: theme });
                var me = this;
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
            <div id="jqxdropdownlist">
            </div>
            Show only results starting with:
            <button id="searchBtn">
                Sofia</button>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

    September 4, 2012 at 6:48 am drop down list not refreshing from json source #7386

    Mark
    Member

    Hi Dimitar

    Thanks for this. I could get your sample to work but still not mine. In the end I have reduced the form to be just the dropdown (still not refreshing), and have found the problem on my json side as the response was being cached, so not a jqwidgets issue.

    Adding this code in my wcf json service WebOperationContext.Current.OutgoingResponse.Headers.Add("Cache-Control", "no-cache"); resolved the problem. Thanks for your help

    Mark

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

You must be logged in to reply to this topic.