How do I display ajax response on datatable while viewing on firefox and edge browsers

Question

0.00/5 (No votes)

See more:

I have i report that displays fine on Google chrome, but while trying to view on Firefox or Edge browser, the json response displays on the browser instead of the datatable. Sample response on firefox below:

HTML

"[{\"RegisteredBy\":\"Admin\",\"PatientRegNo\":\"De723\",\"PaymentType\":\"Cash\"}]"

I have tried including the below code to the ajax function and json result action respectively:

HTML

contentType: 'application/json, charset=utf-8',

C#

return Json(data,JsonRequestBehavior.AllowGet);

What I have tried:

My Ajax Function:

JavaScript

var str = $("#frmReport").serialize();
        $("#searchBtn").prop("disabled", true);
        $.ajax({
            url: url,
            type: "POST",
            data: str,
            cache: false,
            dataType: "json",              
            success: function (_data) {
                var arr = $.map(JSON.parse(_data), function (el) { return el });                   
                table.clear();
                table.destroy();
                $('#tblReport').dataTable({
                    data: arr,
                    columns: [
                        { "data": "RegisteredBy"},
                        { "data": "PatientRegNo"},
                        { "data": "PaymentType"},                           
                    ],
                    dom: 'Bfrtip',
                    buttons: [
                        'copy', 'csv', 'excel',
                        {
                            extend: 'pdfHtml5',
                            orientation: 'portrait',
                            pageSize: 'A4'
                        }

                    ]
                });

            }
        });
        table = $("#tblReport").DataTable();
    });
});

My JsonResult Action Method Code:

C#

getEntries = superAdminForBillingRepository.GetByRegNoOnly(regNo);
var data = Newtonsoft.Json.JsonConvert.SerializeObject(getEntries);
return Json(data);

I want to be able to view the report on datatable irrespective of the browser used.

Posted 13-Feb-19 23:59pm

Uwakpeter

Updated 14-Feb-19 4:10am

Add a Solution

Comments

Richard Deeming 14-Feb-19 8:56am

Any errors in the browser console?

If you're invoking this in response to a "click" event, have you made sure to call e.preventDefault(); to prevent the form from being submitted?

Uwakpeter 14-Feb-19 9:15am

this is the error from the browser console:

Content Security Policy: The page’s settings blocked the loading of a resource at http://localhost:55577/favicon.ico (“default-src”).

I have deleted the favicon.ico file from the application root, yet the issue still persist.

Please do i call this e.preventDefault()?

i used cdn alot in application, i tried using the security policy meta tag in the layout, that makes the application not to display well.

Richard Deeming 14-Feb-19 9:18am

Assuming the code you've shown is a jQuery event handler for the searchBtn button:

$("#searchBtn").click(function(e){
    e.preventDefault();
    ... the rest of your handler code here...
});

Uwakpeter 14-Feb-19 10:08am

Thank you sir, that has worked, the reports are now showing fine on all browsers.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2019-02-14T04:10:00

As discussed in the comments, the button click handler needs to call preventDefault to prevent the button from submitting the form.