无法让 jquery 脚本在 django 管理 StackedInline 模型字段中工作

时间:2021-03-07 18:40:34

标签: python jquery django django-models django-admin

(对不起,这有点令人费解)

我有 2 个 django 模型(recipeingredient——代码如下)。

class Recipe(models.Model):
    title = models.CharField(max_length=200)
    servings = models.IntegerField()
    tags = TaggableManager()


    def __str__(self):
        return self.title
class Ingredient(models.Model):
    recipe = models.ForeignKey(Recipe, default=None, on_delete=models.CASCADE)
    name = models.TextField(max_length=50)
    numerical = models.BooleanField(default=True)
    quantity=models.IntegerField(default=0)
    measurement = models.CharField(max_length=20)

    def __str__(self):
        return self.name

我注册了这个模型,以便我可以从管理页面中的配方视图内联编辑成分。 (见图)enter image description here

from django.contrib import admin
from .models import Recipe, Ingredient
from django_summernote.admin import SummernoteModelAdmin


class IngredientAdmin(admin.StackedInline):
    model = Ingredient
    extra = 0
    #exclude = ('urls',)

class RecipeAdmin(SummernoteModelAdmin):
    list_display = ('title', 'servings', 'tags')
    list_filter = ("tags",)
    search_fields = ['title', 'tags']
    inlines = [IngredientAdmin]
    summernote_fields = '__all__'
    class Meta:
       model = Recipe


class IngredientAdmin(admin.ModelAdmin):
    pass

admin.site.register(Recipe, RecipeAdmin)
admin.site.register(Ingredient, IngredientAdmin)

现在,如果 quantity 复选框设置为 False,我想让成分的字段 numerical 消失。

我能够在 this post 之后的 Admin-ingredients 视图中执行此操作,并将 Admin change_form.html 复制到 <appname>/templates/admin/ingredient/change_form.html 并将以下 javascript 添加到 {% block admin_change_form_document_ready %} 部分。 enter image description here

<script>
    django.jQuery(document).ready(function(){
        if (django.jQuery('#id_numerical').is(':checked')) {
             hide_quantity=false;
        } else {
             var elementQuantity = document.getElementsByClassName("form-row field-quantity");
             var i;
             for (i = 0; i < elementQuantity.length; i++) {
                elementQuantity[i].style ="display: none!important";
             }
            hide_quantity=true;
        }
        django.jQuery("#id_numerical").click(function(){
            hide_quantity=!hide_quantity;
            if (hide_quantity) {
                var elementQuantity = document.getElementsByClassName("form-row field-quantity");
                 var i;
                 for (i = 0; i < elementQuantity.length; i++) {
                    elementQuantity[i].style ="display: none!important";
                 }
            } else {
                 var elementQuantity = document.getElementsByClassName("form-row field-quantity");
                 var i;
                 for (i = 0; i < elementQuantity.length; i++) {
                    elementQuantity[i].style ="display: block!important";
                 }
            }
        })
    })
    </script>

但是,我无法在配方管理视图中使用它。我尝试将 change_form.html 复制到 <appname>/templates/admin/recipe/change_form.html 中,但我得到的只是 quantity 字段始终处于隐藏状态。

我认为这与脚本的 django.jQuery('#id_numerical').is(':checked')) 部分不再正确有关,因为我正在编辑成分作为配方管理视图的 stackinline 元素。

有什么帮助吗?

1 个答案:

答案 0 :(得分:0)

您可以像这样链接它们来使用 jQuery 的 Attribute starts withAttribute ends with 选择器:

django.jQuery("[id^='id_ingredient_set-'][id$='-numerical']")

但我建议在输入上设置自定义类属性。为此,您需要在 admin 类上设置一个自定义表单:

from django import forms

class IngredientForm(forms.ModelForm):

    class Meta:
        model = Ingredient
        widgets = {
            'numerical': forms.CheckboxInput(attrs={'class': 'my-numerical-class'}),
        }
        fields = '__all__'
        

class IngredientAdmin(admin.StackedInline):
    model = Ingredient
    extra = 0
    form = IngredientForm
    #exclude = ('urls',)

现在您可以简单地使用以下方法选择正确的元素:

django.jQuery(".my-numerical-class")
相关问题