Pass value of select list from editor.create into ajax

Pass value of select list from editor.create into ajax

agarnagarn Posts: 25Questions: 4Answers: 1
edited August 2019 in Free community support

Hi

I have a button with file upload and select list in editor.create as follows:

        var uploadEditor = new $.fn.dataTable.Editor({
            ajax: {
                upload: {
                    type: 'POST',
                    contentType: 'application/json',
                    dataType: 'json',
                    url: '@Url.Action("UploadedNames")',
                    complete: function (jqXHR, textStatus) {
                        lastImageUploadTimeStamp = Math.round(Date.now() / 10000);
                    },
                    error: function (jqXHR, textStatus) {
                    },
                    cache: false
                },
            },
            fields: [{
                label: "Add Name List",
                name: "NameList",
                type: "upload",
                display: function (file_id) {
                    var imageDisplayHTML;
                    try {
                        imageDisplayHTML = '<label for="' + file_id + '">' + file_id + '</label>';
                        console.log("Excel file uploaded is: " + file_id);
                    }
                    catch (err) {
                        imageDisplayHTML = '<label for="' + file_id + '">' + file_id + '</label>';
                        console.log("Excel file uploaded is: " + file_id);
                    }
                    return imageDisplayHTML;
                }
                }, {
                    label: "Job",
                    name: "Job",
                    type: 'select',
                    multiple: true,
                    separator: ",",
                    options: [
                    @foreach(var myJob in (Dictionary<int, string>)ViewData["ToBeClonedJobsList"])
                    {
                        @: { label: "@myJob.Value", value: "@myJob.Key" },
                    }]
               
            }]
        });

I have extended datatable to display button as Clone

{
                    text: "Bulk Clone", formTitle: "Clone Job",
                    action: function () {
                        uploadEditor.create({
                            title: "Bulk Clone Jobs",
                            buttons: [{
                                label: "Clone", className: "btn-danger",
                                fn: function () {
                                        $.ajax({
                                            type: "POST",
                                            contentType: 'application/json',
                                            dataType: 'json',
                                            url: '@Url.Action("BulkClone")'
                                        }).done(function (status) {
                                            bootbox.alert(status, function () { window.location.href = "@Url.Content("~/Name")"; } );
                                        }).fail(function (status) {
                                            bootbox.alert(status, function () { window.location.href = "@Url.Content("~/Name")"; } );
                                        });
                                    }
                                },
                                { label: "Cancel", className: "btn-primary", fn: function () { this.close(); }
                            }]
                        });
                    }
                }

How to pass selected values of Job select list into BulkClone AJAX method. Can anyone help!

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

Replies

  • allanallan Posts: 61,451Questions: 1Answers: 10,055 Site admin

    Use field().val() to get the value of a field in your callback function.

    You might also be interested in this example which shows how a duplicate / clone button could be made (albeit outside of the Editor form).

    Allan

  • agarnagarn Posts: 25Questions: 4Answers: 1

    Hi Allan,

    It actually worked for me. Thanks a lot. What I did is as below. The only part pending is that I need to reuse this editor (uploadEditor) on another button click but I don't need a multi-select list there, just upload option is enough. Not sure how to hide/show the button on editor call.

    1) Creating a dependency

    var ToBeClonedIds ;
    uploadEditor.dependent('Wave', function (val, data) {
    ToBeClonedIds = val;
    });

    2) Change url in "Bulk Clone" form :
    from
    url: '@Url.Action("BulkClone")'
    to
    url: '@Url.Action("BulkClone")?Ids=' + ToBeClonedIds

    Now the variable has all selected values.

    Thanks
    Agarn

  • agarnagarn Posts: 25Questions: 4Answers: 1

    Hello All,

    Fixed the issue of re-using the editor making certain fields invisible as follows:

    Add line : uploadEditor.hide('Job'); before uploadEditor.create({//code here//});
    This will hide column Job for that particular button (in my example, on Clone button).

    example:

    {
    text: "Bulk Clone", formTitle: "Clone Job",
    action: function () {
    uploadEditor.hide('Job');
    uploadEditor.create({
    title: "Bulk Clone Jobs",
    buttons: [{
    label: "Clone", className: "btn-danger",
    fn: function () {
    $.ajax({
    type: "POST",
    contentType: 'application/json',
    dataType: 'json',
    url: '@Url.Action("BulkClone")'
    }).done(function (status) {
    bootbox.alert(status, function () { window.location.href = "@Url.Content("~/Name")"; } );
    }).fail(function (status) {
    bootbox.alert(status, function () { window.location.href = "@Url.Content("~/Name")"; } );
    });
    }
    },
    { label: "Cancel", className: "btn-primary", fn: function () { this.close(); }
    }]
    });
    }
    }

  • agarnagarn Posts: 25Questions: 4Answers: 1

    Thanks everyone for all the help!

This discussion has been closed.