JQUERY Переадресация страниц в REST API с отложенным - PullRequest
Новая
       22

JQUERY Переадресация страниц в REST API с отложенным

0 голосов
/ 26 октября 2018

У меня есть REST API в формате jSON для извлечения записи.

Моя логика

  1. Запись выборки API REST (формат jSON)
  2. Я получаю первые 6 записей, в то время как я получаю записи, я получу еще один узел jSON, который будет иметь URL-адрес пересылки. Я назначаю этот URL для кнопки HTML5 атрибуту data-url.
  3. Затем я получу этот URL-адрес по нажатию кнопки. Я использую этот URL для повторения пункта 1-3. Я буду повторять описанную выше процедуру, пока URL-адрес подкачки не станет неопределенным

Мой код 

$.when(processList(url)).done(function () { });

function processList(nextUrl) {
    var dfd = new $.Deferred();
    if (nextUrl == undefined) {
      $("#btnViewMore").hide();
      dfd.resolve();
      return;
    }
    var news = ""
    getData(nextUrl).done(function (data) {
      var items = data.d.results;
      var next = data.d.__next;
      $("#btnViewMore").removeAttr("data-url").attr("data-url", next).show();
      dfd.resolve();

      // $.when(processList(next)).done(function () {
      //   dfd.resolve();
      // });


      $.each(items, function (i, item) {
        // display record
      })
      $("#news").append(news);
    })
    return dfd.promise();
  }

Нажатие кнопки 

$("#btnViewMore").click(function () {
      var _url = $(this).data('url')
      $.when(processList(_url)).done(function () { });
    })

Моя кнопка HTML5 

<button type="button" name="" id="btnViewMore" class="btn btn-primary btn-lg btn-block" style="display:none">View More
  <i class="fa fa-arrow-circle-down" aria-hidden="true"></i>
</button>

Теперь моя проблема, если я запускаю полную выборку записей с $ .when внутри getData, это приведет к правильному выводу всех записей. Но когда я назначаю URL кнопке, она начинает повторять одну и ту же запись снова и снова. Я обнаружил, что URL не меняется с новым URL из-за того, что он повторяет данные

Пожалуйста, дайте мне знать, как я могу решить эту проблему

1 Ответ

0 голосов
/ 21 декабря 2018

Проблема в том, что вы смешиваете data и attr методы. Оба метода возвращают одно и то же значение при запуске, но после этого и внесенные вами изменения в коде дают разные результаты. data и attr изменения не отражаются друг на друге.

Используйте ONLY data метод в javascript для получения и установки данных

Демонстрационная скрипка 

var $mybutton = $("#mybutton");
var $body = $("body");
//Outputs correct url set in HTML
$body.append("Original 'data': " + $mybutton.data("url") + "<br>");
$body.append("Original 'attr': " + $mybutton.attr("data-url") + "<br>");
//Set url using attr method
$mybutton.attr("data-url", "http://www.yahoo.com");
//Output url using attr method
$body.append("NOT Updated 'data': " + $mybutton.data("url") + "<br>");
//Output url using data method
$body.append("Updated 'attr': " + $mybutton.attr("data-url") + "<br>");
//Set url using data method
$mybutton.data("url", "http://www.yandex.com");
//Output url using attr method
$body.append("Updated 'data': " + $mybutton.data("url") + "<br>");
//Output url using data method
$body.append("NOT Updated 'attr': " + $mybutton.attr("data-url") + "<br>");
...