ajax.data value is empty when selecting a value from another ajax select

[ppazos]

I have two ajax select, when I do the search on the first one, $('#organization_id'), I can get the selected value in the console correctly by $('#organization_id').val().

Then on the second, I need to include the value selected from the first select in the ajax params, so I have:

   ajax: {
      ...
            data: {
              organization_id: $('#organization_id').val(),
              q: "{{{q}}}"
            }
      ...

In the request for the second ajax search, the organization_id value is empty. Not sure why the select picker doesn't read the value, or if it's read, why it is not included in the request.

[markhalliwell]

That's because you're assigning data upon initialization of ajax-bootstrap-select, which at the time is of course empty.

You can use a function instead to defer building/returning the data right before the request is actually invoked: https://github.com/truckingsim/Ajax-Bootstrap-Select/blob/e33d67f0fc08b2a259f9ec1772bab1db286e122b/src/js/classes/AjaxBootstrapSelectRequest.js#L44-L49

   ajax: {
      //...
            data: function () {
                return {
                    organization_id: $('#organization_id').val(),
                    q: "{{{q}}}"
                };
            }
      //...
    },