0

Hi,
I am trying to add some values retrieved from database, into a HTML table which I've already created using jQuery & AJAX.
My data is getting retrieved properly, but its not getting displayed when I am loading the HTML page. Could anybody help ASAP??
Here's the code I'm using to achieve this:

    <script src="../Scripts/jquery-1.7.min.js"></script>
    <script type="text/javascript">
        function getMemberDetails(userID) {
            $.ajax({
                url: "../Handlers/GetMemberDetails.ashx",
                data: { uID: userID },
                dataType: "json",
                async: false,
                success: getMemberDetSucc,
                error: function (xhr, ajaxOptions, thrownError) {

                }
            });
        }
        function getMemberDetSucc(resultSet) {
            $(resultSet).each(function (i, MemberData) {
                alert(MemberData.strFName + " " + MemberData.strLName);
                $('#memName').append('<td style="text-align:left"><label id="lbl_MemName">'+MemberData.strFName+" "+MemberData.strLName+'</label></td>');
            })
        }
        $(document).ready(function () {
            document.getElementById('showPopup').onclick = getDetails;
            function getDetails() {
                getMemberDetails("1");
            }
          });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:LinkButton PostBackUrl="#openModal" runat="server" ID="showPopup">Open Modal</asp:LinkButton>
        <div id="openModal" class="modalDialog">
            <div>
              <a href="#close" title="Close" class="close">X</a>
                <h2>MEMBER DETAILS</h2>
                <div class="container" style="width:400px; height:150px">
                <table style="width:250px; float:right" class="table">
                 <tr id="memName">
                  <td style="text-align:right"><asp:Label ID="Label1" Font-Bold="true" runat="server" Text="Name: "></asp:Label></td>
                  <!--The appended label should come here, but its not coming-->
                 </tr>      
                </table>
                </div>
                <hr />
            </div>
        </div>
    </form>
</body>
</html>

When I click the link having ID:openModal it displays the Popup Window, where I should have the appended table cell which is not appearing!! Please help!

2
Contributors
6
Replies
31
Views
2 Years
Discussion Span
Last Post by titas.datta
0

Are you seeing the alerts when this function is executed?

        function getMemberDetSucc(resultSet) {
            $(resultSet).each(function (i, MemberData) {
                alert(MemberData.strFName + " " + MemberData.strLName);
                $('#memName').append('<td style="text-align:left"><label id="lbl_MemName">'+MemberData.strFName+" "+MemberData.strLName+'</label></td>');
            })

also.. using your browser's dev tools (f12), do you see any errors reported?

0

Yeah, I'm seeing the alert when the page loads! Also I've checked chrome's dev tools and no errors are being reported!!

0

Ok, so your function is working and actually the append should be working as well. Did you inspect the page using your dev tools? You should see the added cell.

I can tell you that your line 18 from your first post is not correct. You cannot use an aspx control in the javascript block. You have to use <span> there instead of <label>.

i copied your code and of course its not enough for me to run, but took out the ajax related stuff and just kept hte functions to verify flow and it worked for me, no problem.

0

Thanks for replying! I have inspected the page and I don't see the added cell!
Also the label I'm using is a normal html label and not <asp:label>. Could it also cause problem??

0

The html label is used in conjuntion with input elements. its not meant to be used in the manner you showed in your example..

here is a working example, no aspx but should give you an idea...

<span id="showPopup">Show Popup</span>
<div id="modalDialog" style="display:none">
    <div>
        <a href="#" title="Close" id="closePopup">X</a>
        <h2>MEMBER DETAILS</h2>
        <div class="container" style="width:400px; height:150px">
        <table style="width:250px; float:right" class="table">
            <tr id="memName">
            <td><span>Name: </span></td>
            </tr>      
        </table>
        </div>
        <hr />
    </div>
</div>


<script>

    $(document).ready(function () {
        function getMemberDetails(userID) {
            getMemberDetSucc()
        }

        function getMemberDetSucc() {
            $('#memName').append('<td id="newTd"><span>John</span></td>');
        }

        function getDetails() {
            getMemberDetails("1");
        }

        $('#showPopup').click(function () {
            $('#modalDialog').show();
            getDetails();
        });

        $('#closePopup').click(function (event) {
            event.preventDefault();
            $('#newTd').remove();
            $('#modalDialog').hide();
        });

    });
</script>
0

Ok, so I implemented your suggestion of using span instead of label.But the new table cell is still not getting appended! The output is same as the previous case!
Here's what I did:

function getMemberDetSucc(resultSet) {
            $(resultSet).each(function (i, MemberData) {
                alert(MemberData.strFName + " " + MemberData.strLName);
                $('#Img').attr("src", MemberData.vUPhoto);
                $('#memName').append('<td style="text-align:left"><span>'+MemberData.strFName+" "+MemberData.strLName+'</span></td>');
                $('#lbl_Portfolio').text(MemberData.strPortfolio);
                $('#lbl_DevCenter').text(MemberData.strDevCenter);
                $('#lbl_Email').text(MemberData.strEmail);
            })
        }
HTML
<table style="width:250px; float:right" class="table">
                 <tr id="memName">
                  <td style="text-align:right"><span style="font:bold">Name: </span></td>

                 </tr>      

Edited by titas.datta

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.