Solved

c# datatable to webpage through AJAX call Error

Posted on 2014-10-14
3
407 Views
Last Modified: 2014-10-15
Hi, I am trying to do this for the first time based on modifying a code snippet I found online.  I am building an html data table in my code behind embedding sql data from a c# datatable.  I am then trying to pass it to an .aspx page using an AJAX call and passing the html table string to a <div> tag.  The problem I am having is that when I breakpoint on the htmlTable string it looks good but the page is coming up with a javascript alert box saying 'error', not sure how to troubleshoot from this point or what is wrong with the code, I have pasted below, any assistance is appreciated!!!
Code Behind:
namespace WebApplication3
{
    public partial class Page_MF : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }
        
        private static string connTotalOrdersCalls = ConfigurationManager.ConnectionStrings["connTotalOrdersCalls"].ConnectionString;
       
        public static DataTable reportDT()
        {
            try
            {            
            String sp_Name = "USP_TOTAL_ORDERCALLS";
            using (DataTable OrdersCalls = new DataTable())
            {
                OrdersCalls.Columns.Add("Week_Ending");
                OrdersCalls.Columns.Add("Mth");
                OrdersCalls.Columns.Add("Product_Suite");
                OrdersCalls.Columns.Add("Site");
                OrdersCalls.Columns.Add("SalesAction");
                OrdersCalls.Columns.Add("Orders");
                OrdersCalls.Columns.Add("TotalCalls");
                using (SqlConnection SQLConn = new SqlConnection(connTotalOrdersCalls))
                {
                    using(SqlCommand SQLComm = new SqlCommand(sp_Name, SQLConn))
                    {
                        SQLComm.CommandType = CommandType.StoredProcedure;
                        //SQLComm.Parameters.Add(new SqlParameter("@Site", null);
                        SQLConn.Open();

                        SqlDataReader sql_Reader = SQLComm.ExecuteReader();
                        while (sql_Reader.Read())
                        {
                            Object[] row = {
                                               sql_Reader["Week_Ending"].ToString(),
                                               sql_Reader["MTH"].ToString(),
                                               sql_Reader["PRODUCT_SUITE"].ToString(),
                                               sql_Reader["SITE"].ToString(),
                                               sql_Reader["Orders"].ToString(),
                                           };
                            OrdersCalls.Rows.Add(row);
                        }
                    }
               
                return OrdersCalls;
            }
        }
            }
            catch (Exception)
            {
                throw;
            }
        }
        
        [WebMethod]
        public static String SendToDiv()
        {
            String htmlTable = "<table>";
            DataTable newTable = reportDT();

            for (int i = 0; i < newTable.Rows.Count; i++)
            {
                htmlTable += "<tr>";
                for (int x = 0; x < newTable.Columns.Count; x++)
                {
                    htmlTable += "<td>" + newTable.Rows[i][x] + "</td>";
                }
                htmlTable += "</tr>";
            }
            return htmlTable;
        }
    }
}

Open in new window


.ASPX Page:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
  
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script> 
 
<script type="text/javascript">
    //on document ready event (when the dom is ready)
    $(document).ready(function () {
        appendToDiv();
    });

    function appendToDiv() {
        $.ajax({
            type: "POST",
            async: false,  
            contentType: "application/json; charset=utf-8",
            url: "Page_MF.aspx/SendToDiv",
            data: JSON.stringify({}), 
            dataType: "json",
            success: function (data) {
               
                $('#div-for-upload').append(data.d)
            },
            error: function (result) {
                alert("Error");
            }
        });
    }
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="div-for-upload">
   </div>
    </form>
</body>
</html>

Open in new window

0
Comment
Question by:Scarlett72
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 57

Accepted Solution

by:
Julian Hansen earned 250 total points
ID: 40381547
And if you change
$('#div-for-upload').append(data.d)

Open in new window


To

$('#div-for-upload').append(data)

Open in new window


Does it work?

Your SendToDiv function is returning a string - and you are expecting an object in your AJAX success function

Otherwise:

What error are you getting?
Do you have a link?

Other Considerations
Are you sure you want to be appending the response - this will add a new table to the div for each call (keeping the table(s) that are already there) - if you want to update (replace) the table consider

$('#div-for-upload').html(data)

Open in new window

0
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 250 total points
ID: 40381869
replace :
            dataType: "json",
by :
            dataType: "html",

because it look like you're receiving HTML not JSON data
0
 

Author Closing Comment

by:Scarlett72
ID: 40382837
Hi what actually resolved this for me was adding the following to my web.config, I think the amount of test data I was using was too large.  

  <system.web.extensions>
    <scripting>
      <webServices>
        <jsonSerialization maxJsonLength="50000000">
        </jsonSerialization>
      </webServices>
    </scripting>
  </system.web.extensions>
0

Featured Post

MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Performance in games development is paramount: every microsecond counts to be able to do everything in less than 33ms (aiming at 16ms). C# foreach statement is one of the worst performance killers, and here I explain why.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

751 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question