Загрузка...

Как убрать locftion.reload()

Тема в разделе Frontend создана пользователем Falcon_Extra 21 дек 2023. 102 просмотра

Сортировать
  1. Falcon_Extra
    Кому понравилось (1) Скопировать BBCode
    Falcon_Extra Автор темы 21 дек 2023 Заблокирован(а) 108 22 окт 2023
    но чтобы какая-то часть странички обновлял данные и багал
    JS
    let orderList = document.querySelector('.Orderlist')
    
let order = JSON.parse(localStorage.getItem('order')) || [];
    
if(order){
    
    orderFunc()
    
}
    
function orderFunc() {
    
    order.forEach(el => {
    
        let imgOrder = document.createElement('img');
    
        let DelBtn = document.createElement('button');
    
        let plusBtn = document.createElement('button');
    
        let minusBtn = document.createElement('button');
    
        let foodName = document.createElement('p');
    
        let praceFood = document.createElement('p');
    
        let counts = document.createElement('h4')
    
    
    
    
    
        let headDiv = document.createElement('div')
    
        let listFoodDiv = document.createElement('div')
    
        let listBtnDiv = document.createElement('div')
    
        let PraceNameDiv = document.createElement('div')
    
        let EditQuantityDiv = document.createElement('div')
    
    
    
        imgOrder.src = el.imgPhoto;
    
        foodName.innerText = el.food;
    
        praceFood.innerHTML = `${el.price * el.count}$`;
    
        DelBtn.innerText = "Удалить заказ";
    
        plusBtn.innerText = "+";
    
        minusBtn.innerText = "-";
    
        counts.innerHTML = `${el.count}`
    
    
    
        headDiv.classList.add('headDiv')
    
        listBtnDiv.classList.add('listBtnDiv')
    
        listFoodDiv.classList.add('listFoodDiv')
    
        PraceNameDiv.classList.add('PraceNameDiv')
    
        EditQuantityDiv.classList.add('Quantity')
    
        DelBtn.classList.add('DelOrderBtn')
    
        counts.classList.add('count')
    
    
    
    
    
        EditQuantityDiv.append(minusBtn)
    
        EditQuantityDiv.append(counts)
    
        EditQuantityDiv.append(plusBtn)
    
        listBtnDiv.append(DelBtn)
    
        listBtnDiv.append(EditQuantityDiv)
    
        PraceNameDiv.append(foodName)
    
        PraceNameDiv.append(praceFood)
    
        listFoodDiv.append(imgOrder)
    
        listFoodDiv.append(PraceNameDiv)
    
        headDiv.append(listFoodDiv)
    
        headDiv.append(listBtnDiv)
    
        orderList.append(headDiv);
    
    
    
        DelBtn.addEventListener('click', ()=>{
    
            removeData(el.id)
    
        })
    
        minusBtn.addEventListener('click', ()=>{
    
            subtract(el.id)
    
        })
    
        plusBtn.addEventListener('click', ()=>{
    
            add(el.id)
    
        })
    
        
    
    });
    
}
    
function removeData(id) {
    
    let data = JSON.parse(localStorage.getItem('order')) || []
    
    data = data.filter(el=>el.id !==id)
    
    localStorage.setItem('order', JSON.stringify(data))
    
    location.reload()
    
}
    
function add(id) {
    
    let order = JSON.parse(localStorage.getItem("order")) || [];
    
    let foundItem = order.find((el) => el.id === id);
    
    foundItem.count += 1;
    
    localStorage.setItem("order", JSON.stringify(order));
    
    location.reload()
    
}
    

    
function subtract(id) {
    
    let order = JSON.parse(localStorage.getItem("order")) || [];
    
    let foundItem = order.find((el) => el.id === id);
    
    if (foundItem.count > 1) {
    
        foundItem.count -= 1;
    
        localStorage.setItem("order", JSON.stringify(order));
    
        location.reload()
    
    }
    
}
     
    21 дек 2023
  2. ChatGPT
    Скопировать BBCode
    ChatGPT 21 дек 2023 2253 14 мар 2023
    Falcon_Extra, чтобы обновлять только часть страницы без перезагрузки, можно использовать AJAX или Fetch API для отправки асинхронных запросов на сервер и получения данных. Вместо использования `location.reload()`, можно обновлять только нужную часть страницы с помощью JavaScript.

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

    JavaScript

    
let orderList = document.querySelector('.Orderlist');
    
let order = JSON.parse(localStorage.getItem('order')) || [];
    

    
if (order) {
    
  orderFunc();
    
}
    

    
function orderFunc() {
    
  order.forEach(el => {
    
    let imgOrder = document.createElement('img');
    
    let DelBtn = document.createElement('button');
    
    let plusBtn = document.createElement('button');
    
    let minusBtn = document.createElement('button');
    
    let foodName = document.createElement('p');
    
    let praceFood = document.createElement('p');
    
    let counts = document.createElement('h4');
    

    
    let headDiv = document.createElement('div');
    
    let listFoodDiv = document.createElement('div');
    
    let listBtnDiv = document.createElement('div');
    
    let PraceNameDiv = document.createElement('div');
    
    let EditQuantityDiv = document.createElement('div');
    

    
    imgOrder.src = el.imgPhoto;
    
    foodName.innerText = el.food;
    
    praceFood.innerHTML = `${el.price * el.count}$`;
    
    DelBtn.innerText = "Удалить заказ";
    
    plusBtn.innerText = "+";
    
    minusBtn.innerText = "-";
    
    counts.innerHTML = `${el.count}`;
    

    
    headDiv.classList.add('headDiv');
    
    listBtnDiv.classList.add('listBtnDiv');
    
    listFoodDiv.classList.add('listFoodDiv');
    
    PraceNameDiv.classList.add('PraceNameDiv');
    
    EditQuantityDiv.classList.add('Quantity');
    
    DelBtn.classList.add('DelOrderBtn');
    
    counts.classList.add('count');
    

    
    EditQuantityDiv.append(minusBtn);
    
    EditQuantityDiv.append(counts);
    
    EditQuantityDiv.append(plusBtn);
    
    listBtnDiv.append(DelBtn);
    
    listBtnDiv.append(EditQuantityDiv);
    
    PraceNameDiv.append(foodName);
    
    PraceNameDiv.append(praceFood);
    
    listFoodDiv.append(imgOrder);
    
    listFoodDiv.append(PraceNameDiv);
    
    headDiv.append(listFoodDiv);
    
    headDiv.append(listBtnDiv);
    
    orderList.append(headDiv);
    

    
    DelBtn.addEventListener('click', () => {
    
      removeData(el.id);
    
    });
    
    minusBtn.addEventListener('click', () => {
    
      subtract(el.id);
    
    });
    
    plusBtn.addEventListener('click', () => {
    
      add(el.id);
    
    });
    
  });
    
}
    

    
function removeData(id) {
    
  let data = JSON.parse(localStorage.getItem('order')) || [];
    
  data = data.filter(el => el.id !== id);
    
  localStorage.setItem('order', JSON.stringify(data));
    
  // Обновляем только список заказов
    
  updateOrderList();
    
}
    

    
function add(id) {
    
  let order = JSON.parse(localStorage.getItem("order")) || [];
    
  let foundItem = order.find((el) => el.id === id);
    
  foundItem.count += 1;
    
  localStorage.setItem("order", JSON.stringify(order));
    
  // Обновляем только список заказов
    
  updateOrderList();
    
}
    

    
function subtract(id) {
    
  let order = JSON.parse(localStorage.getItem("order")) || [];
    
  let foundItem = order.find((el) => el.id === id);
    
  if (foundItem.count > 1) {
    
    foundItem.count -= 1;
    
    localStorage.setItem("order", JSON.stringify(order));
    
    // Обновляем только список заказов
    
    updateOrderList();
    
  }
    
}
    

    
function updateOrderList() {
    
  // Очищаем список заказов
    
  orderList.innerHTML = '';
    
  // Получаем обновленные данные из localStorage
    
  let order = JSON.parse(localStorage.getItem('order')) || [];
    
  // Обновляем список заказов
    
  orderFunc(order);
    
}
    В этом примере, я добавил функцию `updateOrderList()`, которая очищает список заказов и затем вызывает функцию `orderFunc()` с обновленными данными из localStorage. Таким образом, список заказов будет обновляться без перезагрузки страницы.

    Надеюсь, это поможет! Если у тебя есть еще вопросы, не стесняйся задавать.
     
    21 дек 2023
    1. Посмотреть предыдущие комментарии (1)
    2. ChatGPT
      Falcon_Extra, извините за путаницу. Я заметил, что в вашем коде отсутствует вызов функции `orderFunc()` после обновления списка заказов. Это может быть причиной того, почему обновление не происходит как ожидается.

      Попробуйте добавить вызов функции `orderFunc()` после обновления списка заказов в функциях `removeData()`, `add()` и `subtract()`:

      JavaScript

      
function removeData(id) {
      
  let data = JSON.parse(localStorage.getItem('order')) || [];
      
  data = data.filter(el => el.id !== id);
      
  localStorage.setItem('order', JSON.stringify(data));
      
  updateOrderList(); // Добавить вызов функции orderFunc() после обновления списка заказов
      
}
      

      
function add(id) {
      
  let order = JSON.parse(localStorage.getItem("order")) || [];
      
  let foundItem = order.find((el) => el.id === id);
      
  foundItem.count += 1;
      
  localStorage.setItem("order", JSON.stringify(order));
      
  updateOrderList(); // Добавить вызов функции orderFunc() после обновления списка заказов
      
}
      

      
function subtract(id) {
      
  let order = JSON.parse(localStorage.getItem("order")) || [];
      
  let foundItem = order.find((el) => el.id === id);
      
  if (foundItem.count > 1) {
      
    foundItem.count -= 1;
      
    localStorage.setItem("order", JSON.stringify(order));
      
    updateOrderList(); // Добавить вызов функции orderFunc() после обновления списка заказов
      
  }
      
}
      После внесения этих изменений, список заказов должен обновляться корректно без перезагрузки страницы.

      Если проблема все еще не решена, пожалуйста, предоставьте больше информации о том, как именно не работает обновление, и я постараюсь помочь вам найти решение.
      21 дек 2023
    3. Falcon_Extra Автор темы
      ChatGPT, теперь вапще не отображается
      21 дек 2023
    4. ChatGPT
      Falcon_Extra, извините за путаницу. Я заметил, что в коде отсутствует вызов функции `orderFunc()` при загрузке страницы. Это может быть причиной того, почему список заказов не отображается.

      Добавьте вызов функции `orderFunc()` после определения функции `orderFunc()` и перед проверкой наличия заказов в localStorage:

      JavaScript

      
let orderList = document.querySelector('.Orderlist');
      
let order = JSON.parse(localStorage.getItem('order')) || [];
      

      
orderFunc(); // Добавить вызов функции orderFunc() при загрузке страницы
      

      
if (order) {
      
  orderFunc();
      
}
      

      
// Остальной код...
      Теперь функция `orderFunc()` будет вызываться при загрузке страницы, и список заказов должен отображаться корректно.

      Если проблема все еще не решена, пожалуйста, предоставьте больше информации о том, как именно не отображается список заказов, и я постараюсь помочь вам найти решение.
      21 дек 2023
  3. Lanoriya
    Кому понравилось (1) Скопировать BBCode
    Lanoriya 21 дек 2023 Куплю твои discord/steam куки/токены 16 454 3 сен 2019
     
    21 дек 2023
    1. Falcon_Extra Автор темы
      Lanoriya, я решил, надо было просто убрать if и просто вызвать функция
      23 дек 2023 Изменено
Загрузка...
Top