javascript - jquery select2: TypeError: b.dataAdapter is null - Stack Overflow

admin管理员组

文章数量:1307004

when using the select2 multiselect and selecting an option I get this error message displayed:

TypeError: b.dataAdapter is null

Does anyone know what this is about?

The multiselect works fine, I just wonder about this message.

EDIT:

This is my html:

<div class="form-group">
    <label class="control-label col-md-12" for="participant-id">Participant    
        <span class="required"> * </span>
    </label>
    <div class="col-md-12">
        <input type="hidden" name="participant_id" value=""/>
        <select name="participant_id[]" multiple="multiple" class="form-control select2me participantSelector" required="required" id="participant-id">
            <option value=""></option>
        </select>
    </div>                                
</div>

this is the jquery init:

$(".select2me").select2({
    placeholder:"Select",
    width:"auto",
    allowClear:!0
});

The data for the multiselect I get if a value is chosen in another dropdown 'projectSelector':

$('.projectSelector').on('change', function() {
    var targetProject_id = $('#project-id :selected').val();
    updateParticpantDropdown(targetProject_id);
});


function updateParticpantDropdown(selectedProjectId){
    $.ajax({
        type: "POST",
        url: '/xx/projects/xx/'+ selectedProjectId,
        dataType : "json",
        success: function (response, status) {
            if (response.result == "success"){
                var data = response.data;
                $(".participantSelector").empty().select2({
                    placeholder: "Click here to select participants",
                    allowClear: false,
                    data: data
                });
            }
        }
    });
}

Data is getting loaded into the multiselect and everythings works as expected on the screen. Just in the console I get the error messsage of

TypeError: b.dataAdapter is null

This is my json response (in short):

{
    "result":"success",
    "data":[
        {"id":18,"text":"xx, Ana Rosa"},
        {"id":17,"text":"xx, Saul"},
        {"id":14,"text":"xx, Jesus"},
        {"id":15,"text":"xx, Jose Sergio"},
        {"id":13,"text":"xx, Guadalupe"},
        {"id":12,"text":"xx, Adolfo"},
        {"id":25,"text":"xx, Roland"},
        {"id":16,"text":"xx, Mariela Elisa"},
        {"id":11,"text":"xx, Roberto Carlos "},
        {"id":19,"text":"xx, Jose Rafael"},
        {"id":2,"text":"xx, Juan Carlos"}
    ]
}

In Chrome I get this message:

select2.full.min.js:2 
Uncaught TypeError: Cannot read property 'current' of null
    at HTMLSelectElement.<anonymous> (select2.full.min.js:2)
    at HTMLSelectElement.dispatch (jquery.min.js:3)
    at HTMLSelectElement.r.handle (jquery.min.js:3)
    at Object.trigger (jquery.min.js:3)
    at HTMLSelectElement.<anonymous> (jquery.min.js:3)
    at Function.each (jquery.min.js:2)
    at n.fn.init.each (jquery.min.js:2)
    at n.fn.init.trigger (jquery.min.js:3)
    at d.select (select2.full.min.js:1)
    at d.select (select2.full.min.js:2)

when using the select2 multiselect and selecting an option I get this error message displayed:

TypeError: b.dataAdapter is null

Does anyone know what this is about?

The multiselect works fine, I just wonder about this message.

EDIT:

This is my html:

<div class="form-group">
    <label class="control-label col-md-12" for="participant-id">Participant    
        <span class="required"> * </span>
    </label>
    <div class="col-md-12">
        <input type="hidden" name="participant_id" value=""/>
        <select name="participant_id[]" multiple="multiple" class="form-control select2me participantSelector" required="required" id="participant-id">
            <option value=""></option>
        </select>
    </div>                                
</div>

this is the jquery init:

$(".select2me").select2({
    placeholder:"Select",
    width:"auto",
    allowClear:!0
});

The data for the multiselect I get if a value is chosen in another dropdown 'projectSelector':

$('.projectSelector').on('change', function() {
    var targetProject_id = $('#project-id :selected').val();
    updateParticpantDropdown(targetProject_id);
});


function updateParticpantDropdown(selectedProjectId){
    $.ajax({
        type: "POST",
        url: '/xx/projects/xx/'+ selectedProjectId,
        dataType : "json",
        success: function (response, status) {
            if (response.result == "success"){
                var data = response.data;
                $(".participantSelector").empty().select2({
                    placeholder: "Click here to select participants",
                    allowClear: false,
                    data: data
                });
            }
        }
    });
}

Data is getting loaded into the multiselect and everythings works as expected on the screen. Just in the console I get the error messsage of

TypeError: b.dataAdapter is null

This is my json response (in short):

{
    "result":"success",
    "data":[
        {"id":18,"text":"xx, Ana Rosa"},
        {"id":17,"text":"xx, Saul"},
        {"id":14,"text":"xx, Jesus"},
        {"id":15,"text":"xx, Jose Sergio"},
        {"id":13,"text":"xx, Guadalupe"},
        {"id":12,"text":"xx, Adolfo"},
        {"id":25,"text":"xx, Roland"},
        {"id":16,"text":"xx, Mariela Elisa"},
        {"id":11,"text":"xx, Roberto Carlos "},
        {"id":19,"text":"xx, Jose Rafael"},
        {"id":2,"text":"xx, Juan Carlos"}
    ]
}

In Chrome I get this message:

select2.full.min.js:2 
Uncaught TypeError: Cannot read property 'current' of null
    at HTMLSelectElement.<anonymous> (select2.full.min.js:2)
    at HTMLSelectElement.dispatch (jquery.min.js:3)
    at HTMLSelectElement.r.handle (jquery.min.js:3)
    at Object.trigger (jquery.min.js:3)
    at HTMLSelectElement.<anonymous> (jquery.min.js:3)
    at Function.each (jquery.min.js:2)
    at n.fn.init.each (jquery.min.js:2)
    at n.fn.init.trigger (jquery.min.js:3)
    at d.select (select2.full.min.js:1)
    at d.select (select2.full.min.js:2)

• javascript
• jquery
• jquery-select2

Share Improve this question Follow edited Jul 12, 2020 at 3:36 CommunityBot 111 silver badge asked Jan 26, 2017 at 11:56 user1555112user1555112 1,98766 gold badges2424 silver badges4444 bronze badges 5

• Please post your html for the select element and the js code you use to initialize the select2 plugin. – andreivictor Commented Jan 26, 2017 at 12:03
• 1 I've created a fiddle, but I've couldn't reproduce your issue. No errors in Chrome: jsfiddle/01zb15mq. – andreivictor Commented Jan 27, 2017 at 9:10
• 1 I think I get the same problem when I try to update my select2 with different tags. I have checked this from firefox and chrome. Both throw erros: # chrome Version 56.0.2924.87 Uncaught TypeError: Cannot read property 'current' of null # firefox 51.0.1 TypeError: b.dataAdapter is null The jsfiddle is available from: jsfiddle/PBrockmann/74v2gzhe – PBrockmann Commented Feb 28, 2017 at 18:17
• Can you load the unminified library and see if you can get more context for the error? You are loading "select2.full.min.js:2 " which is minified. – sanon Commented Apr 27, 2017 at 0:15
• Did you ever figure this out? – blindMoe Commented Jan 12, 2018 at 9:59

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4 +100

Since selector2 elements tend to store some additional data, I've noticed when the data of the list element is cleared in addition to $(".participantSelector").empty() the error is gone. So, try it out this way:

var selector = $(".participantSelector");
selector.empty();
selector.removeData();
selector.select2({
    placeholder: "Click here to select participants",
    allowClear: false,
    data: data
});

Hopefully, it works for you too.

you should remove .empty() and use like below. it is working fine for you..

$(".participantSelector").select2({
   placeholder: "Click here to select participants",
   allowClear: false,
   data: data
});

I think this is a problem because you have initialized select drop down with a null value. Basically, script telling you to drop down is initialize but there is no data in it. As a solution please add one value

<option value="0">Please Select</option>

Rest of things seems like correct.

本文标签： javascriptjquery select2 TypeError bdataAdapter is nullStack Overflow