CODEWITHSUNDEEP
jquerydjangoajaxdjango-formsdjango-templates
Stop War
Stop War

Reputation: 574

How to fill a form field based on another field in Django template using Ajax+jQuery

I am trying to populate the unit of measure field based on a product selected by the user using a dropdown. In my products model each product has been assigned a unit of measure and I am trying to autofill the unit field during order creation.

I am using jQuery to pick up the product by and capturing the event .on('change'). In my endeavour to complete the scenario, I have tried to use this example code here .

In the example, we are checking if a particular name entered by a user exists or not using Ajax calls sent to the database, which I have been able to replicate. What I am unable to get around to, is picking up the related field value "unit of measure" on selection of a "product".

What would be the correct way to send Ajax call to the database to pick up associated value of unit of measure based on selection of the product?

Edit

models.py

class Product(models.Model):
    product_id = models.IntegerField(primary_key=True, default=300000000000000000)
    description = models.CharField(max_length=100, help_text='Prod.Short text')
    default_uom = models.ForeignKey(Unit_of_Measure, null=True, on_delete=models.CASCADE, verbose_name='UoM')

    def __str__(self):
        return '{0} : {1}'.format(self.product_id, self.description)

urls.py

urlpatterns = [

    # ...
    path('ajax/uom/', fill_UoM, name='fill_unit_of_meas'),
    # ...

Note: Initially I had included the url path in app root, now I have moved it to the project root.

Edit 2

Note : views.py and HTML template have been modified and shown below (old code removed to make the reading easier).

1. Model: "Unit_of_Measure"

class Unit_of_Measure(models.Model):
    uom = models.CharField(max_length=4, unique=True, help_text='Units of measure')
    uom_desc = models.CharField(max_length=50, null=True, help_text='Base UoM description')

    def __str__(self):
        return '{0} ({1})'.format(self.uom, self.uom_desc)

VIEWS.PY (Modified)

def fill_UoM(request):
    product_id = request.GET.get('product_id', None)
    data = {
        'default_uom': Product.objects.filter(product_id=product_id).values()
        }
    return JsonResponse(list(data), safe=False)     #   (data_serialized, safe=False)

HTML TEMPLATE (Modified)

function fillUoM() {
// FUNC TO GET UNIT OF MEAS ON MATERIAL SELECTION AND UPDATE THE UoM FIELD
    console.log('**** FUNCTION ENTERED ON MATERIAL SELECTION NAME OF FUNC: ' + 'fillUoM');
    $.ajax({
        url: '{% url 'fill_unit_of_meas' %}',
        data: {product_id: matl_sel},       //  "matl_sel": SELECTED PRODUCT ID PASSED >> jQuery ".on('Change')"
        dataType: 'json',
        success: function(data) {       //  error
            console.log('The value captured is: ' + data)
        },
        error: function(data) {
            console.log('Data could not be retrieved: ' + data)
        }
    });
};

And now I am not getting any errors but no result being returned as well. BTW, out of desperation and to test if the code (views.py) is working, I tried to return the value of product id, but of course it is not working.

This is the console.log:

The value captured is: mat_default_uom

Thanks

Upvotes: 2

Views: 4589

Answers (1)

Amandeep Singh
Amandeep Singh

Reputation: 1431

ajax function

function fillUoM() 
{
    $.ajax({
            url: '{% url 'fill_unit_of_meas' %}',
            data: {"product_id": matl_sel},       
            dataType: 'json',
            success: function(data) {console.log('The value captured is: ' + data.default_uom)},
            error: function(data) {console.log('Data could not be retrieved')}
        });
};

views.py

def fill_UoM(request):
    product_id = request.GET.get('product_id', None)
    data = {'default_uom': Product.objects.get(product_id=int(product_id)).default_uom.uom}
    return JsonResponse(data)

Upvotes: 1

Related Questions