Pass value of select list from editor.create into ajax

agarn

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.

allan

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

agarn

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

agarn

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(); }
}]
});
}
}

agarn

Thanks everyone for all the help!