Bootstrap ajax tab reload on select form change

Question

I have bootstrap tabs with dynamically loaded content, it works fine. But I need tabs to be reloaded after country is chosen (something like a.replace( /countryId=[^&]*/ig, 'countryId='+o.target.value) ). Can anyone help me? Thank you

   $('#maps a').click(function (e) {
        e.preventDefault();

        var url = $(this).attr("data-url");
        var href = this.hash;
        var pane = $(this);

        $(href).load(url,function(result){      
            pane.tab('show');
        });
    });

    $('#cities').load($('.active a').attr("data-url"),function(result){
        $('.active a').tab('show');
    });

...

<select id="country-select">
    <option value="FIN">Finland</option>
    <option value="CAN">Canada</option>
    <option value="RUS">Russia</option>
    <option value="SVK">Slovakia</option>
    <option value="SWE">Sweden</option>
    <option value="USA">USA</option>
</select>

<ul class="nav nav-tabs" id="maps">
    <li class="nav-item active">
         <a class="nav-link active" data-toggle="pill" href="#cities" data-url="map.jsp?show=cities&countryId=FIN">Cities</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="pill" href="#mountains" data-url="map.jsp?show=mountains&countryId=FIN">Mountains</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="pill" href="#rivers" data-url="map.jsp?show=rivers&countryId=FIN">Rivers</a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane container active" id="cities">
        <div style="text-align: center; margin-top: 3rem;">
            <img src="images/loading.gif" alt="Loading..."/>
        </div>
    </div>
    <div class="tab-pane container fade" id="mountains">
        <div style="text-align: center; margin-top: 3rem;">
            <img src="images/loading.gif" alt="Loading..."/>
        </div>
    </div>
    <div class="tab-pane container fade" id="rivers">
        <div style="text-align: center; margin-top: 3rem;">
            <img src="images/loading.gif" alt="Loading..."/>
        </div>
    </div>
</div>

There are three tabs, on first tabs there is a list of cities, on the second tab there is a list of mountains and on the third tab there is a list of rivers. After chosing a country from select dropmenu, I need to display cities/mountains/rivers from this country.

Answer 1

Instead of string manipulation you can use the URL API to update the data-url attributes with the new country code using URL.searchParams.set()

var $tabLinks = $('#maps a')

function updateCountryId(countryId) {
  var baseUrl = location.href;
  // loop over tabs links and update `data-url`
  $tabLinks.each(function() {
    var $a = $(this);
     // new URL object 
    var url = new URL($a.data('url'), baseUrl);
     // update countryId param
    url.searchParams.set('countryId', countryId);
    // update data attribute
    $a.attr('data-url', url.href)

  });
}

$('#country-select').change(function() {
  updateCountryId($(this).val())
  $tabLinks.first().click()
});

// demo click handler just to log url. Your current one should need no changes
$tabLinks.click(function() {
  console.log($(this).attr('data-url').replace('https://stacksnippets.net/',''))
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<select id="country-select">
  <option value="FIN">Finland</option>
  <option value="CAN">Canada</option>
  <option value="RUS">Russia</option>
  <option value="SVK">Slovakia</option>
  <option value="SWE">Sweden</option>
  <option value="USA">USA</option>
</select>

<ul class="nav nav-tabs" id="maps">
  <li class="nav-item active">
    <a class="nav-link active" data-toggle="pill" href="#cities" data-url="map.jsp?show=cities&countryId=FIN">Cities</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="pill" href="#mountains" data-url="map.jsp?show=mountains&countryId=FIN">Obránci</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="pill" href="#rivers" data-url="map.jsp?show=rivers&countryId=FIN">Obránci</a>
  </li>
</ul>