Приоритет загрузки данных jquery

163
02 февраля 2022, 02:50

Всех с новым годом, есть ссылка при нажатию на которую загружаются данные это:

1) JSON данные (post запрос)

2) Html форма (get запрос)

// загрузка HTML формы

function getProduct(){
    function loadContent() {
        $('.content').load("prod.html");
    }
}

//ajax запрос

function getAjaxProduct(val){
    $.ajax({
        url: 'get_one_product.php',
        data: {val},
        type: 'post',
        dataType: 'JSON',
        success: function (response) {
            $('#title').text(response.title);
            $('#price').text(response.price);
            $('#date').text(response.date);
        }
    });
}

// получение данных

$(document).on('click', '#buy', function(e){
    e.preventDefault();
    var val = $(this).attr("value"); 
   getProduct();
    getAjaxProduct(val);
});

Как сделать, что бы сначала загружалась HTML а потом JSON ?

Answer 1

Выполнять загрузку данных в обработчике завершения загрузки разметки

function getProduct(val){
  function loadContent() {
    $('.content').load("prod.html", function() {
      getAjaxContent(val);
    });
  }
}

А лучше все делать асинхронно, а в последней выполнившейся функции заполнять данные

function fillData(response) {
  $('#title').text(response.title);
  $('#price').text(response.price);
  $('#date').text(response.date);
}
$(document).on('click', '#buy', function(e){
  e.preventDefault();
  var val = $(this).attr("value"); 
  var contentLoaded = false;
  var data = null;
  $('.content').load("prod.html", function() {
    contentLoaded = true;
    if (data)
      fillData(data);
  });
  $.ajax({
    url: 'get_one_product.php',
    data: {val},
    type: 'post',
    dataType: 'JSON',
    success: function (response) {
      data = response;
      if (contentLoaded)
        fillData(data);
      }
    });
  });
});
READ ALSO
не работают менеджеры tomcat

не работают менеджеры tomcat

Не открываются менеджеры "server status, manager app, host manager"нажимаю на соответствующие кнопки и tomcat начинает загружать страницу и больше ничего не происходит:...

116
Vaadin: дублируются значения для Grid

Vaadin: дублируются значения для Grid

Я описал Grid, как описано в инструкции

102
Поиск в базе через Spring Data Jpa

Поиск в базе через Spring Data Jpa

Есть два @Entity - Meal и Restaurant, взаимосвязанные через @OneToMany - ресторан имеет List<Meal> mealListВот сущности (геттеры и сеттеры намеренно не указал, но в коде...

187