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

Reply

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

Feb 01, 2013 05:18 AM|LINK

Hi,

I'm doing a on-line dictionary, and here's the codes of my js+Html:

<%@ 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" />
    <title>My Disc</title>
    <script type="text/javascript" src="Scripts/jquery-1.9.0.js"></script>
    <script type="text/javascript">
        $(function ()
        {
           
            $('#<%=txtWordSearch.ClientID%>').keyup(function ()
            {
                if ($(this).val().trim() == "") {
                    $('#divAutoTeller').hide();
                }
                else {
                    
                    $('#divAutoTeller').show();
                    $('#divAutoTeller').empty();
                    $('#divAutoTeller').append("<table width='100%'>");

                  
                    $.get("/InnerSearch.aspx?word=" + encodeURI($('#<%=txtWordSearch.ClientID%>').val())).success(function (text)
                    {
                        $(text).find("EnglishName").each(function () {
                            alert($(this).text()); //This works great with me,but append do nothing to dynamically append things into div!                             $('#divAutoTeller').append('<tr>');
                            $('#divAutoTeller').append('<td>ss</td>');
                            $('#divAutoTeller').append('</tr>');
                        });
                        }
                    ).error(function ()
                    {
                        alert("Fail to read the intellsense");
                    });

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

            });
        });
    </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" />

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

And my InnerSearch.aspx works well I've tested already——

public partial class InnerSearch : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {

                Response.Clear();
                Response.ContentType = "text/xml";
                Response.Charset = "utf-8";


                string queryResult = Request.QueryString["word"];
                queryResult = queryResult.Trim();

                using (SqlCeDataAdapter adapter = new SqlCeDataAdapter("", new SqlCeConnection("Data Source=|DataDirectory|\\MyDisc.sdf")))
                {
                    string sql = string.Empty;
                    sql = "select EnglishName From tb_Disc where EnglishName Like @EnglishName";
                    adapter.SelectCommand.Parameters.AddWithValue("@EnglishName", "%" + queryResult + "%");
                    adapter.SelectCommand.CommandText = sql;
                    DataTable dt = new DataTable("result");
                    adapter.Fill(dt);
                    dt.WriteXml("d:\\try.xml");   //This works greate with me for testing only!!!!!
                    dt.WriteXml(Response.OutputStream);
                    Response.End();
                }
            }
        }
    }

And the outputted test should be:

<?xml version="1.0" standalone="yes"?>
<DocumentElement>
  <result>
    <EnglishName>Apple</EnglishName>
  </result>
</DocumentElement>

So

Why append works nothing to div???????????????

Edited by ToughMan on Feb 02, 2013 06:49 AM
Edited by ToughMan on Feb 02, 2013 06:49 AM
Edited by mbanavige on Feb 02, 2013 01:26 PM
Edited by ToughMan on Feb 04, 2013 01:53 AM
Edited by ToughMan on Feb 04, 2013 01:53 AM
Edited by mbanavige on Feb 04, 2013 09:52 PM

Reply

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

Feb 01, 2013 09:52 AM|LINK

$('#divAutoTeller').show();
                    $('#divAutoTeller').empty();
                    $('#divAutoTeller').append("<table width='100%'>");

                    $('#divAutoTeller').append("<tr'>"); // Add this line to ur code & try Again....

Edited by ajinder on Feb 02, 2013 06:49 AM
Edited by ajinder on Feb 02, 2013 01:27 PM
Edited by ajinder on Feb 04, 2013 01:53 AM
Edited by ajinder on Feb 04, 2013 09:52 PM

Reply

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

Feb 02, 2013 02:40 AM|LINK

What do you mean?

ajinder???

Can u make ur codes clearly for us to see?

Add what?

Edited by ToughMan on Feb 02, 2013 06:49 AM
Edited by ToughMan on Feb 02, 2013 01:27 PM
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 02, 2013 04:12 AM|LINK

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>

Plz look at "  ", but:

1) If I delete the style of <ol>and I intend to use jQuery to add dyanmically.——That's OK！

2) But if I use style to <ol>, that loads NOTHING to <ol>……！

Why？

Edited by ToughMan on Feb 02, 2013 06:49 AM
Edited by ToughMan on Feb 02, 2013 01:27 PM
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 02, 2013 04:32 AM|LINK

$('#divAutoTeller').append("<table width='100%'><tr>"); May Be the Problem is <tr> which u forget to begin after <table> tag.... Hopes It helps U....

Edited by ajinder on Feb 02, 2013 06:49 AM
Edited by ajinder on Feb 02, 2013 01:27 PM
Edited by ajinder on Feb 04, 2013 01:53 AM
Edited by ajinder on Feb 04, 2013 09:52 PM

Reply

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

Feb 02, 2013 04:49 AM|LINK

$('#divAutoTeller').append("<table width='100%'><tr>"); May Be the Problem is <tr> which u forget to begin after <table> tag.... Hopes It helps U....

Edited by ajinder on Feb 02, 2013 06:49 AM
Edited by ajinder on Feb 02, 2013 01:27 PM
Edited by ajinder on Feb 04, 2013 01:53 AM
Edited by ajinder on Feb 04, 2013 09:52 PM

Reply

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

Feb 02, 2013 06:39 AM|LINK

ajinder
May Be the Problem is <tr> which u forget to begin after <table> tag.... Hopes It helps U....

No.

I've added the <table>.

Please read my above jQuery part codes of my 1st issue carefully

And now I've changed the code, but I find a very strange problem——

If I change my IE to "compatable Mode", everything goes right

Why?

Edited by ToughMan on Feb 02, 2013 06:49 AM
Edited by ToughMan on Feb 02, 2013 06:49 AM
Edited by ToughMan on Feb 02, 2013 01:27 PM
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 02, 2013 06:57 AM|LINK

Hi,

I think you have to construct the child Table elements (in string) into a string variable. Then append to the parent element in one shot. Otherwise, it will treat each appends as 1 child, actually they are just partial of the child element that you wish to append.

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

Edited by CruzerB on Feb 02, 2013 01:27 PM
Edited by CruzerB on Feb 04, 2013 01:53 AM
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 02, 2013 08:59 AM|LINK

CruzerB
CruzerB

Thx

But now I abadoned using table but div, it's the same problem.

And what's more, if I use compatable mode, that's OK.

Why?

How to solve?

Edited by ToughMan on Feb 02, 2013 01:27 PM
Edited by ToughMan on Feb 04, 2013 01:53 AM
Edited by ToughMan 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 02, 2013 01:12 PM|LINK

Can you use Developer Tool (F12) and check the html element. Maybe there is a broken element that make the thing cannot works properly.

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

Edited by CruzerB on Feb 02, 2013 01:27 PM
Edited by CruzerB on Feb 04, 2013 01:53 AM
Edited by CruzerB on Feb 04, 2013 09:52 PM

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

23 replies

ToughMan

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

ajinder

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

ToughMan

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

ToughMan

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

ajinder

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

ajinder

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

ToughMan

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

ajinder

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?

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

Follow Us On:

Microsoft