locked
How to edit dynamically created HTML table using StringBuilder RRS feed

  • Question

  • User-1215967122 posted

    Hello,

    I created a dynamic html table using StringBuilder. But when I am trying to pass it’s cell value to jquery Ajax call, I am not getting the correct values. How will I get the cell values after focusout?

    Here’s the code snippet:

    Dim table as new StringBuilder()
    For each item in strategy
    
    table.AppendLine(String.Format(“<td>{0}</td>”,item.id);
    
    table.AppendLine(“<td>{0}</td>”,item.price);
    
    table.AppendLine(“<td contenteditable=“”true”” onfocusout =“SaveVal({0},{1})””>{1}</td>”,item.id, item.cellvalue );
    
    Next
    
    Return table.tostring ();

    SaveVal Jquery method in .aspx file:

    function SaveVal(id,cellvalue){
    $.ajax({
    type:"POST",
    url:"Maintenance.aspx/SaveVal",
    contentType:"application/json;charset=utf-8",
    dataType:"json",
    data: JSON.stringify({
    ids: id,
    val:cellvalue
    }),
    async:false,
    success:function(response){
    alert("Value Saved");
    }
    });
    }


    i want to get this contenteditable cell value after focusout. SaveVal(id,cellvalue) function is defined in jquery Ajax call and I want to pass these 2 parameters id and cellvalue which is final value of the cell- if there is no edit then existing value and if we edit and type new value then new value will be passed.

    Can someone please help how to do that?

    Appreciate your help!

    thank you,

    Smriti

    Tuesday, March 16, 2021 2:58 AM

All replies

  • User-939850651 posted

    Hi smritic,

    According to your description, the code in the upper part seems to be used to initialize and fill the table, but there is a problem with the parameters passed by the SaveVal() function. Regardless of whether you modify the cell data or not, what ajax method passes is already fixed, so the table The data will never be modified, you need to get its value dynamically.

    Something like this:

    <td contenteditable="true" onfocusout="SaveVal(id,this)">sometext</td>
    
    function SaveVal(id,e) {
                //get modified cell text
                var cellvalue = $(e).text();
                $.ajax({
                    type: "POST",
                    url: "Maintenance.aspx/SaveVal",
                    contentType: "application/json;charset=utf-8",
                    dataType: "json",
                    data: JSON.stringify({
                        ids: id,
                        val: cellvalue
                    }),
                    async: false,
                    success: function (response) {
                        //do something here
                        alert("Value Saved");
                    }
                });
            }

    I'm not sure how you define the Ajax method, so there may still be some other problems with this.

    If possible, please provide more relevant details.

    Best regards,

    Xudong Peng

    Wednesday, March 17, 2021 4:34 AM