Personalized Cascading Selection Menu within the Django Administration Interface

Question

Personalized Cascading Selection Menu within the Django Administration Interface

I am struggling with implementing a dependent drop-down list within my Django admin page. I have a project foreign key in my Phase model and I would like the user to be able to select a project from the first drop-down, and then have the phases of that project displayed in the second drop-down.

What is the best approach to achieve this functionality? It would be beneficial if the items in the drop-downs could filter based on the value selected in the parent drop-down.

https://i.sstatic.net/9dc0K.png

class Project(models.Model):
    name                    = models.CharField(max_length=100, unique=True)
    short_name              = models.CharField(max_length=4, unique=True)
    slug                    = models.SlugField(max_length=100, allow_unicode=True, null=True, editable=False)
    location                = models.OneToOneField(Location, on_delete=models.SET_NULL, null=True, blank=False, verbose_name='موقعیت')
    start_date              = models.DateField(default=timezone.now, null=True, blank=True)      
    end_date                = models.DateField(default=timezone.now, null=True, blank=True)
    duration                = models.IntegerField(default=0, editable=False)

class Phase(models.Model):
    title                    = models.CharField(max_length=20)

class ProjectPhase(models.Model):
    project                 = models.ForeignKey(Project, on_delete=models.CASCADE, related_name='phase')
    phase                   = models.ForeignKey(Phase, on_delete=models.CASCADE, related_name='project')
    start_date              = models.DateField(default=timezone.now)      
    end_date                = models.DateField(default=timezone.now)
    duration                = models.IntegerField(default=0, editable=True)

javascript django ajax django-admin django-ajax-selects

Answer 1

Answer №1

1. Importing a JavaScript Media File in ModelAdmin for Generaldata:

class YourModelAdmin(admin.ModelAdmin):    
    form = YourModelForm
    #list_display = ['your fields',]
    class Media:
        js = ("yourapp/selectajax.js",)

admin.site.register(YourModel, YourModelAdmin)

2. Creating a New JS File and Saving it in yourproject/yourapp/static/yourapp/ Directory or Another Suitable Location.

jQuery(function($){
    $(document).ready(function(){
        $("#id_project_select").change(function(){
            // console.log(obj.currentTarget.value);
            $.ajax({
                url:"/get_phases/",
                type:"POST",
                data:{project: $(this).val(),},
                success: function(result) {
                    console.log(result);
                    cols = document.getElementById("id_phase_select");
                    cols.options.length = 0;
                    for(var k in result){
                        cols.options.add(new Option(k, result[k]));
                    }
                },
                error: function(e){
                    console.error(JSON.stringify(e));
                },
            });
        });
    }); 
});

3. Creating a View to Handle AJAX Requests

@login_required
def get_phases(request):
    project = request.POST.get('project')
    phases = {}
    try:
        if project:
            prophases = Project.objects.get(pk=int(project)).phase
            phases = {pp.phase.title:pp.pk for pp in prophases}
    except:
        pass
    return JsonResponse(data=phases, safe=False)

4. Adding 'get_phases/' to urlpatterns.

Please note that you may need to customize some of the code based on your requirements.

Answer 2

1. Importing a JavaScript Media File in ModelAdmin for Generaldata:

class YourModelAdmin(admin.ModelAdmin):    
    form = YourModelForm
    #list_display = ['your fields',]
    class Media:
        js = ("yourapp/selectajax.js",)

admin.site.register(YourModel, YourModelAdmin)

2. Creating a New JS File and Saving it in yourproject/yourapp/static/yourapp/ Directory or Another Suitable Location.

jQuery(function($){
    $(document).ready(function(){
        $("#id_project_select").change(function(){
            // console.log(obj.currentTarget.value);
            $.ajax({
                url:"/get_phases/",
                type:"POST",
                data:{project: $(this).val(),},
                success: function(result) {
                    console.log(result);
                    cols = document.getElementById("id_phase_select");
                    cols.options.length = 0;
                    for(var k in result){
                        cols.options.add(new Option(k, result[k]));
                    }
                },
                error: function(e){
                    console.error(JSON.stringify(e));
                },
            });
        });
    }); 
});

3. Creating a View to Handle AJAX Requests

@login_required
def get_phases(request):
    project = request.POST.get('project')
    phases = {}
    try:
        if project:
            prophases = Project.objects.get(pk=int(project)).phase
            phases = {pp.phase.title:pp.pk for pp in prophases}
    except:
        pass
    return JsonResponse(data=phases, safe=False)

4. Adding 'get_phases/' to urlpatterns.

Please note that you may need to customize some of the code based on your requirements.

Answer 3

Answer №2

The response provided by Blackdoor offers a viable solution that we have recently implemented. However, there are a few issues with it:

It only triggers when the main select is changed, but I require the dependent select to also be filtered upon page load.
It does not retain the selected item in the dependent select.

To address these concerns, I suggest making the following modifications to step 2 of the solution:service and sub_service are used instead of project / phase:

jQuery(function($){
    $(document).ready(function(){
        var clone = document.getElementById("id_sub_service").cloneNode(true);
        $("#id_service").change(function(){
            update_sub_services($(this).val(), clone)
        });
        update_sub_services($("#id_service").val(), clone)
    });

    function update_sub_services(service, clone) {
        $.ajax({
            url:"/chained_dropdowns/get_sub_services/",
            type:"GET",
            data:{service: service,},
            success: function(result) {
                var cols = document.getElementById("id_sub_service");
                cols.innerHTML = clone.innerHTML
                Array.from(cols.options).forEach(function(option_element) { 
                    var existing = false;
                    for (var k in result) {
                        if (option_element.value == k) {
                            existing = true
                        }
                    }
                    if (existing == false) {
                        $("#id_sub_service option[value='"+option_element.value+"']").remove();
                    }
                })
            },
            error: function(e){
                console.error(JSON.stringify(e));
            },
        });
    }
});

This revised approach removes unnecessary options from the dependent select rather than clearing all items and then refilling it. This method ensures that the selected property and any other custom properties are retained.

As I am not proficient in JS or jQuery, my modifications are in native JS. Any enhancements are welcome :)

Answer 4

The response provided by Blackdoor offers a viable solution that we have recently implemented. However, there are a few issues with it:

It only triggers when the main select is changed, but I require the dependent select to also be filtered upon page load.
It does not retain the selected item in the dependent select.

To address these concerns, I suggest making the following modifications to step 2 of the solution:service and sub_service are used instead of project / phase:

jQuery(function($){
    $(document).ready(function(){
        var clone = document.getElementById("id_sub_service").cloneNode(true);
        $("#id_service").change(function(){
            update_sub_services($(this).val(), clone)
        });
        update_sub_services($("#id_service").val(), clone)
    });

    function update_sub_services(service, clone) {
        $.ajax({
            url:"/chained_dropdowns/get_sub_services/",
            type:"GET",
            data:{service: service,},
            success: function(result) {
                var cols = document.getElementById("id_sub_service");
                cols.innerHTML = clone.innerHTML
                Array.from(cols.options).forEach(function(option_element) { 
                    var existing = false;
                    for (var k in result) {
                        if (option_element.value == k) {
                            existing = true
                        }
                    }
                    if (existing == false) {
                        $("#id_sub_service option[value='"+option_element.value+"']").remove();
                    }
                })
            },
            error: function(e){
                console.error(JSON.stringify(e));
            },
        });
    }
});

This revised approach removes unnecessary options from the dependent select rather than clearing all items and then refilling it. This method ensures that the selected property and any other custom properties are retained.

As I am not proficient in JS or jQuery, my modifications are in native JS. Any enhancements are welcome :)

Personalized Cascading Selection Menu within the Django Administration Interface

Answer №1

1. Importing a JavaScript Media File in ModelAdmin for Generaldata:

2. Creating a New JS File and Saving it in yourproject/yourapp/static/yourapp/ Directory or Another Suitable Location.

3. Creating a View to Handle AJAX Requests

4. Adding 'get_phases/' to urlpatterns.

Please note that you may need to customize some of the code based on your requirements.

Answer №2

Similar questions

Changing the dynamic boundaries does not produce any results in the 'react-leaflet' library

The issue I am experiencing within my PHP code is that the redirection to the gratitude page is not functioning correctly when utilizing

The forceShutdown function in the node.js grpc server does not properly terminate the server

Generating a highchart visualizing a pie chart using data from a local JSON file (OBJECT)

Troubleshooting: Why the TableTools basic usage example is not functioning as

Differences in HTML animations can be seen when comparing Google Chrome to Microsoft Edge. Looking for a workaround for autoplay to ensure

Obtain the name of the object method from inside the method itself

Sorting price and date with Vue in Laravel - A beginner's guide

Is it possible to trigger a re-render of a child component from its parent component in React without altering its props?

Is there a way to retrieve the initial value from the second element within the JSON data?

What are effective methods for tracing the origin of a JS_Parse_Error?

Executing a function with a click, then undoing it with a second click

Validate User Input Using jQuery to Check if Empty or Deleted

In JavaScript, the function yields a proxy rather than an object

Iterative for Loop Vice Versa

Creating a customizable triangle design using the power of three.js

The error message "todo.map is not a function" indicates that

Performing AJAX request without relying on jQuery for a bookmarklet

"Is there a way to retrieve "Lorem ipsum" information from a web service in JSON format

What is the extent to which a scope variable will be accessible within the link function of Angular?