Member Avatar for titas.datta

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
  • 14K Views
  • 5 Hours Discussion Span
  • Latest Post Latest Post by titas.datta

Recommended Answers

All 6 Replies

Member Avatar for JorgeM

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?

Member Avatar for titas.datta

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

Member Avatar for JorgeM

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.

Member Avatar for titas.datta

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??

Member Avatar for JorgeM

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>
Member Avatar for titas.datta

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
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.