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

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

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

  • 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');
    });


    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/


    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

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

You must be logged in to reply to this topic.