Anything i create in JQuery immediately disappears

So this is driving me nuts, anything I create within JQuery disappears after the code runs.

I am creating a table once a button is clicked. The only reason I know it works at all is because I created an alert window with some text and behind the alert window on the page is the table I created but once I click ok on the alert window the table goes away.

The code is being added to a <div> and I have nothing to remove the table ot hide it.

Why does this keep happening?
        <script type="text/javascript" src="Scripts/jquery-1.11.3.min.js" ></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#MultiSearch").click(function ()
                {
                    var textbox = $('#MyTA').val();
                    if (textbox.length < 7)
                    {
                        alert("Invalid input data, at least one text is required");
                    }
                    else
                    {
                        var data = [["1", "2", "3"]];
                        var cityTable = makeTable($('#myDiv'), data);
                    }
                });
            });

            function makeTable(container, data) {
                var table = $("<table/>").addClass('mainTable');
                $.each(data, function(rowIndex, r) {
                    var row = $("<tr/>");
                    $.each(r, function(colIndex, c) { 
                        row.append($("<t"+(rowIndex == 0 ?  "h" : "d")+"/>").text(c));
                    });
                    table.append(row);
                });
                return container.append(table);
            }

	<body>
	<center>
	<form id="Form1" action="search.aspx" runat="server">
	<asp:ScriptManager ID="ScriptManager1" EnablePageMethods="true" runat="server">
	</asp:ScriptManager>
	<asp:Table id="Table1" runat="server" BorderWidth="3" BorderStyle="Ridge">
		<asp:TableRow>
			<asp:TableCell ColumnSpan="1" VerticalAlign="Bottom">
				<asp:Button ID="MultiSearch" Height="87px" Text="Search" runat="server" />
			</asp:TableCell>
		</asp:TableRow>
</asp:Table>
        <div id="myDiv"></div>
	</form>
	</center>
	</body>

Open in new window


Thanks
TimAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Rainer JeschorCommented:
Hi,
just a quick guess but it seems that you do not further use the created variable
 var cityTable 

Open in new window

What happens if you change the code to:
$(document).ready(function () {
                 $("#MultiSearch").click(function ()
                 {
                     var textbox = $('#MyTA').val();
                     if (textbox.length < 7)
                     {
                         alert("Invalid input data, at least one text is required");
                     }
                     else
                     {
                         var data = [["1", "2", "3"]];
                         makeTable($('#myDiv'), data);
                     }
                 });
             });

             function makeTable(container, data) {
                 var table = $("<table/>").addClass('mainTable');
                 $.each(data, function(rowIndex, r) {
                     var row = $("<tr/>");
                     $.each(r, function(colIndex, c) { 
                         row.append($("<t"+(rowIndex == 0 ?  "h" : "d")+"/>").text(c));
                     });
                     table.append(row);
                 });
                 container.append(table);
             }

Open in new window

HTH
Rainer
Julian HansenCommented:
Your code is correct and works.

You don't use cityTable but because you are returning the container.Append - it does not matter - the table is still appended

What is probably causing the problem is the missing closing </script> tag on line 30
Julian HansenCommented:
This code works
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
  $("#MultiSearch").click(function () {
    var textbox = $('#MyTA').val();
    if (textbox.length < 7)
    {
      alert("Invalid input data, at least one text is required");
    }
    else
    {
      var data = [["1", "2", "3"]];
      var cityTable = makeTable($('#myDiv'), data);
    }
  });
});

function makeTable(container, data) {
  var table = $("<table/>").addClass('mainTable');
  $.each(data, function(rowIndex, r) {
    var row = $("<tr/>");
    $.each(r, function(colIndex, c) { 
      row.append($("<t"+(rowIndex == 0 ?  "h" : "d")+"/>").text(c));
    });
    table.append(row);
  });
  return container.append(table);
}
</script>
<style type="text/css">
</style>
</head>
<body>
<input type="text" id="MyTA" />
<span id="MultiSearch">Click Me</span>
<div id="myDiv"></div>
</body>
</html>

Open in new window

Build an E-Commerce Site with Angular 5

Learn how to build an E-Commerce site with Angular 5, a JavaScript framework used by developers to build web, desktop, and mobile applications.

TimAuthor Commented:
Hi All,

Sorry I had the missing script in my code, I just forgot to put it in the code example.

I removed the citytable var and it is still the same.
Julian HansenCommented:
Can you post a link to your page?

This code works - it is a cut and paste of your code http://www.marcorpsa.com/ee/t732.html

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
TimAuthor Commented:
Sorry I tried you link but I didn't see the table created.

Here is my full page. you can ignore the C# stuff, I am not accessing that from within my aspx code yet

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="hdsearch.aspx.cs" Inherits="HDSearch" %>
<%@ Assembly Name="System.DirectoryServices, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"%>
<!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 runat="server">
		<title></title>
		<link rel="stylesheet" type="text/css" href="background.css"/>
        <script type="text/javascript" src="Scripts/jquery-1.11.3.min.js" ></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#MultiSOEIDActiveSearch").click(function ()
                {
                    var textbox = $('#MyTA').val();
                    if (textbox.length < 7)
                    {
                        alert("Invalid input data, at least one SOEID is required");
                    }
                    else
                    {
                        document.getElementById("myDiv").innerHTML = "<table border=" + "\"1\"" + ">";
                        document.getElementById("myDiv").innerHTML += "<th><td>SOEID</td></th>";
                        document.getElementById("myDiv").innerHTML += "<th><td>Name</td></th>";
                        document.getElementById("myDiv").innerHTML += "<th><td>Acct. Status</td></th>";
                        document.getElementById("myDiv").innerHTML += "<th><td>Acct. Location</td></th>";
                        document.getElementById("myDiv").innerHTML += "<th><td>Server</td></th>";
                        document.getElementById("myDiv").innerHTML += "<th><td>Folder Path</td></th>";
                        document.getElementById("myDiv").innerHTML += "<th><td>Share Path</td></th>";
                        document.getElementById("myDiv").innerHTML += "<th><td>Share Size</td></th>";
                        document.getElementById("myDiv").innerHTML += "<th><td>Space Available</td></th>";
                        document.getElementById("myDiv").innerHTML += "</table>";
                    }

                    var strIDs = textbox.split(/\n/);
                    var arrayLength = strIDs.length;
                    for (var i = 0; i <= arrayLength; i++)
                    {
                            if (strIDs[i].length >= 7)
                            {
                                alert(strIDs[i]);
                            }
                    }
                });
            });
            </script>
	</head>
	<body>
	<center>
	<form id="Form1" runat="server">
	<asp:Table id="Table1" runat="server" BorderWidth="3" BorderStyle="Ridge">
		<asp:TableRow>
			<asp:TableCell Font-Bold="True" Font-Underline="True" ColumnSpan="3" HorizontalAlign="center" BackColor="#000000" ForeColor="#ffffff" Text="Active Home Drive Search" />
		</asp:TableRow>
		<asp:TableRow>
			<asp:TableCell ColumnSpan="1" Text="SOEID" />
			<asp:TableCell ColumnSpan="1" Width="225">
                <asp:TextBox ID="MyTA" TextMode="MultiLine" Columns="25" Rows="5" runat="server" />
			</asp:TableCell>
			<asp:TableCell ColumnSpan="1" VerticalAlign="Bottom">
				<asp:Button ID="MultiSOEIDActiveSearch" Height="87px" Text="Search" runat="server" />
			</asp:TableCell>
		</asp:TableRow>
		<asp:TableRow>
			<asp:TableCell ColumnSpan="3" HorizontalAlign="Center" >
				<asp:CheckBox ID="CheckSize" Text="Include Home Drive Size Information" onCheckedChanged="CheckCheckSize" runat="server" />
				<asp:HiddenField ID="hiddenField1" runat="server" Value="No" Visible="False" />
			</asp:TableCell>
		</asp:TableRow>
		<asp:TableRow>
			<asp:TableCell Font-Bold="True" Font-Underline="True" ColumnSpan="3" HorizontalAlign="center" BackColor="#000000" ForeColor="#ffffff" Text="Archive Home Drive Search" />
		</asp:TableRow>
		<asp:TableRow>
			<asp:TableCell ColumnSpan="1" Text="SOEID" />
			<asp:TableCell ColumnSpan="1" Width="225">
				<asp:TextBox id="strSOEID" TextMode="SingleLine"  MaxLength="30" Columns="30" runat="server" />
			</asp:TableCell>
			<asp:TableCell ColumnSpan="1">
				<asp:Button ID="SOEIDArchiveSearch" Text="Search" onClick="SearchArchiveHomeDrivebyID" runat="server" />
			</asp:TableCell>
		</asp:TableRow>
		<asp:TableRow>
			<asp:TableCell ColumnSpan="1" Text="First Name" />
			<asp:TableCell ColumnSpan="1" Width="225">
				<asp:TextBox id="FName" TextMode="SingleLine"  MaxLength="30" Columns="30" runat="server" />
			</asp:TableCell>
			<asp:TableCell RowSpan="2" ColumnSpan="1" VerticalAlign="Bottom">
				<asp:Button ID="NameArchiveSearch" Height="53px" Text="Search" onClick="SearchArchiveHomeDrivebyName" runat="server" />
			</asp:TableCell>
		</asp:TableRow>
		<asp:TableRow>
			<asp:TableCell ColumnSpan="1" Text="Last Name" />
			<asp:TableCell ColumnSpan="1" Width="225">
				<asp:TextBox id="LName" TextMode="SingleLine" MaxLength="30" Columns="30" runat="server" />
			</asp:TableCell>
		</asp:TableRow>
	</asp:Table>
        <br />
	</form>
        <div id="myDiv"></div>
	</center>
	</body>
</html>

Open in new window

Julian HansenCommented:
Refer screenshot below (1 2 3) is in the table.  See the Firebug window at the bottom of the screen shot
Screenshot
TimAuthor Commented:
For some reason I didn't see it.I am using IE11 in compatibility mode wondering if that is the issue.
Julian HansenCommented:
Just tried it in IE8 (the real IE8 - not emulated) running in IE8 compatibility view with IE7 standards - still works.
Julian HansenCommented:
Have you checked your console window to see if anything is reported there?

Have you tried Chrome / FF - do you get the same result?
TimAuthor Commented:
ok so it appears that when my javascript code finishes whatever I wrote to the page gets erased because the page is refreshing.

Interesting because whatever I type into my textbox remains after the refresh but when I add a table to my >div> it disappears once the page reloads.
TimAuthor Commented:
so I figured out why this was not working.

I forgot to add an "action=" within my form header. I added it in and it seems to be working fine now.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.