Solved

AJAX Won't Fire

Posted on 2014-09-16
19
241 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
Comment Utility
You are not calling the getData function anywhere.
0
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 300 total points
Comment Utility
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
Comment Utility
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
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 300 total points
Comment Utility
<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
Comment Utility
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
Comment Utility
getData(<%=lSeriesID%>, categories, gender)
0
 
LVL 82

Assisted Solution

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

Author Comment

by:Bob Schneider
Comment Utility
0
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 300 total points
Comment Utility
I don't see that anywhere : getData(<%=lSeriesID%>, categories, gender)
0
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 

Author Comment

by:Bob Schneider
Comment Utility
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
Comment Utility
I don't like it. But if it fill your needs...
0
 

Author Comment

by:Bob Schneider
Comment Utility
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 32

Assisted Solution

by:Big Monty
Big Monty earned 150 total points
Comment Utility
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
Comment Utility
I did that and it appears it is being built properly.
0
 
LVL 32

Assisted Solution

by:Big Monty
Big Monty earned 150 total points
Comment Utility
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
Comment Utility
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 32

Assisted Solution

by:Big Monty
Big Monty earned 150 total points
Comment Utility
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
Comment Utility
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
Comment Utility
Wow!  Thank you very much.
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

771 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

9 Experts available now in Live!

Get 1:1 Help Now