Tim
asked on
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?
Thanks
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>Thanks
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
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.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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
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>SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
For some reason I didn't see it.I am using IE11 in compatibility mode wondering if that is the issue.
Just tried it in IE8 (the real IE8 - not emulated) running in IE8 compatibility view with IE7 standards - still works.
Have you checked your console window to see if anything is reported there?
Have you tried Chrome / FF - do you get the same result?
Have you tried Chrome / FF - do you get the same result?
ASKER
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.
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.
ASKER
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.
I forgot to add an "action=" within my form header. I added it in and it seems to be working fine now.
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