unable to see html table whne bind with json datatable

**ERUM** · Dec 16th, 2013, 12:24 AM

hi to every one on forum

Let me briefly describe structure of problem /and pages too .. I have master page site1.master ,aspx page investment1.aspx and css menu.css ..

jsoon methond rturn data but I m unable to see on page .. (may be just because of CSS) or correct me if I m wrong ..

here is code listing ..
site1.master

Code:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="LandManagment.Site1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>Style 01 (Yellow Green) - Menu by Apycom.com</title>
    <link type="text/css" href="css/menu.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/menu.js"></script>

    <style type="text/css">
* { margin:0;
    padding:0;
}
body { background:rgb(70,123,85); }
div#menu { margin:65px auto; }
div#copyright {
    font:11px 'Trebuchet MS';
    color:#fff;
    text-indent:30px;
    padding:40px 0 0 0;
}
div#copyright a { color:#9acd32; }
div#copyright a:hover { color:#fff; }
</style>
</head>
<body>



<div id="menu">
    <ul class="menu">
        <li><a href="Home.aspx" class="parent"><span>Home</span></a>
            <%--<ul>
                <li><a href="#" class="parent"><span>Sub Item 1</span></a>
                    <ul>
                        <li><a href="#" class="parent"><span>Sub Item 1.1</span></a>
                            <ul>
                                <li><a href="#"><span>Sub Item 1.1.1</span></a></li>
                                <li><a href="#"><span>Sub Item 1.1.2</span></a></li>
                            </ul>
                        </li>
                        <li><a href="#"><span>Sub Item 1.2</span></a></li>
                        <li><a href="#"><span>Sub Item 1.3</span></a></li>
                        <li><a href="#"><span>Sub Item 1.4</span></a></li>
                        <li><a href="#"><span>Sub Item 1.5</span></a></li>
                        <li><a href="#"><span>Sub Item 1.6</span></a></li>
                        <li><a href="#" class="parent"><span>Sub Item 1.7</span></a>
                            <ul>
                                <li><a href="#"><span>Sub Item 1.7.1</span></a></li>
                                <li><a href="#"><span>Sub Item 1.7.2</span></a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#"><span>Sub Item 2</span></a></li>
                <li><a href="#"><span>Sub Item 3</span></a></li>
            </ul>--%>
        </li>
        <li><a href="#" class="parent"><span>Show Investement</span></a>
            <ul>
                <li><a href="Investment1.aspx" class="parent"><span>Sub Item 1</span></a>
                   <%-- <ul>
                        <li><a href="#"><span>Sub Item 1.1</span></a></li>
                        <li><a href="#"><span>Sub Item 1.2</span></a></li>
                    </ul>--%>
                </li>
                <li><a href="#" class="parent"><span>Sub Item 2</span></a>
                    <ul>
                        <li><a href="#"><span>Sub Item 2.1</span></a></li>
                        <li><a href="#"><span>Sub Item 2.2</span></a></li>
                    </ul>
                </li>
                <li><a href="#"><span>Sub Item 3</span></a></li>
                <li><a href="#"><span>Sub Item 4</span></a></li>
                <li><a href="#"><span>Sub Item 5</span></a></li>
                <li><a href="#"><span>Sub Item 6</span></a></li>
                <li><a href="#"><span>Sub Item 7</span></a></li>
            </ul>
        </li>
        <li><a href="#"><span>Help</span></a></li>
        <li class="last"><a href="Contactus.aspx"><span>Contacts</span></a></li>
    </ul>
</div>
     <div id="content">
                <asp:contentplaceholder id="MainContent" runat="server">
                  <!-- Page-specific content will go here... -->
                </asp:contentplaceholder>
            </div>

<div id="copyright">Copyright &copy; 2013 <a href="http://apycom.com/">Apycom jQuery Menus</a></div>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

</body>
</html>

menu.css

Code:

/**
 *********************************************
 * Prototype of styles for horizontal CSS-menu
 * @data 30.06.2009
 *********************************************
 * (X)HTML-scheme:
 *  <div id="menu">
 *      <ul class="menu">
 *          <li><a href="#" class="parent"><span>level 1</span></a>
 *              <ul>
 *                  <li><a href="#" class="parent"><span>level 2</span></a>
 *                      <ul><li><a href="#"><span>level 3</span></a></li></ul>
 *                  </li>
 *              </ul>
 *          </li>
 *          <li class="last"><a href="#"><span>level 1</span></a></li>
 *      </ul>
 *  </div>
 *********************************************
 */

/* menu::base */
div#menu {
    height:41px;
    background:url(../images/main-bg.png) repeat-x;
}

div#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
}
div#menu ul.menu {
    padding-left: 30px;
}

div#menu li {
    position: relative;
    z-index: 9;
    margin: 0;
    padding: 0 5px 0 0;
    display: block;
    float: left;
}
div#menu li:hover>ul {
    left: -2px;
}

div#menu a {
    position: relative;
    z-index: 10;
    height: 41px;
    display: block;
    float: left;
    line-height: 41px;
    text-decoration: none;
    font: normal 12px Trebuchet MS;
}
div#menu a:hover, div#menu a:hover span { color: #fff; }
div#menu li.current a {}

div#menu span {
    display: block;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: 95% 0;
}
div#menu ul ul a.parent span {
    background-position:95% 8px;
    background-image: url(../images/item-pointer.gif);
}
div#menu ul ul a.parent:hover span {
    background-image: url(../images/item-pointer-mover.gif);
}

/* menu::level1 */
div#menu a {
    padding: 0 10px 0 10px;
    line-height: 30px;
    color: #e5e5e5;
}
div#menu span {
    margin-top: 5px;
}/**@replace#1*/
div#menu li { background: url(../images/main-delimiter.png) 98% 4px no-repeat; }
div#menu li.last { background: none; }

/* menu::level2 */
div#menu ul ul li { background: none; }
div#menu ul ul {
    position: absolute;
    top: 38px;
    left: -999em;
    width: 163px;
    padding: 5px 0 0 0;
    background: rgb(45,45,45);
    margin-top:1px;
}
div#menu ul ul a {
    padding: 0 0 0 15px;
    height: auto;
    float: none;
    display: block;
    line-height: 24px;
    color: rgb(169,169,169);
}
div#menu ul ul span {
    margin-top: 0;
    padding-right: 15px;
    _padding-right: 20px;
    color: rgb(169,169,169);
}
div#menu ul ul a:hover span {
    color: #fff;
}
div#menu ul ul li.last { background: none; }
div#menu ul ul li {
    width: 100%;
}

/* menu::level3 */
div#menu ul ul ul {
    padding: 0;
    margin: -38px 0 0 163px !important;
    margin-left:172px;
}

/* colors */
div#menu ul ul ul { background: rgb(41,41,41); }
div#menu ul ul ul ul { background: rgb(38,38,38); }
div#menu ul ul ul ul { background: rgb(35,35,35); }

/* lava lamp */
div#menu li.back {
    background: url(../images/lava.png) no-repeat right -44px !important;
    background-image: url(../images/lava.gif);
    width: 13px;
    height: 44px;
    z-index: 8;
    position: absolute;
    margin: -1px 0 0 -5px;
}
div#menu li.back .left {
    background: url(../images/lava.png) no-repeat top left !important;
    background-image: url(../images/lava.gif);
    height: 44px;
    margin-right: 8px;
}

and investment1.aspx

Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Investment.aspx.cs" MasterPageFile="~/Site1.Master" Inherits="LandManagment.Investment" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="Server">


    <script type="text/javascript">
        $(document).ready(function () {
            function CallService2() {
                alert("Test Alert: CallService2 called!");
                $.ajax({
                    type: "POST",
                    url: "WebService1.asmx/RecordsTest",
                    //     data: "{ 'loginid': " +"'"+ $("#txt_login").val()+"'" + ", 'pass': " + "'" + $("#txt_pass").val()+"'" + "}",
                    data: "{}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: OnSuccess1,
                    error: OnError1
                });
            }

            function OnSuccess1(data, status) {

                $("#tbl").append("<tr><th>FarmerId</th><th>FarmerName</th><th>Crop</th><th>Land</th><th>Session Year</th><th>Investment amount</th></tr>");
                for (var i = 0; i < data.d.length; i++) {

                    $("#tbl").append("<tr><td>" + (data.d[i].farmerid) + "</td><td>" + (data.d[i].farmername) + "</td><td>" + (data.d[i].crop) + "</td><td>" + (data.d[i].land) + "</td><td>" + (data.d[i].SessionYear) + "</td><td>" + (data.d[i].InvestAmount) + "</td></tr>");
                }

                //  $("#tbl").fadeIn();
            }
            function OnError1(request, status, error) {
                $("#Label1").html(request.statusText);
            }
            //--call CallService2
            CallService2();
        });
    </script>
    <div id="main">

        <table id="tbl" runat="server">
        </table>
        <%--<asp:Button ID="Button3" Text="Show Investement" OnClientClick="CallService2(); return false;" runat="server" />--%>
        <asp:Label ID="Label1" Text="&nbsp;" Width="100%" runat="server" />

    </div>
</asp:Content>

any urgent reply is highly appreciated ..

Thanks

Thread: unable to see html table whne bind with json datatable

Thread Tools

Display

unable to see html table whne bind with json datatable

Posting Permissions