select item on dropdown based on fetched JSON

[GrantMParticipant]

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.

[DimitarParticipant]

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/

[GrantMParticipant]

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

[Author]

Posts