Solved

Server-side Ajax Data Table With ASP

Posted on 2014-07-28
28
1,131 Views
Last Modified: 2014-08-02
I have been plodding along these past couple of weeks trying to get a data table to work in my classic asp page.  I believe I have just about conquered the ajax but am having trouble bringing in the data.  The table itself works until I try to reference a classic asp page to populate it.  The page I am working on is here:

http://www.gopherstateevents.com/series/series_results2.asp?year=2014

I can write asp ok but what I am wondering is which part of my asp goes in the call for data
(ie: "ajax": '/series/get_results.asp') and what stays in the "main" page in terms of variable declarations, array dimensions, etc.  Note that they are both asp pages.
0
Comment
Question by:Bob Schneider
  • 10
  • 9
  • 8
28 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 40225519
Does not look like you are referencing another page.  

$(document).ready(function() {
    $('#standings').dataTable();
} );

Open in new window

Looking at the example for ajax, notice how they are referencing the data page   http://www.datatables.net/examples/data_sources/ajax.html
$(document).ready(function() {
    $('#example').dataTable( {
        "ajax": '../ajax/data/arrays.txt'
    } );
} );

Open in new window

You need to set up a plain asp page that accepts a get and produces the similar output.  Look in your previous question about this where I have this detailed.
0
 
LVL 32

Assisted Solution

by:Big Monty
Big Monty earned 250 total points
ID: 40225547
the biggest part of using ajax based datatables is to understand the data format, which is called json (
read here for more info on json). since you're using asp to generate data, i recommend using the aspJSON library.

assuming you are getting your data from a database, you can simple use the following code to get the data:

sql = "select cols from table"
QueryToJSON( conn, sql ).Flush
Response.End

Open in new window


in fact, that's all you need for the server side code to write out the data via ajax. In other words, if you reference your datatables to call that code above, that's ALL you need, assuming you have all of the include files referenced and you've created a connection object called conn.

as for the client side, all you need to do to reference your server side code is something like this:

$(document).ready(function() {
    $('#standings').dataTable({
        "ajax": "/series/get_results.asp",
        "columns": [
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "extn" },
            { "data": "start_date" },
            { "data": "salary" }
        ]
});
} );

Open in new window


if you don't want to specify column headers / definitions, just take out the "columns" definitions.

I can write asp ok but what I am wondering is which part of my asp goes in the call for data
(ie: "ajax": '/series/get_results.asp') and what stays in the "main" page in terms of variable declarations, array dimensions, etc.  Note that they are both asp pages.

i'm not sure what you're looking for, can you be more specific?
0
 

Author Comment

by:Bob Schneider
ID: 40226553
This is very helpful and I appreciate you suffering my ineptitude.  I am also afraid that I have what I need in previous assistance but am just not "connecting the dots."

@padas, yes I know that the data reference is missing.  I left it at that to indicate that the ajax datatable structure was clean so that we can understand that the problem is on the server side as I try to populate the table.

When I put the reference to the asp page that is compiling the data it craps out.  Note that the asap page itself works because it renders well here: http://www.gopherstateevents.com/series/series_results.asp?series_id=19&year=2014

But when I put that in here: http://www.gopherstateevents.com/series/series_results2.asp?series_id=19&year=2014 my data table falls apart.

I recognized from a previous post the I was directed to that there might be some escapes that I need to implement.  At this point, I don't think that is the problem.  I believe that the problem is how I "connect" the two pages.  For instance I need an lSeriesID variable on both pages.  Do I declare it on both pages or just on the "parent" page?  i assume I declare it on both (change the name?).  I am passing it via a query string.

Is it fair to say that it works more like an inline frame than an include?

I think I am getting it and I am going to try again later today.  Please let me know if you see any issues in my reasoning or notice any gaps I have to fill in.  Otherwise I will repost once I have done this and update you.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 40226656
I can't come back to this until later today.  However, the drop downs should now have a jquery listener for a change and submit the ajax call based on the change or clicking the select series to review button.
0
 

Author Comment

by:Bob Schneider
ID: 40226664
Thank you.  I am excited to be moving in this direction with all the help provided at EE.  Can't wait to get back at it later today.
0
 
LVL 32

Assisted Solution

by:Big Monty
Big Monty earned 250 total points
ID: 40227119
ok so let's back up and discuss a bit how we tie all this together. when an html is served to the end client, it's using what we call a stateless protocol, which essentially means once the page is done loading, it doesn't communicate with the server any more, and it is AS IS. The exception to this rule is when ajax is used (which is why it's such a popular technology), because it allows the already loaded page to communicate back to the server. You need to think of this communication as 2 separate web pages talking to each other in a request/response form of communication, so your analogy of the frame inside a page is close, but it the 2 pages don't have access to each others scope (variables, functions, etc). In other words, if you have page1.asp make an ajax call called page2, and on page1, there was a function called printHelloWorld(), page2 has no idea, and more important, it has no access to that function.

hopefully that helps clear up a bit about how ajax calls work. please, if you have questions, do ask :) now to move onto your specific situation, let's discuss how we make an ajax call and get back the results we want! in your case, you have a dropdown coded like this:

<select name="series" id="series" onchange="this.form.submit1.click();">

Open in new window


very simple, it just submits the form after the selection has been made, and on the submitted page, there is (i'm assuming) code in place that checks the value of certain posted fields, builds and executes the sql, and spits out the data by looping through the recordset and building the table html. By making the ajax call, you build the url ahead of time with all of the name/value pairs needed. for example, in this case, you have a name/value pair of "series=xxx" being posted, right? so you would need to add "series=xxx" somehow to your ajax url that you're using.

because you're using the datatables component, you need to initialize EVERYTHING on page load, right? so let's go back and take a look at the code i posted previously with regards to the datatables (I took out the column definitions for the sake of simplicity):

$(document).ready(function() {
    $('#standings').dataTable({
        "ajax": "/series/get_results.asp"
    });
});

Open in new window


With the datatables component, it requires you to use JSON as a data format (other formats may be accepted, i'm not sure, but I've always seen JSON as the primary format). so, since you have the url pointed to get_results.asp, that page MUST output the data in a JSON format, and not an html format as you currently have it. This is why "the datatable falls apart" :)

as a simple test and proof of concept, create another page and call it "results.asp". Assuming it's in the series folder, your new code should look like:

$(document).ready(function() {
    $('#standings').dataTable({
        "ajax": "/series/results.asp"
    });
});

Open in new window


assuming you've downloaded the aspJSON files (remember, this will transform your data automatically to a JSON format), your results.asp page should look something like:

<%@language=VBScript%>

<!--#include virtual = "/includes/connection.asp" -->
<!--#include virtual = "/includes/plugins/aspJSON/JSON_2.0.4.asp"-->
<!--#include virtual = "/includes/plugins/aspJSON/JSON_UTIL_0.1.1.asp"-->

<%
sql = "select cols from table"
QueryToJSON( conn, sql ).Flush

'-- clean up connection object
if conn.State <> 0 then conn.Close
set conn = nothing
Response.End
%>

Open in new window


that's it! that's all you need!

the first code is just setting up your connection to the database and opening it. if you don't have a separate file for it, put that code before the sql statement. Also, you'll need to correct the include paths to match your site. The sql, for this simple example, should be what you want the data to look like in its default state.

The QUERYToJSON function is where all of the magic takes place. It takes your sql and connection object, executes the query, and transforms all of the records into a JSON format, and writes it out to the screen. In this case, it's writing it out to the ajax calls buffer (sometimes known as responseText), which then is used by the datatable component and it builds out all of the proper html for it.

Let's see if we can get this initial part working, then we can work on the filtering aspect of it, by using the other dropdowns to get more specific data. Any questions whatsoever, do ask. If I'm not around, I'm sure Scott will be more than capable of answering. And don't beat yourself up over not knowing this stuff, it's pretty complicated stuff and each of us went through similar struggles when first learning it :)
0
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 250 total points
ID: 40227419
Ultimately, you need to get the data series_id and  year to the asp page that is producing the json/js object.

I think what we need to start with is making these 2 forms into one and using chained http://www.appelsiini.net/projects/chained to link everything.

This is the static code http://jsbin.com/venuga/1/edit
<form name="select_series" method="Post" action="series_results.asp?year=2014">
                <span style="font-weight: bold;">Select Series:</span>
                <select name="series" id="series" onchange="this.form.submit1.click();">
                    <option value="">&nbsp;</option>
                    
                            <option value="6">Central Minnesota Series (2014)</option>
                        
                            <option value="20">Hwy 12 Series (2014)</option>
                        
                            <option value="19" selected="">Hwy 94 Series (2014)</option>
                        
                            <option value="4">Lake Series (2014)</option>
                        
                            <option value="18">Litchfield Series (2014)</option>
                        
                            <option value="7">Northland Series (2014)</option>
                        
                </select>
			    <input type="hidden" name="submit_series" id="submit_series" value="submit_series">
			    <input type="submit" name="submit1" id="submit1" value="Select Series To View">
			    </form>
  <form name="view_category" method="post" action="series_results.asp?series_id=19&amp;year=2014">
                <span style="font-weight: bold;">Category:</span>
                <select name="categories" id="categories" onchange="this.form.submit2.click();">
                    
                            <option value="0" selected="">Open</option>
                        
                            <option value="14">14 &amp; Under</option>
                        
                            <option value="19">15 - 19</option>
                        
                            <option value="24">20 -24</option>
                        
                            <option value="29">25 - 29</option>
                        
                            <option value="34">30 - 34</option>
                        
                            <option value="39">35 - 39</option>
                        
                            <option value="44">40 - 44</option>
                        
                            <option value="49">45 - 49</option>
                        
                            <option value="54">50 - 54</option>
                        
                            <option value="59">55 - 59</option>
                        
                            <option value="64">60 -64</option>
                        
                            <option value="69">65 - 69</option>
                        
                            <option value="99">70 &amp; Over</option>
                        
                </select>

                <select name="gender" id="gender">
                    
                        <option value="M" selected="">Male</option>
                        <option value="F">Female</option>
                    
                </select>
			    <input type="hidden" name="submit_category" id="submit_category" value="submit_category">
			    <input type="submit" name="submit2" id="submit2" value="Select Category">
                </form>
  

Open in new window

0
 
LVL 32

Expert Comment

by:Big Monty
ID: 40227474
where do dependent dropdowns come into play here? The dropdowns on the page seem to all have the same values, changing one of them doesn't seem to change the values, so your last comment doesn't relate to what's being done here. furthermore, I believe the OP is trying to understand the flow of how everything works, so i don't think the first thing that should be done is combine the 2 forms, but rather make sure the OP understands the theory behind how everything is working.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 40228038
The current drop downs require the user to select one group then another.  That tells me there is a connection.  

I totally disagree about not combining the drop downs.  I am going to guess it was done that way to make it easier to call the database.  Why force the user to click 2 buttons when really only one or none is required.  

You can force the Series to be selected first.  Until that is done, the other 2 dropdowns are greyed out (disabled).  Then once the 1st is selected, then the 2nd drop down for category.  Because each series could possibly have different categories, chaining these two selects could be a good option.

Ultimately, you are trying to get at a race id.  You drill down to that race ID by selecting the Series, Category, Gender.  It is not any more complicated than that.
0
 

Author Comment

by:Bob Schneider
ID: 40229182
I just want to say that the type of passionate and knowledgeable help I am getting on this post is incredibly helpful...from both experts!  I am working on it on my end...making good progress...hope to have either a further questions or an end result soon.

This will be my springboard into something I should have done long ago...move more effectively into new (for me) technology.  In this case, AJAX and JQuery.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 40229293
Forgetting about what can or can't be done, a good start is to create a static html form that you envision in a perfect world.

As example, I am thinking the first drop down is the current races that are available for viewing.  The other 2 are disabled until the first one is selected.  Based on the first select, the 2nd will "light up" then the 3rd.

Using ajax, no need for a submit button. It just works.  

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>padas</title>
</head>
<body>

                <span style="font-weight: bold;">Select Series:</span>
                <select name="series" id="series">
                    <option value="">&nbsp;</option>
                    
                            <option value="6">Central Minnesota Series (2014)</option>
                        
                            <option value="20">Hwy 12 Series (2014)</option>
                        
                            <option value="19" selected="">Hwy 94 Series (2014)</option>
                        
                            <option value="4">Lake Series (2014)</option>
                        
                            <option value="18">Litchfield Series (2014)</option>
                        
                            <option value="7">Northland Series (2014)</option>
                        
                </select>
			

  <form name="view_category" method="post" action="series_results.asp?series_id=19&amp;year=2014">
                <span style="font-weight: bold;">Category:</span>
                <select name="categories" id="categories"  disabled>
                    
                            <option value="0" selected="">Open</option>
                        
                            <option value="14">14 &amp; Under</option>
                        
                            <option value="19">15 - 19</option>
                        
                            <option value="24">20 -24</option>
                        
                            <option value="29">25 - 29</option>
                        
                            <option value="34">30 - 34</option>
                        
                            <option value="39">35 - 39</option>
                        
                            <option value="44">40 - 44</option>
                        
                            <option value="49">45 - 49</option>
                        
                            <option value="54">50 - 54</option>
                        
                            <option value="59">55 - 59</option>
                        
                            <option value="64">60 -64</option>
                        
                            <option value="69">65 - 69</option>
                        
                            <option value="99">70 &amp; Over</option>
                        
                </select>

                <select name="gender" id="gender" disabled>
                    
                        <option value="M" selected="">Male</option>
                        <option value="F">Female</option>
                    
                </select>
			
			 
              
  
</body>
</html>

Open in new window


The next step is for you to create what your ideal form is using static data without worrying if it can or can't be done and let's take it from there.
0
 

Author Comment

by:Bob Schneider
ID: 40229308
Ok I have the JSON files downloaded and referenced.  Making great progress.  Here are a  couple of questions:

1) Since I am actually taking the data from an array I will ultimately not get it right from the database but for now I am fine doing that.

2) Ultimately I will have to pass variable values via either a query string or a session variable of some other approach.

I am getting a 500 error from this code (note it seems I have to take out Option Explicit?):
<%@Language=VBScript%>

<!--#include virtual = "/includes/JSON_2.0.4.asp"-->
<!--#include virtual = "/includes/JSON_UTIL_0.1.1.asp"-->

<%
Dim conn, sql

Response.Buffer = True		'Turn buffering on
Response.Expires = -1		'Page expires immediately
				
Set conn = Server.CreateObject("ADODB.Connection")
conn.Open "Provider=SQLNCLI10;Server=localhost\SQLExpress;Database=xxx;Uid=xxx;Pwd=xxx;"

sql = "SELECT ParticipantID, PartName, Age, Gender, EventPl1, EventPl2, EventPl3, EventPl4 FROM SeriesParts"
QueryToJSON( conn, sql ).Flush

conn.Close
Set conn = Nothing
%>

Open in new window


Here is the error:
Invalid App Id: Must be a number or numeric string representing the application id. all.js:54
FB.getLoginStatus() called before calling FB.init(). all.js:54
Consider using 'dppx' units, as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) follow_button.1404859412.html:1
Consider using 'dppx' units, as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) follow_button.1404859412.html:1
Uncaught TypeError: Cannot read property 'length' of undefined jquery.dataTables.js:3208
(anonymous function) jquery.dataTables.js:3208
_fnBuildAjax.baseAjax.success jquery.dataTables.js:2380
j jquery-1.11.0.min.js:2
k.fireWith jquery-1.11.0.min.js:2
x jquery-1.11.0.min.js:4
b jquery-1.11.0.min.js:4

Open in new window

Anyone see a problem with it?
0
 
LVL 32

Expert Comment

by:Big Monty
ID: 40229718
one quick question - how are you populating the array with data? that could be an important piece, so if you can verify that, it would help.
0
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 32

Expert Comment

by:Big Monty
ID: 40229732
also, which link can we use to see your progress?

for item #2, that's fine, we'll get to that part after we get the initial load of the datatable working
0
 

Author Comment

by:Bob Schneider
ID: 40229794
Right now I am not using an array.  I am just trying to populate the datatable with data.  Ultimately I will need to use an array because this is not the data I want to display.  This is just to use something that I know is "good" to iron out any issues.  The page can be found at http://www.gopherstateevents.com/series/series_results2.asp?series_id=19
0
 
LVL 32

Expert Comment

by:Big Monty
ID: 40229800
so you plan on hard-coding the data into an array when you use this in a real-world solution?
0
 

Author Comment

by:Bob Schneider
ID: 40229826
Right now I have some db experts on this site trying to optimize my query for me.  Right now it writes to an array.  If they are able to turn it into a data query that sorts by totals then I may not need to although I am not sure that is possible.  If not then I will pull the data into an array, sort by total, and write to this page.  That is what is happening here: http://www.gopherstateevents.com/series/series_results.asp?series_id=19 (this is the old version that I am trying to convert to a datatable page for several reasons...the biggest being it is cumbersomely slow when the series in question is at all bigger.  For instance: http://www.gopherstateevents.com/series/series_results.asp?series_id=6&year=2014
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 40229915
Assuming your db will be tuned, you still need to output something.  The array you are talking about is probably via getrows.

For now just make a test case setting the race on the job output page to a specific id.

Create the json/object manually or try the asptojson.  Note that the output is different and uses different example in datatables.
0
 
LVL 32

Expert Comment

by:Big Monty
ID: 40230324
ok good, it is coming from the database, so you'll be able to use the aspJSON library and the code I posted on how to use it. Instead of putting everything into a recordset, then an array, just use the QueryToJSON() I showed you, and that's it, nothing more is needed for that.

as for your errors, the first thing I noticed is the reference to the AppID has to do with your facebook plugin you're using seems to be having an issue. Also, when I looked at this page, you still had the form submitting to itself whenever a dropdown option was selected. I would try removing that and see what happens.
0
 

Author Comment

by:Bob Schneider
ID: 40233088
Update:
1) I now have the "results.asp" page opening a sql statement with a specific series_id.
2) I temporarily removed my facebook reference...no change...so I put it back.  I did find a missing closing tag in a <td> however.
3) I have removed any form submissions on the page in anticipation of using AJAX to do that eventually.

Still no success.  Again, the page we are working on is this one.

Please look carefully at my html/ajax and let me know if you see a problem.  I am going to continue to look carefully myself.

Thanks again for the help!
0
 

Author Comment

by:Bob Schneider
ID: 40233106
Looks like the error is in the .js file???ajax-error.docx
0
 
LVL 32

Expert Comment

by:Big Monty
ID: 40233328
just saw  this come through, everything looks ok to me, but let's try tweaking it a bit. change your  datatables initialization code to:

$(document).ready(function() {
	$('#standings').dataTable( {
		"processing": true,
		"serverSide": true,
		"ajax": "/series/results.asp"
	} );
} );

Open in new window


I may be able to help a bit more tomorrow morning, depends on a few things. If not, maybe Scott (or any other experts of course!) can help you progress farther if he is around, otherwise I'll try to check tomorrow or over the weekend if I get a chance.

you can use the link below for reference / help if you like:

http://www.datatables.net/examples/data_sources/server_side.html
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 40233384
The problem we are having is I have pointed you to use datatables previously and again here in the first post but using a slightly different method.   The BM and I have not given you the same method to use datatables and that probably has caused some confusion.

The method I was showing you first was using an array and The BM switched to an ojbect. One is not better than the next, just different.

I have been using datatables in my projects for a good handful of years and it was very confusing at first to get this right.   I have also been  using asptojson for a long time as well.  I have specifically chosen not to use the the plug in to connect directly to your database when you need to accept user input because it is not safe.  It will take a little more coding (but not much) to go what what I started, but  you can clean your data before accepting it and use a parameterized query.  For sake of the direction of this question in the current form, here is what you need for your jquery.

$(document).ready(function() {
    $('#standings').dataTable( {
        "ajax": {
            "url": "/series/results.asp",
            "dataSrc": ""
        },
        "columns": [
            { "data": "ParticipantID" },
            { "data": "PartName" },
            { "data": "Gender" },
            { "data": "Age" }
        ]
    } );
} );

Open in new window

You can see I have created a live test case using a portion of your data   http://jsbin.com/zeyaki/1/edit

Also, if I have not mentioned already, part of the trouble shooting should be to check your json output.  You can copy/paste it to a linter like http://jsonlint.com/.  I checked out your output and it is good.
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 250 total points
ID: 40233498
Just to close this one out and move to the next step.  This is a sample of how you could use the drop downs to build your ajax request.  This is very over simplified and data tables has some quirks we need to work around.  

http://jsbin.com/zeyaki/2
$(document).ready(function() {
  var iYear = '';
  var iCategory ='';
  var iGender = '';

    // options: build the url
    // year
    $('#options select[name="year"]').on('change', function() {
         iYear = $('select[name="year"] option:selected').val(); // get value of selected option
        if (iYear !== '') { // check for good value
            $('select[name="categories"]').attr('disabled', false); // enable the category drop down
        } else {
            $('#options select[name="gender"]').val(''); // reset the gender
            $('#options select[name="gender"]').attr('disabled', true); //disable gender
            $('#options select[name="categories"]').val(''); // reset the gender
            $('#options select[name="categories"]').attr('disabled', true); //disable gender
         
        }

    });
    // category
    $('#options select[name="categories"]').on('change', function() {
         iCategory = $('select[name="categories"] option:selected').val(); // get value of selected option
        if (iCategory !== '') { // check for good value
        
          
            $('select[name="gender"]').attr('disabled', false); // enable the category drop down
        } else {
            $('#options select[name="gender"]').val(''); // reset the gender
            $('#options select[name="gender"]').attr('disabled', true); //disable gender
         
        }

    });

    // gender
    $('#options select[name="gender"]').on('change', function() {
         iGender = $('select[name="gender"] option:selected').val(); // get value of selected option
      
        if (iGender !== '') { // check for good value
         
         
            getStandings(iYear, iCategory, iGender); // run the function to get data tables
         
        }

    });




    // datatables function
    function getStandings(iYear, iCategory, iGender) {
   
        $('#standings').dataTable({
           destroy: true,
            "ajax": {
                "url": "/bihaq/1.js?year="+iYear+"&category="+iCategory+"&gender="+iGender,
                "dataSrc": ""
            },
            "columns": [{
                "data": "ParticipantID"
            }, {
                "data": "PartName"
            }, {
                "data": "Gender"
            }, {
                "data": "Age"
            }]
        });
    }



});

Open in new window

<!DOCTYPE html>

<html>
<head>
  <meta name="generator" content=
  "HTML Tidy for Linux/x86 (vers 25 March 2009), see www.w3.org">
  <script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript">
</script>
  <link href="//datatables.net/download/build/nightly/jquery.dataTables.css" rel=
  "stylesheet" type="text/css">
  <script src="//datatables.net/download/build/nightly/jquery.dataTables.js" type=
  "text/javascript">
</script>
  <meta charset="utf-8">

  <title>JS Bin</title>
</head>

<body>
  <div id="options">
    <label>Year</label> <select name="year">
      <option value="">
        Select Year
      </option>

      <option value="2013">
        2013
      </option>

      <option value="2013">
        2014
      </option>

      <option value="2013">
        2015
      </option>
    </select> <span style="font-weight: bold;">Category:</span> <select name="categories"
    id="categories" disabled>
      <option value="" selected>
        Select Category
      </option>

      <option value="0">
        Open
      </option>

      <option value="14">
        14 and Under
      </option>

      <option value="19">
        15 - 19
      </option>

      <option value="24">
        20 -24
      </option>

      <option value="29">
        25 - 29
      </option>

      <option value="34">
        30 - 34
      </option>

      <option value="39">
        35 - 39
      </option>

      <option value="44">
        40 - 44
      </option>

      <option value="49">
        45 - 49
      </option>

      <option value="54">
        50 - 54
      </option>

      <option value="59">
        55 - 59
      </option>

      <option value="64">
        60 -64
      </option>

      <option value="69">
        65 - 69
      </option>

      <option value="99">
        70 and Over
      </option>
    </select> 
    <select name="gender" id="gender" disabled>
      <option value="">
        Select Gender
      </option>

      <option value="M">
        Male
      </option>

      <option value="F">
        Female
      </option>
    </select>
  </div>

  <div id="results">
    
    <table id="standings" class="display" cellspacing="0" width="800px">
      <thead>
        <tr>
          <th>ID</th>

          <th>Name</th>

          <th>Age</th>

          <th>MF</th>
        </tr>
      </thead>

      <tfoot>
        <tr>
          <th>ID</th>

          <th>Name</th>

          <th>Age</th>

          <th>MF</th>
        </tr>
      </tfoot>
    </table>
  </div>
</body>
</html>

Open in new window

When working with js, it is very important to have clean html.  One thing I saw here was every option in the select's were set to disabled.  Also, we should move styles from inline to css.

It's up to you how much you want to work through on this thread vs a clean one.  Next steps should be to get the static datatable to work, then dynamic.  From there, adjust for clean user input.  Then more refinements with dropdowns.
0
 

Author Comment

by:Bob Schneider
ID: 40234360
This has been very helpful.  I now have a datatable that works by pulling data directly from a database query.  While waiting and hoping that the db folks get me a more efficient query (this one is not the one I ultimately want) I will try to make this page more dynamic.  Ultimately I may need to go back to finding out how to populate a datatable with an array.  I will read through the assistance given by both and try not to bother you all with information that has already been given.

I can't express how much you have both helped me get to this point!
0
 

Author Closing Comment

by:Bob Schneider
ID: 40234365
By far the most helpful assistance I have ever received on EE!  Thanks so much!!
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 40234683
Thank you! for the compliments.  It is as much a thrill for us as it is for you and especially when we can see how this is impacting your site.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now