CodeIgniter Forums
Dynamic generated dropdown value is not passed to controller after page refresh. - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Using CodeIgniter (https://forum.codeigniter.com/forumdisplay.php?fid=5)
+--- Forum: Best Practices (https://forum.codeigniter.com/forumdisplay.php?fid=12)
+--- Thread: Dynamic generated dropdown value is not passed to controller after page refresh. (/showthread.php?tid=72567)

Dynamic generated dropdown value is not passed to controller after page refresh. - HarrysR - 01-06-2019

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);
  }
 }
});
});


RE: Dynamic generated dropdown value is not passed to controller after page refresh. - ciadmin - 01-06-2019

Doesn't
Code:
url: 'products,
need a closing quote, i.e.
Code:
url: 'products',
?

RE: Dynamic generated dropdown value is not passed to controller after page refresh. - HarrysR - 01-07-2019

(01-06-2019, 06:01 PM)ciadmin Wrote: Doesn't
Code:
url: 'products,
need a closing quote, i.e.
Code:
url: 'products',
?

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

RE: Dynamic generated dropdown value is not passed to controller after page refresh. - Shawn - 01-07-2019

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();


RE: Dynamic generated dropdown value is not passed to controller after page refresh. - HarrysR - 01-07-2019

(01-07-2019, 06:05 PM)Shawn Wrote: 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. 
:/

RE: Dynamic generated dropdown value is not passed to controller after page refresh. - ragingTorch - 01-08-2019

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) {


RE: Dynamic generated dropdown value is not passed to controller after page refresh. - HarrysR - 01-08-2019

(01-08-2019, 04:29 AM)ragingTorch Wrote: 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!