How to update multiple checked records?

How to update multiple checked records?

uTrxuTrx Posts: 24Questions: 6Answers: 0

Want to update multiple checked rows: I extend datatables custom button and have write a function which help me to edit a single row. But my problem is i need to update multiple rows. And i dont know how to pass multiple data with this?:

Answers

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited January 2022

    var rowdata = tableToQuery.row(selectedRow).data();
    console.log(rowdata); //console log shows me just first record if i select multiple

    Use the rows() API to fetch multiple rows. If you need the row data as a pure Javascript array use toArray().

    Kevin

  • uTrxuTrx Posts: 24Questions: 6Answers: 0
    edited January 2022

    Thanks for replay. And i replace row() with rows() and this give me multiple record i select ,its okay, but now my assign button dont work. Also data cant pass on lavravel controller

    also i get this error: list:1026 Uncaught TypeError: Cannot set properties of undefined (setting 'length')

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    but now my assign button dont work

    What doesn't work? Do you get errors in the browser's console?

    Also data cant pass on lavravel controller

    Did you try using toArray() to convert the API result from rows().data() to a Javascript array?

    If you need help debugging please post a link to your page or a test case replicating the issues.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • uTrxuTrx Posts: 24Questions: 6Answers: 0

    i tryed in this way ** var rowdata = tableToQuery.row(selectedRow).toArray();**

    and what i get on console : [Array(1)]0: [0]0: 0length: 1[[Prototype]]: Array(0)at: ƒ at()concat: ƒ concat()constructor: ƒ Array()copyWithin: ƒ copyWithin()entries: ƒ entries()every: ƒ every()fill: ƒ fill()filter: ƒ filter()find: ƒ find()findIndex: ƒ findIndex()flat: ƒ flat()flatMap: ƒ flatMap()forEach: ƒ forEach()includes: ƒ includes()indexOf: ƒ indexOf()join: ƒ join()keys: ƒ keys()lastIndexOf: ƒ lastIndexOf()length: 0map: ƒ map()pop: ƒ pop()push: ƒ push()reduce: ƒ reduce()reduceRight: ƒ reduceRight()reverse: ƒ reverse()shift: ƒ shift()slice: ƒ slice()some: ƒ some()sort: ƒ sort()splice: ƒ splice()toLocaleString: ƒ toLocaleString()toString: ƒ toString()unshift: ƒ unshift()values: ƒ values()Symbol(Symbol.iterator): ƒ values()Symbol(Symbol.unscopables): {copyWithin: true, entries: true, fill: true, find: true, findIndex: true, …}[[Prototype]]: Objectlength: 1[[Prototype]]: Array(0)

    also this error : Uncaught TypeError: Cannot set properties of undefined (setting 'length')

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    Here is the code supplied by @uTrx

        {
                text: 'Mass Assign ⤴',
                className: 'btn btn-outline-dark font-weight-bold rounded',
                action: function ( e, data, dt, node, config ) {
                    var tableToQuery = $("#dataTableSnd").DataTable();
                    var selectedRow = $("#dataTableSnd tr.selected");
                    var rowdata = tableToQuery.row(selectedRow).data();
                    console.log(rowdata); //console log shows me just first record if i select multiple
                    var id = rowdata.id;
                    if (id.length = 1) {
                        $('#assign_form').on('submit', function(event){
                            event.preventDefault();
                            var form_data = $(this).serialize() + "&id="+id;
                            console.log(form_data);
                            $.ajax({
                                url:"{{ route('list.assignpostdata') }}",
                                method:"POST",
                                data:form_data,
                                dataType:"json",
                                success:function(data)
                                {
                                    if(data.error.length > 0)
                                    {
                                        var error_html = '';
                                        for(var count = 0; count < data.error.length; count++)
                                        {
                                            error_html += '<div class="alert alert-danger">'+data.error[count]+'</div>';
                                        }
                                        $('#form_output').html(error_html);
                                    }
                                    else
                                    {
                                        $('#form_output').html(data.success);
                                        $('#dataTable').DataTable().ajax.reload();
                                    }
                                }
                            })
                        });
    
                        $('#form_output').html('');
                        $.ajax({
                            url:"{{route('list.assignfetchdata')}}",
                            method:'get',
                            data:{id:id},
                            dataType:'json',
                            success:function(data)
                            {
                                $('#assign').val(data.assign);
    
                                $('#id').val(id);
                                $('#assignModal').modal('show');
                                $('#action_assign').val('OK');
                                $("#action_assign").click(function(){
                                        $("#assignModal").modal('hide');
                                    });
                                $('.modal-title').text('Edit Data');
                                $('#button_action_assign').val('assign');
                            }
                        })
                    }
                }
                },
    
  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    Please use Markdown formatting as noted in the Leave a Comment box:

    Posts are formatted using Markdown. To highlight code, please use triple back ticks (```) on new lines before and after the code block.

    Uncaught TypeError: Cannot set properties of undefined (setting 'length')

    Looks like the error is here:

                var id = rowdata.id;
                if (id.length = 1) {
    

    If rowData is na array then you will need to use a Javascript loop to loop through the array.

    If you use var rowdata = tableToQuery.row(selectedRow).toArray(); the row() API will return only one row. You don't need toArray(). My suggestion above is to do something like this for multiple rows:

    var rowdata = tableToQuery.rows(selectedRow).data().toArray();
    

    It uses rows().data() to return an array of rows. This actually returns an API instance. So if you need pure Javascript then chain toArray().

    Kevin

  • uTrxuTrx Posts: 24Questions: 6Answers: 0
    edited January 2022

    You are right

    var rowdata = tableToQuery.rows(selectedRow).data().toArray();

    now i get multiple value on my console.log

    but when i hit submit on modal i get this error

    array:4 [ "_token" => "nQ2CSvZTLMXqUbZwTmwatRbV8xBdwb6buq5bWn3N" "assign" => "8" "id" => "undefined" "button_action_assign" => "assign" ]

    as i use console.log(form_data) or in laravel dd($request->all).
    So i can get multiple rows but i cant pass this rows on laravel controller

    url:"{{ route('list.assignpostdata') }}", method:"POST", data:form_data, console.log(form_data)

  • uTrxuTrx Posts: 24Questions: 6Answers: 0

    var rowdata = tableToQuery.rows(selectedRow).data().toArray();
    You are right this fix the problem

    But now when i hit submit on modal i get "id" => "undefined"

    url:"{{ route('list.assignpostdata') }}", method:"POST", data:form_data, console.log(form_data) //if i do console log here and hit submit

  • uTrxuTrx Posts: 24Questions: 6Answers: 0
    edited January 2022
    var rowdata = tableToQuery.rows(selectedRow).data().toArray();
    

    You are right this fix the problem

    But now when i hit submit on modal i get "id" => "undefined"

    url:"{{ route('list.assignpostdata') }}",
                            method:"POST",
                            data:form_data,
                            console.log(form_data) //if i do console log here and hit submit
    
  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    Seems like a console.log statement on line 4 if your code snippet will cause a syntax error. Sounds like you are trying to use one id from an array of one or more ids. Are you looping through all the rows?

    Please post a link to your page or a running test case showing the issue if you want help debugging the code. This way we can see what is happening and can offer suggestions.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • uTrxuTrx Posts: 24Questions: 6Answers: 0
    edited January 2022
    {
                    text: 'Mass Assign &#x2934;',
                    className: 'btn btn-outline-dark font-weight-bold rounded mx-2',
                    action: function ( e, data, dt, node, config ) {
                        var tableToQuery = $("#dataTable").DataTable();
                        var selectedRow = $("#dataTable tr.selected");
                        var rowdata = tableToQuery.rows(selectedRow).data().toArray();
                        console.log(rowdata); 
                        var id = rowdata.id;
                        console.log(id); // this gives **_undefined_** on console log
                        if (id.length == 1) {
    
                            $('#assign_form').on('submit', function(event){
                                event.preventDefault();
                                var form_data = $(this).serialize() + "&id="+id;
                                console.log(form_data);
                                $.ajax({
                                    url:"{{ route('view.postdata') }}",
                                    method:"POST",
                                    data:form_data,
                                    dataType:"json",
                                    success:function(data)
                                    {
                                        if(data.error.length > 0)
                                        {
                                            var error_html = '';
                                            for(var count = 0; count < data.error.length; count++)
                                            {
                                                error_html += '<div class="alert alert-danger">'+data.error[count]+'</div>';
                                            }
                                            $('#form_output').html(error_html);
                                        }
                                        else
                                        {
                                            $('#form_output').html(data.success);
                                            $('#dataTable').DataTable().ajax.reload();
                                        }
                                    }
                                })
                            });
    
                            $('#form_output').html('');
                            $.ajax({
                                url:"{{route('view.fetchdata')}}",
                                method:'get',
                                data:{id:id},
                                dataType:'json',
                                success:function(data)
                                {
                                    $('#assign').val(data.assign);
    
                                    $('#id').val(id);
                                    $('#assignModal').modal('show');
                                    $('#action_assign').val('OK');
                                    $("#action_assign").click(function(){
                                            $("#assignModal").modal('hide');
                                        });
                                    $('.modal-title').text('Edit Data');
                                    $('#button_action_assign').val('assign');
                                }
                            })
                        }
                    }
                },
    

    This is all script i use. I dont now how to display all this code on live example

    iam getting this error now on console: Uncaught TypeError: Cannot read properties of undefined (reading 'length')

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    var id = rowdata.id;

    This is the statement causing the error. You are now getting an array of one or more rows, not a single object. You will need to loop through the array to get the ids. See this SO thread for options.

    Kevin

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    It would be worth looking at Editor - as that supports multiple edits.

    Colin

  • uTrxuTrx Posts: 24Questions: 6Answers: 0

    @kthorngren please can you do an example for my case, i dont understand how to use loop in this case

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    The question is what are you trying to do? Looks like you are trying to open a form but do mass edits. Without knowing what your solution requirements are it would be difficult to provide the correct solution. However this is one way to loop through the array:

    for (i=0; i<rowData.length; i++) {
      var id = rowdata[i].id;  // Get the id of the array element
      console.log(id); // this gives **_undefined_** on console log
    ..... // The rest of your code
    } // End for loop
    

    This may or may not be what you want. As Colin said the Editor will support this for you.

    Kevin

  • uTrxuTrx Posts: 24Questions: 6Answers: 0

    @kthorngren this helps me. But why can i edit just last record. For example if i select row with id 1 and row with id 2 if i hit submit i can edit just row with id 2

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    Help with development of your application is beyond the scope of this forum. If you have specific Datatables questions we are glad to help. A forum like Stack Overflow is more appropriate for how to build your Javascript application and handle your forms.

    Kevin

Sign In or Register to comment.