Reset Dropdownlist - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: drop-down list

This topic contains 4 replies, has 2 voices, and was last updated by tompasto 11 years, 2 months ago.

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

Author

Reset Dropdownlist Posts

February 28, 2014 at 4:28 pm Reset Dropdownlist #50313

tompasto

Participant

Hello,

I create a simple button to clear a form that call an erase function :

 function erase()
 {

	 $("#WLstatus").jqxDropDownList({ selectedIndex: -1});
	 $("#WLcode").jqxDropDownList({ selectedIndex: -1});
	 $('#Hospitalno').val('');
	 $('#Nom').val('');
	 $('#Operator').val('');
	 $('#DateRappel').val(null);
	 $('#SetHospitalNo').val('');
	 $('#SetCodeList').val('');
	 $('#SetListStatus').val('');
	 $('#SetOperateur').val('');
	 $('#Setpriority').val('');
	 $('#SetRecallDate').val('');
	 showGrid();
 }

The problem is that the script stop after each dropdownlist selected index reset. So i need to clic 3 times on the button to clear all form when all area are set (all input fields reset in one clic).

February 28, 2014 at 5:24 pm Reset Dropdownlist #50316

Peter Stoev

Keymaster

Hi tompasto,

The provided information is not sufficient for testing your scenario. Setting “selectedIndex” works fine in the current version – http://jsfiddle.net/uPAgc/. If you wish, provide a full sample so we can test and see what’s going wrong on your side.

Best Regards,
Peter Stoev

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

February 28, 2014 at 5:56 pm Reset Dropdownlist #50318

tompasto

Participant

Here it is. Here also a youtube link with a screenshot: https://www.youtube.com/watch?v=sgD_YgEIyqI


<?php 
 require '../data/menu.php';
 require_once '../Config.php';
 
 ?>
 <!DOCTYPE html>
 <html>
 <head>
 <title>Gestion des cliniques</title>
 <link rel='stylesheet' type='text/css' href='/SaludWeb/css/styles.css' />
 <link rel="stylesheet" href="/SaludWeb/jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css"/>
 <link rel="stylesheet" href="/SaludWeb/jqwidgets/jqwidgets/styles/jqx.Salud.css" type="text/css"/>
 <script src='/SaludWeb/js/jquery-1.10.2.js'></script>
<script type="text/javascript" src="/jqwidgets/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="/jqwidgets/jqwidgets/jqxdatetimeinput.js"></script>
<script type="text/javascript" src="/jqwidgets/jqwidgets/jqxcalendar.js"></script>
<script type="text/javascript" src="/jqwidgets/jqwidgets/globalization/globalize.js"></script>
<script type="text/javascript" src="/jqwidgets/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="/jqwidgets/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="/jqwidgets/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="/jqwidgets/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="/jqwidgets/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="/jqwidgets/jqwidgets/jqxinput.js"></script>
<script type="text/javascript" src="/jqwidgets/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="/jqwidgets/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="/jqwidgets/jqwidgets/jqxgrid.selection.js"></script> 
<script type="text/javascript" src="/jqwidgets/jqwidgets/jqxgrid.columnsresize.js"></script> 
<script type="text/javascript" src="/jqwidgets/jqwidgets/jqxgrid.filter.js"></script> 
<script type="text/javascript" src="/jqwidgets/jqwidgets/jqxgrid.sort.js"></script> 
<script type="text/javascript" src="/jqwidgets/jqwidgets/jqxgrid.pager.js"></script> 
<script type="text/javascript" src="/jqwidgets/jqwidgets/jqxgrid.grouping.js"></script>
<script type="text/javascript" src="/jqwidgets/jqwidgets/jqxgrid.edit.js"></script> 
<script type="text/javascript" src="/jqwidgets/jqwidgets/jqxwindow.js"></script>
 
 </head>
 
 <script type="text/javascript">
 $(document).ready(function () {

	 var WLcode =
     {
             datatype: "json",
             datafields: [
             { name: 'CODE'},
             { name: 'WLdescr'},
             ],
             url: '/data/query.php?query=showWLcodes',
             async: false
         	
     };
	  var dataAdapter = new $.jqx.dataAdapter(WLcode);

	  var Operator =
	     {
	             datatype: "json",
	             datafields: [
	             { name: 'clinic_id'},
	             { name: 'STAFF_CODE'},
	             { name: 'operator'},
	             ],
	             url: '/data/query.php?query=showoperator',
	             async: false
	         	
	     };
		  var OpeData = new $.jqx.dataAdapter(Operator);

	 var Patient =
	 	 {
			    datatype: "json",
		   	    datafields: [
					{ name: 'HOSPITAL_NO', type: 'string'},
					{ name: 'Patient', type: 'string'}
					

				],
				url: '/SaludWeb/data/query.php?query=showpatient'
		};

	 var WLstatus =
     {
             datatype: "json",
             datafields: [
			 { name: 'CODE'},
             { name: 'DESCRIPTION'}
             ],
             url: '/data/query.php?query=showWLstatus',
             async: false
         	
     };
	  var WLstatusAdapter = new $.jqx.dataAdapter(WLstatus);     
	  
	 $("#Hospitalno").jqxInput({source: function (queries, response) {
			var dataAdapter3 = new $.jqx.dataAdapter
			(Patient,
				
				{
					autoBind: true,
					formatData: function (data) {
						data.queries = queries;
						return data;
					},
					loadComplete: function (data) {
						if (data.length > 0) {
							response($.map(data, function (item) {
								return item.Patient;
							}));
						}
					}
				}
			);
		},
		 				 
		 				 placeHolder: "Entrer un nom en premier",displayMember:'Patient', valueMember:'HOSPITAL_NO', height: 25, width: 200, minLength: 1, items: 15, 
			 				renderer: function (itemValue, inputValue) {
			 			        var value = itemValue.split("-");
			 			        return value[0];
		 			  }

	 });
	 $("#Hospitalno").on('select', function (event) {
	     if (event.args) { 
	         var item = event.args.item;
	         if (item) { 
	        	 var value =  item.label.split("-");
	        	 $('#Nom').val(value[1]);
	        	 $('#SetHospitalNo').val(value[0]);
	        	 ShowGrid();
	        	 var data='query=FilterArchive&Hospital_NO='+value[0] ;
	        	 $.ajax({
	                    dataType: 'json',
	                    url: '/SaludWeb/data/query.php',
	                    data: data,
	                    success: function (data, status, xhr) {
	         				if (data!=null){
	                    	$('#SetArchive').val('1');
	                    	
	                    	$("#Archive").html('<B><SPAN style="font-familly:Arial; font-size:15px; color:#F13338;"> DOSSIER ARCHIV&Eacute; MODIFICATION IMPOSSIBLE </SPAN>');
	                    	$("#ResultGrid").jqxGrid({editable: false});
                    		}
	         				else{
	         						$("#Archive").html('');
		         					$('#SetArchive').val('0');
		         				}
		                    }}) 
	         }
	     }
	 }); 
	 
	 $("#Nom").jqxInput({source: function (queries, response) {
			var dataAdapter3 = new $.jqx.dataAdapter
			(Patient,
				
				{
					autoBind: true,
					formatData: function (data) {
						data.queries = queries;
						return data;
					},
					loadComplete: function (data) {
						if (data.length > 0) {
							response($.map(data, function (item) {
								return item.Patient;
							}));
						}
					}
				}
			);
		},
		 				 
		 				 placeHolder: "Entrer un nom en premier",displayMember:'Patient', valueMember:'HOSPITAL_NO', height: 25, width: 200, minLength: 1, items: 15, 
			 				renderer: function (itemValue, inputValue) {
			 			        var value = itemValue.split("-");
			 			        return value[1];
		 			  }

	 });
	 
	 $("#Nom").on('select', function (event) {
	     if (event.args) { 
	         var item = event.args.item;
	         if (item) { 
	        	 var value =  item.label.split("-");
	        	 $('#Hospitalno').val(value[0]);
	        	 $('#SetHospitalNo').val(value[0]);
	        	 ShowGrid();
	        	 var data='query=FilterArchive&Hospital_NO='+value[0] ;
	        	 $.ajax({
	                    dataType: 'json',
	                    url: '/SaludWeb/data/query.php',
	                    data: data,
	                    success: function (data, status, xhr) {
	         				if (data!=null){
	                    	$('#SetArchive').val('1');
	                    	$("#Archive").html('<B><SPAN style="font-familly:Arial; font-size:15px; color:#F13338;"> DOSSIER ARCHIV&Eacute; MODIFICATION IMPOSSIBLE </SPAN>');
	                    	$("#ResultGrid").jqxGrid({editable: false});
                    	    }
	         				else{
	         						$("#Archive").html('');
		         					$('#SetArchive').val('0');
		         				}
		                    }})
	        	
	         }
	     }
	 });
	 
     $("#WLcode").jqxDropDownList({ source: dataAdapter, selectedIndex: -1,  height: '25px', width:'250px', theme: 'Salud', displayMember:'WLdescr', valueMember:'CODE'  });
     $("#WLcode").on('change', function (event) {
         var Codeliste=event.args.item.value;
         $('#SetCodeList').val(Codeliste); 
         ShowGrid();
     });
         
     
      
	 $("#WLstatus").jqxDropDownList({ source: WLstatusAdapter , selectedIndex: -1, width: '200px', height: '20px', theme: 'Salud', displayMember:'DESCRIPTION', valueMember:'CODE' });
	 $("#WLstatus").on('change', function (event) {
         var Codeliste=event.args.item.value;
         $('#SetListStatus').val(Codeliste); 
         ShowGrid();
     })
     
     $("#DateRappel").jqxDateTimeInput({ formatString: 'yyyy-MM-dd', value: null,width: '150px', height: '25px', theme: 'Salud',allowNullDate: true });
     $("#Operator").jqxInput({source: OpeData, placeHolder: "Entrer un etudiant", displayMember:"operator",valueMember:"STAFF_CODE", height: 25, width: 200, minLength: 1 });
     $("#Operator").on('select', function (event) {
	     if (event.args) { 
	         var Operatorvalue = event.args.item.value;       
	        	 $('#SetOperateur').val(Operatorvalue);
	        	 ShowGrid();	         
	     }
	 }); 
	 
     $("#Operateur").jqxInput({source: OpeData, placeHolder: "Entrer un etudiant", displayMember:"operator",valueMember: "clinic_id", height: 25, width: 200, minLength: 1, theme:'Salud'});		
     $("#popupWindow").jqxWindow({
         width: 500, resizable: false,  isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01           
     });
     $("#popupWindow").on('open', function () {
         $("#Operateur").jqxInput('selectAll');
     });

     $("#Cancel").jqxButton({ theme: 'Salud' });
     $("#Save").jqxButton({ theme: 'Salud' });

     $("#Save").click(function () {
         if (editrow >= 0) {
             var row = { firstname: $("#Operateur").val()};
             var rowID = $('#ResultGrid').jqxGrid('getrowid', editrow);
             $('#ResultGrid').jqxGrid('updaterow', rowID, row);
             $('#Updatecolumn').val('OPERATOR');
             $('#UpdateValue').val()=$("#Operateur").val();
             $("#popupWindow").jqxWindow('hide');
         }
     });

 });

 function erase()
 {

	 $("#WLstatus").jqxDropDownList({ selectedIndex: -1});
	 $("#WLcode").jqxDropDownList({ selectedIndex: -1});
	 $('#Hospitalno').val('');
	 $('#Nom').val('');
	 $('#Operator').val('');
	 $('#DateRappel').val(null);
	 $('#SetHospitalNo').val('1');
	 $('#SetCodeList').val('');
	 $('#SetListStatus').val('');
	 $('#SetOperateur').val('');
	 $('#Setpriority').val('');
	 $('#SetRecallDate').val('');
	 ShowGrid();
	
 }

 function ShowGrid()
 {
	
	 var HospitalNo=$('#SetHospitalNo').val();
	 var CodeListe=$('#SetCodeList').val();
	 var ListeStatus=$('#SetListStatus').val();
	 var STAFF_CODE=$('#SetOperateur').val();
	 var Archive=$('#SetArchive').val();
	 
	 var WLentries =
 	 {
		    datatype: "json",
	   	    datafields: 
		[
		{ name: 'WL_NUMBER', type: 'string'},
		{ name: 'NOM', type: 'string'},
		{ name: 'LISTE', type: 'string'},
		{ name: 'WL_CODE', type: 'string'},
		{ name: 'WL_STATUS', type: 'string'},
		{ name: 'HOSPITAL_NO', type: 'string'},
		{ name: 'ENTRY_DATE', type: 'date', format: 'dd/MM/yyyy'},
		{ name: 'PRIORITY', type: 'string'},
		{ name: 'REFERRAL_NO', type: 'string'},
		{ name: 'APPOINTMENT_MADE', type: 'string'},
		{ name: 'APPOINTMENT_LINK', type: 'string'},
		{ name: 'OPERATOR', type: 'string'},
		{ name: 'APPOINTMENT_REASON', type: 'string'},
		{ name: 'APPOINTMENT_FOR', type: 'string'},
		{ name: 'WL_NOTES', type: 'string'},
		{ name: 'RECALL_DATE', type: 'date'},
		{ name: 'EPISODE_NO', type: 'string'},
		{ name: 'STATUS_CHANGED_DATE', type: 'date', format: 'dd/MM/yyyy'},
		{ name: 'OPERATOR_TYPE2', type: 'string'},
		{ name: 'LOCATION', type: 'string'},
		{ name: 'SHORT_NOTICE', type: 'string'},
		{ name: 'INSERTED_DATE', type: 'date', format: 'dd/MM/yyyy'},
		{ name: 'INSERTED_BY', type: 'string'},
		],
			id: 'WL_NUMBER',
			url: '/data/query.php?query=showWLentries&HOSPITALNO='+HospitalNo+'&CodeListe='+CodeListe+'&ListeStatus='+ListeStatus+'&STAFF_CODE='+STAFF_CODE,
			
			updaterow: function (rowid, rowdata, commit) {

			
				var cellname=$('#Updatecolumn').val();
				var cellValue=$('#UpdateValue').val();
				
				$('#Updatecolumn').val('');
				$('#UpdateValue').val('');
				
                var data = "query=updateWL&cellname=" + cellname +"&cellValue=" +cellValue ;
                data = data + "&id=" +rowid;
                $.ajax({
                    dataType: 'json',
                    url: '/data/SqlDataModification.php',
                    data: data,
                    success: function (data, status, xhr) {
                       
                        commit(true);
                    }})
			}
	};
	 var WLData = new $.jqx.dataAdapter(WLentries);

	 var WLstatus =
     {
             datatype: "json",
             datafields: [
			 { name: 'CODE'},
             { name: 'DESCRIPTION'}
             ],
             url: '/SaludWeb/data/query.php?query=showWLstatus',
             async: false
         	
     };
	  var WLstatusdata = new $.jqx.dataAdapter(WLstatus);

	  var WLcode =
	     {
	             datatype: "json",
	             datafields: [
	             { name: 'CODE'},
	             { name: 'WLdescr'},
	             ],
	             url: '/SaludWeb/data/query.php?query=showWLcodes',
	             async: false
	         	
	     };
		  var WLcodedata = new $.jqx.dataAdapter(WLcode);

          
  $("#ResultGrid").jqxGrid(
	 {
		 source: WLData,
		 width: 1580,
		 columns: [
					{ text: 'NO_DOSSIER', editable: false, datafield: 'HOSPITAL_NO', width: 80 },
					{ text: 'NOM', editable: false, datafield: 'NOM', width: 150 },
					{ text: 'LISTE', columntype: 'dropdownlist', datafield: 'LISTE', width: 200
  						, createeditor: function (row, cellvalue, editor) {
       					  editor.jqxDropDownList({ source: WLcodedata, displayMember:"WLdescr",placeHolder: ""});  }
  						, cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
    							if (newvalue == "") return oldvalue;
    							$('#Updatecolumn').val(column);
    							$('#UpdateValue').val(newvalue);
   
    
    					  }
        
					},
	
					{ text: 'STATUT', columntype: 'dropdownlist', datafield: 'WL_STATUS', width: 140
    					, createeditor: function (row, cellvalue, editor) {
       						 editor.jqxDropDownList({ source: WLstatusdata, displayMember:"DESCRIPTION"});
   						 }
						, cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
    						if (newvalue == "") return oldvalue;
   							 $('#Updatecolumn').val(column);
    						 $('#UpdateValue').val(newvalue);
   						  }
					},
					{ text: 'PRIOR', datafield: 'PRIORITY', width: 50 },
					{ text: 'OPERATOR', datafield: 'OPERATOR', width: 200 },
					{ text: '', datafield: 'Edit', columntype: 'button',  cellsrenderer: function () {
   							 return "...";
 							 }, buttonclick: function (row) {
									 $('#ResultGrid').jqxGrid('focus');
    								 editrow = row;
    								 var offset = $("#ResultGrid").offset();
    								 $("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 200, y: parseInt(offset.top) + 60 } });
   
    								 var dataRecord = $("#ResultGrid").jqxGrid('getrowdata', editrow);
    								  $("#Operateur").val(dataRecord.OPERATOR);
    								  $("#popupWindow").jqxWindow('open');
								 }
					},
					{ text: 'DATE RAPPEL', datafield: 'RECALL_DATE', columntype: 'datetimeinput', width: 110, align: 'right', cellsalign: 'right', cellsformat: 'dd-MM-yyyy'	
					},

					{ text: 'NOTES', datafield: 'WL_NOTES', width: 300 },
					{ text: 'CHANG STATUT', editable: false,  datafield: 'STATUS_CHANGED_DATE', width: 100,cellsformat: 'dd-MM-yyyy' },
					{ text: 'INSER LE', editable: false, datafield: 'INSERTED_DATE', width: 100, cellsformat: 'dd-MM-yyyy' },
					{ text: 'INSER PAR', editable: false, datafield: 'INSERTED_BY', width: 100 },

		       ],
		      
		     theme: 'Salud',
		     sortable: true,
		     pageable: true,
             autoheight: true,
             columnsresize: true,
             editable: true
		             
	 });		  

 }

 </script>
 
 <BODY>
 <FORM action="">

 <BR>
  <div class="shadow-box">
    <br>
 	<div id='Archive'></div>	
  	<table style="font-familly:Arial;" >
  		<tr><td><B>FILTRES:</td><td></td><td></td><td></td>
  		<td><a href="#" class="bubble" onclick="erase()"><img alt="effacer" src="/SaludWeb/images/erase1.png" width="30" height="30"><span>Effacer</span></a></td>
  		</tr>
  		<tr>
  		 <TD>
  		  No. Dossier:
  		 </TD>
  		 <td><input type="text" id='Hospitalno'> </td>
  		 <TD>
  		  Nom:
  		 </TD>
  		 <td><input id='Nom'/> </td>
  		 
  		</tr><tr>
  		 <TD>
  		  Code Liste:
  		 </TD>
  		 <td><div id='WLcode'></div></td>
  		 <TD>
  		  
  		 </TD>
  		 <td></td>
  		</tr><tr>
  		 <TD>
  		  Statut Liste:
  		 </TD>
  		 <td><div id='WLstatus'></div></td>
  		 <TD>
  		  Op&eacute;rateur:
  		 </TD>
  		 <td><input id='Operator' /> </td>
  		</tr><tr>
  		 <TD>
  		  Prioritaire
  		 </TD>
  		 <td><input type='checkbox' id='Priority'></td>
  		</tr><tr>
  		  <TD>
  		  Chercher par date de rappel
  		 </TD>
  		 <td><div id='DateRappel'></div></td>
  		 <TD>
  		 </TD>
  		 <td></td>
  		 
  		</tr>
  	</table>
  </div>
  <br>
  <div class="shadow-box">
  <div id="ResultGrid"></div>

  </div>
    <div style="margin-top: 30px;">
            <div id="cellbegineditevent"></div>
            <div style="margin-top: 10px;" id="cellendeditevent"></div>
 </div>
       <div id="popupWindow">
            <div>Edit</div>
            <div style="overflow: hidden;">
                <table>
                    <tr>
                        <td align="right">Operateur:</td>
                        <td align="left"><input id="Operateur" /></td>
                    </tr>

                    <tr>
                        <td align="right"></td>
                        <td style="padding-top: 10px;" align="right"><input style="margin-right: 5px;" type="button" id="Save" value="Save" /><input id="Cancel" type="button" value="Cancel" /></td>
                    </tr>
                </table>
            </div>
       </div>
       <input type='hidden' id='Updatecolumn' />
       <input type='hidden' id='UpdateValue' />
       <input type='hidden' id='SetHospitalNo' />
       <input type='hidden' id='SetCodeList' />
       <input type='hidden' id='SetListStatus' />
       <input type='hidden' id='SetOperateur' />
       <input type='hidden' id='Setpriority' />
       <input type='hidden' id='SetRecallDate' />
       <input type='hidden' id='SetArchive' />
   </FORM>
 </BODY>

February 28, 2014 at 6:47 pm Reset Dropdownlist #50321

Peter Stoev

Keymaster

Hi tompasto,

The problem as far as I see is that you trigger selection changes of jqxDropDownLists. That is Ok, but when you set “selectedIndex” to -1, the “change” event would be raised as expected, but you have code which does something in the event handler. I suppose that you will have to add some boolean flag so your code in the “change” handler does not run while you clear the selection.

Best Regards,
Peter Stoev

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

February 28, 2014 at 7:54 pm Reset Dropdownlist #50327

tompasto

Participant

Thanks for your reply

Author

Posts

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

You must be logged in to reply to this topic.