Как обновить Ajax-вызов в зависимости от нажатой кнопки? - PullRequest
Новая
       51

Как обновить Ajax-вызов в зависимости от нажатой кнопки?

0 голосов
/ 27 сентября 2019

У меня есть следующий HTML-код, где я включил вкладки / таблетки Bootstrap.Моя цель - чтобы пользователь видел данные за предыдущий и последние семь дней в зависимости от того, какую вкладку он выбрал.У меня есть рабочий вызов AJAX, который получает счетчик за последние 24 часа и за последние 7 дней.

Однако всякий раз, когда я нажимаю на вкладку «Неделя»;данные по-прежнему показывают данные из дневного времени.Кто-нибудь может посоветовать, где я иду не так?

Спасибо

HTML: 

<div class="col-md-4 border rounded">     
  <h4><u>Count </u></h4>
  <ul class="nav nav-pills">
    <li class="active"><a data-toggle="pill" onclick="$('#time_runs').text('day-time')" href="#today_num">Day</a></li>
    <li><a data-toggle="pill" onclick="$('#time_runs').text('week-time')" href="#week_num">Week</a></li>
  </ul>
</div>

AJAX Вызов: 

$(document).ready(function getMetadata() {
    $(function poll() {
      $.ajax({
        url: "<!--#include virtual="../include/env"-->/count/" +  ($('#time_runs').text() == '' ? 'day-time' : $('#time_runs').text()),
        type: "GET",
        cache: "false",
        success: function(data) {
          count(data);
        },
        dataType: "json"
      });
    })
  })
  ;

Ответы [ 2 ]

1 голос
/ 30 сентября 2019

Вот как вы можете сделать это полностью, используя функциональность встроенных вкладок Bootstrap.См. Bootstrap docs для получения дополнительной информации.

Примечание. Я использовал здесь фиктивный URL, который всегда будет возвращать одни и те же данные, но это только деталь - здесь важны следующие моменты:

a) правильная настройка вкладок в соответствии с документами

b) реагирование на событие «показанные вкладки», чтобы вы могли инициировать новый запрос для получения счетчика

c)сохраняя значение, которое вы отправляете на сервер, чтобы сообщить ему, какие данные возвращать в атрибуте данных вкладки, вместо того, чтобы возиться с настройкой и затем читать значение другого отдельного поля.

Примечание. Примечание разработчика:Возможно, вы захотите рассмотреть кэширование данных и / или предварительную загрузку этих показателей на страницу, а не делать AJAX-запрос каждый раз, когда отображается вкладка.Поскольку у вас, кажется, есть фиксированное количество вкладок, а количество данных невелико, кажется неэффективным продолжать запускать HTTP-запрос на выборку этого крошечного фрагмента данных каждый раз, когда пользователь нажимает на вкладку.Если эти данные не изменяются на сервере каждые несколько секунд, маловероятно, что они приведут к другому результату. 

$(document).ready(function() {
  $('a[data-toggle="tab"]').on('shown.bs.tab', function() {
    var time = $(this).data("time");
    console.log(time);
    $.ajax({
      url: "https://api.myjson.com/bins/zzirx?time=" + time,
      type: "GET",
      cache: "false",
      success: function(data) {
        console.log(data);
      },
      dataType: "json"
    });
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-md-4 border rounded">
    <h4><u>Count </u></h4>

    <ul class="nav nav-pills" id="myTab" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" id="day-tab" data-toggle="tab" data-time="day-time" href="#day" role="tab" aria-controls="day" aria-selected="true">Day</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="profile-week" data-toggle="tab" data-time="week-time" href="#week" role="tab" aria-controls="week" aria-selected="false">Week</a>
      </li>
    </ul>
    <div class="tab-content" id="myTabContent">
      <div class="tab-pane fade show active" id="day" role="tabpanel" aria-labelledby="home-tab">Day</div>
      <div class="tab-pane fade" id="week" role="tabpanel" aria-labelledby="profile-tab">Week</div>
  </div>
</div>
0 голосов
/ 27 сентября 2019

Привет. Вот пример использования вашего кода с парой изменений: fiddle :

  1. Добавьте идентификатор к вашему ul, в этом примере мы собираемсяиспользовать #nav-pills.
  2. Добавить атрибут данных с именем selected к элементу ul.
  3. при каждом щелчке мышью. Я изменяю onclick="$('#time_runs').text('week-time')" для этого onclick="return $('#nav-pills').data('selected','today')".
  4. Поскольку мы сейчас не знаем, что выполняет ваша функция опроса, я добавляю событие делегирования на ваш ul, например, $('#nav-pills').on('click','li>a'.

.

$(document).ready(()=>{
$('#nav-pills').on('click','li>a',(e)=>{
//your ajax call here instead of this example one
let time = $('#nav-pills').data("selected");
console.log(time);
json = {
today:"todays log yay!!!",
weak:"a Weak ago log,lets rock"
};
$.ajax({
    url: '/echo/json/',
    type: 'POST',
    dataType: 'JSON',
    data: {time: time, json:JSON.stringify(json)}
  }).done((response)=>{
  console.log(time,response)
  })
})
})
 

   <script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="col-md-4 border rounded">     
  <h4><u>Count </u></h4>
  <ul id="nav-pills" class="nav nav-pills" data-selected="">
    <li class="active"><a data-toggle="pill" onclick="return $('#nav-pills').data('selected','today')" href="#today_num">Day</a></li>
    <li><a data-toggle="pill" onclick="return $('#nav-pills').data('selected','weak')" href="#week_num">Week</a></li>
  </ul>
</div>

Надеюсь, это поможет

...