select2 with formatNoMatches button event

Question

The goal here is i wanted to attach a nifty modal to that .md-trigger button dynamically created by select2. My problem is how should i trigger it from select2, i tried the change event but it didn't work.

$('.md-trigger').modalEffects();

$("#e11_2").select2({
        placeholder: "Type a Label",
        multiple: false,
        data: <?php echo $select_values; ?>,
        formatNoMatches: function (term) {                
            return "No matches. <button class=\"btn btn-primary btn-flat md-trigger\" data-modal=\"form-primary\">Add a new label</button>";
        }
    });

Help much appreciated!

thanks,

score 0 · Accepted Answer · answered Dec 03 '14 at 04:21

You could use the "select2-open" event:

$('#e11_2').select2({
    placeholder: "Type a Label",
    multiple: false,
    data: <?php echo $select_values; ?>,
    formatNoMatches: function (term) {                
        return "No matches. <button class=\"btn btn-primary btn-flat md-trigger\" data-modal=\"form-primary\">Add a new label</button>";
    }
}).on('select2-open', function() {
    $('#select2-drop').find('.md-trigger').modalEffects();
});

Or even setTimeout():

$('#e11_2').select2({
    placeholder: "Type a Label",
    multiple: false,
    data: <?php echo $select_values; ?>,
    formatNoMatches: function (term) {                
        setTimeout(function() {
            $('#select2-drop').find('.md-trigger').modalEffects();
        }, 0);
        return "No matches. <button class=\"btn btn-primary btn-flat md-trigger\" data-modal=\"form-primary\">Add a new label</button>";
    }
});

select2 with formatNoMatches button event

1 Answers1