ReynierPM ReynierPM - 29 days ago 9
Ajax Question

How to catch #select1 and #select2 values before sent the AJAX request?

I have the following HTML code:

<select id="select1">
<option value="0">Option 0</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<select id="select2">
<option value="0">Option 0</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<select id="select3">
<option value="0">Option 0</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<input type="text" id="select4">


I am turning them into Select2 elements and I am changing the INPUT to be a SELECT and afterwards a Select2 as follow:

$(function() {
$('#select1').select2();
$('#select2').select2();

var field_value = $('#select2 :selected').val();
var module = $('#select1 :selected').val();

$('#select3').select2().on('select2:select', function(ev) {
var condition_type = $(this).val();
var select_el = '<select id="select4" style="width: 75%" multiple="multiple"></select>';

$('#select4').replaceWith(select_el);
$('#select4').select2({
placeholder: 'Start typing ...',
tags: true,
ajax: {
delay: 200,
url: '/someUrl',
minimumInputLength: 2,
data: function(params) {
var query = {
keyword: params.term,
condition: condition_type,
field: field_value,
table_name: module
}

return query;
},
processResults: function (data) {
return {
results: data
};
}
}
});
});
});


This is currently working without any problem. As soon as I sent the AJAX call the values of
#select1, #select2
are being sent as a REQUEST parameter that's OK but if I change the values of
#select1, #select2
and try the same AJAX request the previous values are sent and not the new ones.

I have tried the following but is not working:

$('select#conditions').select2().on('select2:select', function (ev) {
var condition_type = $(this).val();
...
}).on('select2:selecting', function (ev) {
field_value = $('#select2 :selected').val();
module = $('#select1 :selected').val();
});


So my question is how do I catch the new values? Any help? I have tried to setup a Fiddle example here but I couldn't make it to work with the AJAX call.

Answer

just simply move

var field_value = $('#select2 :selected').val();
var module = $('#select1 :selected').val();

inside

 data: function(params) {

like this:

   data: function(params) {

      var field_value = $('#select2 :selected').val();
      var module = $('#select1 :selected').val();

      var query = {
        keyword: params.term,
        condition: condition_type,
        field: field_value,
        table_name: module
      }

      return query;
    },

in this case you will always retrieve and send fresh params