Перезагрузка вкладки ajax при изменении формы выбора - PullRequest
Новая
       64

Перезагрузка вкладки ajax при изменении формы выбора

0 голосов
/ 18 ноября 2018

У меня есть вкладки начальной загрузки с динамически загружаемым содержимым, все работает нормально. Но мне нужно перезагрузить вкладки после выбора страны (что-то вроде a.replace( /countryId=[^&]*/ig, 'countryId='+o.target.value)). Может кто-нибудь мне помочь? Спасибо 

   $('#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>

Есть три вкладки, на первых вкладках есть список городов, на второй вкладке есть список гор, а на третьей вкладке есть список рек. После выбора страны из выпадающего меню мне нужно отобразить города / горы / реки из этой страны.

1 Ответ

0 голосов
/ 18 ноября 2018

Вместо манипуляции со строками вы можете использовать URL API, чтобы обновить атрибуты data-url новым кодом страны, используя 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>
...