function return value to ajax data to process in ajax

Question

I need help. Im trying to use the multiselect dropdown list dynamically (get record from db). I got the code for multiselect from the net.. below is the code (its working perfectly)

$('.multi').multi_select({
  selectColor: 'white',
  selectSize: 'small',
  selectText: 'Select Status',
  duration: 300,
  easing: 'slide',
  listMaxHeight: 300,
  selectedCount: 3,
  sortByText: true,
  fillButton: true,
  data: {
    "BD": "Bangladesh",
    "BE": "Belgium",
    "BF": "Burkina Faso",
    "BG": "Bulgaria",
    "BA": "Bosnia and Herzegovina",
    "BB": "Barbados",
    "WF": "Wallis and Futuna",
    "BL": "Saint Barthelemy",
    "BM": "Bermuda",
  },
    buttonWidth:"180px",
  onSelect: function(values) {
    console.log('return values: ', values);
  }
  });
        
        
  $('#get_values').on('click', function(event) {
            console.log($('#multi').multi_select('getSelectedValues'));
    $('.data-display').remove();
    var json = { items: $('#multi').multi_select('getSelectedValues') };
    if (json.items.length) {
      var ul = $('<ul>', { 'class': 'data-display' }).appendTo('body');
      $(json.items).each(function(index, item) {
        ul.append(
          '<li style="display: block;color:#000000;">' + item + '</li>'
        );
      });
    }
  })
$('#clear_values').on('click', function(event) {
  $('#multi').multi_select('clearValues');
  $('.data-display').slideUp(300, function() {
    $(this).remove()
  })
})

I want to replace the static data with data from DB. the approach that I wanted to take is to have a function to load the data. This is because this particular DropDown is a dependent on another form field.

so can I have a function return values to that data part of the script above?

Or is there another approach?

Edit: I would like to add dynamic values such of ajax response from another function.

function AnotherFunction(){ 
ajax_respond (arrayData); 
// format ("dataid1" : "datavalue1","data2":"datavalue2", ... and so on dynamically ) 
return ajax_resond 
} 
var dbData = AnotherFunction(); 
data: {dbData },

can this be accomplished? if it is possible, how can I return an array in that format from ajax response and insert into data {} of this multiselect

maybe i should ask, my jquery function returns the data via json_encode in this format `0: {id: "8", text: "Granted"} 1: {id: "40", text: "New Filing"} 2: {id: "41", text: "Pending"} 3: {id: "42", text: "Registered"} 4: {id: "43", text: "Inactive"} ` how do I insert this data into `var dbData = AnotherFunction(); data: { here }, //<-------- into this line` — D_N_A, Nov 26 '20 at 09:59
I found what I have been looking for here [another post at stackoverflow](https://stackoverflow.com/a/5619163/1551008) — D_N_A, Nov 27 '20 at 11:12

Burhan Kashour · Answer 1 · 2020-11-25T11:13:15.373

0

after that script and after the page is loaded, start by creating an AJAX request to get the needed data:

$.ajax({
    url: "data.php"
}).done(function(data) {
    $.each([data], function(index, value) {
        $('.multi').multiSelect('addOption', {
            value: value.id,
            text: value.name
        });
    });
});

The multiselect part from jQuery Multiselect Page

If you don't use the Multiselect Plugin, then use this:

$.ajax({
    url: "data.php"
}).done(function(data) {
    $.each([data], function(index, value) {
        $('#multi').append('<option value="'+value.id+'">'+value.name+'</option>'); //replace #multi with your select id or class selector
    });
});

edited Nov 25 '20 at 11:13

answered Nov 25 '20 at 07:18

Burhan Kashour

674
5
15

.multi is a div, i've tried adding select options but it doesn't work because the values of dropdown list is taken from the data:{ } how do I add my db values in this? – D_N_A Nov 25 '20 at 08:25
@D_N_A Depends on how you get the data, you need to use `JSON` format, can you post an example for the `AJAX response`? – Burhan Kashour Nov 25 '20 at 08:53
[{"id":"8","name":"Granted"},{"id":"40","name":"New Filing"},and so on – D_N_A Nov 25 '20 at 09:23
@D_N_A Just change `value.text` to `value.name`! – Burhan Kashour Nov 25 '20 at 11:14
Actually this is how far I gotten I. I have the console log data 0: {id: "8", text: "Granted"} 1: {id: "40", text: "New Filing"} 2: {id: "41", text: "Pending"} 3: {id: "42", text: "Registered"} 4: {id: "43", text: "Inactive"} length: 5 __proto__: Array(0) ... but I want this data to be in same format as the original code... where for example "40" : "New Filing", "41" : "Pending"... and so on – D_N_A Nov 25 '20 at 11:50
Its easier to `manipulate` the data in `PHP` or from where you get it than to do it inside your `jQuery`, and following your response, the number before the array is the `key` which is defined as `index` in the `foreach` loop, and the value is the `array` so probably you need to change `value.name` to `value.text` – Burhan Kashour Nov 25 '20 at 12:08

function return value to ajax data to process in ajax

1 Answers1