Dynamic generated dropdown value is not passed to controller after page refresh.

Hello,
I have an issue that drives me crazy. 
I' ve created a dynamic dropdown data filtering using ajax. (e.g.: category > size) So far so good. 
The major issue is that when i refresh the page, the dynamic dropdown value (in this case the "size") even though it exists in url as parameter, it's not passed via my ajax function and all my results are filtered based on the first parameter only (which is the "category") and that means that i have to reselect the dynamic dropdown value and filter it again.

P.S.: I' ve included this function twice, one in the "on.change" event and the other while the page loads, so if you have any better solutions on this please feel free to tell. 

P.S. #2: I did not include the controller file since it works fine in the on change events. The only problem is when the page loads or reload with the parameters in it.

Code:

$('#filterProducts').on('change', function(b) {
b.preventDefault();
page = 1;
reachedLimit = false;
var data = $(this).serialize().replace(/[^&]+=\.?(?:&|$)/g, '');
$('.noMoreData').addClass('hidden');
$('.products-inner').empty();

$.ajax({
 url: 'products',
 method: 'post',
 data: data,
 beforeSend: function(data) {
  $('.loader').removeClass('hidden');
 },
 complete: function(data) {
  $('.loader').addClass('hidden');
 },
 success: function(data) {
  if (data == '') {
   $('.noMoreData').removeClass('hidden');
   reachedLimit = true;
  } else {
   $('.products-inner').append(data);
  }
 }
});
});

---

//Life motto
if (sad() == true) {
     sad().stop();
     develop();
}

Doesn't

Code:

url: 'products,

need a closing quote, i.e.

Code:

url: 'products',

?

Doesn't

Code:

url: 'products,

need a closing quote, i.e.

Code:

url: 'products',

?

Yeah sorry, forgot it. Any ideas about the problem?

---

//Life motto
if (sad() == true) {
     sad().stop();
     develop();
}

Are you passing back a new csrf hash when your controller responds to the AJAX call? Normally you get an access forbidden error if you don't, but maybe it's buried.

Code:

$ajax_data['csrf_token_name'] = $this->security->get_csrf_token_name();
$ajax_data['csrf_hash'] = $this->security->get_csrf_hash();

Are you passing back a new csrf hash when your controller responds to the AJAX call? Normally you get an access forbidden error if you don't, but maybe it's buried.

Code:

$ajax_data['csrf_token_name'] = $this->security->get_csrf_token_name();
$ajax_data['csrf_hash'] = $this->security->get_csrf_hash();

The main problem is that on page refresh the form data do not contain the dynamic generated dropdown value. I don't have any csrf token functionality in here. 
:/

---

//Life motto
if (sad() == true) {
     sad().stop();
     develop();
}

if filterProducts dropdown is being generated dynamically then jQuery may not have access to it to detect the change event. Try changing the first line from

Code:

$('#filterProducts').on('change', function(b) {

to

Code:

$('body').on('change', '#filterProducts', function(b) {

if filterProducts dropdown is being generated dynamically then jQuery may not have access to it to detect the change event. Try changing the first line from

Code:

$('#filterProducts').on('change', function(b) {

to

Code:

$('body').on('change', '#filterProducts', function(b) {

$('#filterProducts') is the form which contains the dropdowns. I detect change events and then i generate the results in the main body. 
The two dropdowns are "#category" and the dynamically generated one, "#size".

If you have any better approach as for how to filter the data then feel free to tell!

---

//Life motto
if (sad() == true) {
     sad().stop();
     develop();
}