Solved

AJAX Won't Fire

Posted on 2014-09-16
19
251 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
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 
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

Simplifying Server Workload Migrations

This use case outlines the migration challenges that organizations face and how the Acronis AnyData Engine supports physical-to-physical (P2P), physical-to-virtual (P2V), virtual to physical (V2P), and cross-virtual (V2V) migration scenarios to address these challenges.

Question has a verified solution.

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

Suggested Solutions

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…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

770 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