jQWidgets Forums

Tagged: jqxComboBox, jqxDropDownList

This topic contains 1 reply, has 2 voices, and was last updated by Peter Stoev 10 years, 7 months ago.

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

Author

dropdownList not populating on ajax return Posts
August 12, 2014 at 8:59 pm dropdownList not populating on ajax return #58292

mlbartonsr
Participant

I have code where I want to display a jqxDropDownList box after a button is pushed.
I have test the code and the controller is returning the JSON string
The success function of the ajax call is returning the effData with the JSON string contents as expected.
The dataAdapter contains the json string as expected.

The DropDownList displays but there is the JSON elements are not visible in the dropdown.

Any help would be greatly appreciated.

I have included my code below for both my JSP and my java controller.

demo.jsp

<html>
<head>
<title>Demo</title>

<link rel=”stylesheet” href=”pages/js/jqwidgets/styles/jqx.base.css” type=”text/css” />

<script type=”text/javascript” src=”pages/js/scripts/jquery-1.10.2.min.js”></script>
<script type=”text/javascript” src=”pages/js/scripts/demos.js”></script>
<script type=”text/javascript” src=”pages/js/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”pages/js/jqwidgets/jqxtabs.js”></script>
<script type=”text/javascript” src=”pages/js/jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”pages/js/jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”pages/js/jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”pages/js/jqwidgets/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”pages/js/jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”pages/js/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”pages/js/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”pages/js/jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”pages/js/jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”pages/js/jqwidgets/jqxcombobox.js”></script>
<script type=”text/javascript” src=”pages/js/jqwidgets/jqxpanel.js”></script>
<script type=”text/javascript” src=”pages/js/jqwidgets/jqxdockpanel.js”></script>
<script type=”text/javascript” src=”pages/js/jqwidgets/jqxdata.js”></script>

<script type=”text/javascript”>

$(document).ready(function () {

$(“#LoadComboBoxBtn”).jqxButton({ width: ‘150px’, height: ’25px’ });
$(“#LoadComboBoxBtn”).bind(‘click’, function (event) {
loadmydata();
});

});

function loadmydata() {

$.ajax({
url: “getEffectiveYrPdData”,
type: “GET”,

datatype:”json”,
success: function(effData){

var effYrPds =
{
datatype: “json”,
datafields: [
{name: ‘label’ },
{name: ‘value’ }
],
localdata: effData,
async: false
};
var dataAdapter = $.jqx.dataAdapter(effYrPds);

$(“#jqxEffYrPdList”).jqxDropDownList(
{
selectedIndex: 0,
displayMember: ‘label’,
valueMember: ‘value’,
source: dataAdapter,
disabled: false
});
},
error: function(data){
alert(“failed”);
}

});

};

</script>

</head>
<body>

<h2>DEMO</h2>

<div id=”jqWidgets”>
<table>
<tr>
<td colspan=”2″>
<input id=’LoadComboBoxBtn’ type=”button” value=”LoadComboBox”/>
</td>
</tr>
<tr>
<td><div id=”jqxEffYrPdList”></div></td>
</tr>
</table>

</div>

</body>
</html>

Here is my Spring Controller

package com.pepsico.zfm.web.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class DemoController {

@RequestMapping(value = “/demo”, method = RequestMethod.GET)
public String demo() {
return “demo”;
}

@RequestMapping(value = “/getEffectiveYrPdData”, method = RequestMethod.GET)
@ResponseBody
public String getRegionEffectiveDates(ModelMap model) {
String effData = “[{‘label’: ‘2014P09′,’value’: ‘201409’},{ ‘label’: ‘2015P01′,’value’: ‘201501’}]”;
model.addAttribute(“effData”,effData);
return effData;
}

}

Best regards,
M L Barton, Sr.

August 13, 2014 at 4:49 am dropdownList not populating on ajax return #58298

Peter Stoev
Keymaster

Hi mlbartonsr,

The dataAdapter in your code is not initialized correctly. You missed the “new” keyword which means that your dataAdapter instance is undefined and so you set the jqxDropDownList’s source property to something which is undefined.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com
Author

Posts

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

You must be logged in to reply to this topic.