jQuery .append() method not working properly

Question

titas.datta 0 Newbie Poster

9 Years Ago

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!

javascript jquery perl

2 Contributors
6 Replies
14K Views
5 Hours Discussion Span
Latest Post 9 Years Ago Latest Post by titas.datta

JorgeM 958 Problem Solver

9 Years Ago

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?

JorgeM 958 Problem Solver

9 Years Ago

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.

Reply to this topic

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.

titas.datta 0 Newbie Poster · Answer 1 · 2015-03-06T18:14:17+00:00

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

titas.datta 0 Newbie Poster · Answer 2 · 2015-03-06T20:56:55+00:00

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

JorgeM 958 Problem Solver Team Colleague Featured Poster · Answer 3 · 2015-03-06T20:59:01+00:00

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>

titas.datta 0 Newbie Poster · Answer 4 · 2015-03-06T21:15:48+00:00

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>