locked
Line brake being removed in ajax get RRS feed

  • Question

  • User-183185495 posted

    How do I get my line brakes to render properly its my action column i need the line brake to work its saved ok in the database just no rendering on the front end.

    <script>
     $(document).ready(function () {
    
            var id = @ViewBag.CaseId;
    
            $("#audTrailTable").DataTable({
                "ajax": {
                    url: "/MISObjects/GetAuditTrailData/" + id,
                    type: "get",
                    database: "json"
                },
                "columns": [
                    { "data": "createdDate" },
                    { "data": "createdBy" },
                    { "data": "action" },                
                ],
                "scrollY": "200px",
                "scrollCollapse": true,
                "paging": false,
                "processing": true, // for show progress bar
                "filter": true, // this is for disable filter (search box)
                "orderMulti": false // for disable multiple column at once
            })
        });
    </script>
        <table id="audTrailTable" class="table table-striped table-bordered dt-responsive">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>User</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
    
        </table>

    Code for Ajax get

        [HttpGet]
        public ActionResult<DataTableWrapper<List<MISAuditTrail>>> GetAuditTrailData(int? id) {
            int? resulCaseId = id;
            var auditTrailsHistory = _context.MisAuditTrail.Where(w => w.isActive == true && w.isDeleted == false && w.MISObjectId == resulCaseId).ToList();
            string output = JsonConvert.SerializeObject(auditTrailsHistory);
                
            DataTableWrapper<List<MISAuditTrail>> data = new DataTableWrapper<List<MISAuditTrail>>() {
                data = auditTrailsHistory
            };
    
            return data;
        }

    Sunday, August 9, 2020 12:26 PM

All replies

  • User-1330468790 posted

    Hi riguenidb,

     

    Could you please provide more details?

    1. What kind of line break do you want in the page?
    2. How do you store the line break in the codes? In which format?
    3. Where do you fetch the value for the line break in the codes?
    4. What is the structure for the DataTableWrapper? I think it is important that you may pass the line break value using this class.
    5. Is your project in ASP.NET core or ASP.NET?

     

    Currently I tried your codes by simulating the data and got below result.

    html:

    <div class="row">
        <div class="table-responsive ">
            <table id="audTrailTable" class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th>CreatedDate</th>
                        <th>createdby</th>
                        <th>action</th>
                    </tr>
                </thead>
            </table>
        </div>
    
    </div>
    

    script:

      <script>
    
            $(document).ready(function () {
                $("#audTrailTable").DataTable({
                    "ajax": {
                        url: "/Home/GetAuditTrailData/",
                        type: "get",
                        database: "json"
                    },
                    "columns": [
                        { "data": "CreatedDate" },
                        { "data": "CreatedBy" },
                        { "data": "Action" }
    
                    ],
                    
                    "scrollY": "200px",
                    "scrollCollapse": true,
                    "paging":false,
                    "processing": true, // for show progress bar
                    "filter": true, // this is for disable filter (search box)
                    "orderMulti": false // for disable multiple column at once
                })
    
            });
    
        </script>

    Controller: (ASP.NET MVC)

    [HttpGet]
            public ActionResult GetAuditTrailData()
            {
    
                var auditTrailsHistory = new List<AuditTrail>
                {
                    new AuditTrail
                    {
                        CreatedDate="2020-07-28T20:59:54.2791487+01:00",
                        CreatedBy ="David",
                        isActive = true,
                        isDeleted = false,
                        MISObjectId = 7,
                        Action = "David did some tests"
                    },
                    new AuditTrail
                    {
                        CreatedDate="2020-07-29T20:59:54.2791487+01:00",
                        CreatedBy ="David",
                        isActive = true,
                        isDeleted = false,
                        MISObjectId = 7,
                        Action = "David did some tests again"
                    },
                    new AuditTrail
                    {
                        CreatedDate="2020-07-29T20:59:54.2791487+01:00",
                        CreatedBy ="David",
                        isActive = true,
                        isDeleted = false,
                        MISObjectId = 7,
                        Action = "David did some tests again"
                    },
                    new AuditTrail
                    {
                        CreatedDate="2020-07-29T20:59:54.2791487+01:00",
                        CreatedBy ="David",
                        isActive = true,
                        isDeleted = false,
                        MISObjectId = 7,
                        Action = "David did some tests again"
                    },
                    new AuditTrail
                    {
                        CreatedDate="2020-07-29T20:59:54.2791487+01:00",
                        CreatedBy ="David",
                        isActive = true,
                        isDeleted = false,
                        MISObjectId = 7,
                        Action = "David did some tests again"
                    },
                    new AuditTrail
                    {
                        CreatedDate="2020-07-29T20:59:54.2791487+01:00",
                        CreatedBy ="David",
                        isActive = true,
                        isDeleted = false,
                        MISObjectId = 7,
                        Action = "David did some tests again"
                    },
                    new AuditTrail
                    {
                        CreatedDate="2020-07-29T20:59:54.2791487+01:00",
                        CreatedBy ="David",
                        isActive = true,
                        isDeleted = false,
                        MISObjectId = 7,
                        Action = "David did some tests again"
                    },
                    new AuditTrail
                    {
                        CreatedDate="2020-07-29T20:59:54.2791487+01:00",
                        CreatedBy ="David",
                        isActive = true,
                        isDeleted = false,
                        MISObjectId = 7,
                        Action = "David did some tests again"
                    },
                    new AuditTrail
                    {
                        CreatedDate="2020-07-29T20:59:54.2791487+01:00",
                        CreatedBy ="David",
                        isActive = true,
                        isDeleted = false,
                        MISObjectId = 7,
                        Action = "David did some tests again"
                    },
                    new AuditTrail
                    {
                        CreatedDate="2020-07-29T20:59:54.2791487+01:00",
                        CreatedBy ="David",
                        isActive = true,
                        isDeleted = false,
                        MISObjectId = 7,
                        Action = "David did some tests again"
                    },
                    new AuditTrail
                    {
                        CreatedDate="2020-07-29T20:59:54.2791487+01:00",
                        CreatedBy ="David",
                        isActive = true,
                        isDeleted = false,
                        MISObjectId = 7,
                        Action = "David did some tests again"
                    }
    
                };
                return Json(new { data = auditTrailsHistory }, JsonRequestBehavior.AllowGet);
            }

    Demo:

     

    Best regards,

    Sean

    Monday, August 10, 2020 3:33 AM
  • User-474980206 posted

    by default a browser does not honor new lines as line breaks. they are treaded as a white space. you have two options:

    1) convert new lines to line break markup <br />

    2) use css to break on new line (<pre> behavior). 

    <style>
    #audTrailTable td { white-space: pre;}
    </style>

    Monday, August 10, 2020 3:14 PM
  • User-1881805913 posted

    The problem is that serialization should encode a line break as %D0%DA, but jQuery encodes it as %0A.

    The only (graceless) solution i found was to get the form serialized string, then modify it with a replacement function such as :

    function keepLB (str) {

    var reg=new RegExp("(%0A)", "g"); return str.replace(reg,"%0D$1"); }

    Once the serialized string is modified, i send it using the $.post() function.

    Line brake being removed in ajax methods.

    I ended up removing the serialize() and sending each parameter manually as a string. I added $("#foo_bar").replace( /\n/g, '<br>' )) to my textarea as a workaround and now I'm getting my breaks. Wish I didn't have to hack this to make it work, but it gets the job done.

    Thursday, August 20, 2020 6:21 AM
  • User-474980206 posted

    JQuery does not recode newlines. You are confusing the Unix and browser single char new line \n (linefeed) with dos/windows 2 character \r\n (carriage return, linefeed)

    Thursday, August 20, 2020 2:47 PM