How to include an additional field in Editor ajax/data callback?

How to include an additional field in Editor ajax/data callback?

terinfireterinfire Posts: 7Questions: 2Answers: 0

Fairly new to JavaScript and using DataTables -- fantastic product so far.

My only issue is that when I perform a file upload (uploadMany option on my field), I need to also include the ID.

I've also noticed that id doesn't actually get substituted when the ajax call is made -- my debugger shows it LITERALLY going to /AudioClips/Edit?id=id, rather than /AudioClips/Edit?id=123123123123123123 (or some such thing)

 $(document).ready(function ()
    {

                editor = new $.fn.dataTable.Editor(
                    {
                        ajax: { 
                            type: "POST",
                            url: "/AudioClips/Edit?id=_id_"
                        },
                        idSrc: "id",
                        table: "#Table_7b1e6ea34e74470fa1b1836333a1f899",
                        fields: [
                            { name: "name", label: "Name" },
                            {
                                name: "clips",
                                label: "Audio Clip",
                                type: "uploadMany",
                                noFileText: "No Clips Uploaded.",
                                display: function (fileId, counter)
                                {
                                    return '<img src="' + editor.file('files', fileId).web_path + '"/>';
                                }
                            }
                        ]
                } );

                $('#Table_7b1e6ea34e74470fa1b1836333a1f899').on('click', 'tbody td', function (e)
                {
                    editor.inline(this);
                } );

It'd honestly be easier for me to include the DT_RowID in the actual data getting passed into the ajax -- so using the data() function inside of ajax { } would be far superior, if there is a method to that.

Any thoughts?

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 48,908Questions: 1Answers: 7,131 Site admin
    Answer ✓

    The upload Ajax is different from the main form although it can use it from the same source, and it isn't processing the _id_ macro. It probably should!

    Best option at the moment is probably to use the ajax and ajaxData options of the upload field type - e.g.:

    {
        name: "clips",
        label: "Audio Clip",
        type: "uploadMany",
        ajax: "/AudioClips/Edit",
        ajaxData: function (d) {
            d.append('id', editor.ids());
        },
        ...
    }
    

    That way id will be part of the POST data rather than a GET parameter.

    Allan

  • terinfireterinfire Posts: 7Questions: 2Answers: 0

    Thank you, allan! Your answer didn't work for me, but it helped me get there. I found that the method defined under ajaxData never got called. However, I knew from prior experience that the data method INSIDE ajax did get called. editor.ids() was the missing key.

    For anyone else who is trying to get help, this was the "fixed" code:

                   editor = new $.fn.dataTable.Editor(
                        {
                            ajax: { 
                                data: 
                                function(d) {
                                    d.DT_RowID = editor.ids();
                                },
                                type: "POST",
                                url: "/AudioClips/Edit"
                            },
                            idSrc: "id",
                            table: "#Table_b98388f97bf541d2a963780c14d3ec3b",
                            fields: [
                                { name: "name", label: "Name" },
                                {
                                    name: "clips",
                                    label: "Audio Clip",
                                    type: "uploadMany",
                                    noFileText: "No Clips Uploaded.",
                                    display: function (fileId, counter)
                                    {
                                        return '<img src="' + editor.file('files', fileId).web_path + '"/>';
                                    }
                                }
                            ]
                    } );
    
                    $('#Table_b98388f97bf541d2a963780c14d3ec3b').on('click', 'tbody td', function (e)
                    {
                        editor.inline(this);
                    } );
    
Sign In or Register to comment.