UI Page Select Box driving <g:reference> Query

[mpaquette]

Ok I thought this would be simple but I've tried 100 different ways of passing a variable to my query and nothing gets there.

I have a form thats a sort of psuedo-shopping cart.

User submits an order using a record producer, that record has a related list, order_item.

There is a UI action on the order form to Add Order.

This opens a window with a select box where they can select an item type.

Below item type is the item field which is a reference, I need the reference query to show results only for the selected item type.

Right now im using <j:set> to create a variable and im just coercing it to a value of "Tool" (the first option of the selectbox) just to make sure im connecting to my variable in the query, which works so good step 1 good.

However it would seem I have no way of altering this variable while on the form, I tried a few ways of accessing it onChange but I think anything in there is technicallya client script, although I can retrieve the value of ${item_type} in onChange successfully I cannot say ${jvar_item_type} = this.value, since it parses that as Tool = this.value and Tool is undefined.

Is there a way to create a variable that is accessible read/write to both jelly and js?

btw my js skill is decent but i'm just now familiarizing myself with jelly syntax

  <j:set var="jvar_itemType" value="Tool" />

   
    <table>
        <tr id="dialog_buttons">
              <td align="right" style="vertical-align:text-top;">Item Type:</td>
              <td>
              <select id='select_tool_type' style='width:155px' onChange="//This is where I figure I need to change the variable">
                          <g:evaluate var="jvar_item0" expression=
                              "var gr=new GlideRecord('sys_choice');
                                gr.addQuery('name','u_stc_item_master');
                                gr.addQuery('element','u_item_type');
                                gr.query();
                          "/>
                          <j:while test="${gr.next()}">                                
                              <j:if test="${gr.value != ''}">                                      
                                      <option value="${gr.value}">${gr.value}</option>
                                </j:if>
                          </j:while>
                    </select>
              </td>
        </tr>
        <tr>
              <td align="right" style="vertical-align:text-top;">Item:</td>
              <td align="left">
                    <g:ui_reference name="item_number" id="item_number" table="u_stc_item_master" query="u_active=true^u_item_type=${jvar_itemType}" completer="AJAXTableCompleter" columns="u_item_number;u_item_description" />
              </td>
        </tr>

        <tr>
              <td align="right" style="vertical-align:text-top;">Quantity:</td>
              <td align="left">
                      <input type="number" name="qty" id="qty"   value="${jvar_qty}"/>
              </td>
        </tr>
...

[James_Neale]

The reason this doesn't work is because once the page is rendered you no longer have access to the Jelly variable. You are right that any functionality would be driven from the onchange of the select (although you could do this other ways).

I think you have two options:

1. Put your Jelly variable in a client script so you can reference it in the client.You can then update this variable from the onchange event. The issue you face is manually editing the onfocus event of the display field and the onclick function of the magnifying glass. i.e. you search the HTML for "u_item_type=Tool" and replace "Tool" with the newly selected value in from the choice. It's going to be difficult and isn't exactly future proof.
2. Do another popup and generate the ui_reference using a variable in the URL.

- James

[mpaquette]

Thanks James I think I made good headway with that advice.

I wrote two gel calls in my onChange function, I copied the onfocus and onchange events out of the display field and lookup buttons respectively and replaced isntances of Tool with "+type+" which is the argument my onChange event takes from the select box.

When I parse this out with an alert it looks right I've tried it with and without wrapping it in a function(){} block and it's behaiving strangely. When I first load the page its still using my jvar_tool_type to set it to Tool, so that works, then i change the selection to Part and it breaks no longer opening anythingwhen the spyglass is clicked, using the developer tools I check the onchange/onfocus events in the DOM and they are not updated.

In the code below am I using the proper syntax to update the onfocus/onchange events or is there something additional I have to do to cause them to update? It seems to be affecting it in some way but not finalizing or something.

mpaquette wrote:



Ok I thought this would be simple but I've tried 100 different ways of passing a variable to my query and nothing gets there.

I have a form thats a sort of psuedo-shopping cart.



User submits an order using a record producer, that record has a related list, order_item.

There is a UI action on the order form to Add Order.

This opens a window with a select box where they can select an item type.

Below item type is the item field which is a reference, I need the reference query to show results only for the selected item type.





Right now im using <j:set> to create a variable and im just coercing it to a value of "Tool" (the first option of the selectbox) just to make sure im connecting to my variable in the query, which works so good step 1 good.



However it would seem I have no way of altering this variable while on the form, I tried a few ways of accessing it onChange but I think anything in there is technicallya client script, although I can retrieve the value of ${item_type} in onChange successfully I cannot say ${jvar_item_type} = this.value, since it parses that as Tool = this.value and Tool is undefined.



Is there a way to create a variable that is accessible read/write to both jelly and js?

btw my js skill is decent but i'm just now familiarizing myself with jelly syntax


function changeType(type){

 //Update the Display Field and lookup buttons OnFocus and OnClick Events to query the newly selected Tool Type

 gel('sys_display.item_number').onfocus="function(){if (!this.ac) new AJAXTableCompleter(this,'item_number','','QUERY:u_active=true^u_item_type="+type+"','u_stc_item_master');}"

 gel('lookup.item_number').onclick="function(){mousePositionSave(event);reflistOpen('item_number','not',gel('item_numberTABLE').value,'','false','QUERY:u_active=true^u_item_type="+type+"','u_active=true^u_item_type="+type+"','');}"

}

[mpaquette]

changed function() to function onchange(){ and onfocus respectively and the DOM now updates successfully showing the selected type variable in the query, however when this is updated the displayfield and lookup button still lose all functionality for some reason, it doesnt even underline anything i type in the display field as not found

[mpaquette · Accepted solution]

Well we found a solution to this, since the jelly gets parsed and then the variable is no longer editable, and for whatever reason updating it with gel().onclick= made it misbehave we changed the onchange function to reset all the preferences to their current values, destroy the page, and rebuild it. Not elegant, probably allot of redundancies, but it works and its fluid enough that we let it be.

function changeType(type){

   //window.location = 'stc_add_item.do?sysparm_ord_id='+gel('ord_id').value+'${AMP}sysparm_tool_type='+type;



   var ord_id = gel('ord_id').value;

   var ord_for = gel('select_location_type').value;

   var reg = gel('select_region').value;

   var loc = gel('location').value;

   var locDisplay = gel('location').displayvalue;

   var qty = gel('qty').value;

   var tcType = gel('select_tcType').value;



   GlideDialogWindow.get().destroy();

   var dialog = new GlideDialogWindow('stc_add_item'); //Render the dialog containing the UI Page 'terms_and_conditions_dialog'

   dialog.setTitle('Add Order Item'); //Set the dialog title

   dialog.setSize(600,600); //Set the dialog size

   dialog.removeCloseDecoration(); //Remove the dialog close icon

   dialog.setPreference('ord_id',ord_id ); //Pass in Order sysid to relate back to parent table

   dialog.setPreference('ord_for',ord_for);

   dialog.setPreference('reg', reg);

   dialog.setPreference('loc', loc);

   dialog.setPreference('locDisplay', locDisplay);

   dialog.setPreference('tool_type', type);

   dialog.setPreference('qty', qty);

   dialog.setPreference('tcType', tcType);

   //dialog.setPreference('cancel_url', 'home.do'); //Set optional cancel redirect URL

   dialog.render(); //Open the dialog

}