[jusmasParticipant]

Hi Peter,
Thanks for teh reply.
At last I have found teh issue.
I missed to put — type=”button” — in button deffinition hence it was working like regular form submission.

🙂

Thanks

[jusmasParticipant]

One more observation.
On finishing teh button click even routine, it jumps to a jquery library and then to ‘menuslashdot.js’ In this script, it runs a function ‘function store() ” and on finishing this function page gets reloaded but without any GET parameters it has already.

[jusmasParticipant]

Hi,

There was no change when applying teh style to “.jqx-tabs-content” as you mentioned. Also, teh div/UL/LI seems does not have this class applied.
However, when applying the style on class “.jqx-tabs-title”, I could see the result as expected.

Thanks,
Justine

[jusmasParticipant]

Still it does not solve the basic problem. Once switched to multi select dynamically, and the combobox text line is filled with items, the box does not grow to hold new items selecting.It makes the impression that the selection is not happening..

[jusmasParticipant]

Still its not working.. One Question: The library I downloaded a year back. Is there a chance that object ‘TextArea’ was not there in the objects list and you added it later? Where can I find the version number?

[jusmasParticipant]

I prefer a color change during table load itself. For example, a specific DB field – say ‘flag_test’ contain values either 0 or 1 and need to set the row background color when ‘flag_test’ =1. I wont be displaying that field in the data table.

How can I make it possible? Please help me…

Thanks,
Justine

[jusmasParticipant]

hi.. Is there a way to change the default background color of certain rows? If so, please give me the details on how to do it.

Thanks,
Justine

[jusmasParticipant]

Hi Peter,

What I wanted is : I am selecting an item from the list. Then at the end of the label I am type in few more characters but nothing there in the list matching to the present label. In that situation, if I press tab or click on anything else, the label should be set back to the label of last selected item.
In the example i shown, in the “[B3]” section in BLUR I am doing like

if ($("#cities").jqxComboBox('selectedIndex')!=-1){
     var item = $("#cities").jqxComboBox('getSelectedItem');
     $("#cities").jqxComboBox('selectIndex',item.index);
     $("#cities input").val(item.label);
     $('#mystat').text($('#mystat').text() + " [B3]" + $('#cities').jqxComboBox('selectedIndex'));
}

but the label does not change as i expected. Can you give me a code sample to make it possible please? The ultimate goal is that to make sure user selects and see only valid items which are existing in the list.

Thanks….

[jusmasParticipant]

well, i figured out this happen because of the following line in the BLUR event routine of the input box.

$("#cities").jqxComboBox('selectIndex',$("#cities").jqxComboBox('selectedIndex'));

The purpose of this line was I was trying to select the already selected item if user select one and continue typing some characters but there is no matching item in the list. In such case, in the lost Focus it will select the same exact item which was last selected, and marked as selected at that time.

If I remove that code, it works, but the above characteristics wont be there.

Whats your idea?

[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.

[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>

[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.

[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

[jusmasParticipant]

Hi.. data binding is triggered on change of some other controls.. However, I have identified the problem.. If I remove the “data.XXX=” lines in the “processdata” routine, the data will be listed in the dropdown. These lines are there to set the value of GET variables to be passed to the AJAX URL. Now, if I remove, I have to define the Full URL in the “URL: ” part, including the query string also. If I construct the querystring before this portion, it returns some error as query string values include a combobox selection value also but combobox declaration is coming in the bottom only.

Please help..

[jusmasParticipant]

I think the following validation will do this.

{input:’#places input’, message:’City is required!’, action:’keyup,blur,select’, rule:
function (input) {
if($(‘#places’).jqxComboBox(‘selectedIndex’)> -1 ) return true; else return false;
}
},

[Author]

Posts