sorttable.js not working

I have a javascript function that gets called on body load (<body onload="">).
That function makes an AJAX call my C# code to generate a table.
The C# code send the table back to my javascript code and the javascript code applies the table to my <div>

The sortable.js file is set in the header. problem is the sort function doesn't work. Any ideas?

Thanks

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="overview.aspx.cs" Inherits="Overview" %>
<%@ Assembly Name="System.DirectoryServices, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<link rel="stylesheet" href="overview.css" type="text/css"/>
        <script src="sorttable.js" type="text/javascript"></script>
        <script type="text/javascript">
            function GetDatabase()
            {
                var xmlhttp = new XMLHttpRequest();
                xmlhttp.onreadystatechange = function ()
                {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                    {
                        document.getElementById("myDiv").innerHTML = "<table id=" + "\"mainTable\"" + " border=" + "\"1\"" + " class=" + "\"sortable\"" + ">" +  xmlhttp.responseText + "</table>";
                    }
                }
                xmlhttp.open("POST", "overview.aspx/GetDatabase", true);
                xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xmlhttp.send("Method=" + encodeURIComponent("GetDatabase"));
            }

         </script>
	</head>

	<body onload="GetDatabase()">
	<center>
        <table border="1">
            <tr>
                <td>
                    <input type="button" id="GetSizeData" value="Get Space Data" onclick="GetVolumeSpace()" />
                </td>
            </tr>
            <tr>
                <td>
                    <label id="label1"></label>
                </td>
            </tr>
            </table>

        <div id="myDiv"></div>
	</center>
	</body>
</html>

Open in new window

tr57285Asked:
Who is Participating?
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,
could you please add the information, which "sortable.js" plugin/library you are using?

Normally you will have to initialize the functionality somehow and in your case this would be in your readystate function:
 if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                    {
                        document.getElementById("myDiv").innerHTML = "<table id=" + "\"mainTable\"" + " border=" + "\"1\"" + " class=" + "\"sortable\"" + ">" +  xmlhttp.responseText + "</table>";
                        // Here should be the initialization
                    }

Open in new window

But again, that depends on your sortable library. Also you added a class "sortable" to the table, but is this class defined in the overview.css file?

Thanks.
Rainer
0
Julian HansenCommented:
The answer to your question is in the documentation here
http://www.kryogenix.org/code/browser/sorttable/#ajaxtables
Change your getdatabase function like so
function GetDatabase()
{
	var xmlhttp = new XMLHttpRequest();
	xmlhttp.onreadystatechange = function ()
	{
		if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
		{
			document.getElementById("myDiv").innerHTML = "<table id=" + "\"mainTable\"" + " border=" + "\"1\"" + " class=" + "\"sortable\"" + ">" +  xmlhttp.responseText + "</table>";
                        // ADD THE FOLLOWING TWO LINES
			var id = document.getElementById("mainTable");
			sorttable.makeSortable(id);
		}
	}
	xmlhttp.open("POST", "overview.html", true);
	xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	xmlhttp.send("Method=" + encodeURIComponent("GetDatabase"));
}

Open in new window

0

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
tr57285Author Commented:
Awesome. Just what was needed.

Thank you much.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Julian HansenCommented:
You are welcome - good luck with your project.
0
tr57285Author Commented:
Thanks now onto fixing the sorting issues with this algorithm.

For letters it sorts caps a to z first then sorts lowercase a to z. Need it to sort a to z case insensitive.

For numbers it seems to only look at the first digit to sort to it put 1 before 10. 9 before 100 etc...
0
Julian HansenCommented:
It will do that - it is a lexicographic sort which means it will sort it the way you are seeing it.

If you want more than this you might want to look at something like jQuery Data Tables

https://www.datatables.net/

It has more options and caters to plug-ins - there may be a sorting plugin available (or you can write one) to sort the way you want.
0
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
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.