Ajax/JSON Query String Question

I have a page that displays results of race series'.  It works well for the most part but I want the link to display the event via two query string parameters (series_id and year).  In other words:  
this link
displays the same as this link and you have to use the dropdown to get the series in question.  

I have the query strings passed to the asp page itself but it doesn't look like I am passing them to the page that holds the jquery table.  

Thanks for any help you can give me.
Bob SchneiderCo-OwnerAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Codrut TambuSr. Software Developer EngineerCommented:
The page that provides you with the data is :
http://www.gopherstateevents.com/series/results_array.asp

Open in new window

which is called by a post request on "series" select change, like this:
http://www.gopherstateevents.com/series/results_array.asp?series_id=25&gender=M&age_to=0

Open in new window


so in order that your initial link to work as expected you need to provide a default value for the series, either a param with that value, like:
 1. http://www.gopherstateevents.com/series/series_results.asp?year=2015&series_id=25

Open in new window


Secondly, you'll have to check on page load if you have that param and call an automatic ajax request for that.

So, besides the default ajax call that is triggered here:
$('#series,#categories,#gender').on('change', function () {
            categories = $('#categories').val();
            gender = $('#gender').val();
            series = $('#series').val();
            getData(series, categories, gender)
});

Open in new window


You need to do an additional call to getData(receivedGetSerieParam, categories, gender).
Extending this, you can send the other params the same way as well.
Bob SchneiderCo-OwnerAuthor Commented:
Thank you very much.  Where do I put the getData... (I am just forging ahead with this..still a newb)
Codrut TambuSr. Software Developer EngineerCommented:
Ok. firstly you have to check if there is a param variable with the value.
You do that by parsing the url request parameters:
function getUrlVars()
{
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}
// Snipet source: http://jquery-howto.blogspot.ro/2009/09/get-url-parameters-values-with-jquery.html

Open in new window


Afterward you run a check on those vars. and if there' s a serie value passed, than you run getData();

Integrating the both, it will result in this:

$(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 getUrlVars()
            {
                var vars = [], hash;
                var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
                for(var i = 0; i < hashes.length; i++)
                {
                    hash = hashes[i].split('=');
                    vars.push(hash[0]);
                    vars[hash[0]] = hash[1];
                }
                return vars;
            }

            function initByRequest() {
                var params = getUrlVars();
                var _series = params["series_id"];
                if (_series != null && _series != "") {
                    categories = $('#categories').val();
                    gender = $('#gender').val();
                    $('#series').val(_series);
                    getData(_series, categories, gender);
                }
            }
            initByRequest();

            function getData(series, categories, gender)  {
                var url = '/series/results_array.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);
                }
            };

        });

Open in new window


Sure, this can be refactored and optimized, but that's something else.
You can also add more conditions, or change the logic in your initByRequest() and you can also process the other selects values (gender, category) the same way.

Have fun!
Hope this helped.

KodeRoot
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Bob, With classic asp, I seem to remember the results page should be in a different folder.  If our current page is /series/series_results.asp, then instead of the ajax page being at /series/series_results.asp, I would throw it in /series/ajaxdata/series_results.asp.  

For trouble shooting, I typically do 2 things.  First, I surf to the ajax page with a query string I know will produce data /series/ajaxdata/series_results.asp?qry1=abc&qry2=123&qry3=xyz.  I look for errors on the page and make sure it returns the same data that I expect from running in manager studio.  

Next I use the browsers console.  All the major browsers have this feature and are similar.  https://developer.chrome.com/devtools/docs/console.  If I see that surfing to the asp page produces results but the page is still not running, chances are it is a javascript error preventing the page to run and the console will show you (or at least give you a good clue) what the error is.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
AJAX

From novice to tech pro — start learning today.