Solved

AJAX Won't Fire

Posted on 2014-09-16
19
253 Views
Last Modified: 2014-09-17
Ok we are getting there, but i can't get the datatable to work.  The page in question is here:
here

I know the datatable page is configured correctly because I get the data if I pass the series id, gender, and category directly to it.  See here
0
Comment
Question by:Bob Schneider
  • 9
  • 6
  • 3
  • +1
19 Comments
 
LVL 58

Assisted Solution

by:Gary
Gary earned 50 total points
ID: 40326793
You are not calling the getData function anywhere.
0
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 300 total points
ID: 40326811
To start look you are not calling the getData function on change :
<script type="text/javascript">
    $(document).ready(function () {
        var categories = 0;
        var gender = '';

        $('#categories,#gender').on('change', function () {
            categories = $("#categories").val();
            gender = $('#gender').val();
            getData(6, categories, gender)
        });


        function getData(series, categories, gender) {
            $('#standings').dataTable({
                'ajax': '/series/results_array-new.asp?series_id=' + series  + '&gender=' + gender + '&age_to=' + categories
            });
        }
    });
</script>

Open in new window

0
 

Author Comment

by:Bob Schneider
ID: 40326835
That worked.  Thanks.  But now when I change a value I get a datatable error "Cannot reinitialize datatable."  I will look into that but please let me know if there is something that jumps out at you on that.
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 300 total points
ID: 40326843
<script type="text/javascript">
    $(document).ready(function () {
        var categories = 0;
        var gender = '';

        $('#categories,#gender').on('change', function () {
            categories = $("#categories").val();
            gender = $('#gender').val();
            getData(6, categories, gender)
        });
var dt = null;

        function getData(series, categories, gender) {
var url = '/series/results_array-new.asp?series_id=' + series  + '&gender=' + gender + '&age_to=' + categories;
if(dt) {
    dt.ajax.url(url).reload(); // http://datatables.net/reference/api/ajax.reload()
    return;
}
            dt = $('#standings').dataTable({ 'ajax': url });
        }
    });
</script>

Open in new window

0
 

Author Comment

by:Bob Schneider
ID: 40326872
Thanks.  I don't get an error now but it doesn't update either.  Note that I am using an asp variable for series in this format: <%=leriesID%>.  Is that a problem?
0
 

Author Comment

by:Bob Schneider
ID: 40326875
getData(<%=lSeriesID%>, categories, gender)
0
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 300 total points
ID: 40326948
where to see the page in live?
0
 

Author Comment

by:Bob Schneider
ID: 40327840
0
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 300 total points
ID: 40327866
I don't see that anywhere : getData(<%=lSeriesID%>, categories, gender)
0
 

Author Comment

by:Bob Schneider
ID: 40327894
I have been tinkering and I changed my approach to try to avoid that.  Is mixing asp variables with javascript/ajax considered good practice or not good practice?
0
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 300 total points
ID: 40328002
I don't like it. But if it fill your needs...
0
 

Author Comment

by:Bob Schneider
ID: 40328010
I have reworked it to avoid that.  Page opens and loads once but then does not load when I make other changes in the selects.  No errors.  Any ideas?
0
 
LVL 33

Assisted Solution

by:Big Monty
Big Monty earned 150 total points
ID: 40328050
I have been tinkering and I changed my approach to try to avoid that.  Is mixing asp variables with javascript/ajax considered good practice or not good practice?

there is ABSOLUTELY nothing wrong with this, and is a common practice. i do it all the time in my apps.

clicking on your test page, it is now loading the data once, but when I try to load it again, I get the following javascript error on line 43:

"Cannot read property 'url' of undefined"

after where you build the url variable, try putting in an alert(url); right afterwards and see if it's being built properly
0
 

Author Comment

by:Bob Schneider
ID: 40328362
I did that and it appears it is being built properly.
0
 
LVL 33

Assisted Solution

by:Big Monty
Big Monty earned 150 total points
ID: 40328381
i think you need to reinitialize your dt variable before calling it again. The error is saying the URL property of an undefined object is not valid
0
 

Author Comment

by:Bob Schneider
ID: 40328434
I've tried putting it in a couple of places and  got a datatable error "Cannot reinitialize...".  Can you show me where to  reinitialize it please?

<script type="text/javascript">
     $(document).ready(function () {
        var categories = 0;
        var gender = '';
        var series = 0;

        $('#series,#categories,#gender').on('change', function () {
            categories = $('#categories').val();
            gender = $('#gender').val();
            series = $('#series').val();
            getData(series, categories, gender)
        });
 
        var dt = null;

        function getData(series, categories, gender) {
            var url = '/series/results_array-new.asp?series_id=' + series + '&gender=' + gender + '&age_to=' + categories;

            if(dt) {
                dt.ajax.url(url).reload(); // http://datatables.net/reference/api/ajax.reload()
                return;
            }
            dt = $('#standings').dataTable({ 'ajax': url });
       }
    });
</script>

Open in new window

0
 
LVL 33

Assisted Solution

by:Big Monty
Big Monty earned 150 total points
ID: 40328662
try this:

        var dt = null;

        function getData(series, categories, gender) {
            var url = '/series/results_array-new.asp?series_id=' + series + '&gender=' + gender + '&age_to=' + categories;
            dt = $('#standings').dataTable();

            if(dt) {
                dt.ajax.url(url).reload(); // http://datatables.net/reference/api/ajax.reload()
                return;
            }
            dt = $('#standings').dataTable({ 'ajax': url });
       }

Open in new window

0
 
LVL 82

Accepted Solution

by:
leakim971 earned 300 total points
ID: 40329401
Check this :

<script type="text/javascript">
     $(document).ready(function () {
        var categories = 0;
        var gender = '';
        var series = 0;

        $('#series,#categories,#gender').on('change', function () {
            categories = $('#categories').val();
            gender = $('#gender').val();
            series = $('#series').val();
            getData(series, categories, gender)
        });
 
        var dt = null;

       function getData(series, categories, gender)  {
            var url = '/series/results_array-new.asp?series_id=' + series + '&gender=' + gender + '&age_to=' + categories;
            if(dt) { 
                dt.fnSettings().sAjaxSource = url;
                dt.dataTable().fnDraw();
            }
            else {
                var settings = {
                    bServerSide:true, 
                    sAjaxSource:url, 
                    pagingType: "full_numbers", 
                    fnServerData: function(src, data, cb) {
                           $.post(src, data, cb, "json");
                    }
              };
              dt = $('#standings').dataTable(settings);
            }
       };       

    });
</script>

Open in new window


For your next question, check here : http://datatables.net/forums/discussion/291/pagination-totals-and-bserverside

DataTables expects to receive a JSON object with this following properties:

iTotalRecords - Total records, after filtering (not just the records on this page, all of them)
iTotalDisplayRecords - Total records, before filtering
aaData - The data in a 2D array
sColumns - column names - optional

So iTotalRecords and iTotalDisplayRecords are the ones you want I think.
0
 

Author Closing Comment

by:Bob Schneider
ID: 40329478
Wow!  Thank you very much.
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

820 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