Solved

AJAX Won't Fire

Posted on 2014-09-16
19
256 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
This article discusses how to implement server side field validation and display customized error messages to the client.
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…

738 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