Click here to Skip to main content
14,176,878 members
Rate this:
Please Sign up or sign in to vote.
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:

I have tried including the below code to the ajax function and json result action respectively:
contentType: 'application/json, charset=utf-8',

return Json(data,JsonRequestBehavior.AllowGet);

What I have tried:

My Ajax Function:
var str = $("#frmReport").serialize();
        $("#searchBtn").prop("disabled", true);
            url: url,
            type: "POST",
            data: str,
            cache: false,
            dataType: "json",              
            success: function (_data) {
                var arr = $.map(JSON.parse(_data), function (el) { return el });                   
                    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:
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.
Updated 14-Feb-19 4:10am
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:
    ... 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

Rate this: bad
Please Sign up or sign in to vote.

Solution 1

As discussed in the comments, the button click handler needs to call preventDefault to prevent the button from submitting the form.
    ... the rest of your handler code here...

event.preventDefault() | jQuery API Documentation[^]

The equivalent for regular JavaScript:
Event.preventDefault() - Web APIs | MDN[^]
(Doesn't work in IE8 or earlier.)

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

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy | Cookies | Terms of Service
Web03 | 2.8.190526.1 | Last Updated 14 Feb 2019
Copyright © CodeProject, 1999-2019
All Rights Reserved.
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100