CODEWITHSUNDEEP
javascriptjquerypythondjangodrop-down-menu
phicon
phicon

Reputation: 3617

Django Inlineformset - JQuery Dropdown based on Second Dropdown

I have the following orderline formset.

two dropdowns

As the Product drop-down will consist of 100+ products, i want to filter the products available in the drop-down based on the Product Type selection. I have been trying to get this working with JQuery looking at several solutions and examples on the web, but i am really stuck.

Any help or pointers on to implementing this would be greatly appreciated.

Below the relevant Models / Views / Forms for reference.

Models.py

class OrderHeader(models.Model):
    customer = models.ForeignKey(Customer)
    orderheader_total_price = models.DecimalField(max_digits=10, decimal_places=2, null=True, blank=True, default=0)

    def __unicode__(self):
        return smart_unicode(self.pk)


class OrderLine(models.Model):
    orderheader = models.ForeignKey(OrderHeader)
    product_type = models.ForeignKey(ProductType)
    product = models.ForeignKey(Product)

    def __unicode__(self):
        return smart_unicode(self.pk)

Views.py

def orderline_formset(request, id=None):
    if id:
        orderid = OrderHeader.objects.get(pk=id)
    else:
        orderid = OrderHeader()

    OrderLineFormSet = inlineformset_factory(OrderHeader, OrderLine, OrderLineForm, extra = 1, can_delete=True)  
    helper = OrderLineFormSetHelper()

    if request.method == 'POST':
        form = OrderHeaderForm(request.POST, instance=orderid)
        formset = OrderLineFormSet(request.POST,instance=orderid)
        if form.is_valid() and formset.is_valid():
            form.save()
            formset.save()
            form = OrderHeaderForm(instance=orderid)
            formset = OrderLineFormSet(instance=orderid)
            messages.success(request, 'Order saved succesfully!')
        else:
            messages.error(request, 'Order save error, please check fields below')
    else:
        form = OrderHeaderForm(instance=orderid)
        formset = OrderLineFormSet(instance=orderid)

    return render_to_response("order-add.html", {'orderform' : form,'formset': formset, 'helper': helper},
                              context_instance=RequestContext(request))

Forms.py

class OrderLineForm(forms.ModelForm):

    def __init__(self, *args, **kwargs):
        super(OrderLineForm, self).__init__(*args, **kwargs)

    class Meta:
        model = OrderLine
        fields = ['product_type', 'product','material','orderline_product_price','orderline_quantity',
                  'orderline_total_price']
        labels = {
            'orderline_quantity': ('Quantity'),
            'orderline_product_price': ('Price'),
            'orderline_total_price': ('Total'),
        }

class OrderLineFormSetHelper(FormHelper):
    def __init__(self, *args, **kwargs):
        super(OrderLineFormSetHelper, self).__init__(*args, **kwargs)
        self.form_method = 'post'
        self.template = 'bootstrap3/table_inline_formset.html'
        self.render_required_fields = True
        self.form_tag = False

HTML 

row0
<select class="select form-control" id="id_orderline_set-0-product_type" name="orderline_set-0-product_type">
<select class="select form-control" id="id_orderline_set-0-product" name="orderline_set-0-product">
row1
<select class="select form-control" id="id_orderline_set-1-product_type" name="orderline_set-1-product_type">
<select class="select form-control" id="id_orderline_set-1-product" name="orderline_set-1-product">
etc

Upvotes: 0

Views: 199

Answers (1)

e-nouri
e-nouri

Reputation: 2626

You have to use Ajax to request the specific type each time the product type select changes value, then append the result to the product select. Start with binding on the ‘change‘ event on the select product type, then use ‘$.post‘ to send the selected type and last append the result in the product select.

Upvotes: 1

Related Questions