Ajax：用新數據完全替換div內容

我正在構建貨幣切換器並將其集成到我的網站中，用戶可以在兩種貨幣之間切換。其預訂網站的預訂表格位於左側，預訂內容佔據頁面的其餘部分Ajax：用新數據完全替換div內容

網站上的價格是默認/設置爲後端（USD）中的一種貨幣，用戶將有能力在這個和其他貨幣之間進行選擇。

當用戶選擇其他貨幣時，頁面重新加載並且價格設置爲該貨幣。現在，當用戶更改預訂表單上的輸入時會出現小問題。可以說用戶想要更改結帳日期，一旦他們這樣做，頁面上的內容就會使用ajax重新加載。發生的情況是：如果用戶切換到其他貨幣並在預訂表單上進行了更改，則默認貨幣（USD）會加載幾秒鐘，然後由其他貨幣替換。因此，想象一下，您已將貨幣從默認值切換到您通過更改其中一個輸入來修改您的預留表單，當頁面ajax重新加載時，您會暫時以默認價格呈現，然後正確（您使用的貨幣使用）顯示器

因此總之，看起來像攜帶價格的div首先加載默認貨幣，然後切換（花費1-5秒）。這不是真的很理想，那麼div不能一次加載正確的貨幣嗎？

下面的代碼處理該：

//there's a function that checks currency... 
    if(currency_param == "KES") 
    { 
     if (window.XMLHttpRequest) 
     { 
      // code for IE7+, Firefox, Chrome, Opera, Safari 
      var xmlhttp = new XMLHttpRequest(); 
     } 
     else 
     { 
      // code for IE6, IE5 
      var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
     xmlhttp.onreadystatechange = function() { 
      if (this.readyState == 4 && this.status == 200) 
      { 
        area.content_area.find('.gdlr-tail-currencyprice').html(this.responseText); 
      } 
     }; 
     var result = data.content.match(/\$[\d\.]+ \/ [^<]+/gi); 
     var newArray = []; 

     $('.gdlr-tail-currencyprice').each(function(index, el) 
     { 
      var num_price = parseFloat(result[index].replace(/[^\d\.]*/g, '')); 
      newArray.push(num_price); 
     }); 

     newArray.push({currency_param}); 
     newArray = JSON.stringify(newArray); 

     xmlhttp.open("GET","switchcurrency.php?q="+newArray,true); 
     xmlhttp.send(); 
     } 
    }

switchcurrency.php只是需要傳遞給它的量並轉換爲所需的貨幣

的價格以gdlr-tail-currencyprice類進行，並且如上所述，這是有問題的部分。加載默認值，然後幾秒鐘後，顯示正確的值。這部分處理的是：

area.content_area.find('.gdlr-tail-currencyprice').html(this.responseText);

希望我長的帖子作出了清楚我的問題：我該怎麼辦是做錯了，或者如果沒有，有沒有辦法與提供的新值完全替代股利內容？

來源

2017-03-02 suo

什麼觸發以上？ – cwallenpoole

嗨，如果你添加了jquery標籤，爲什麼你不使用$ .ajax？ – daremachine

在第一次渲染的屬性中的數據屬性中添加不同貨幣的價格？然後使用'$（'。currency-selector'）。change（function（）{...}）;'？更改價格元素的內容與來自其匹配所選貨幣的屬性的數據。 – Nukeface

當您切換貨幣時，您應該記住cookie或其他內容，以便服務器可以使用正確的貨幣來呈現ajax響應。

如果它是一個查詢參數，那麼它已經足夠了。服務器知道當前貨幣爲，爲什麼它會呈現默認貨幣？

來源

2017-03-02 13:14:06

我覺得你讓自己太難了。正如我在您對問題的評論中所提到的，您可以將不同貨幣的不同價格添加到顯示價格的元素的數據屬性中。如果您在元素上使用standardized names for currency屬性，並使用貨幣選擇器的值相同的名稱，那麼您可以讓自己更容易。

例如：

<select name="currency-selector"> 
    <option value="EUR">Euro</option> 
    <option value="NZD">NZ Dollar</option> 
    <option value="USD">US Dollar</option> 
</select>

而且，你那也有整個頁面的東西，應該顯示價格的東西。你說預訂，所以我假設它是一個預訂頁面的東西，讓我們假設一個酒店。

酒店A，1樓，房間每晚123 價格： 100歐元 NZD 110 USD 120

與數據，創建/渲染你使用任何系統中的元素，如下面

<input type="radio" name="select-room" class="contains-price" data-price-eur="100" data-price-nzd="110" data-price-usd="120">123, first floor

某處你有某種形式的表（使用<div>元素，而不是<table>明顯創建的，對不對？！？權:)）

您可以在那裏使用/修改顯示的價格。當所選貨幣被修改時，使用.change()函數獲取它們。

$('.currency-selector').change(function() { 
    var currency = $(this).val(), 
     roomPrice = $('input[name="select-room"]').data('price' + currency); 

    // Now display the `roomPrice` somewhere, such as the mentioned table 
});

這只是一個例子，因爲你的問題很多都不清楚。然而，這並回答你的問題，這部分：

因此，在短期，貌似攜帶的價格首先加載默認貨幣，然後切換（需要像1-5秒）後的股利。這是不是很理想，不能該div只加載一次正確的貨幣？

使用.change()即可進行如下更改。

，爲您的表單中的所有價格自動做到這一點，你可以修改代碼示例的東西沿着這些線路：

$('.currency-selector').change(function() { 
    var currency = $(this).val(); 

    // Loop through all elements that have the class "contains-price" 
    $.each('.contains-price', function(index, $element) { 
     var roomPrice = $element.data('price' + currency); 

     // Now display the `roomPrice` somewhere, such as the mentioned table 
     // NOTE: specifically do not loop all inputs in a form using $('input') as this does not account for <textarea> and <select> 
    }); 
});

來源

2017-03-02 13:29:10 Nukeface

Ajax：用新數據完全替換div內容

回答

相關問題