WordPress with select2 and Toastr get previous selected value destroys select2 behavior

Question

I am using WordPress and I have used Select2 and Toastr libraries successfully.

Basically I have a dropdown and if I change, Toastr will ask whether I need to update or not.

If I click on "Yes" then it will update and if I click on "No" then my dropdown should set previous value and nothing will happen.

Currently its selecting previous value but then if I open the same dropdown try to click on it to search then its saying "The results could not be loaded".

Here is my JS code what I have done so far.

var prevSubVarClientId;
jQuery('.mySubscription').select2({
    allowClear: true,
    placeholder: "",
    
    //minimumInputLength: 3,
    ajax: {
        type: "POST",
        url: '/wp-admin/admin-ajax.php',
        dataType: 'json',
        delay: 250, // delay in ms while typing when to perform a AJAX search
        data: function (params, page) {
        
        return {
            action: 'list_posts',
            q: params.term,
        };
        },
        processResults: function( data ) {
        
        var options = [];
        if ( data ) {          
            jQuery.each( data, function( index, text ) { 
            
            options.push( { id: text['id'], text: text['name']  } );
            });

        }
        return {
            results: options
        };
        },
        cache: true
    }
});

jQuery('.mySubscription').on('select2:selecting', function (evt) {
  prevSubVarClientId = jQuery('select').val();
});

jQuery('.mySubscription').change(function() {
    var $this = jQuery(this);
     jQuery(this).blur();
      alertify.confirm("Are you sure you want to transfer?",
  function(e){
        var subscriptionId = jQuery($this).data("subscription-id");
        var url = jQuery($this).data("ajax-url");        
        var userId = jQuery($this).val();        
        jQuery.ajax({
           type: "POST",
           url: url,           
            data : {
                    action : 'update_var_client_user_id',
                    userId : userId,
                    subscriptionId : subscriptionId
            },
           success: function(data)
           {  
            var data = JSON.parse(data);      
            toastr["success"]("Transferred Successfully." );          
            
           }
         });
  },
  function(){
    
    jQuery($this).val(prevSubVarClientId);    
    jQuery($this).select2().trigger('change');
    
  }).set({title:"Alert!!!"}).set({ labels:{ok:'Yes', cancel: 'No'} });

    
});

As you can see I have prevSubVarClientId variable and mySubscription dropdown with this class.

jQuery('.mySubscription').change(function() { here you can see I am opening alertify confirm box and if I click on "No" then I am doing below code.

jQuery($this).val(prevSubVarClientId);    
jQuery($this).select2().trigger('change');

But then whenever I am trying to open the dropdown again, I am getting the below error.

Can some one guide me, what I am doing wrong here ?

Thanks

score 1 · Accepted Answer · answered Apr 20 '21 at 10:39

1

"The results could not be loaded". only show when return data is null or not found.

I tested your code below snippet and working fine.

$(".js-data-example-ajax").select2();

jQuery('.js-data-example-ajax').on('select2:selecting', function (evt) {
    prevSubVarClientId = jQuery('select').val();
});

jQuery('.js-data-example-ajax').change(function() {
    var $this = jQuery(this);
    jQuery(this).blur();
    alertify.confirm("Are you sure you want to transfer?",
    function(e){
        console.log('change');
    },function(){
        console.log('no change');
        jQuery($this).val(prevSubVarClientId);    
        jQuery($this).select2().trigger('change');
    }).set({title:"Alert!!!"}).set({ labels:{ok:'Yes', cancel: 'No'} });
});

.select2-container, .select2-container--open .select2-dropdown--below {
    width: 200px !important;
}

<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.13/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.13.1/css/alertify.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.13.1/alertify.min.js"></script>
<select class="js-data-example-ajax">
  <option value="abc">ABC</option>
  <option value="bca" selected>BCA</option>
  <option value="mnp">MNP</option>
  <option value="pqr">PQR</option>
</select>

answered Apr 20 '21 at 10:39

Bhautik

11,125
3
16
38

I tried your code but not working .. I removed all code of `jQuery('.mySubscription').select2({` and only put this `jQuery(".mySubscription").select2();` inside `jQuery( document ).ready(function() {` but after I refresh the page. . I do not get any data. – Mittul At TechnoBrave Apr 20 '21 at 10:52
I am using wordpress .. and may be in wordpress `jQuery('.mySubscription').select2({` this call requires when we are about to click and open dropdown. – Mittul At TechnoBrave Apr 20 '21 at 10:53
Do I have to use `js-data-example-ajax` this class ? – Mittul At TechnoBrave Apr 20 '21 at 10:57
No `.js-data-example-ajax` class is i used to in snippet for example. – Bhautik Apr 20 '21 at 10:58
Can you please post my sample code in one of your demo wordpress page and see whether its working or not. – Mittul At TechnoBrave Apr 20 '21 at 10:58
Because in wordpress .. when we use select2 and click on dropdown, it will fire ajax event .. hence I used `jQuery('.mySubscription').select2({` ajax there .. – Mittul At TechnoBrave Apr 20 '21 at 10:59
ok I solved it by using this code `jQuery('select').val(prevSubVarClientId).trigger('change.select2');` – Mittul At TechnoBrave Apr 20 '21 at 11:01
I can't set up your code to my local due to it requires more time. – Bhautik Apr 20 '21 at 11:10
Thanks Bhautik for your answer. You above sample code helped me to solve my problem. – Mittul At TechnoBrave Apr 20 '21 at 12:08
Hello @Bhautik .. can you please help me in this thread https://stackoverflow.com/questions/67195873/wordpress-woocommerce-add-new-custom-menu-and-restrict-based-on-user-role. Thanks – Mittul At TechnoBrave Apr 21 '21 at 12:42

WordPress with select2 and Toastr get previous selected value destroys select2 behavior

1 Answers1