Why doesn't jQuery's Append method work for div? : The Official Microsoft ASP.NET Forums

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="CSS/Default.css" rel="stylesheet" />
    <title>My Disc</title>
    <script type="text/javascript" src="Scripts/jquery-1.9.0.js"></script>
    <script type="text/javascript">
        $(function ()
        {
            $('#txtWordSearch').keyup(function ()
            {
                if ($(this).val().trim() == "") {
                    $('#divAutoTeller').hide();
                }
                else {
                    $('#divAutoTeller').show();
                    $('#divAutoTeller').empty();
                    $('#divAutoTeller').append("<table width='100%'>");

                    $.get("/InnerSearch.aspx?word=" + encodeURI($('#txtWordSearch').val())).success(function (text)
                    {

  //Put an alert in "each", it works well!, but it just cannot show a whole table???
                         $(text).find("EnglishName").each(function () {
                            $('#divAutoTeller').append('<tr>');
                            $('#divAutoTeller').append('<td>yy</td>');
                            $('#divAutoTeller').append('</tr>');
                        });
                    }
                    ).error(function ()
                    {
                        alert("Fail to read the intellsense");
                    });

                       
                    $('#divAutoTeller').append('</table>');
                }

            });
        });
    </script>
</head>
<body>
    <form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJMzgzNDk0ODIyZGSpFa3S+kexSRc+a6PJspVluXXo9w==" />
</div>

<div>

	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwLi9rjPAgL6+7OXCwKln/PuClw2o6TB/e1EcWR+ITdxs9bVHs/S" />
</div>
        <div class="DivContentsAllCenter">
            <a href="##">

            <div id="search_box" style="margin-top: 30px;">
                <input name="txtWordSearch" type="text" maxlength="20" id="txtWordSearch" style="width:426px;" />
                <input type="submit" name="btnSearch" value="Find" id="btnSearch" style="width:84px;" />

                <div id="divAutoTeller" style="margin-left:-500px;">
                 
                </div>
            </div>
            <div>
            </div>
        </div>
    </form>

</body>
</html>

Edited by ToughMan on Feb 04, 2013 01:53 AM
Edited by ToughMan on Feb 04, 2013 01:53 AM
Edited by ToughMan on Feb 04, 2013 09:52 PM

Reply

Re: Why doesn't jQuery's Append method work for div?

Feb 04, 2013 02:16 AM|LINK

Hi ToughMan,

ToughMan

Now I've changed to use <ol>, but a more strange question comes——

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="MyDisc._Default" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="CSS/Default.css" rel="stylesheet" />
    <title>My Disc</title>
    <script type="text/javascript" src="Scripts/jquery-1.9.0.js"></script>
    <script type="text/javascript">
        $(function ()
        {
 
            $('#olList > li').mouseover(function () {
                $(this).css("background-color", "cyan");
            }).click(function () {
                $('<%=txtWordSearch.ClientID%>').val($(this).val());
            }).mouseleave(function ()
            {
                $(this).css("background-color", "white");
            });
 
 
            $('#<%=txtWordSearch.ClientID%>').keyup(function ()
            {
                if ($(this).val().trim() == "") {
                    $('#divAutoTeller').fadeOut();
                }
                else {
 
                    $('#olList').empty();
                    $('#divAutoTeller').fadeIn();
 
 
                    $.get("/InnerSearch.aspx?word=" + encodeURI($('#<%=txtWordSearch.ClientID%>').val())).success(function (text)
                    {
                        $(text).find("ChineseName").each(function () {
                            $('#olList').append("<li>"+$(this).text() +"</li>");
                        });
                        $(text).find("EnglishName").each(function () {
                            $('#olList').append("<li>" + $(this).text() + "</li>");
                        });
                    }
                    ).error(function ()
                    {
                        alert('Error!');
                    });
                }
 
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div class="DivContentsAllCenter">
 
            <div id="search_box" style="margin-top: 30px;">
                <asp:TextBox ID="txtWordSearch" runat="server" Width="426px" MaxLength="20" />
                <asp:Button ID="btnSearch" runat="server" Text="Search" Width="84px" OnClick="btnSearch_Click" />
 
                <div id="divAutoTeller" style="margin-left:-500px;">
                    <ol id="olList" style="text-align:left; list-style:none; width:426px; margin-top: 1px;margin-left:auto;position:absolute; border-bottom-style: groove; border-bottom-width: thin; border-right-style: groove; border-right-width: thin; border-left-style: groove; border-left-width: thin; border-right-color: #0000FF; border-bottom-color: #0000FF; border-left-color: #0000FF;">
                    </ol>
                </div>
            </div>
        </div>
    </form>
 
</body>
</html>

The div divAutoTeller is given a negative margin on the left, it pulls the element in left direction. Please try to adjust the margin-left value or remove it for a test and check if the ol li elements appears.

Please let me know how it works, thanks.

Please mark the replies as answers if they help or unmark if not.
Feedback to us

Develop and promote your apps in Windows Store

Edited by Yanping Wang - MSFT on Feb 04, 2013 09:52 PM

Reply

CruzerB

Contributor

5399 Points

1098 Posts

Re: Why doesn't jQuery's Append method work for div?

Feb 04, 2013 02:49 AM|LINK

How about the output on the browser? Can you right click on the page and select "View Page Source" menu. Show us what being generated.

No matter how much time you spend on coding. Wish you happy coding.
My Technical Blog

Edited by CruzerB on Feb 04, 2013 09:52 PM

Reply

ToughMan

Participant

1490 Points

635 Posts

Re: Why doesn't jQuery's Append method work for div?

Feb 04, 2013 11:17 AM|LINK

CruzerB
How about the output on the browser? Can you right click on the page and select "View Page Source" menu. Show us what being generated.

Plz see the above codes

Edited by ToughMan on Feb 04, 2013 09:52 PM

Reply

ToughMan

Participant

1490 Points

635 Posts

Re: Why doesn't jQuery's Append method work for div?

Feb 04, 2013 11:18 AM|LINK

Yanping Wang - MSFT

is given a negative margin on the left, it pulls the element in left direction. Please try to adjust the
margin-left value or remove it for a test and check if the ol li elements appears.

Thx

But it's still working well when in Compatable mode……why not in a normal mode?!

Edited by ToughMan on Feb 04, 2013 09:52 PM

Reply

Yanping Wang...

Star

14871 Points

1529 Posts

Microsoft

Re: Why doesn't jQuery's Append method work for div?

Feb 05, 2013 04:53 AM|LINK

Hi ToughMan,

Thanks for your reply.

base on my research, in normal mode, the negative margin left property of divAutoTeller made the elements in it move to too left so that we can not see them(In oder to prove this, you can change bigger for margin-left value, e.g. margin-left: -50px, then you can see part of the OL content ). I just thought, the function append works and since your moving div divAutoTeller left outside of the wrapper will not see it.

as why it is working in compatibility mode, Could you help to send me the page rendered source(right click on your webpage, choose 'View source', copy the orgional source and paste here) for us to check, and please tell me which version of IE you are using. thanks.

best regards,

Please mark the replies as answers if they help or unmark if not.
Feedback to us

Develop and promote your apps in Windows Store

Why doesn't jQuery's Append method work for div? RSS

23 replies

ToughMan

Re: Why doesn't jQuery's Append method work for div?

CruzerB

Re: Why doesn't jQuery's Append method work for div?

ToughMan

Re: Why doesn't jQuery's Append method work for div?

CruzerB

CruzerB

Re: Why doesn't jQuery's Append method work for div?

ToughMan

Re: Why doesn't jQuery's Append method work for div?

CruzerB

Yanping Wang...

Re: Why doesn't jQuery's Append method work for div?

ToughMan

CruzerB

Re: Why doesn't jQuery's Append method work for div?

ToughMan

Re: Why doesn't jQuery's Append method work for div?

CruzerB

ToughMan

Re: Why doesn't jQuery's Append method work for div?

Yanping Wang - MSFT

Yanping Wang...

Re: Why doesn't jQuery's Append method work for div?

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft