Bootstrap Select with callback function

Question

I have 2 Bootstrap Select dropdowns, one is a list of countries, and another is a list of states. The country list is static and is populated on page load. The list of states is only populated via the Bootstrap Change event and loads states based upon the country.

I need to be able to populate both these values at the same time. So the problem is I'm trying to set the state value when its undefined ,or hasn't loaded its options yet. I've tried doing a callback function within the ajax call, but that doesn't appear to work. I think another problem is that there is the initial change binding that is goofing it up.

I've written a fiddle for my foundation on where I'm experiencing the problem. https://jsfiddle.net/jeffbeagley/DTcHh/37843/

The user is presented with a blank form that allows them to select the values, but the user can also load a saved form from the database ( hence the function labled as "select_data" ).

$(document).ready(function() {
        $( "#country" ).on( 'changed.bs.select', function(e) {
            change_country($( this ).val());

        });

    $( "#load" ).click(function() {
        select_data();


    });

});

This function is called anytime the user selects a country, the actual ajax call goes out to the database and returns all the appropriate states. I tried passing the state into this function and selecting it that way, but setting the country first would still fire the country change event and override it.

function change_country(country_id) {
  $.ajax({
      type: 'GET',
      cache: false,
      url: '/echo/jsonp/',
      success: function(response) {
         $( "#state" ).empty();

        if(country_id == 1) {
            $( "#state" ).append( "<option value=1>Oklahoma</option" );
            $( "#state" ).append( "<option value=2>Missouri</option" );

        } else {
            $( "#state" ).append( "<option value=1>Ontario</option" );
          $( "#state" ).append( "<option value=2>Quebec</option" );

        }

       $( "#state" ).selectpicker( "refresh" );
      }

  });

}

This is the function that grabs the saved form from the database and populates the values. With the way that its set, the expected outcome would be to select the country Canada, and the state Quebec

function select_data() {
    var country_id = 2
  var state_id = 2

  $( "#country" ).selectpicker('val', country_id);
  $( "#state" ).selectpicker('val', state_id);

}

Thanks for any help!

Answer 1

Might've figured it out.. sometimes you just need to strip out your code and simplify it to find an answer..

I replaced the code to populate the states outside of the event being called from the country being changed. Then I declared a callback function within this new function on success. I then moved the logic to select the country into the populate_state function ( this may not be appropriate )

You can see the updated fiddle here, https://jsfiddle.net/jeffbeagley/DTcHh/37849/

So now the function select_data is as follows

function select_data() {
    var country_id = 2
  var state_id = 2

    populate_states(country_id, function()  {
    $( "#state" ).selectpicker('val', state_id);
  });


}

Edit ---- So with this, I ran into a call stack issue as it was still applying the original change event. So when the function select_data() is called, I unbind any events attached to the country selector, and rebind within the callback.

function select_data() {
  var country_id = 2
  var state_id = 2

  $( "#country" ).off( 'changed.bs.select');
  $( "#country" ).selectpicker('val', country_id);

    populate_states(country_id, function()  {
        $( "#state" ).selectpicker('val', state_id);

        $( "#country" ).on( 'changed.bs.select', function(e) {
            change_country(e,$( this ).val());

        });

  });

}