Remote Combobox pass Q param after form load

[bdearborn]

Hello,
I am trying to have a combobox run the remote lookup immediately after the form is loaded. Unfortunately, the q parameter is not passed after the form is loaded on the initial lookup. Is there a better way to do this? Here is an example of my code thus far:


      $(function()
      {
            $('#myForm').form(
         { 
                onLoadSuccess:function(data)
            { 
               
               //load combos
               $('#patient_id').combobox('reload', '/wservice/?_COMMAND=patient.lookup&q=' + $('#patient_id').combobox('getValue'));
               $('#physician_id').combobox('reload', '/wservice/?_COMMAND=personnel.lookup&q=' + $('#physician_id').combobox('getValue'));
               $('#facility_id').combobox('reload', '/wservice/?_COMMAND=facility.lookup&q=' + $('#facility_id').combobox('getValue'));
               $('#site_id').combobox('reload', '/wservice/?_COMMAND=site.lookup&q=' + $('#site_id').combobox('getValue'));
                },
                onLoadError:function()
            { 
               //display error
               alert('There was an error.');
                           
               //close the current form
               doClose_frmCaseMainRecord();
                }             
            });
      });





                <div class="myform">
                    <label for="patient_id">Patient:</label>
                    <select
                        id="patient_id"
                        name="patient_id"
                        class="easyui-combobox"                                 
                        data-options="
                            url:'/wservice/?_COMMAND=patient.lookup',
                            valueField:'id',
                            textField:'name',
                            mode:'remote',
                            disabled:true,
                            hasDownArrow:false"
                        style="
                            width:200px;"
                        />                                                                                                                 
                </div>
               
                <div class="myform">
                    <label for="physician_id">Surgeon:</label>
                    <select
                        id="physician_id"
                        name="physician_id"
                        class="easyui-combobox"                                 
                        data-options="
                            url:'/wservice/?_COMMAND=personnel.lookup',
                            valueField:'id',
                            textField:'name',
                            mode:'remote',
                            disabled:true,
                            hasDownArrow:false"
                        style="
                            width:200px;"
                        />                                                                                                                 
                </div>
               
                <div class="myform">
                    <label for="facility_id">Facility:</label>
                    <select
                        id="facility_id"
                        name="facility_id"
                        class="easyui-combobox"                                 
                        data-options="
                            url:'/wservice/?_COMMAND=facility.lookup',
                            valueField:'id',
                            textField:'name',
                            mode:'remote',
                            disabled:true,
                            hasDownArrow:false"
                        style="
                            width:200px;"
                        />                                                                                                                 
                </div>
               
                <div class="myform">
                    <label for="site_id">Site:</label>
                    <select
                        id="site_id"
                        name="site_id"
                        class="easyui-combobox"                                 
                        data-options="
                            url:'/wservice/?_COMMAND=site.lookup',
                            valueField:'id',
                            textField:'name',
                            mode:'remote',
                            disabled:true,
                            hasDownArrow:false"
                        style="
                            width:200px;"
                        />                                                                                                                 
                </div>

[stworthy]

Please confirm if the selector $('#myForm') is correct and if the 'onLoadSuccess' is triggered.

[bdearborn]

Hello,

The HTML code marked in blue is wrapped in a form with the id "myForm". Please excuse the class attribute that is set to the same value.

The $('#myForm') selector for the form is correct and the is successfully being populated with a JSON response from the server that triggers the "onLoadSuccess" function in the green code.

Best

[stworthy]

Please refer to the attached example that shows how to use 'reload' method to load the combobox's new items.

[bdearborn]

Hello,

I appreciate the example that you provided. It replicates, almost exactly, the functionality I have created above. Is there anyway to automate this functionality so that 'q' is passed to the webservice when the reload method is called?

$('#patient_id').combobox('reload'); //can q be set to getValue and passed to the webservice when this method is called

Best

[stworthy]

Please try the following code.

Code:

<select
	id="patient_id"
	name="patient_id"
	class="easyui-combobox"                                 
	data-options="
		url:'/wservice/?_COMMAND=patient.lookup',
		valueField:'id',
		textField:'name',
		mode:'remote',
		disabled:true,
		hasDownArrow:false,
		onBeforeLoad:function(param){
			param.q = $(this).combobox('getValue');
		}"
	style="
		width:200px;"
	/>       

[bdearborn]

Hello,

That works great! Thanks for your help. The example looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <meta name="keywords" content="jquery,ui,easy,easyui,web">
   <meta name="description" content="easyui help you build your web page easily!">
   <title>Form - jQuery EasyUI Demo</title>
   <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
   <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
   <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
   <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
   <form id="myForm">
      <select
         id="patient_id"
         name="patient_id"
         class="easyui-combobox"                                 
         data-options="
            url:'test.php',
            valueField:'id',
            textField:'name',
            mode:'remote',
            disabled:true,
            hasDownArrow:false,
                onBeforeLoad:function(param){param.q = $(this).combobox('getValue')}"
         style="
            width:200px;"
         />                 
   </form>
   <script>
      $(function(){
         $('#myForm').form({
            onLoadSuccess:function(){
               $('#patient_id').combobox('reload');
            }
         }).form('load',{
            patient_id: 6
         });
      });
   </script>
</body>
</html>