CODEWITHSUNDEEP
jqueryajaxlaraveljquery-select2
Fayakon
Fayakon

Reputation: 1523

select2 returns null on refresh

I have different users on the same page when I click on the user name it shows the qualification of that user.

when the page loads select2 shows qualification of user1.

when I click on user2 it shows qualification of user2

but again when I click on user1, I get empty select2 for user1, whatever I do until I refresh the page again.

My data is coming from ajax request.

success: function (data) {

    var qualif = data.qualifs //returns value/1/2/3 single/multiple

    alert(qualif); //always returns some value

    if(qualif.length>0){

        $.each(qualif, function (index, value) {
            $(`.qual_id option[value=${value}]`).attr('selected', true);
        });
    } 

    if(qualif.length<1){
       $("#qual_id option:selected").prop("selected", false);
    }
}



$('#qual_id').select2({
  width: 'resolve',
  placeholder: "QUALIFICATION",
  maximumSelectionLength: 2,

});

view:

<select name="qual_id[]" id="qual_id"   class="qual_id" multiple="multiple" >
    @foreach(Session::get('qualifs') as $qualif)
        <option value="{{@$qualif->id}}" > {{@$qualif->qual}}</option>
    @endforeach
</select>

what I want is if there is value in qualif variable, which is showing correctly in alert, it should also show up in select2 each time I click, right now it is showing once. and if there's no value in qualif/alert select2 should be empty.

I tried following different answers from StackOverflow but nothing worked.

i added this when document is ready, or beforesend function this didn't work also.

$('#qual_id').val(null).trigger('change');

Complete JS:

$(document).ready(function($)  {

$('body').on('click','.edit-btn',function(){

            $.ajax({
                type: "GET",
                url: "teachers/" + $(this).attr("value") + "/edit",
                dataType: 'json',

beforeSend: function(){

success: function (data) {

var qualif = data.qualifs //returns value/1/2/3 single/multiple

alert(qualif); //always returns some value

if(qualif.length>0){

$.each(qualif, function (index, value) {
$(`.qual_id option[value=${value}]`).attr('selected', true);
});
} 

if(qualif.length<1){
$("#qual_id option:selected").prop("selected", false);
}
$('#qual_id').select2({
width: 'resolve',
placeholder: "QUALIFICATION",
maximumSelectionLength: 2,
}  });

    });});  });

Upvotes: 0

Views: 689

Answers (1)

Vladan
Vladan

Reputation: 1632

I'm not sure how are you returning the data, but I've tried to replicate it below. To achieve the similar structure you'd have to have PHP output like $data[]['value'] and $data[]['text']

$(document).ready(function() {
    var qualif = []
    qualif.push({"value": 1, "text": "single"});
    qualif.push({"value": 2, "text": "double"});
    
    // If you need to populate them too.
    /** $.each(qualif, function (index, data) {
      $('#qual_id').append($('<option>', { value: data.value, text: data.text }, '<option/>'));
    });*/
    $('#qual_id').val(qualif.map(a => a.value)).trigger('change');
    

    $('#qual_id').select2({
        width: 'resolve',
        placeholder: "QUALIFICATION",
        maximumSelectionLength: 2,
    });

});
#qual_id {
  width: 200px
}
<select name="qual_id[]" id="qual_id"   class="qual_id" multiple="multiple" >
    <option value="" ></option>
    <option value="1">single</option>
    <option value="2">double</option>
</select>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.js"></script>

Upvotes: 1

Related Questions