[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 309
  • Last Modified:

JSON DataTables part x

Ok so moving along.  Now I want to pass the datatable parameters dynamically by allowing the user to choose which series, which age group and which gender.  I removed the code from that while we were getting it up-n-running.  Now I want to put it back in.

My "old" process was to submit to the same page and re-populate the entire thing.  I assume that is not how ajax works.  If so I need to know how to pass parameters to the embedded asp page.

Thanks!
0
Bob Schneider
Asked:
Bob Schneider
  • 8
  • 7
  • 6
11 Solutions
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
can you post a link to your page?
0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
as for how the ajax works, go back and look at some of the explanations I typed out on how it works, I think that would be a good start. ajax doesn't care where it gets its data from, you can have it pull from the same page or a separate page, it's all a matter of preference for the developer. Personally, depending on how complex the operation is, if it's not too complicated, I have it post to the same page with a parameter on the url indicating somehow it's an ajax call, for more complicated logic I put it in its own page to keep it compartmentalized.

to pass parameters into the ajax call, you want to use the data attribute, this allows you to pass along key/value pairs as POST data (or GET data, if you specify GET as your ajax method). Here's an example I use in my own code:

 $.ajax({
                        type: "POST",
                        async: false,
                        url: "/includes/dialogs/proposal.asp",
                        data: {
                            categoryID: $('#categoriesOPTS').val(),
                            offerID: $('#offersOPTS').val(),
                            msgID: '<%=msgID%>',
                            confirm: true,
                            userType: '<%=userType%>'
                        }
                    }).done(function (val) {
                               //-- continuing processing
                    });

Open in new window


here you can see I specify a separate page for my processing, and I include some values from the different fields, as well as some server side variables I want to pass along.

any questions, please ask :)
0
 
Scott Fell, EE MVEDeveloperCommented:
Since we have already gone over the basics of using ajax, now the question is how to use multiple parameters.  If the parameters are in the table, we can pick them up from the table cell.  Or you can also dump variables to a link, button or checkbox.

<td>
<input type="checkbox" name="runner_id" value="123" data-race="10" data-event="3233"> John Smith
</td>
<td>
Race 10
</td>
<td>
Event 3233
</td>

Open in new window

Then from jquery we can get the values
$('input[name="runner_id"].change(function(){
    var runner_id=$(this).val();
     var race_id = $(this).attr('data-race')
     var event_id = $(this).attr('data-event')

    $.ajax({
  type: "POST",
  url: "page.asp",
  data: { runner:runner_id, 
   race: race_id,
   event:event_id
   }
})
  .done(function( data ) {
    //update page
  });
})

Open in new window

0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
Bob SchneiderAuthor Commented:
Here is the quickest one to load
0
 
Bob SchneiderAuthor Commented:
So If I currently have selects of the parameters to choose from (series, age groups, and gender) how do I press that into an ajax format.  The gender and age groups are static but the series are dynamically generated.

Thanks so much for this.  In the interim I will go back over all that you folks have posted.
0
 
Scott Fell, EE MVEDeveloperCommented:
That link goes to an error page.
0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
the link worked for me...

so, in your code, you have the following that loads the data via ajax:

$(document).ready(function() {
    $('#standings').dataTable( {
        "ajax": "/series/results_array.asp?series_id=19&gender=M&year=2014&age_to=0"
    } );
} );

Open in new window


the first thing you'll want to do is place the parameters in the data attribute:

$(document).ready(function() {
    $('#standings').dataTable( {
        ajax: "/series/results_array.asp",
        data: {
              "series_id" : "19",
              "gender"    : "M",
              "year"         : "2014",
              "age_to"      : "0"
         }
    } );
} );

Open in new window


this code is exactly the same as above, it's just easier to see what exactly is going on. now to make things more dynamic, you just put the values from the each field and match them up to each data attribute. so the ajax call for each dynamic value would look like:

    $('#standings').dataTable( {
        ajax: "/series/results_array.asp",
        data: {
              "series_id" : $("#series").val(),
              "gender"    : $("#gender").val(),
              "year"         : "2014",
              "age_to"      : $("#categories").val()
         }
    } );

Open in new window


I couldn't quickly tell how the YEAR parameter would get set, but I think you get the picture. Now, in order for this approach to work, you will need to have default values set for each of the dropdowns, so you may want to consider checking those values and setting defaults if they're empty:

$(document).ready(function() {
           var series = $("#series").val();
           if( series == '' )     series = 109;    //--default value

           var gender = $("#gender").val();
           if( gender == '' )    gender = 'M';

           var category = $("#categories").val();
           if( category == '' )         category = 0;

           $('#standings').dataTable( {
                ajax: "/series/results_array.asp",
                data: {
                        "series_id" : series,
                        "gender"    : gender,
                        "year"         : "2014",
                        "age_to"      : category
                }
            } );
});

Open in new window


now this is based upon the page load and getting the data right, in theory you could skip over all of this since you already have the data coming through, I just wanted to show you how to load the data in different ways.

if you google "jquery datatable reload ajax data with different parameters" you'll see that refreshing the table after it's loaded can be tricky and not too straightforward. In fact, the only way method that seems to work seems to be a bit of a hack (one of the reasons why I recommended using jqGrid way back when we started on this, but let that be!), but it works. The secret is using the fnReloadAjax() function with the url and parameters all in one line:

$('#series').change('click', function (event) {
     $('#standings').fnReloadAjax('/series/results_array.asp?series_id=' + $("#series").val() +&gender=' + $("#gender").val() + '&year=2014&age_to=' + $("#categories").val() );
});

Open in new window


putting the above code in will make it so that when the series dropdown is changed, it'll refresh the data on the screen.
0
 
Scott Fell, EE MVEDeveloperCommented:
When you don't use this type of functionality on a regular basis, it can appear to be tricky.  However reloading is not an issue.  Let's keep working on this.
0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
i'm not suggesting to move to a new component, all I'm saying is it seems to be not an easy thing to do. I believe the code I provided will work though for what you want to do
0
 
Bob SchneiderAuthor Commented:
Currently I am passing the parameters to results_array.asp using query strings.  I get that I need to add those parameters to the ajax call but how do I get them into the asp variables?  Currently I do this:
lSeriesID = Request.QueryString("series_id")
iYear = Request.QueryString("year")
sGender = Request.QueryString("gender")
iAgeTo = Request.QueryString("age_to")

Open in new window

0
 
Scott Fell, EE MVEDeveloperCommented:
What should  happen is, first the series is selected from the drop down.  No need for the button to select series, just the change of the series drop down is fine.  Once that is changed, there should be an ajax call to the event to determine the categories.  Or, do the categories always stay the same?  IF that is the case, we just need to select all 3 drop downs.

I would set all 3 drop downs to default to "Select Series", "Select Category", and "Select Gender".  Each time a drop down is changed, the script would detect that everything is selected.  If not, a message, "Please select Category" or whatever needs selecting.

You would probably want to put a drop down for the year in there as well and default it to the current year.  Using asp to loop through the years from the current year through however far you want to go back.  That way you don't need to update the page on a year change.

If everything is selected, then a call to your db to produce the datatable.  Then any change to any of the drop down would send new data to the screen.
0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
To answer your question, you would pass those parameters like I showed you and then  on the asp side you would acres them like any posted value by using Request.Form

lSeriesID = Request.Form("series_id")
iYear = Request.Form("year")
sGender = Request.Form("gender")
iAgeTo = Request.Form("age_to")

Open in new window

0
 
Bob SchneiderAuthor Commented:
This is helpful.  I believe the years need to be via a link/asp query string because different years have different series.  The standings page is not a landing page per se but once there you should be able to toggle between series, age groups, and gender.  Changing a year sets everything back to the defaults.

Having said all of that, what I am seeing is that I need to create a form with series, age group, and gender drop-downs.  Since the page is not a landing page per se, the series will be initially selected via a query string on the "main" page.  The defaults for the others will be "Open" and "Male."

I will start working on this.  Please let me know if you see anything wrong with my reasoning.  I will re-post as needed.
0
 
Scott Fell, EE MVEDeveloperCommented:
Actually, you could make this a landing page.  Use the query string for defaults.  But with javascript you don't need to have a form.

> because different years have different series.

This is what I was talking about when I have mentioned chained select.  You start by selecting a year.  Then does an ajax request to another page that looks up that year, and finds all the series(events).  That returned data populates the drop down for series.

Then you select the age and gender.  

I understand your thinking.  We are used to thinking in terms of a form and posting the form to get data.  With javascript the flow is a little different.  The ajax is still posting or getting data, but is doing it silently in the background and those drop downs do not need a form.
0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
I believe the years need to be via a link/asp query string because different years have different series.

either a link, or a dropdown, either way the value you pass via ajax will always be accessed via Request.Form if you specify POST as your ajax method or Request.QueryString if you specify GET. I'm only stating this in continuation of a the answer posed by this question. I just want to make sure you understand how the ajax part works :)

as for how to proceed, if you do indeed have different series IDs for each year, I do like Scott's approach of the dependent dropdowns (or chained selects as he calls it, either term is fine). Whether or not you make this the landing page, I guess that depends on what you want the end user to experience. do you want them to see a default set of data when they first visit the page? is there value having that default set of data from a user experience perspective? if it's going to be a commonly selected set of data, I would say yes, but only you truly know how your users will act :)

And just speaking off topic here, I am excited for you to see this site built out more and more. Even though I've only been working a short time with you, I sense that this site may be your first (or one of your first) truly big sites, and I remember many years ago when I was at the same point, and it was a very exciting time for me, being the geek I am, soaking up as much knowledge as I can and then utilizing it, it was very satisfying seeing the fruits of my labor come to be, and I'm glad I can help you along the same path :)
0
 
Bob SchneiderAuthor Commented:
Getting back on this now.  Making progress on my series standings utility.  I will repost soon.
0
 
Bob SchneiderAuthor Commented:
Better instruction doesn't happen in many schools...
0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
glad you've made some progress! how did you finalize your process (just curious)?
0
 
Bob SchneiderAuthor Commented:
No got sidetracked with my server migration.  still need to do two things:
1) pass gender, age, and series id to the datatable page in classic asp
2) turn the individual's names into clickable links that will show the individual's race-by-race data.

This wasn't the one that I thought I closed.  Oh, well I will create a new post soon.  FYI, the page in question is here and it is possible that some of what I need has been posted above by you or padas.
0
 
Scott Fell, EE MVEDeveloperCommented:
Those clickable links you want can be created on the fly by jquery. That way you don't have to create them in  your json which is cumbersome.

I will try and get back to this in about 5hrs.
0
 
Bob SchneiderAuthor Commented:
Thanks!
0

Featured Post

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!

  • 8
  • 7
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now