Add a value during the create a new record.

bruce@harrisonemail.com

I am running Editor with a Django backend and using djangorestframework-datatables-editor, a REST framework to manage the API. the Django app works well.

My goal is when I click on the editor New button, I need to add, value to one of my fields, rent_period, before the record is saved. I was trying to use preCreate(), but I am open to alternative approaches. The value rent_period is passed to the webpage using Django's Template language. The rent_period value is constant for the webpage.

In Django, I have the following model:

class Rents(models.Model):
    rent_period = models.ForeignKey(
        RentPeriod,
        on_delete=models.CASCADE,
        blank=True,
        null=True,
        related_name='rent'
    )
    start_date = models.DateField()
    end_date = models.DateField()
    amount = models.DecimalField(max_digits=25, decimal_places=2, default=0)

    class Meta:
        verbose_name = 'Rent'
        verbose_name_plural = 'Rents'
        ordering = ['start_date']

    def __str__(self):
        title = f"{self.start_date} - {self.end_date}"
        return title

My serializer looks like:

class RentSerializer(serializers.ModelSerializer):
    DT_RowId = serializers.SerializerMethodField()
    DT_RowAttr = serializers.SerializerMethodField()


    @staticmethod
    def get_DT_RowId(rent):
        return rent.pk

    @staticmethod
    def get_DT_RowAttr(rent):
        return {'data-pk': rent.pk}

    @staticmethod
    def get_rent_period(rent):
        return rent.rent_period.id

    class Meta:
        model = Rents
        fields = (
            'DT_RowId', 'DT_RowAttr', 'rent_period',
            'start_date', 'end_date', 'amount'
        )

and my JS looks like:

        $(document).ready(function () {

            function getCookie(name) {
                var cookieValue = null;
                if (document.cookie && document.cookie != '') {
                    var cookies = document.cookie.split(';');
                    for (var i = 0; i < cookies.length; i++) {
                        var cookie = jQuery.trim(cookies[i]);
                        // Does this cookie string begin with the name we want?
                        if (cookie.substring(0, name.length + 1) == (name + '=')) {
                            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                            break;
                        }
                    }
                }
                return cookieValue;
            }

            var csrftoken = getCookie('csrftoken');

            function csrfSafeMethod(method) {
                // these HTTP methods do not require CSRF protection
                return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
            }

            $.ajaxSetup({
                beforeSend: function (xhr, settings) {
                    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                        xhr.setRequestHeader("X-CSRFToken", csrftoken);
                    }
                }
            });

            let rt_period = {{ rent_period.id}};

            let editor = new $.fn.dataTable.Editor({
                ajax: "/api/rents/editor/?format=datatables",
                table: "#rent",
                fields: [
                    {
                        label: "Start Date",
                        name: "start_date",
                    }, {
                        label: "End Date:",
                        name: "end_date"

                    }, {
                        label: "Amount:",
                        name: "amount",
                    },
                ]
            });

            editor.on('preCreate', function () {
                    editor.create(false);
                    editor.val('rent_period_id', rt_period);
                    editor.submit();
                }
            );


            let table = $('#rent').DataTable({
                "serverSide": true,
                dom: "Bfrtip",
                "ajax": "/api/rents/?format=datatables",
                "columns": [
                    {"data": "start_date"},
                    {"data": "end_date"},
                    {"data": "amount"},
                ],
                select: true,
                buttons: [
                    {extend: "create", editor: editor},
                    {extend: "edit", editor: editor},
                    {extend: "remove", editor: editor}
                ]
            });

            table.buttons().container()
                .appendTo($('.col-md-6:eq(0)', table.table().container()));

        });
    </script>

Thank you in advance for the help!

colin

This example here should help - it's showing different ways of setting the value. initCreate sets the value before the creation (so the user can see it), preSubmit before the submission to the server, and preCreate after the submission.

Colin

bruce@harrisonemail.com

Thank you. Your answer was very helpful.