dropdown list loading on buttonclick:: loads on second click only

[jusmasParticipant]

Hi..

I am trying to load the dropdownlist items from a remote API as JSON. The purpose is to load the dropdown list on clicking a button.The problem I am facing is that though it downloads the content from API, the list is not populated in first attempt. On the second click, before AJax works to load API second time, the content from first call will be populated. Please look into the following code.

HTML

<div id="car_types"></div>
<div>
    <input style="margin-top: 20px;" type="button" id='jqxButton' value="Load" />
</div>

Javascript

var car_data_array = new Array();

function loadCarTypesList(){
	//$("#car_types").jqxDropDownList('clear');
	from_city_dummy = 126;
	locality_airport= "";
	pickup_date     = "2014-08-01";
        pickup_time     = "11:30";
	trip_type       = 1;
	trip_sub_type	 = 1;
	jQuery.get("http://alphasavaari.com/CC_Rate_Calculator_data.php", {trip_type:trip_type,trip_sub_type:trip_sub_type,from_city_dummy:from_city_dummy,locality_airport:locality_airport,pickup_date:pickup_date,pickup_time:pickup_time},function(response){
			var returnedData = JSON.parse(response);
                        //alert(returnedData.length);            // to show the count of items in response
                        //alert(JSON.stringify(returnedData, null, 4)); // to show the structure of response
			for (i=0;i<returnedData.length;i++ ) {
				var row = {};
				row["car_id"]=returnedData[i].car_id;
				row["car_type"]=returnedData[i].car_type;
				row["car_name"]=returnedData[i].car_name;
				row["amount"]=returnedData[i].tol_amt;
				car_data_array[i]=row;
			} ;
			                					
	});
	dataAdapter_cars.dataBind(); // rebinding Car List adapter 
} // end of function

var car_types_data = {
			datatype: "array",
			localdata: car_data_array,
   		}
var dataAdapter_cars   = new $.jqx.dataAdapter(car_types_data);

$("#car_types").jqxDropDownList({selectedIndex:0,source:dataAdapter_cars, width:'230px',height:'25px',itemHeight: '70px', displayMember:'car_type',valueMember:'car_id',autoDropDownHeight:true,placeHolder:'Car Categories',
	renderer: function (index, label, value) {
                   //alert(JSON.stringify(car_data_array, null, 4));   // to view the structure of array
                  var datarecord = car_data_array[index];
                  var table = '<table style="min-width: 180px;"><tr><td>' + datarecord.car_type + '</td></tr><tr><td>' + datarecord.car_name + ' &nbsp;&nbsp;&nbsp;&nbsp;  Amount:' + datarecord.amount+ '</td></tr></table>';
	         return table;
	}
});

   $("#jqxButton").jqxButton({theme: 'energyblue' });
   $('#jqxButton').on('click', function () {
        loadCarTypesList();
  });

Please tell me how can I erase the present content of the dropdown when ever clicking on the button, as everytime it loads, the content may vary. Thanks…

• This topic was modified 9 years, 4 months ago by  jusmas.
• This topic was modified 9 years, 4 months ago by  jusmas.

[Peter StoevKeymaster]

Hi jusmas,

If you want to rebind a widget, you will have to set its source property to point to a new dataAdapter instance. This is not enough: dataAdapter_cars.dataBind();

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[jusmasParticipant]

Hi Peter,
In the above given code segment, if I replace the line “dataAdapter_cars.dataBind();” in the “loadCarTypesList()” function with the below two line, will it be the right way? I tried it but the issue is still there.

var dataAdapter_cars1   = new $.jqx.dataAdapter(car_types_data);
$("#car_types").jqxDropDownList({source:dataAdapter_cars1});

If this is not the correct one, please show me an update with correct rebinding. The rebinding applied here is for refreshing teh list based on some other values. Is there another way to do it?

Thanks

• This reply was modified 9 years, 4 months ago by  jusmas.
• This reply was modified 9 years, 4 months ago by  jusmas.

[Peter StoevKeymaster]

Hi jusmas,

Well, you do that outside the jQuery.get function which is Asynchronous. This means that your data binding code will run before your jQuery.get call is completed. I think that you should move your code for binding within the jQuery.get function’s body.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[jusmasParticipant]

Thanks Peter it worked!.. However the list is not as per the data received. for example, for each dynamic loading, the number of items in the response varies. If the new response contain only less items, it will shows the previous data which contain higher number of items. For example, I am applying different parameters and making calls. Imagine calls A and B receives 5 and 3 items respectively.
If Call A done first – it load 5 items
Then if call B done – it shows same 5 items though the call returns only 3.

If call B done first – it loads 3 items
Then if call A done – it shows the 5 items (may be additional 2 are appended, or all 5 are loaded fresh- not sure)

How can I clear the present content everytime to make sure it display only the content received in new call?

If I enable the “//$(“#car_types”).jqxDropDownList(‘clear’);” line in teh above code then list becomes always empty.

[Peter StoevKeymaster]

I hope you’ve moved the binding code at the bottom of your jQuery.get function. If you did so, the widget will always display your correct data because it display what you pass to it, not something else. I also suggest you to use for (var i=0; … instead of for (i=0; in JavaScript.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[jusmasParticipant]

Hi Peter,, I have moved the lined to end of JQuery segment. given below the new code.. Sorry that I dont know how to set a JQXWidget environment in JSFiddle so, I am pasting the new code here.

var car_data_array = new Array();

function loadCarTypesList(city_id){
	//$("#car_types").jqxDropDownList('clear');
	from_city_dummy = city_id;
	locality_airport= "";
	pickup_date     = "2014-08-01";
        pickup_time     = "11:30";
	trip_type       = 1;
	trip_sub_type	 = 1;
	jQuery.get("http://alphasavaari.com/CC_Rate_Calculator_data.php", {trip_type:trip_type,trip_sub_type:trip_sub_type,from_city_dummy:from_city_dummy,locality_airport:locality_airport,pickup_date:pickup_date,pickup_time:pickup_time},function(response){
			var returnedData = JSON.parse(response);
            alert("Record count="+returnedData.length);
            //alert(JSON.stringify(returnedData, null, 4));
			for (var i=0;i<returnedData.length;i++ ) {
				var row = {};
				row["car_id"]=returnedData[i].car_id;
				row["car_type"]=returnedData[i].car_type;
				row["car_name"]=returnedData[i].car_name;
				row["amount"]=returnedData[i].tol_amt;
				car_data_array[i]=row;
			} ;
      //alert(JSON.stringify(car_data_array, null, 4));
		var dataAdapter_cars1=new $.jqx.dataAdapter(car_types_data);
$("#car_types").jqxDropDownList({selectedIndex:0,source:dataAdapter_cars1}); 
	//dataAdapter_cars1.dataBind(); // rebinding Car List adapter 	                					
	});
    
} // end of function

var car_types_data = {
			datatype: "array",
			localdata: car_data_array,
   		}
var dataAdapter_cars   = new $.jqx.dataAdapter(car_types_data);

$("#car_types").jqxDropDownList({selectedIndex:0,source:dataAdapter_cars, width:'320px',height:'25px',itemHeight: '70px', displayMember:'car_type',valueMember:'car_id',autoDropDownHeight:true,placeHolder:'Car Categories',
	renderer: function (index, label, value) {
        //alert(JSON.stringify(car_data_array, null, 4));
        var datarecord = car_data_array[index];
        var table = '<table style="min-width: 180px;"><tr><td>' + datarecord.car_type + '</td></tr><tr><td>' + datarecord.car_name + ' &nbsp;&nbsp;&nbsp;&nbsp;  Amount:' + datarecord.amount+ '</td></tr></table>';
	      return table;
	}
});

$("#blr").jqxButton({theme: 'energyblue' });
$("#agr").jqxButton({theme: 'energyblue' });

   $('#blr').on('click', function () {
        loadCarTypesList(377);
  });
 $('#agr').on('click', function () {
        loadCarTypesList(126);
  });

I have placed two buttons clicking them pass different values to the custom function so, the AJAX call will return different record counts.
Clicking the first button returns 5 and second one will return 3 records. But, clicking second button after the first button will list the same 5 records which returned by the button1 though 3 are expected.

html

<div id="car_types"></div>
<div>
    <input style="margin-top: 20px;" type="button" id='blr' value="Load BLR" />
     <input style="margin-top: 20px;" type="button" id='agr' value="Load AGR" />
</div>

• This reply was modified 9 years, 4 months ago by  jusmas.

[jusmasParticipant]

I have figured out the issue. It was because the “car_data_array” (the data source) was not cleared before holding less number of items on reload. If the first load return 5 items and second load contain 3 items, only first three elements of the array was refreshed and the last two were remaining un cleaned.. I put a “car_data_array.length=0” in Jquery response , so that it now works fine.

[Author]

Posts