Hi guys,
I've been building some pages in the Odoo website but I've ran into an issue where I'm not sure what the best way is to handle it. I've created a new form, which is partially filled up with data from the controller, and in the middle of this form I need a search field with search button to filter a dropdown. The controller:
class project_issue(http.Controller): # Sends user to the creation page for a new ticket @http.route('/support/ticket/submit', type="http", auth="public", website=True) def support_submit_ticket(self, **kw): """Let's public and registered user submit a support ticket""" values = {} for field_name, field_value in kw.items(): values[field_name] = field_value partner_id = None if http.request.env.user.id: partner_id = http.request.env.user.partner_id.id return http.request.render('my_module.support_submit_ticket', {'equipments': http.request.env['product.product'].sudo().search([('equipment_customer_id', '=', partner_id)]), 'name': http.request.env.user.name, 'email': http.request.env.user.email, 'phone': http.request.env.user.phone})
The XML view for the page:
<template id="support_submit_ticket" name="Create new ticket" page="True"> <t t-call="website.layout"> <div id="wrap" class="oe_structure oe_empty"> <section> <div class="container"> <div class="row">
<div class="col-md-12"> <h1 class="text-center">Create new ticket</h1> </div> </div> </div> </section> <div class="form-horizontal mt32"> <form action="/support/ticket/process" method="get" class="form-horizontal mt32" enctype="multipart/form-data"> <!-- subject --> <div name="subject" t-attf-class="form-group #{error and 'subject' in error and 'has-error' or ''}"> <label class="col-md-3 col-sm-4 control-label" for="subject">Subject</label> <div class="col-md-7 col-sm-8"> <input type="text" class="form-control" name="subject" required="True"/> </div> </div> <div t-attf-class="form-group #{error and 'person_name' in error and 'has-error' or ''}"> <label class="col-md-3 col-sm-4 control-label" for="person_name">Name</label> <div class="col-md-7 col-sm-8"> <input type="text" class="form-control" name="person_name" required="True" t-attf-value="#{name or ''}" t-attf-readonly="#{name and 'readonly'}"/>
</div> </div> <div name="email_from_container" t-attf-class="form-group #{error and 'email' in error and 'has-error' or ''}"> <label class="col-md-3 col-sm-4 control-label" for="email">Email</label> <div class="col-md-7 col-sm-8"> <input type="email" class="form-control" name="email" required="True" t-attf-value="#{email or ''}" t-attf-readonly="#{email and 'readonly'}"/> </div> </div>
<!-- Phone number --> <div name="phone_container" t-attf-class="form-group #{error and 'phone' in error and 'has-error' or ''}"> <label class="col-md-3 col-sm-4 control-label" for="phone">Phone</label> <div class="col-md-7 col-sm-8"> <input type="phone" class="form-control" name="phone" required="True" t-attf-value="#{phone or ''}"/> </div> </div> <!-- Ticketing number --> <div name="customer_ticket_number" t-attf-class="form-group #{error and 'customer_ticket_number' in error and 'has-error' or ''}"> <label class="col-md-3 col-sm-4 control-label" for="customer_ticket_number">Customer ticket number</label> <div class="col-md-7 col-sm-8"> <input type="text" class="form-control" name="customer_ticket_number" required="True"/> </div> </div>
<!-- Search option for filtering on equipments. --> <div class="form-group"> <form action="" method="get" class="navbar-search pull-right pagination form-inline"> <label class="col-md-3 col-sm-4 control-label" for="search">Filter equipment</label> <div class="col-md-7 col-sm-8" style="width:50% !important;"> <input type="text" name="search" class="search-query form-control oe_search_box" placeholder="Search..." t-att-value="search"/> <span class="fa fa-remove fa-lg oe_search_clear"></span>
</div> <span class="input-group-btn"> <button type="submit" class="btn btn-default oe_search_button"><i class="fa fa-search"/></button> </span> </form> </div> <!-- Equipment --> <div t-attf-class="form-group #{error and 'equipments' in error and 'has-error' or ''}"> <label class="col-md-3 col-sm-4 control-label" for="equipments">Equipment</label> <div class="col-md-7 col-sm-8"> <select class="form-control" name="equipment"> <t t-foreach="equipments" t-as="equipment"> <option t-attf-value="#{equipment.id}"> <t t-esc="equipment.name"/> <t t-if="equipment.serial_number">- Serial number: <t t-esc="equipment.serial_number"/> </t> </option> </t> </select> </div> </div>
<!-- Urgency --> <div name="priority" t-attf-class="form-group #{error and 'priority' in error and 'has-error' or ''}"> <label class="col-md-3 col-sm-4 control-label" for="priority">Priority</label> <div class="col-md-7 col-sm-8"> <select class="form-control" name="priority"> <option t-att-value="1">1</option> <option t-att-value="2">2</option> <option t-att-value="3">3</option> <option t-att-value="4">4</option> <option t-att-value="5">5</option> </select> </div> </div> <div t-attf-class="form-group #{error and 'description' in error and 'has-error' or ''}"> <label class="col-md-3 col-sm-4 control-label" for="description">Description</label> <div class="col-md-7 col-sm-8"> <textarea class="form-control" name="description" style="min-height: 120px" required="True"></textarea> </div> </div> <div class="form-group"> <div class="col-md-offset-3 col-sm-offset-4 col-sm-8 col-md-7"> <button class="btn btn-primary btn-lg">Submit Ticket</button> </div> </div> </form> </div> </div> </t> </template>
The problem is that the search field and the search button need to be in a form but all the other content needs to be in another form. When I don't enwrap all fields in a form to be sent when clicking in the button 'Submit Ticket' I cannot access the data in my controller but I can't nest forms either. So, what is the correct / best way to create a search functionality inside a form that filters out the dropdown?
This dropdown:
<!-- Equipment -->
<div t-attf-class="form-group #{error and 'equipments' in error and 'has-error' or ''}"> <label class="col-md-3 col-sm-4 control-label" for="equipments">Equipment</label> <div class="col-md-7 col-sm-8"> <select class="form-control" name="equipment"> <t t-foreach="equipments" t-as="equipment"> <option t-attf-value="#{equipment.id}"> <t t-esc="equipment.name"/> <t t-if="equipment.serial_number">- Serial number: <t t-esc="equipment.serial_number"/> </t> </option> </t> </select> </div> </div>
I should be able to filter the field equipment when the user fills in something in the searchbar and clicks on search. By doing so the dropdown will be filtered out so that only matches still show op.
So, how should I accomplish this?
Thanks,
Yenthe
