Ajax：divコンテンツを新しいデータで完全に置き換えます

Question

私は通貨スイッチャーを構築し、ユーザーが2つの通貨に切り替えることができるサイトに統合しています。その予約サイトは予約フォームが左側に配置されており、予約コンテンツは残りのページを占めています

サイトの価格はバックエンドで1通貨にデフォルト/設定されています。この通貨と別の通貨のどちらかを選択する能力があります。

ユーザーが他の通貨を選択すると、ページがリロードされ、価格はこの通貨に設定されます。今、小さな問題は、ユーザーが予約フォームの入力を変更したときに発生します。ユーザーがチェックアウト日を変更したがっているとしたら、ページ上のコンテンツはajaxを使ってリロードされます。何が起きているか：ユーザーが他の通貨に切り替えて予約フォームを変更した場合、デフォルト通貨（USD）が数秒間読み込まれ、その後他の通貨に置き換えられます。あなたはデフォルトから通貨を切り替えています。入力フォームの1つを変更することで予約フォームを変更します。ページがajax-reloadされると、デフォルトの価格が一時的に表示されます。を使用して）表示

これは要するに、価格を運ぶ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); 

は私の長い記事は私の質問を明らかにしたホープ：いない場合、私は間違っているのか、何ができるか、提供された新しい値と完全にdivの内容を交換する方法があり、この部分があることハンドル？

Answer 1

通貨を切り替えるときに、正しい通貨でサーバーがajax応答を表示できるように、その通貨をクッキーなどに記憶する必要があります。

クエリパラメータの場合は、すでに十分です。サーバーは現在の通貨についてを知っていますが、なぜデフォルトの1をレンダリングしますか？

Answer 2

あなたはあなた自身を難しくしていると思います。あなたの質問に私のコメントで述べたように、異なる通貨の異なる価格を、価格を表示する要素のデータ属性に追加することができます。エレメントに属性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 価格： データ付きEUR 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のように見えます

。これは 本当に理想的ではありません。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> 
    }); 
});