jQuery UI Widgets Forums Lists DropDownList select item on dropdown based on fetched JSON

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

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

  • GrantM
    Participant

    I am looking for a working example or explaination on how to acheive the following:

    At the momemt i have dropdownlist that is populated by

    				
    var source = {
    					 datatype: "csv",
    					 datafields: [
     						{ name: 'Page' },
    						 { name: 'Category' },
     						{ name: 'Icon' },
     						{ name: 'PageFile' },
    						 { name: 'SecuritySetting' }
    					 ],
    					url: "includes/getAllModules.asp?user=<%= Session("UserName") %>",
    					async: true
    				};
    				var allModulesData = new $.jqx.dataAdapter(source);
    
    				$("#ddlModule1").jqxDropDownList({ source: allModulesData, displayMember:"Page", valueMember:"Page", selectedIndex: 0, width: '240'});
    

    The above is done when the page loads. But when I click a button i want the dropdownlist to display the “Page” that has been retrieved from the .asp file like so:

    
    $(".iconEditDashBtn").click(function() {
          $.post("includes/getDashboardPagesJSON.asp, function(data) {
               // CHANGE SELECTED OPTION ON '#ddlModule1' TO THE FIRST 'Page' IN MY JSON OUTPUT
          });
    });
    

    My JSON output is from getDashboardPagesJSON.asp is:

    
    [{"PageFile":"bar_DeliveryPerformanceByMonth.html","PanelID":1,"Page":"Del Performance By Month","Args":""},{"PageFile":"bar_InvoiceTotalQuarterLast5Y.html","PanelID":2,"Page":"Inv Quarter Comparison","Args":""},{"PageFile":"bar_InvoiceTotalYearOnYearToDate.html","PanelID":3,"Page":"Inv Total Year On Year To Date","Args":""},{"PageFile":"bar_InvoiceAnalysis.html","PanelID":4,"Page":"Inv Analysis","Args":""}]
    

    So to be clear, I have all the available “Page”‘s preloaded in to the dropdown, then later when im editing my layout, i want it to bring up the current “Page” from the data retreived instead of showing the first “Page” in the list.
    Thank you for any help.

    • This topic was modified 7 years, 10 months ago by  GrantM.

    Dimitar
    Participant

    Hello GrantM,

    So, in this case, you would like to set the currently selected dropdownlist item to bar_DeliveryPerformanceByMonth.html, is that correct? If such item already exists in the dropdownlist, you can call the selectItem method, e.g.:

    $(".iconEditDashBtn").click(function() {
        $.post("includes/getDashboardPagesJSON.asp, function(data) {
            $("#ddlModule1").jqxDropDownList("selectItem", data[0].PageFile);
        });
    });

    Best Regards,
    Dimitar

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


    GrantM
    Participant

    It was actually “data[0].Page” I was after, but that done the trick. Thanks for your help.

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

You must be logged in to reply to this topic.