Cannot display the EditBox element in the table in the column

Cannot display the EditBox element in the table in the column

izumovizumov Posts: 178Questions: 14Answers: 0

my test case http://montaj.vianor-konakovo.ru/goods.html
I want to output in the penultimate column an EditBox l element to give the user the ability to enter data, however the element is not displayed I can't understand why. Interpreter errors does not generate a file goods1002.js. Why is the EditBox not displayed?

Replies

  • izumovizumov Posts: 178Questions: 14Answers: 0

    maybe I'm mispronouncing the tags.please tell me why the input element is not displayed in the table?
    Выделите текст, чтобы посмотреть примеры

    { className:"inputEdit",target:[8], render:function(data,type,row){ return '<input type="text" id="Editbox1" class="myedit" " name="number" value="-1" spellcheck="false">' }, className:"position",targets: [9], "render": function ( data, type, row ) { return '<img src="add.png">' } },
    In the goods.css file, I define the myedit class

    myedit
    {
    height=10px;
    width=20px; 
    }
    
  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    className:"inputEdit",target:[8],

    Looks like you have target instead of targets. Try changing to className:"inputEdit",targets:[8],.

    Kevin

  • izumovizumov Posts: 178Questions: 14Answers: 0

    Sorry, the fix didn't help

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

    I put your code into this test case:
    http://live.datatables.net/qekarefe/1/edit

    The input element appears. Please update the test case to replicate your issue.

    Kevin

  • izumovizumov Posts: 178Questions: 14Answers: 0

    test case updated

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

    What is the link to the test case?

    What is the problem it shows?

    Kevin

  • izumovizumov Posts: 178Questions: 14Answers: 0

    my test case is http://montaj.vianor-konakovo.ru/goods.html
    the problem is that the penultimate column displays data loaded from the server instead of the edit field

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    edited August 2019

    You have a few issues. Here is your columnDefs code with some additional formatting:

            "columnDefs": [
    
                {
                    className: "inputEdit",
                    targets: [8],
                    render: function(data, type, row) {
                        return '<input type="text" id="Editbox1" class="myedit" " name="number" value="-1" spellcheck="false">'
                    },
                    className: "position",
                    targets: [9],
                    "render": function(data, type, row) {
                        return '<img src="add.png">'
                    }
                },
                {
                    "visible": true,
                    "targets": [3]
                }
            ]
    

    Targets 8 and 9 are within the same object so the values for 9 or overwriting 8. They need to be in separate objects, more like this:

            "columnDefs": [
    
                {
                    className: "inputEdit",
                    targets: [1],
                    render: function(data, type, row) {
                        return '<input type="text" id="Editbox1" class="myedit" " name="number" value="-1" spellcheck="false">'
                    }
                }, 
                {
                    className: "position",
                    targets: [2],
                    "render": function(data, type, row) {
                        return '<img src="add.png">'
                    }
                },
                {
                    "visible": true,
                    "targets": [3]
                }
            ]
    

    You can only have one id in HTML on page. id="Editbox1" is generating the same ID for each row. You can use the meta parameter of columns.render to get the row id using meta.row. This can be used as the counter for your ID. Like this:

                    render: function(data, type, row, meta) {
                        return '<input type="text" id="Editbox"' + meta.row + ' class="myedit" " name="number" value="-1" spellcheck="false">'
                    }
    

    You have an extra double quote here:
    class="myedit" " name="number"

    Should look like this:
    class="myedit" name="number"

    Kevin

  • izumovizumov Posts: 178Questions: 14Answers: 0

    my test case ishttp://montaj.vianor-konakovo.ru/goods.html
    thanks to your hint, the edit field is displayed,but the handler of the onclick event in the last column gives an error when trying to output data[8].
    handler code is
    $('#goods tbody').on('click', 'tr .position', function () { var table =$('#goods').DataTable(); var data = table.row( this ).data(); alert('add good'+data[8] )

    Please suggest what am I doing wrong that the handler is not working right
    Уст

  • izumovizumov Posts: 178Questions: 14Answers: 0

    it is noteworthy that the processor itself is triggered but the data[8] is not available. what's the problem?Why is there no access to data?

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

    It looks like it should work. You could try getting the row then using that. Something like this might work:

    $('#goods tbody').on('click', 'tr .position', function () {
        var table =$('#goods').DataTable();
            var row = $(this).closest('tr');
    
            var data = table.row( row ).data();  // Used row instead of this
        alert('add good'+data[8] )
    

    Also, I see you are using the triple ticks (```) for your code. Its not working quite right because they need to be on new lines. Hit return after the first set before pasting your code then put the last set on its own line.

    Kevin

  • izumovizumov Posts: 178Questions: 14Answers: 0

    Thanks to this code works, but the data link[8]retrieves the data table and I want to get the data from the EditBox . How to do this?

  • izumovizumov Posts: 178Questions: 14Answers: 0

    in the penultimate column of the table index 8 I output Editbox, now I need from the handler of the adjacent column index 9

    $('#goods tbody').on('click', 'tr .position', function () {
        var table =$('#goods').DataTable();
            var row = $(this).closest('tr');
     
            var data = table.row( row ).data();  // Used row instead of this
        alert('add good'+data[8] )
    
    

    to refer to the value of Editbox.With the which expressions I can do it? Data[8] does not produce the desired result because the value is output from the ajax request

  • izumovizumov Posts: 178Questions: 14Answers: 0

    can someone help me?

  • izumovizumov Posts: 178Questions: 14Answers: 0

    in other words, how to get a row reference to a table row to point to the EditBox that is displayed in that row?

This discussion has been closed.