SQLForm.factory jquery conditional fields in Views

[Karl Florian]

Hi everybody,

what is wrong with this JQuery Script?
Changing the reporttype, should hide or show the incomingref field.

Best regards
Charles Heinz Florian

-
Controllers - orderrpt.py
----------------------------------------------------------------
    WHINREPS = {'CARGIN':'Cargo in storage report','INVREP':'Inventory report','CMANIN':'Cargo Manifest incoming'}
    form = SQLFORM.factory(
        Field('reporttype', 'string', label='Report type', requires=IS_IN_SET(WHINREPS), default='CARGIN'),
        Field('reportaddinf', 'string', label='Add. information', default=''),
        Field('cust_mc', 'string', label='Customer-MC',widget=SQLFORM.widgets.autocomplete(request ,db.fcustomers.cust_mc, limitby=(0,10), min_length=0)),
        Field('shipmtype', 'string', label='Shipment-Type', requires=IS_IN_SET(['All','Export','Import','Consolidation']), default='All'),
        Field('incomingref', 'string', label='Cargo in ref.'),
        Field('fdate_in_wh', 'date', label='From-Date-in-Storage'),
        Field('tdate_in_wh', 'date', label='To-Date-in-Storage'),
        Field('sortpdf', 'string', label='Sort-by', requires=IS_IN_SET(['Customer-MC','Date-in-Storage']), default='Date-in-Storage'),
        buttons = btn_list,
        formstyle = 'table3cols',
        submit_button='Submit')
    form.vars.fdate_in_wh= datetime.datetime.now().date().replace(day=1)
    form.vars.tdate_in_wh= datetime.datetime.now().date()
    if form.process().accepted:


Views - orderrpt.html
----------------------------------------------------------------
{{extend 'layout.html'}}
{{block center}}
    <div class="container-fluid" id="inputall">
        <div class="col-md-3"></div>
        <div class="col-md-6">
            {{=form.custom.begin}}
            <div class="row">
                <div class="col-md-12">
                   <div class="row">
                        <div class="col-md-5"><p>{{=form.custom.label.reporttype}}</p></div>
                        <div class="col-md-7"><p>{{=form.custom.widget.reporttype}}</p></div>
                    </div>
                   <div class="row">
                        <div class="col-md-5"><p>{{=form.custom.label.reportaddinf}}</p></div>
                        <div class="col-md-7"><p>{{=form.custom.widget.reportaddinf}}</p></div>
                    </div>
                    <div class="row">
                        <div class="col-md-5"><p>{{=form.custom.label.cust_mc}}</p></div>
                        <div class="col-md-7"><p>{{=form.custom.widget.cust_mc}}</p></div>
                    </div>
                   <div class="row" id="rep1">
                        <div class="col-md-5"><p>{{=form.custom.label.shipmtype}}</p></div>
                        <div class="col-md-7"><p>{{=form.custom.widget.shipmtype}}</p></div>
                    </div>
                   <div class="row" id="no_table_incomingref__row">
                        <div class="col-md-5"><p>{{=form.custom.label.incomingref}}</p></div>
                        <div class="col-md-7"><p>{{=form.custom.widget.incomingref}}</p></div>
                    </div>
                    .... additional elements ...
                </div>
            </div>
            <p>{{=form.custom.submit}}</p>
            {{=form.custom.end}}
        </div>
        <div class="col-md-3"></div>

This script does not hide the 'incomingref' row.
Apparently JQuery can not read the value of the 'reporttype' element.

        <script>
        #WHINREPS = {'CARGIN':'Cargo in storage report','INVREP':'Inventory report','CMANIN':'Cargo Manifest incoming'}
        jQuery(document).ready(function(){
            if(jQuery('#no_table_reporttype').val() == 'INVREP')
                jQuery('#no_table_incomingref__row').hide();
            else jQuery('#no_table_incomingref__row').show();
            jQuery('#no_table_reporttype').change(function(){
                if(jQuery('#no_table_reporttype').val() == 'INVREP'){
                    jQuery('#no_table_incomingref__row').hide();
                }
                else {
                    jQuery('#no_table_incomingref__row').show();
                };
            });
        });
        </script>   
    </div>
{{end}}